{"_id":"@material/form-field","_rev":"1821-b5563525ee120de1a13c53403356acc7","name":"@material/form-field","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","dist-tags":{"next":"4.0.0-alpha.0","nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"versions":{"0.1.0":{"name":"@material/form-field","version":"0.1.0","license":"Apache-2.0","_id":"@material/form-field@0.1.0","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"389cd84de1ca2bd473ed7d503b9ee97afa96075e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.1.0.tgz","integrity":"sha512-/BsOP9uPOrJSC7os0lyqZfSKEJ9QPVY0216pNyxpCM7TDKECiAZmwaGePYwoahjuAMAvCrEWOcAHOsinMu1e5g==","signatures":[{"sig":"MEYCIQDCmiNYjj9uRZO7Kw8jjAVVD5GbmoVFkFYWgdxmdIc1YgIhAJ8zl3qfpi/IAEbARcj902OXwhzgPbw69sGBuOWZM83S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"389cd84de1ca2bd473ed7d503b9ee97afa96075e","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"Material Components for the web wrapper styles for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"7.1.0","dependencies":{"@material/rtl":"^0.1.0","@material/theme":"^0.1.0","@material/typography":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.1.0.tgz_1481824500671_0.9854549176525325","host":"packages-18-east.internal.npmjs.com"}},"0.1.1":{"name":"@material/form-field","version":"0.1.1","license":"Apache-2.0","_id":"@material/form-field@0.1.1","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0130e3cfff0f3c6993d23c1917cae59d2d0c1ef6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.1.1.tgz","integrity":"sha512-bWqluUExEutYTl0JJbaqVD6uRMin4W9vxM1FZ/9Hwgo+Kz8EbTMCd7ZnOTf5FqEZvz07luHPshFjcI9qvMiE/g==","signatures":[{"sig":"MEUCIBCLWTj92wTc5aCJc5bzBbE3mxYyv2Mi4US7DNjChhP6AiEAxanpJ49W8ZsvIYYjo9ZyLQOx//zZPdUCh/Y3JMv/wP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","_shasum":"0130e3cfff0f3c6993d23c1917cae59d2d0c1ef6","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.1","description":"Material Components for the web wrapper styles for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.1","@material/theme":"^0.1.1","@material/typography":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.1.1.tgz_1485190177381_0.4619862602557987","host":"packages-18-east.internal.npmjs.com"}},"0.2.0":{"name":"@material/form-field","version":"0.2.0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.2.0","maintainers":[{"name":"material","email":"traviskaufman+npm@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2e259540a7ac652f89a5cd63bbf09da373c7487","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.2.0.tgz","integrity":"sha512-S9tZvlCygQxts393Owt0wNzOwINartTMQnW2cYy4d8nJb2dRS9Twg5h4EkLMrFqcPREFioDGKk9bLdJ8jYsqqg==","signatures":[{"sig":"MEUCIEMpunpJuXte6NYxVS/0eiXS3z4U/RlEhD7/fMRufKF2AiEA7Q3+AA2nuaENa6UmIG35FzZa/B+XB6GH/HsWG6DjUzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"d2e259540a7ac652f89a5cd63bbf09da373c7487","scripts":{},"_npmUser":{"name":"material","email":"traviskaufman+npm@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.2","@material/base":"^0.1.2","@material/theme":"^0.1.2","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.2.0.tgz_1487698055031_0.37948885723017156","host":"packages-18-east.internal.npmjs.com"}},"0.2.1":{"name":"@material/form-field","version":"0.2.1","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.2.1","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4674a84ac1228a2cacf54a1065704e3e8aa9f7b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.2.1.tgz","integrity":"sha512-O+WWPVjmIejxjxNBoaXQ1IKjde8QCpIt1vglvfKPviVf6C9o4GTozENkJyP3I9A6ZiQ59HXdsomsbn2JOBNTsw==","signatures":[{"sig":"MEUCIQD2DPU4+ZrzUhR3RODRfuSlo/+nKOeJLkL/X7jzVMK22wIgOxbr3mY9KNetXKgLLx1ggUFNr+yzw120J5DQgpgLi3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"b4674a84ac1228a2cacf54a1065704e3e8aa9f7b","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/rtl":"^0.1.2","@material/base":"^0.1.2","@material/theme":"^0.1.2","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.2.1.tgz_1488819731572_0.03776415134780109","host":"packages-12-west.internal.npmjs.com"}},"0.2.2":{"name":"@material/form-field","version":"0.2.2","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.2.2","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c3a6389995be0cc7895dc3aa4ecbec0b0184234","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.2.2.tgz","integrity":"sha512-qg9ioxlzPtWw5IpeK7suuC/8ekwOrQDbb0NXYZ1/K4p5jj1OWiKPErIcDdBOctDL6r0ZJ159YL6yQo9X40cSHw==","signatures":[{"sig":"MEUCIQDyRNX+DvuPnGa1wVphWg4JFbLA6h2FawvJ/UxStGwt2AIgA2z2q0s8aYQdM9Y1T5/OLN7OlhtbAZuq8D9TeSgLimY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"2c3a6389995be0cc7895dc3aa4ecbec0b0184234","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/rtl":"^0.1.2","@material/base":"^0.1.2","@material/theme":"^0.1.3","@material/typography":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.2.2.tgz_1491233281956_0.4678558688610792","host":"packages-18-east.internal.npmjs.com"}},"0.2.3":{"name":"@material/form-field","version":"0.2.3","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.2.3","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b788f4af748768577d712dc59b0f07bfa1ccb800","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.2.3.tgz","integrity":"sha512-pvItduuZdH63DshuIuejqqQ5Cu99ujNIahYugCV43nHr6KO1FhiU8KhKn0rnfjM6ZfnwaCt45KZ5YKBBrUyBvA==","signatures":[{"sig":"MEYCIQDVZlAOotbVPuswEn4gUg2c0/J6D8gV7S2aBS/ES/YksQIhAL/QqIFA19jOBM3GuAiIps3ukEOsCHFaC/V64XyXYM27","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"b788f4af748768577d712dc59b0f07bfa1ccb800","scripts":{},"_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.1.2","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"7.6.0","dependencies":{"@material/rtl":"^0.1.3","@material/base":"^0.1.2","@material/theme":"^0.1.4","@material/typography":"^0.2.1"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.2.3.tgz_1492527079182_0.28884517727419734","host":"packages-12-west.internal.npmjs.com"}},"0.2.4":{"name":"@material/form-field","version":"0.2.4","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.2.4","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c53556e37924ceacaf3b432346412a8efa8828f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.2.4.tgz","integrity":"sha512-jh06rVP1kamMb9BbTYR5BJkaghauXp2KKMuUcVkn2dCoZAzfDYu1Xc1mVW2f3hw4a/FpBJ2hMW9yG0fggIAakA==","signatures":[{"sig":"MEYCIQC/amCa2aY7G67fToeIc2uXxOHmLhalOrEc4/YLhFFyVAIhAJRvfl/zKeU7iT6mfX86Ta7zhBg1Nk/aGZWctEkqBuPL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"7c53556e37924ceacaf3b432346412a8efa8828f","scripts":{},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.3","@material/base":"^0.1.2","@material/theme":"^0.1.4","@material/typography":"^0.2.1"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.2.4.tgz_1493653388460_0.34805405884981155","host":"packages-12-west.internal.npmjs.com"}},"0.2.5":{"name":"@material/form-field","version":"0.2.5","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.2.5","maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f3682240457a9b934f13eb2d721563c232e67dc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.2.5.tgz","integrity":"sha512-Jjf+2vxmf0AytUIzI+UE0yNqM2tfFsEYHUFI033wQ9HgBMWLNRrhJiKb1uaKU+TJxLA2tQo4v6R82zZh/4o48w==","signatures":[{"sig":"MEUCIQCCk/jjY/UuyqE2qEhtPaiIkLQB+tWQN+j9NqWNa118BQIgYUxMlnooALadMzfAg4MzCbXNRNw7JZ2vF00n6rahB98=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"2f3682240457a9b934f13eb2d721563c232e67dc","scripts":{},"_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.4","@material/base":"^0.1.3","@material/theme":"^0.1.5","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.2.5.tgz_1494865562737_0.8998777323868126","host":"packages-18-east.internal.npmjs.com"}},"0.2.6":{"name":"@material/form-field","version":"0.2.6","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.2.6","maintainers":[{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f05873776a5f9256905b0a4fff451211bffd9dc5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.2.6.tgz","integrity":"sha512-15HljVGnWePZJUJQpPMyk7pz7CBLlOQwwOLaApiZjr936GbgGEHiiaH+5fvwrlqvD1hhdVGgoKHHbvqMHOKWdQ==","signatures":[{"sig":"MEQCIE2jrdgWrtDFxgkonkLwqlsEY+9DzB4JSj8SCVQln3gsAiBhGSUZeP9gBiIPv7KAOTWNzOE/ahO/AVzg35wPd8GrFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"f05873776a5f9256905b0a4fff451211bffd9dc5","scripts":{},"_npmUser":{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"7.8.0","dependencies":{"@material/rtl":"^0.1.4","@material/base":"^0.2.0","@material/theme":"^0.1.5","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.2.6.tgz_1496171078465_0.6821154509671032","host":"s3://npm-registry-packages"}},"0.2.7":{"name":"@material/form-field","version":"0.2.7","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.2.7","maintainers":[{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"034f7d8e4217240a52c2869edcacf24306551891","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.2.7.tgz","integrity":"sha512-o5AgObZbznTCTdWBd2SQvOgbtXXsjL+zRt28PYhG2gTntf5O6dof2Q3qWdH0xKm3Kj+hSQaKVXQ9kNGkNbWfeA==","signatures":[{"sig":"MEUCIQD0oY5vPWn2h5TTOxNtRXkLslmcSUFh5dUhrZ3TguBYegIgV96Z3O9GUIxgK6a6bRDTnd7nPQSw9fd/nRrn4oAExYA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.0.3","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.0.0","dependencies":{"@material/rtl":"^0.1.5","@material/base":"^0.2.0","@material/theme":"^0.1.5","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.2.7.tgz_1497282798520_0.7067915135994554","host":"s3://npm-registry-packages"}},"0.2.8":{"name":"@material/form-field","version":"0.2.8","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.2.8","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5407a371566930eea8ed3295e24ee018dac1c16c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.2.8.tgz","integrity":"sha512-EYBLLAN2ksVMNJPxzU1lAwWsHIx1YdGL3KsBuED9rxIRqWeJmThwXF3I8Lk1BzmIuxHgCAeQDqV31Zk+Cw/yKA==","signatures":[{"sig":"MEYCIQCf4+DcYNH3tJvczaAgwmWoBcxhS0jgY8yGT7ikjcUpCwIhAJVw+N95Nh2iY/5W+MKmmNds/wcUFD2MG3YC07ttNZ3B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"5407a371566930eea8ed3295e24ee018dac1c16c","scripts":{},"_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.9","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.6","@material/base":"^0.2.1","@material/theme":"^0.1.5","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.2.8.tgz_1498493453998_0.2978163135703653","host":"s3://npm-registry-packages"}},"0.2.9":{"name":"@material/form-field","version":"0.2.9","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.2.9","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bea885cc9563ab2a7fa409f1522e2a24420907b8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.2.9.tgz","integrity":"sha512-+79Sztx28iqAikdpVP609SdpVzDCHezcBk5Jd3SNypt+mz+vZ6aQl3lC8FpDzGB2ZivSJgg1cillOOR+PDQ6UA==","signatures":[{"sig":"MEUCIDEqsaL7JserdK/hcfxknzzTHJTz9i98xEET8ScT0lmIAiEA/0cO0IyPE/hDRkMCNqoSPeffGMasiG8+IzSyX+Rve9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"bea885cc9563ab2a7fa409f1522e2a24420907b8","scripts":{},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/rtl":"^0.1.6","@material/base":"^0.2.2","@material/theme":"^0.1.5","@material/typography":"^0.2.2"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.2.9.tgz_1499702330452_0.10284637194126844","host":"s3://npm-registry-packages"}},"0.2.10":{"name":"@material/form-field","version":"0.2.10","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.2.10","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f36b5a83da9ac8967a36245822661f3d133175c5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.2.10.tgz","integrity":"sha512-3IirnjCZoH7x0/RC7hpI+TVTVaZdh5ed/sMtBIhoPYayT78RbckwGILuaRHVG557NF5xUUO3DyM2U3PUWmVygA==","signatures":[{"sig":"MEUCIQDiEMpnPja+g2ecHaa+5aT/KIiKYZddDy340mCgKOpJQwIgI8V2z4y8U4o1GyrFQwsodjR5vOzuqEaPAsT72sTXBBg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"f36b5a83da9ac8967a36245822661f3d133175c5","scripts":{},"_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"3.10.10","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"7.2.1","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.3","@material/theme":"^0.1.6","@material/typography":"^0.2.3"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.2.10.tgz_1500911357379_0.10615751962177455","host":"s3://npm-registry-packages"}},"0.2.11":{"name":"@material/form-field","version":"0.2.11","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.2.11","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"044b6526d019b835bcea6adf88239cd7d335bc69","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.2.11.tgz","integrity":"sha512-7UypH464GClSKdU37aYLhelD0U6BeLJhHS9q0+MqKIel6trXpuzi8aQbZwIZpfHXilNLHG7R4pRXX/iLE5IcyQ==","signatures":[{"sig":"MEYCIQDb6C8XMDxFUMprQBOhe6DJ+1ATHZjg+ik+vOfVRJT6dQIhAIdMvuDnwPiuWA/8fwOFq91L3FwlJyg1ueE/e1Pdyv6C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"044b6526d019b835bcea6adf88239cd7d335bc69","scripts":{},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.3","@material/theme":"^0.1.7","@material/typography":"^0.3.0"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.2.11.tgz_1502138908703_0.7098984660115093","host":"s3://npm-registry-packages"}},"0.2.12":{"name":"@material/form-field","version":"0.2.12","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.2.12","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbf1307a86615e58f9aa239cc5563e171e5d3b6f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.2.12.tgz","integrity":"sha512-OE5SGkFW+/1R/859fpIUDKf+VWhLDfOsBx0aoCT6gO1vNIl18Lx3wAB2EaceI5sQ+yqQyvCeLMI3aHDtvSZamg==","signatures":[{"sig":"MEUCICaMyC+kTa4yDqJ5iybrIEjz/sPEU0UOy7oloOYG4FZHAiEAhgjhSymsg7AGV7ohiljixbBW3dn6JfAFX3EX6XVCI3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.4","@material/theme":"^0.2.0","@material/typography":"^0.3.0","@material/selection-control":"^0.0.1"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.2.12.tgz_1503336471962_0.8863375338260084","host":"s3://npm-registry-packages"}},"0.2.13":{"name":"@material/form-field","version":"0.2.13","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.2.13","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b91670106b5ff49e2a3cfd65f5e18fa1e7d3aed","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.2.13.tgz","integrity":"sha512-AuuuDl0bdCvw/RTqP0mvP8u+UV81S+n4MnBBNI1zpGZaZDvXJEYxqH354E+n0SpeL567Q+PZXPoIvxrz4V7LFQ==","signatures":[{"sig":"MEUCIQDo0poswWY0pTSvvLTPy+Dk9EFvbA6IuG8ZcOaDG5RBMwIgGbGv1JMF0F8QeIvZg88LSwsnGv8a+EhTBSW2OEW0H5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.5","@material/theme":"^0.2.0","@material/typography":"^0.3.0","@material/selection-control":"^0.0.2"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.2.13.tgz_1503586006754_0.18768147169612348","host":"s3://npm-registry-packages"}},"0.2.14":{"name":"@material/form-field","version":"0.2.14","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.2.14","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"019c34e046381b3775c1b59f444a48d04aa7b069","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.2.14.tgz","integrity":"sha512-YiZQRZRf66igp0h5xpohkwyT5yHNxid7Crj1an0lQzc70EdQ2ZpTMDNdTp0PF7RV3nQL/wfwJqJxbqR/+mJHgg==","signatures":[{"sig":"MEQCIHw0fjpO/wTKKUO0gbYbsRxr/kpQdJkkoEf3yCymg+mYAiBrm8obVCHdlnryTBWE/vbjr5SWRptJw5T1VlOZ8sgL/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.5","@material/theme":"^0.2.0","@material/typography":"^0.3.0","@material/selection-control":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.2.14.tgz_1503681656515_0.09965383331291378","host":"s3://npm-registry-packages"}},"0.2.15":{"name":"@material/form-field","version":"0.2.15","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.2.15","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"sgomes","email":"mail@sgomes.io"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d3056d1fc74485286c9d586c108e36be8ab9003","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.2.15.tgz","integrity":"sha512-vaO7gScM/J1pwJc0RtXLB/D46g05TviP/mb9D+mQkrCgKKrSQlX4pKTuJcv5aKXcbPwScFg14fNerL/MV+Pkgw==","signatures":[{"sig":"MEYCIQDE14I48gtOFKUwOmq7daIIxb0ozr0h7EPYomg3EcoIEwIhAPg9lrsTyzNlN3aoeO6tnveU9H0pOx6Ta7tKJMv1YGXz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"2d3056d1fc74485286c9d586c108e36be8ab9003","scripts":{},"_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"7.10.0","dependencies":{"@material/rtl":"^0.1.7","@material/base":"^0.2.5","@material/theme":"^0.3.0","@material/typography":"^0.3.0","@material/selection-control":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.2.15.tgz_1504642567512_0.8013314038980752","host":"s3://npm-registry-packages"}},"0.2.16":{"name":"@material/form-field","version":"0.2.16","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.2.16","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6e864794f154e6f83c77c3315d0ee14975969d7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.2.16.tgz","integrity":"sha512-/vo65BRDzvJIFn2FftSMpYR3MWEzp0tIA9H4yfHnnRGC7HQQNXmMp383QQJAlB3cAXHi8TK7ZmNRcnfxgoYYHQ==","signatures":[{"sig":"MEUCIQCSVuCPbe6b8ZDGjxiud2wtsp/sohGADH/IPI/pft00pwIgAzZwO/dyHUgK7V7b3DsK4w7Q52NIMtLkiemUKCDHeeY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.2.5","@material/theme":"^0.3.1","@material/typography":"^0.3.0","@material/selection-control":"^0.1.2"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.2.16.tgz_1505759742206_0.6182150370441377","host":"s3://npm-registry-packages"}},"0.2.17":{"name":"@material/form-field","version":"0.2.17","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.2.17","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e2a268495160712c0d96d44530820098a5dca55","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.2.17.tgz","integrity":"sha512-Z0a4q0YANgRKy5e3jxuRL4g4sf5jLyw0Gp76ycnW68xOXclwrQVaexuCrUXDfyjxYaWAhTSDajCZ+/w2q5uZbg==","signatures":[{"sig":"MEUCIQChzCZ6TY+/D43/4kl4Q4UxlzNa6eMJmHO+CwOn/jvfFwIgPZCQVUaLSyYpBGVFKkEWyjJWZeGeNPGjJJHZYn3wqKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"7e2a268495160712c0d96d44530820098a5dca55","scripts":{},"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"4.2.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"7.10.1","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.2.6","@material/theme":"^0.4.0","@material/typography":"^0.3.0","@material/selection-control":"^0.1.3"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.2.17.tgz_1506978705986_0.737183585530147","host":"s3://npm-registry-packages"}},"0.23.0":{"name":"@material/form-field","version":"0.23.0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.23.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"461007147a76e3104b2ce1f409d540cf70f3dbe5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.23.0.tgz","integrity":"sha512-ZPwf1DUz3/5+n/sDhuBoDlunvwRIUOsO3q4w7U42TJknG4HtsM8iHvvdkeWBD2n+lQWrcvwmT7DWaD3CYT8CxQ==","signatures":[{"sig":"MEYCIQCpD00HEuIJfTQx9LSbA/OYuSUFqFfTLlpyrPI+9ww7BAIhAO2b8d/0m1I31JqDQw1/f27hSKLuW9SYuPmqWRrnRbuJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.2.6","@material/theme":"^0.4.0","@material/typography":"^0.3.0","@material/selection-control":"^0.23.0"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.23.0.tgz_1508187738944_0.8144859173335135","host":"s3://npm-registry-packages"}},"0.24.0":{"name":"@material/form-field","version":"0.24.0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.24.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19711c5e2aa67454b95d1e706908e6259335b017","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.24.0.tgz","integrity":"sha512-xEOCOXnQMV9xSL+Ho6Fk+gGbkONV6QfWN6btJytqS9S0Zm6YkNCcC4L7Tu8xzfTDxpSbQn6jaKshfZ0ojfzB5g==","signatures":[{"sig":"MEQCIDQ08K4Ht+jIep36F7JF9huCkfofheM+dQo8hrfeF8DtAiB/K6dadOIq4jTLCr+w08/7+8H+3AsMGVp3nH0xflRjvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.4.0","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.24.0","@material/typography":"^0.3.0","@material/selection-control":"^0.24.0"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.24.0.tgz_1509390684726_0.16849611815996468","host":"s3://npm-registry-packages"}},"0.25.0":{"name":"@material/form-field","version":"0.25.0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.25.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d62a781e9aaa082c1d2e64d86d709d0f70b67a5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.25.0.tgz","integrity":"sha512-IW8tbp4T/IT1hctKnDozq5SpnSdo5i7ChuG2cOfQoqHzM59/441VSil6fDPBNOSC+1XHBnoJ2sV8LRFK3PbsIQ==","signatures":[{"sig":"MEQCICy53Cg/hPXmEVHEyveP/1jwkFUf0RRe9ZpPuP5M24/lAiBMsnn5pZS+z+cZ9BHEgfsFE1PuPfbLbmC50w0/NvGl2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"6.9.2","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.25.0","@material/typography":"^0.3.0","@material/selection-control":"^0.25.0"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.25.0.tgz_1510603346764_0.03903476404957473","host":"s3://npm-registry-packages"}},"0.26.0":{"name":"@material/form-field","version":"0.26.0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.26.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb5a110656127ca17742280ebbb1b836c6c4f714","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.26.0.tgz","integrity":"sha512-82hjXb4RG4wIxyWKWlFN6P4K32kF19YAuoWqIuvBK0tmsh5SOqnNUN0a3MVMKfwIxm0LmVATVyJ8V+ZcAGHfrg==","signatures":[{"sig":"MEUCIQDaxIr7iqhlg8QhhMmsHw2kbTgZk9CWwQpMkORcSYY+lwIgHVnb3KlRegdPAxIY7DnZODtJPj7TsYOeI0W45alIHxs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.25.0","@material/typography":"^0.3.0","@material/selection-control":"^0.26.0"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.26.0.tgz_1511821586695_0.20420961221680045","host":"s3://npm-registry-packages"}},"0.27.0":{"name":"@material/form-field","version":"0.27.0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.27.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a3cb86f47d2cc7c2ad7587d1834314153f431ab","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.27.0.tgz","integrity":"sha512-KBO2BpKLnMxlG/RjkZLBv7DvW7NVFUIlEcbirLKcxGpa3KW1PuzVl6Pe0jfSXxGl5O0YzExONb6jZk5pOE9Rhw==","signatures":[{"sig":"MEYCIQCUgHYV7eFuxfSw7fkGF3QyyJ74qiNVPm7o2FktT2VEbgIhAIP++Ukseg2x50Obx6cHGnO4TgqWSneO7ZkKp4q5+9pj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.9.2","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.27.0","@material/typography":"^0.3.0","@material/selection-control":"^0.27.0"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.27.0.tgz_1513020932050_0.8878346511628479","host":"s3://npm-registry-packages"}},"0.28.0":{"name":"@material/form-field","version":"0.28.0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.28.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78ea53dccd179dae7af0d5fd6e93f7752c0761da","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.28.0.tgz","integrity":"sha512-Bj+jZHUGKICXqQ47rN6qrwUOf9g3sAUvQ4EtDAAiz7z1z09YvwpgFcsJUDm5NDG64QLo3E0F1jhG9OTDAmE+dA==","signatures":[{"sig":"MEYCIQDWmyk75pa4kDSyAHMxk0oxOJ79Bb4Acf+c90b0/UdfWwIhAIuNCEQC0vFGS9ISTmTbiCYZlqIRkwiAdCOd972m7Le2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.1.8","@material/base":"^0.24.0","@material/theme":"^0.28.0","@material/typography":"^0.28.0","@material/selection-control":"^0.28.0"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.28.0.tgz_1515437712928_0.8200384513475001","host":"s3://npm-registry-packages"}},"0.29.0":{"name":"@material/form-field","version":"0.29.0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.29.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3198ef9f206a9ec97f137b91a341154ac94fa613","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.29.0.tgz","integrity":"sha512-IVYNJHDHaL9fTCEV8SYk6dImXGpXYWu4esT0CTxNpglZ8vJUrE749iH8BdoPEYRBs3/4pVU1J6OiTGvtb0FhTw==","signatures":[{"sig":"MEUCIGpn1LAnZyCyTf9ZVKyYw/uO/cyGjTOHoO6K3cVwFqPtAiEA/pBARtCAhIo4wYK2SNZ78aGqhY9YzJORqCB/Z0GlzZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.29.0","@material/base":"^0.29.0","@material/theme":"^0.29.0","@material/typography":"^0.28.0","@material/selection-control":"^0.29.0"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.29.0.tgz_1516645857401_0.06698588537983596","host":"s3://npm-registry-packages"}},"0.30.0":{"name":"@material/form-field","version":"0.30.0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.30.0","maintainers":[{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15bb759e71023467337f243bd308bb6f5e7db122","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.30.0.tgz","integrity":"sha512-v2gdWRFpbEd2URg6dPvH2Yx3HwmZL4v/brBTXq/QpCQgit+8QgprAb5Pz2bp2OFJyp4iFFlywdNXJqcfH/ABoQ==","signatures":[{"sig":"MEUCIFmYCO0Cu3xDX7+CbcBZ0VQJPgJ70NUUrggjFXEhm/jjAiEA4YODiiezE590kCqfvQ54qeZIpPcj93Q4/74Wy2oGDvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.3.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/rtl":"^0.30.0","@material/base":"^0.29.0","@material/theme":"^0.30.0","@material/typography":"^0.28.0","@material/selection-control":"^0.30.0"},"_npmOperationalInternal":{"tmp":"tmp/form-field-0.30.0.tgz_1517868169522_0.7232532522175461","host":"s3://npm-registry-packages"}},"0.31.0":{"name":"@material/form-field","version":"0.31.0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.31.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cdc7f7824e1a4ab16c74cdb5a85fd46d63061d9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.31.0.tgz","fileCount":11,"integrity":"sha512-QrFy+B2197Co15M07E4gdf4U31EU+DlI61H7J2+uYAQrEMemLTG/QOVOEObuBESYqQoA6dQr9eila5h2sTenkg==","signatures":[{"sig":"MEYCIQDao1jezRPLTcp4MVsYUfAwV4IYty7OM6r80SnUIMHjRwIhALxR/RWKBXlfTrusTpank48sIlTm/fH0T2FVPRm34CvP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124262},"main":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"9.0.0","dependencies":{"@material/rtl":"^0.30.0","@material/base":"^0.29.0","@material/theme":"^0.30.0","@material/typography":"^0.28.0","@material/selection-control":"^0.31.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.31.0_1519150980427_0.16758429105578898","host":"s3://npm-registry-packages"}},"0.32.0":{"name":"@material/form-field","version":"0.32.0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.32.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a241cf7cdfa3e053171ac21559e0820dd9c9d07","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.32.0.tgz","fileCount":11,"integrity":"sha512-DrUSzqS73H+ksyI0HM66q7IRVSuIIN5dvapayaCXscoSVq5jU1jObqDNtu7PmBxEqvXj68SHrRWm7M06m06a5w==","signatures":[{"sig":"MEUCIAmDBkR7PUZkjrt5tRd1YTe0XYUVsJChvKyav5vEifEXAiEAg7rZvkoCT/qFvo3GjHMl4vAHDd9j56yt6LP6L72Zhhw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123806},"main":"index.js","_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.30.0","@material/base":"^0.29.0","@material/theme":"^0.30.0","@material/typography":"^0.28.0","@material/selection-control":"^0.32.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.32.0_1520287724316_0.21517576558465223","host":"s3://npm-registry-packages"}},"0.33.0":{"name":"@material/form-field","version":"0.33.0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.33.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bd2c55ac656691faa51f7c6f882966b2e7720c1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.33.0.tgz","fileCount":11,"integrity":"sha512-ddawsEvmg3rx3CX81Xb1bVnswEXL3nD7tpIx0z2RT/vntPUEmQmAKXou8sgN3k+BZXtP+C3BUK8PQDWkckLqqw==","signatures":[{"sig":"MEUCIQDC78b5RyEIPNmT8kIJ1j1Ybbob1xdWrxcow4sNM6w1dgIgahCcZ+vkn543/ApCoVg4kELBddm+zCzn76dCnI+WEj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123632},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.33.0","@material/base":"^0.29.0","@material/theme":"^0.33.0","@material/typography":"^0.28.0","@material/selection-control":"^0.33.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.33.0_1521477601514_0.21093330600936833","host":"s3://npm-registry-packages"}},"0.34.0":{"name":"@material/form-field","version":"0.34.0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.34.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b3bbf506fd405272b42c2ffc4fea608dcdd2782","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.34.0.tgz","fileCount":11,"integrity":"sha512-w9en/0pTpVFtxAVfSc+IlnRnigfnkVga5ls8c+GNQrwM5VTMSzv9Dggqgi0jPu3fdBBdn4hw1Z5/EFqNrGdMZw==","signatures":[{"sig":"MEQCIBiIammAmhefa8uai0IVJBOPVr3GKA0z5OUPQqCTi6LtAiB/IJZEHiTCXfSUZ555BfbJMu727eRYJfHRcFAuPPrMsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":123766},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.11.0","dependencies":{"@material/rtl":"^0.34.0","@material/base":"^0.34.0","@material/theme":"^0.34.0","@material/typography":"^0.34.0","@material/selection-control":"^0.34.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.34.0_1522705915155_0.6141278032159552","host":"s3://npm-registry-packages"}},"0.34.1":{"name":"@material/form-field","version":"0.34.1","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.34.1","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b85b2a58d0e9b771bffe3893e35730f2c54d9b36","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.34.1.tgz","fileCount":11,"integrity":"sha512-Oge/8Wt+Krduj1Y28BJ70SnrPKUW6PcaNUC++URvnOuXRdMO8MXcTag8cZ2wHNZYbAyq35lOehvXF/U+rqBNjA==","signatures":[{"sig":"MEYCIQDgMmFUBWHq8iv4GuLzYpwEVpoUBC59ZW8zk+Lhe4NB7QIhAPPp6YSkl1cbeV/QIUAbwIOA01CAqpmCPjx0JOkv3Qpd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124164},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.11.0","dependencies":{"@material/rtl":"^0.34.0","@material/base":"^0.34.0","@material/theme":"^0.34.0","@material/typography":"^0.34.0","@material/selection-control":"^0.34.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.34.1_1522798787403_0.33304270389487844","host":"s3://npm-registry-packages"}},"0.35.0":{"name":"@material/form-field","version":"0.35.0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.35.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2802b03b9a5608d84064776fa1a7e698c587f25d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.35.0.tgz","fileCount":11,"integrity":"sha512-Jns+bLCZv6fjLXghGMQFCI3fAO/FBizx4ff9u3CrmfxAY3KkESYQgPIsqRSBUb+cYPOE2949yV2M53CuCoL58Q==","signatures":[{"sig":"MEQCIF6OqxU6+yE0rY08Nb625gOzhCadwsqauElagz86x3iNAiAmpf0kxSiCUqmz+cCFHZ6bk841inIhsZMFNSYpvw16UA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":121879,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDTCRA9TVsSAnZWagAAa10P/jRFc4hsUvqe9onFtx7g\nut/jFkUfL5OQg7uG6QyKyTfpScvGU/ZIWCwtxM8wJHI/KIBIEn5XwYpFhqQK\nij6vU3v6wnCz0HkH5nBXQSfNpYOvoXkEBWB4M8ylkpCmy9tIFfhnY96Yq10t\ngHC7I/H23hN+9830NspMK678I9ZYq/NFUE8hArtPzUT7RfMmbuJg7YKIqGxu\nYcXlt+cQZ4sr5LrWItqnL0Rl56Qa+ucqnfNmYEktA7vfgcvtVRyaogs1OHUo\noJ/6x5KIooHKkLZsC5RWfFsJRmTU5sQaARbB9WgvTUKMl/7cfg9DI7lAaqP5\n+4bxvIIzaPytaOiUCbC4EY3Cyg/XWHPlj9jIusihy3+MnkgRPnSlSqE4Dn7d\nZJ2zcTLOg1hys7jjv8oOkkjmi8JLAZd/Iujegv+kJHlFmBNVFV2NQMWwOxKI\nt/CfZbj5i6lxjEWlZgLnIVw9/gnclVyx9dvieRb7Oq1ik9qGw4sr3EJ+RcYN\nnwRLT8peGV85Nu9gmaZ1Db3WL9441eo2Ro+tPbqLFiuGKxbVN+jm9WsF6m9k\n1NAEsSQ+9D/lDPkze6h8UcIVdM3+qzHcqBRL6QzL3PTyaA6i3aOq36XQWKQk\nBJna2yCe9DdpyPu6VUSaUk6a1inU9nH/BkrLfBDJr0hHOQWh8ND4RH5qZbFC\nz4YH\r\n=0MHJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field provides an `mdc-form-field` helper class for easily making theme-aware, RTL-aware\nform field + label combos. It also provides an `MDCFormField` class for easily making input ripples\nrespond to label events.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## CSS Usage\n\nThe `mdc-form-field` class can be used as a parent element, with any combination of adjacent `input` and `label` as\nimmediate children:\n\n```html\n<div class=\"mdc-form-field\">\n  <input type=\"checkbox\" id=\"input\">\n  <label for=\"input\">Input Label</label>\n</div>\n```\n\nBy default, this will position the label after the input. You can change this behavior using the\n`align-end` modifier class.\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <input type=\"checkbox\" id=\"input\">\n  <label for=\"input\">Input Label</label>\n</div>\n```\n\nNow the label will be positioned before the checkbox.\n\n### Usage with MDC Web Components\n\n`mdc-form-field` works not just with `input` elements, but with _any_ immediate child element as long as its\nsuccessive sibling is a `label` element. This means it will work for MDC Web form controls such as Checkbox and Radio:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\"\n           id=\"my-checkbox\"\n           class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      <svg class=\"mdc-checkbox__checkmark\"\n           viewBox=\"0 0 24 24\">\n        <path class=\"mdc-checkbox__checkmark-path\"\n              fill=\"none\"\n              stroke=\"white\"\n              d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"/>\n      </svg>\n      <div class=\"mdc-checkbox__mixedmark\"></div>\n    </div>\n  </div>\n  <label for=\"my-checkbox\" id=\"my-checkbox-label\">This is my checkbox</label>\n</div>\n```\n\n> Note that MDC Form Field is **not** intended for cases where a label and input are already handled together by\n> another component's styles and logic. For example, JavaScript-enhanced instances of MDC Text Field already manage\n> a label and input together under their own root element.\n\n### RTL Support\n\n`mdc-form-field` is automatically RTL-aware, and will re-position elements within an RTL context.\n`mdc-form-field` will apply RTL styles whenever it, or its ancestors, has a `dir=\"rtl\"` attribute.\n\n\n## JS Usage\n\n### Including in code\n\n#### ES2015\n\n```javascript\nimport {MDCFormField, MDCFormFieldFoundation} from '@material/form-field';\n```\n\n#### CommonJS\n\n```javascript\nconst mdcFormField = require('mdc-form-field');\nconst MDCFormField = mdcFormField.MDCFormField;\nconst MDCFormFieldFoundation = mdcFormField.MDCFormFieldFoundation;\n```\n\n#### AMD\n\n```javascript\nrequire(['path/to/mdc-form-field'], mdcFormField => {\n  const MDCFormField = mdcFormField.MDCFormField;\n  const MDCFormFieldFoundation = mdcFormField.MDCFormFieldFoundation;\n});\n```\n\n#### Global\n\n```javascript\nconst MDCFormField = mdc.formField.MDCFormField;\nconst MDCFormFieldFoundation = mdc.formField.MDCFormFieldFoundation;\n```\n\n### Instantiation\n\n```javascript\nimport {MDCFormField} from '@material/form-field';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\n```\n\n### MDCFormField API\n\nThe `MDCFormField` functionality is exposed through a single accessor method.\n\n#### MDCFormField.input\n\nRead-write property that works with an instance of an MDC Web input element.\n\nIn order for the label ripple integration to work correctly, this property needs to be set to a\nvalid instance of an MDC Web input element which exposes a `ripple` getter.\n\n```javascript\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst radio = new MDCRadio(document.querySelector('.mdc-radio'));\n\nformField.input = radio;\n```\n\nNo action is taken if the `input` property is not set or the input instance doesn't expose a\n`ripple` getter.\n\n\n### Adapter\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/rtl":"^0.35.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/typography":"^0.35.0","@material/selection-control":"^0.35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_0.35.0_1524523218692_0.01156863616549253","host":"s3://npm-registry-packages"}},"0.36.0-0":{"name":"@material/form-field","version":"0.36.0-0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.36.0-0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5db577f5540c170f09d00bfecd821a71f5eec98","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.36.0-0.tgz","fileCount":11,"integrity":"sha512-YZNyT8sqMXKEamN2TfflZATs1hl4vwja9zSuGi6bik8Qqg4bAJbO8HWdtrkRR6CAFTOtVJQl0z7gFKqxVu0BiQ==","signatures":[{"sig":"MEUCIQCa7fRSRqhhEnnxWWKn+J5a2TMZ6qFdk6ypetcXNWhVBAIgGB4J2ex+pxj3gCwQi4l+qGnfSJA5CB4XRlbwGGz64Nc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":121458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbDXCnCRA9TVsSAnZWagAAJrMP/jHdIhYxvXYPiQmZhWQ4\n4dNvVfdN5d51mjB+MNjJq9Io7xLQh3KKjaotFQMR4dvjIKKtmo0EudIr6ShE\nB+/QMChxka9ws+ybi7QDS8XpKeV5NtFa54UY4sOQJs9idlt0Y5MBHpRKIg5D\n47KFmNA92Osvpowi2u/VxPRFdd+x1ZExRd45LH/zjplSBObge1A3oab/GDrw\nken6CWXOcnl4cylYMbSiYL6fRxg0Tuzlf2QxSA6Cv3ocK+0cnQDA5P2anXNO\nmr8V1+dJn092ADtKNJh7zF9kSf8IxqQFpPwB0DEQ5caoQmBvv9h1E5C12PpD\nG75VbENDKSJg9WhvBAaBQm+PVzobSKtnDL0JFbAKkTv1PYMvlC/4pocw70uC\nUqqM0tRrV4KuIlqbDOaj8UpzPkmOL89rISX/qgErEtmdIQ2imyIWYHSPjd5j\nvEJF8XHWjg8NdAg3O1r+lBIBA0IYVgNA4ucJwNPOx4t+ROhXrTWwMgkdhTxY\nnnnaEt20EApCFOxUpEO7Xs2SKgndyrfewYyzM2GnzsYtdNU0vKaVjZqkJmzD\noSB+tsa7zg0qCYtZ28c2ZfT5UtE9AcYkZbzz0ygIx+HdOxRVK4qN3CbO/+Ze\nS5MdJSgF1qUev1/tegN+lBJrXLekS5nTS6V1L+a2xpjH/ZjC5jDK0oFYeC45\nwNVD\r\n=k5Kr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.35.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/typography":"^0.35.0","@material/selection-control":"^0.36.0-0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.36.0-0_1527607462561_0.6484263733402276","host":"s3://npm-registry-packages"}},"0.36.0":{"name":"@material/form-field","version":"0.36.0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.36.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08260b3c62ce9a4c6fcf2ca6f06d048816b415f8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.36.0.tgz","fileCount":11,"integrity":"sha512-vFnZX5M/t1lWlFw/AHcdC2Tk1PqTDcD+DR1+TLq5kc8u5iwpOyD27HzqfsycTs7OWWpyQ4LVHZiRSPyqAK1jcQ==","signatures":[{"sig":"MEUCIQCIJy9K/H0z+grZ639PRXacuU5azIVBwi4LYs9f/4+cWwIgG75HcwUkemftODDrXrJvFFtXRyoScI05dTm3Y5NeuAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":121454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFV0CCRA9TVsSAnZWagAAViEP/jwjY1qS4DElm0Jugx5H\nDGLhjyqsm+P0MngTuz2WPaYzN2XEq5p6+1Lsk3jU627FDzbAAo6+6QrNIhI5\nkHw+gyNtlGzHvaxkldxFJaQDQ4l3fM7wTO6XFlDx0B+vKkmIMGMN7e+UKQcB\n+GzAzjcLdFXoDd1gi8utCU5iqPMYoKFiSFPhZWF0d/dyqO4zRzg1yngIjqj/\nQ/U5sYEmJynIm+BhwE2IsFnWNj5Drj73zpPOV+ay/JjV8dny6VWwtZ+NFmbE\nTnlPb6vx8cJWJD+7Z8r0uOxaMXK5/fEl//I28lwmfwlcgsWd19T1R2TvSah3\no+CdZj0HHiaBsvoW2YQb3UEWmxDXFqOm0SOGVQy7UIUgZu9SPKJfL9nr8z6y\n+NRQYctoDdBRzARUcc/xw/KNDb8JusUfq820RI5iqMRN1Ty3tArm459nNBPK\n/BscU0d/M2OnAOAg+SVEIy5puZFGdO7vXbxQ44IZF6GjadPyVXZt0r3rhe+y\nAyKGJ/8GPADCaLIoG7vzFs9orFInL+2VCHRCWAfoeOZC7Khy/uz+ReyvWmBZ\nltsDTb1lPljfx5AwCX85H1Qo/JrdYdOyF6uuNFYaJ8OW16ETJNNsNDdkXWsr\nzYZit3I0VyDXvOv8QdwQwHbjM072poV1fWljvB67+1t66oKBxsaXh4tO0AC9\nnl83\r\n=SzSf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/typography":"^0.35.0","@material/selection-control":"^0.36.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.36.0_1528126721892_0.4897753627360031","host":"s3://npm-registry-packages"}},"0.37.0":{"name":"@material/form-field","version":"0.37.0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.37.0","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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6568a3c36c548939152a71d6fdc686887d14300a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.37.0.tgz","fileCount":11,"integrity":"sha512-ZpxKoT+UCzp8/aiyTAWrHWCMiqQ8o9aHYVBC8zxy3Gt1W4e5fvxAunG7K8wzs3ADOzhpcPZCABcFrnPtuH7L1Q==","signatures":[{"sig":"MEUCIQCgABYLWYOSyRCz9luRActO0yuSGIHLHKNL0nQHZn3amAIgRMpg4q+igP2KpzTiqhUQ9/L6SdkDBMhC/qFDu95C/0s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":121837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbOqPQCRA9TVsSAnZWagAAZWMP+wY+O2IEVVb8ZEISXD1j\nWyZf1JThlrAvR65QRrkTqz88pyIOVTkoYTZOGN2SP6K2hjsoQWTLpDK7OJDm\nX3QsSV1lqvUx2D7xj4otkGTv0KLbARhhbR9gcOH91SnIVTOBPrCMYNW5Hf0o\nGYck8TbdGIRWzzM9zWJQwjMNrPCH4uG2XHb9jfLq79OCpeYFGjgS/yjYl4Cg\nphtKzS0r2iCfMg2JSYJOlxBk4MxJlGu8443caoMayt7GfQEr9eacZLq9p2y5\neIewRYR5w8kwrpRYQyJXuUqvZN8g7+ERsA/qLWkpB9mei92hJKzOCzzGGOO/\n9NWjQv79+h9M+xWJPzVc5kDUUfdpd+ssvuFl2d0bq6zdFTc5jY3xwq16YPmu\nWbmzVKuJiNJsD3YvCxoLSvN6VaTv6OBs5g3mvtgDk1rNOBknCRL8HDPN1Owd\nQMBW1BxLYpJFxL3QIZ2g9LwmTaSKjx4IiD1mRXrtpnvrBArLFZp74ol4JsRB\nWHnUM0c714656nqQl06zzuGOSnFDlHVO4FkCedLlEvXXnLCFJ9ZbBoyLH0P5\nfVxlz9Qvmo83yjxev1wVaWYgmGhjugrSLeB5r4jAlPFL/tz2P90UDsNyUglT\nyy+2Mg/91r8wAHWgVmcCN8qNCHd/7To+R7WyuRs+VlkRHrCGTkmmz83/448X\ntXcx\r\n=gvB1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.0.1","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/typography":"^0.35.0","@material/selection-control":"^0.37.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.37.0_1530569680758_0.1384764234576612","host":"s3://npm-registry-packages"}},"0.37.1":{"name":"@material/form-field","version":"0.37.1","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.37.1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94922ad3cde4ecc91af6d058378e4bd52b64aa14","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.37.1.tgz","fileCount":11,"integrity":"sha512-Gt1+KVzJZ5XH6ZkJz8dgTpWhDaPHh4tsRXeKPXlQJuVuVNLIFlERkKFPlfNmTcHg+wZznGSGLCUfSHEK+m0gtA==","signatures":[{"sig":"MEYCIQCp96YUH1ViizEU0dPZXflKE1M6EkJCrEGBuLBxVS5qWgIhAOfyUgBji+JJsjOd/G/vZNUblmSlbSSwkvDDwfAUjrts","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":121935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTQwuCRA9TVsSAnZWagAAXDcQAIzqwI2FIY+h35xqLYiM\nAtAkg4R2f9UeTy0h3JyZEd9nPylLAIETNKxSK8DRdr+ueuW9NrGlq9W7JbYH\nmmgDkQZwZntqH1HjdugfmlcOdLrNFYB93Wn3CVE/8aorek4a+/+Ogob0LBpv\nC7fiT0MaIDxYb84/LCHCcTFSG7CboYHa38TnwgY0egeCmacNztRym6G84RSD\nuVthho50PMfegMBuoL/Yjn1avuALsvM/tU+xOC/91u4hFcWs551eYO/2Nwgm\nO+tt1/azyXlHtHW9mOia/cObz1ga7l0nwm4vp43Rb4hRI85ZGcho9AhlyHU+\nbJkh9NZJ+d/ZkaGuHRsr8LDxS52mY1avnrwnJ79q9LnRyp8UO5RyrIumA5ZJ\n+cKzICzltb9lMzzi4TSwTsyfgu2Hbp52BJD7DjY570ggo99mHIUjOKnSKG25\nO3mXKoc4XvuoDOBry7724WJG8ya059W8YFs5KZvjMWQsFP/CYqI8YG39hUJw\nVFdPJCMO0eEto+UgL8gH3ko84n3GIf7FZpJO6Nymqm6nKbBJuRpd43rBwdtZ\nyFFnIp4Sb4yxKKzYErbV0UDZs3YFFdR3q9XSsv1YHBGiTWTQwjoGy5kvR8C2\nvlAwltnP/Z4q1Hss2Bvo3qDOUv/Sw+cdiXcQlAtN/KJy1oxauArs+qCK54H0\nD0Ja\r\n=LwRW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"10.3.0","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/typography":"^0.37.1","@material/selection-control":"^0.37.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.37.1_1531776036572_0.13587611000317312","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@material/form-field","version":"0.38.0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.38.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dd8e8564b9581f662185a2840f14063976bfaa4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.38.0.tgz","fileCount":11,"integrity":"sha512-tayB1Qx1BIlYkab5qZp9J0/Lrum77FLXl/8LkO6QwVUwJTZscxDnx/cJZ4A+PmIete9EFQWzRA4MObUCvUWnHw==","signatures":[{"sig":"MEYCIQDZXyiS9RL+3vejs68GosBEcQvr91tjKZshNjJ2Tw9BYwIhAOYTQtZ7M3foZ1vteLZoDvz09Ui6B1JeezbBqquYFzF2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":121949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0XfCRA9TVsSAnZWagAA7lwP/0FrerjswWu+zW9zfrMx\ntgcL8c99BtrJRyb3qtsTd7Z0fCz7Z5ulbCl0QuT5NMVyViEC5Z9fsiavS3mq\nQK5jLGerSL2RxEFMgEWC0zeH7BV6DUuqoAtWd21gea2Skw0cY+onV+6d/RE8\nAfDTw50NTqdnuDzTV5MHX3W3aqB5CWtZhSRTLrA9+1O8O3lUAaiaedrsmWae\nHcZDxv26NY4jrWp9EPDCxzcsWCAffVCuqExwQTCk+SLB3IIfKV0zEyqJiabe\nPRXj5Oq/ejmF41Qv8wN5dHSxs4lSRtEoMqshgWfrBidml6QfbkxaJqTZwkzZ\nTui5oQNTa6CpdrUdszSamuxXlN+VD2p49gwXXrGETPRQxtjcO2uBSbzCzzhl\nUtRG9gUqrjUBwht/5QkY3y4qt/HvTnAezaHi6fpcGS3tEUCEUp1aARCUXgjq\nOdlAMLIpFnHLNB/rTRw2iGLqT8if9r5YsFwyhQ4omdfbHo1x+pbcXu00AcMU\n5z9mgCF+P9vtVW9qHA3mMFMYdl/Ws0FnwL60H4tyt0mbIzL22+nv/XO86mRT\nmmBCKEGZH3iI6r2grdbAYGHhqIP6rkL6S0QJHGzQa3VwlXA/mJhFuIxUWjZ/\n6Mv4hXfbg2KKzRNOFs1yg37MS6mInEzbBtA12q0Fw0DkKMZC1g0up4rcuFN9\nzSaf\r\n=cQXE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/typography":"^0.38.0","@material/selection-control":"^0.38.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.38.0_1532970463743_0.23813943928145842","host":"s3://npm-registry-packages"}},"0.38.1":{"name":"@material/form-field","version":"0.38.1","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.38.1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8764d08ecee5eb76e33a68c5d52dba1397ce3cef","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.38.1.tgz","fileCount":11,"integrity":"sha512-pJaTRh3YvioU4hdIigy8hE+YibRt23kS40gPq5i6qRZyWX1LQcfxqsJBNqmFDz+LooLiKhSs3m9mAPNz7APNUg==","signatures":[{"sig":"MEUCIBmJBUXVJJpWAgi2VtpbVSRsAM+hgweInAO3HV4ppbrMAiEAnDK1rZ+4tcOkEcwzlLhSO9W7XALip1yD9zKdDeZZWR4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbceyDCRA9TVsSAnZWagAAdDwQAIMgvI3igoxuN2XQiNdI\nXOhlMXu1OqJKq/gBcTBy+nX9YtRzLteyjV0Vi5GTnoXmEsYX6mcapAIBERta\nz7sxr/8eVG063H4/UC+EIOl1bGi1i0GODCQn9r3Dlik+FDog5LDAotR0jSZR\nI8MtJJWKwhK0pO0p9isw9sRfyqAoVdUw3NBx7ZWUo4KRUKamAg4dBE6YpI2P\n+U2hntXq+hpaVal/4F3IQZtXbZbQoNCrLV2N3gBeuuqgiOgHy67cjGtnpNQK\n/topm1U43rd5iqcMPsaTYaVa0kVQtfGjZ5N7SysSTR8zjO1ZeloJfl9vjCLw\nh9DfFOzLtg+PoqMwMPu+95/3dbnFfP/zD+6f53wTjeke4Wq1h0ehue99AsZU\nesE5nn9iN1f58qfjQflf27JGWNsSC0IwkUAKScxCHhbm6Nm5f9vuZOSUilT2\nN0NfNvxE22RvZ4ceQ0NdK5F6msRQuo0uga4wguYL5cjGbt/2Rp3hk/UYnvBp\n/3qSg3krsznqsC5uRVmYGb1qUc3jQmEZflVmtgFMCFHY5EkfcIxQIG3ugjaL\nHH2Oivc5eDZQi8NCQ+7twxOYeo2hbdvIqN2AbAuX7PT35gm7VS49jsuRFAl5\nKdl3XgmjSHTLSA188A3WPn4pMrV+dqrqtVr7NWT4hn4v60MZQG2vWnJoVRTI\nG9q6\r\n=YSIz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/typography":"^0.38.0","@material/selection-control":"^0.38.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.38.1_1534192770651_0.5971424932140219","host":"s3://npm-registry-packages"}},"0.39.0-0":{"name":"@material/form-field","version":"0.39.0-0","keywords":["material components","material design","form"],"license":"Apache-2.0","_id":"@material/form-field@0.39.0-0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cc18c4cbeb2737257c8f27d543f431cd4280f7b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.39.0-0.tgz","fileCount":11,"integrity":"sha512-OVYatNw2ssL2jMR3oyffbMfS5M1cS+GAzvC6sbSojWiGlAP7SWKV+i1ws3jOkGbScc2Ju4xR4APfKlxxzWV/ug==","signatures":[{"sig":"MEUCIQDGRBFcwRiRPh3kQ6YQcArPmJXVMQsdaupRmlu/gk3fqgIgeexzKflrlb0HbYo6ivsfdrI0e3bLDWycYEpCjI6vUMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122298,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZU3CRA9TVsSAnZWagAAeQwQAKUNGEB0chzYT6QvhW94\nsDRrF8a3Z3TgVFCW2tqUGXkZMgwMZNVw58UGxlIELLyNH3T9dMdHf+vaRmR3\nBoLGkKYxfFwiuCXrLmXfbCG5VE8TbBP5urpJjZrPSDDi5xG+RGtjtSL+Uuwd\np71Zrk1lGxmFzaudjsKKBeyYiAJy4rzo7yXfJbrJrTTf0rz1Xem5Q4Ne5znv\n3X5tMnXMkwQeEft3rVyBTj5iI1W/mHfwzK+lPeoRnubI8XEHEWaLpXWMIxpE\nao4L2+R+SOd07GCBnDuMEpDQU9ZKfyTPpWgLINvSvd+09gEdspm4I2myxarC\niDLMIxqos/VFN24AfMxtE/SyU+rygRQJQlSjdR42KCU+p0g8YaA8yB7FdeYW\nQWa//cxXRRQwck6z4mc1ezdAFFJvQaAhHJ78IZzaQmNN6KQnAnsjVTE51iNg\net8h0DqmjUcOkAS9k4QKpEuAsBetRlrf/g2gj8vFUBueTy3i0ZsyAvAxXyL/\noIs3Emdlutg3KGq7cuzsLRwidDRKPNqG0DjNHEvg1A0s8YZtxCBgymeMSNnu\nQVeZK+hPXyaAUV52/GwN7VwZOujyInwYSckS/o6atMvHizbRNkDF46YSXb8X\ng0ux1yq0mM5uPztUASVkiYrSV9B6jgrp2H8kC6kajc+V1Ql4jc1FZPY9yOls\nq+mG\r\n=RTcF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.36.0","@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/typography":"^0.39.0-0","@material/selection-control":"^0.38.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_0.39.0-0_1534432566537_0.14096150954043307","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/form-field","version":"0.39.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@0.39.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df322e33613065ef4641b34c27720664b2ee73d4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.39.0.tgz","fileCount":11,"integrity":"sha512-B82Q89CdsLCBqBlYN9ncrEjIqskHpAvlKMrVl8dlzjlJuAnwlYn30LksHIVGyccPX7NKUE+CPAg4wvYn6P5wEQ==","signatures":[{"sig":"MEUCIA0knd3/t1Nu5qqy2ORN3gLCmhCH92yBPbEZufYhK8UUAiEAvzIqOOWTiPTnBE3QgNPFNoGg69o52yc+5YkoXKOrFc4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDe0CRA9TVsSAnZWagAAbBkP+wdS8UMTBfvr2C1KAbKb\njB9MJR20bo43K/EkoZdAVGbF5Ifp9XU6ic9iFWDkdwZ9b8zU+oYQcYeGK3Ng\nuDGFXUBcRqtRDd4BNu3CVNW8fq48bg+OFuvqB0MWnNYFscmsMhydiaQRD+VN\nbOSEX64z5PXoVJk//OGHCxPPxM6WqdPCGtDqi4hWCl4hhuCdVO7go7WW4XMY\nf8/FKUlO0umgsRE38or/m1SPK/OnJ8mVXFUCvklev1sJM7h/sP2/jCBnBc40\n/N+hiwR/JqTOCcA3RVi9WpCbSGW6UhjZkYjfesXiDl7bBYgLhwns0TB0l30M\n0NDOZTmXzlLW4Y+oIJmPoG3cbZ0NpYyhLE9us0sAEdNEt4VJbZeXRAYDLg4X\nkeMbpZ7LS1FEyngUuoOijBraYPC5skuKD4bjmyn1tWVP7vOR8b1OhQJAqiYj\n1Y6hKAUQ7Emv3ZGn4Pu3NKejbz5DtSfklnNBmZWJGJnr1m0MBRnxoje44na3\nvomm4gP8lR/hInwwqXNxKccF5S4sV3GfV6vhpziTRgBF8pxmnXcH2YYUJErd\nQXsBbD/ypWUxBs5Zsp1OviffzFbaPKfOtUBW7JnQfIXwJS30HCsugjKExwAS\nrNU/1sRaRBDe07hq4R7k4TceeK5sxR19srwqCfKRFxXlPlak5LDFB9M4+5RE\nh7pt\r\n=uzZK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.0","@material/base":"^0.39.0","@material/theme":"^0.39.0","@material/typography":"^0.39.0","@material/selection-control":"^0.39.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.39.0_1535391667525_0.011995875990218119","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/form-field","version":"0.39.1","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@0.39.1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b679b79722d99c19944abff561485342f98eb42a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.39.1.tgz","fileCount":11,"integrity":"sha512-cdcOAnSv96LXZ+H5j3f6jFuFnb/l/LmNqTlVLEP8iCXrD0dWwW3bYzffuwhW4xCRaNICnmZ0gVnD2T0vEvAITA==","signatures":[{"sig":"MEUCIQCzQa3kG39q9Vu/uUaOupi6UtWh3H+Rn5vypaBqDihkTAIgZ/C3t0327N6caJq6TYI5xKox65WaitvkECwExjwqRcw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibT2CRA9TVsSAnZWagAAdksP/17nv3+Clcj2qec5Kk1t\nu41sYq/pSJhFyrPTcx37vXaXU7VItchkhQIYc1A8WB46e1VFZzaGO3RMd24o\nNKjd+h0UzmbHC52Y6m5o/Nw3WLhiP8nkQSmo9TzBJCiThvZBZ5npcR3qUzE8\nvX8G7zVNcjKyXtrODhkyIzG+uUmH3jd6MV/6yiJESdqb8IJNUxHIBrILVnYb\nWeRNw/jxSmhQAHaRI4kQaGyQ/5GANukhYxNdwmEMJAZh8c3y2U++Qt6uCnd1\naSMLn4dpiDswxiJ0hSLCBzJ7w8csDyBZRwrvPiehJ0D283LB02NU4hBD1XYJ\nL6jEAMmNd7jrfk+oETxoFEbsLwouaYDBTXMUkhCBDEReLtUkB9YTp/jwDjmq\nf5IJLkSlFF+Bi6MsLMoCUS01hAGzEvbzM6XpqURcN+KySw1XfiRKPmbFGz1w\nWf39qD6PSFhzsvlu++RxI+BiASyELkbywm1s43rSF4EKEPfZQ34JxOkqtoRD\n++bGsmKvGfLRAGyzRWLHw7e6mI4gjq3fRAImIuLZjCH2oFuJB0hd9ibJgLD7\nxFnAERGXQf5Rs8qa3MpOrhEfozl48DCvj2HoGZHtsUG3uXn9LI/R+NVaob92\nDJHk0cHZVaHChe8YEjTpaVD9i08+xfgroMjljw+kfH/0d8XPw0TSGU3l28JK\nUH22\r\n=5GCs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/typography":"^0.39.0","@material/selection-control":"^0.39.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.39.1_1535751413957_0.6653145307443109","host":"s3://npm-registry-packages"}},"0.39.2":{"name":"@material/form-field","version":"0.39.2","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@0.39.2","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc9959e6221a7e19b8474d24d39d288166f3d5eb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.39.2.tgz","fileCount":11,"integrity":"sha512-tJM0pNS+MRJH2MWqClkvkAWrVRrOUu28Y9+quQulVaMhFIUBbr4GmQq6yN4Hyt63bl+vSw3xyBrUrNwqgwrNWQ==","signatures":[{"sig":"MEUCIQCNzSmkfStnowx/RtqV4tL1f8oq5JIelYBFYFVABnXdQQIgH/9PPPRv32JPqDXzLaeEeM+gjrMaReQDAeQBG2GPVtE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/OCCRA9TVsSAnZWagAAI64P/jd7iIZ1rxqg0/9B5q1f\nkhtjxHKxK/VbDL15WC5cG8hbbiHqVgvzAYt1AhowhXxGibBYOiJygDaRZgZF\nh1qMteMUoP5/0BsqtwnWf0qA3zylS9Pq7IETQpDDlEhmpFSloaaIN6rODeq5\nqs+yEvzmSJdMbj6oY4h67Xr5JSg68GRjqEbnGIA/az7S8GuXtGEV67IK45QG\nbRs+wmZC5XuCVu4C4gMawiKNg+5bZ/6zwrMd/YwYymVnEG2grcc2Js/fwBaR\nj9bQ47du77MBuqKt1mR2WJgvIOiMTLgIpQVc69gHmkYnermmuCmSJgngwTu0\n9ko+HJ4hG58T5HXI3dRAO2o25iob7ZdWzo2v/thPy/OnomYO3Gi+zOriVXiG\neN7BHJoxoNuU5HikmnVwMAOzmhZZZnGwYG+sQsUGX3L2pK9hOfha8EnhUVm4\nLAoyb5DS6WEXhUEmwSF9c3ON/AomuX1qmBrHPy6Gnr7FQNbsW4zG/lJJZhAC\nAaakTb8wxN+O2mduDiHKYvCrEAcxwhsahlPbaBZnFL1iqBzKTcRNXie6hKp/\n7iTIXD/H05S0uX0h+EnvZbChMNEEkxC4O9OgLZRxsXlrUqQFEWlKlz2MMJJr\nCZ6Nah3Ici2Jcm7boDE5m1slJJbSbfvL1e+OBR/bzu7BwzAliNW+mOGecWeV\nxl2R\r\n=n7hi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/typography":"^0.39.0","@material/selection-control":"^0.39.2"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.39.2_1536684929355_0.8832265554845442","host":"s3://npm-registry-packages"}},"0.39.3":{"name":"@material/form-field","version":"0.39.3","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@0.39.3","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbd149a526bb0c297357d046662be5731d430350","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.39.3.tgz","fileCount":11,"integrity":"sha512-F/p5gZuk3kUDuu3vN+wtttc8Av1BHmj2eDCGNzcg4snK8GqIMEwxl+klbIpkrOA9bQ7C69PKeOGKgoFRisT4eQ==","signatures":[{"sig":"MEUCIQDtkLc5K5hoWa1wknojeCBV4EFgrZ0lqSuOJFC+S8OMtAIgKs/IsxwPXLKjri/3dYVKN/23bfHy0rfGpO1wMXNo9/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/keCRA9TVsSAnZWagAAyAQP/RNIbpqtulAcn4Vo+035\njCV8LyjjrqFiYd+mfWxIuRyKEBzyqQrHr8kT0Uhg+WfvgS3BPiR4naLgOjMz\nMQJolvhtIS2vlQji5E40WUkDvOmx1bzKZZtwQcDGwi4Jr0v+MjeKkpR8Lt9X\nzdhksdExtq1XMBncDvrO2DTFHkNYGqtFrSSELJ7wibiuEdEV31XzF1gDBx3X\nktHpa7IlwCoUpHoT9SSRljmQETbVf0mGDshkBnyTt0BlXfJSvOHmOkkTh7my\nfn2AbXE/cHheyWKLKWw4yIjo2mlrQwF+IbC66ykV05Tae7+9xHi+Hz50wLzd\nrnWt/0KriBVr/2MKj4VHJCSMHaVrHTa7fdZtQIdztQj2K4ubvRWFGLLWYCAc\ndVywskKNrxNdrw56GiOpjChCEAxjtX9fDSRph5x+5PTKTGK/rVTJw950bqyV\nL15sgE+0EoUY3Dygnc40FuNp+DoMxoZpRcf60X01BB4gkboTTaurEWRXrKON\nsC/GB7C1o2RqRy9vj0PuFq9ZjOKzVSPHt7QLaoIyNODVdc9mfjBcokS5Or00\np4sSsiDjeMEfga/aft5NqIu9dUeNfIRsmwc3FE9EZkLUjs9SjNX9iTn3sPfw\nxXwFTlLfTtOoVwi7HjjvnJeXHx6zBBcky4NOLQAVqhLU8k1R8OoggBDXu9IC\nCGdc\r\n=RlOK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/typography":"^0.39.0","@material/selection-control":"^0.39.3"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.39.3_1536686365828_0.9119620243862954","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/form-field","version":"0.40.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@0.40.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbd86df078efcf3537f3a9c631a7d02d777f4722","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.40.0.tgz","fileCount":11,"integrity":"sha512-j0SSRaJ+zG3tcN27OGnBcpxyBwnvShS30qObNyXYzqzXT0OCp8RPNzfPMQKtrtpc53cDBJkU3i0xY37tM9laZA==","signatures":[{"sig":"MEYCIQDLl6x7FerxSXosdwIcaJA9CveV8aCZbml7UrMZdbCWiAIhALcqhGChDRqFS1bXftTqYczOEtFhDHuRolq4XamZrCfs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqULFCRA9TVsSAnZWagAACwYQAKKvMGXGcHMzK9Xr2I0q\nKEbLTvE08gD4aXnC/2lMX2uKfLFHUaemBriVZoh6c4LNlIU9dnyJGHsbpgQT\nMtl3C0M/yBV8wZEB4kmXJXnf1dJgQbZYSwOudNWArwQ/Zoyu6BsoGZBcCZhy\npYsIhBYgl3980FP5cBavKiw3KPbl0xdlN+PwZ+PG5QntcwbBbu05xaied3zG\n+RlrJp10Leekz2gL49GUyUXdqHVQKfj78H7OUbUSXnw5m0S2x7UYz15SBQDy\nY9LjKWk2cpcPt0qFokcoWVJxm39Zlg8HD6M0PXrzVqx5WsUlq5jovPOyEYQr\nHlXeOqqnwbRVAhsUGL386WQOe0MOAAMUGJnoFXcldrw/hnlnW+sjlhXI6iPu\nhIBjRa06Sv+qBoaqbACK59X93IDXrVpakbTxQea4jkv8SrUs0W+ZNHgpDMc9\nfsiGcrNPVpp71XBlBILFPEF9q7ZXLkyjuJDBnD9sq5nKfszY3pH1MZsttmVJ\nczQcrzw8Zf6ZvHjNZef6/o2EUgPO/GSDLo7915FhbdMXk/AnbYiT8Ozy6rU9\nDCdtrpTEtHTOXjXsTfD91wBf0lWR+alS3WpIA5tEXcc4eoVdPGulgPPIchq6\nVTlT336A+yQFntWEV/t+E836diwCN2IOFjioGdD0ii5uSI6sIlyoGU1KaLDM\n5B3L\r\n=jVnN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/rtl":"^0.39.1","@material/base":"^0.39.0","@material/theme":"^0.40.0","@material/typography":"^0.39.0","@material/selection-control":"^0.40.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.40.0_1537819332504_0.4714710314110131","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/form-field","version":"0.40.1","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@0.40.1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78222ce355ba6a94732002721321c5d0bc39261f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.40.1.tgz","fileCount":11,"integrity":"sha512-1IL/+X9i6C8KBuH13QAnLKBzHlU/DGFvBNfvu2ASVFccxsa4mAs18dFO3n0gvukg2vyOf55lxPXJVkEl34LTVA==","signatures":[{"sig":"MEUCIC3f57rfMdZ5f51ALcu+GbeuK7L/X8ze5UYzZGbIbBAAAiEAqpw1A9kdAGuf9/VBPqwHLf8b6fEOQTymi5+kp0wtHkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132794,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8cICRA9TVsSAnZWagAAsZEP/3KswX9oRZKzlckVLq5v\nCEsmeUCo9gaFE4Kh6tf1VOVx+wgJGZUxMhS3WjIA6HWvPRJ3eTVJCyGFPjBk\nAPwgQAU7ge20SxQFoPfIcsfkYbzYH+TfiL4rS4RgMn7faiEXv7xdkH3e5jTE\n5UdM8WDqFAzAk5RBBXMWKsxesSZJWYlOBGbIEwXblza9HIo+4DTuMXQlK/28\nOqCZwoxbSXpJMx0lZZzFsZMqJuS3IqFGY28eO59Y5O3XPm+tKe2pwCcqIK56\ngDYlZcLJWk3l6QOj5Os7uKm9B98utgOW4o2RGBSbxElwf90Gvlq8j3jywQNL\nF9MbH7Gli3cdGhU9FSifH+AIwFixw3uydEA23eoYyGlfV2VUWhKNEXN1EAXa\nBq6TdAWDCws7u37FPkZKBfNBQByoxCAlr9ypFQ4/NAYg8e2kkqODjWzLaf/A\nhl5zbsEGtk4yaLOTIXqfabYdJFQV0NkhHQSSQv9uos2i67GOA22MwrfxAcoa\n+tGNB85RXVBCKsftFMafdFVHqkPkcfdByinvkdHrfwKvmxxYTrTy7JIuB5F0\na7nBYLGNyTBQFUgpTiD8h9AnEQfh7Cm6pwMRbASmsukQHiwb0VXXCohrU8zC\npMKfGRVnzpIjjZGhj+f8H2b3/n635LGSnWJkta00EhTvkbN5H2l6uriV7C37\n6tHa\r\n=KMdN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/base":"^0.40.1","@material/theme":"^0.40.1","@material/typography":"^0.40.1","@material/selection-control":"^0.40.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.40.1_1539032839640_0.3173020385427048","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/form-field","version":"0.41.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@0.41.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b318b504ff81fda214dfb6d34290b603517e1cb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.41.0.tgz","fileCount":11,"integrity":"sha512-vNduTfxS1KHCt/NATfX56m7iSXqcemrDq3NMX0txijUQyZ3Sr4xdUQdys+2ky/rBuQTVqBBsc9ixIyHehECaoQ==","signatures":[{"sig":"MEUCIQDUKOFLlSpAAH77FkibUcJNjgREgDjvMS82Tv9WsuSRbQIgc5GLMueH10w6SiuDf49drFMo1bDadigoPFfQXUWrHoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12wDCRA9TVsSAnZWagAAppIP/RSZTR3FoIHLHqVdiWlp\nVtK6laaskt8f6bKYagHMHhXvUqHrdgSjcDnqBTRwYDvGZ21KFQ5gTwjXPEn/\nC3n8/jlZgW8wOJCvd5x6TttDfGYVbK1uAB+Nx/pLat93aHA5vuUipBQGm/ny\nVa0s034i0nQwsWrepiaQuyYxuE4jRyuSVmWSTKs2lk69B6qbQjlw1k8w5zAP\nArAqKPPW/KnpUBUEheLlF8tFa1lLnGv89DvCpaRMVBDX0vrhu/dohZCrBhP9\nfpE+nYokiW/tx9/qHhb0to8hxnLETYBdKJjcJbRDSYRQjBOBT+QrMksn4R19\nPsu4wZL51x/ogpvdjPce52swERX2E/moJQsgkQFUML+AfmDX0M7rPLvqvbTR\nrcmf8kLFrwTxIYVBcpVAkUfpaJC/S5oMtyelc8ZcVRRRD/OrQ8qpO5knqzvr\nBtyf3QHlnOstU/NXzLGyh7qkbnVRkDUIBPl+gsbY1t/8NCC6nk+FEfrJ/xaZ\naDwN2FxETIoafuKwbd01svGsbGKSYLmv5h58szmwf23k56Rdx3It32Ihpbpc\nHMhSPc55/xpRxwuqgT32Vq7GcBVOEk7rAdO81Pkl3hgOgqdBhFfoUec1Dcr3\n0yYuFNk2bztRp5VvqeOXPVAdNw4NYQ6XEN2eJQTrBKuJ0vcwR9fi/moto2jR\nhQof\r\n=S3wQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/rtl":"^0.40.1","@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/typography":"^0.41.0","@material/selection-control":"^0.41.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.41.0_1540844546355_0.6000033141649308","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/form-field","version":"0.42.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@0.42.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ecb792b920174d91f1c97f56e02abeaea3d29da","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.42.0.tgz","fileCount":11,"integrity":"sha512-gOkquw1DpXUu55vl09xNIsjSjDXeeKpPkVX2YzRsDcsvy9++XzjFJyTblSt0DrB4C2Hx86aGihj/FhSLSRBKHA==","signatures":[{"sig":"MEUCIHZf9+WIBPyu0JwD/jLJ2/vqTpG0MwWJLTtdoUMEplb5AiEAn/t9A4Pnz2LH4Vzcn+8xy/2rKaqRG21iIsvEONb5XAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":133095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwXPCRA9TVsSAnZWagAAdw0P/02bYkmqd24Zjgmptayb\nVNamY/wYIOiMbEPdanagvoPiW2UweNnugqeTvghq+eqDXzjuf5LiccKWI71Y\n6XyX6yRCKW+xjepGYGk7Qvz64tYl3LyEVmHOEquhnxklK7ojH63ARbcO4FlH\n3EJpPuUzsnyNd+dk72cltNo4OCLTtRpMVRPzWxXaF0/ZtWCyDpl9iDkLhuTr\neqMlcPnFa7e8pDqWvZUQIFydb0pfkfdGQ+yZAsYQcDo4Tk01+IZ0cs3OkyvJ\nTNFqvyrIYdggHaqjh90iMfkMU9jogmUdUFiQA5xohkRhY3f5UW0rBUzmvHD+\nE0Tk2sPRGJElv8nMaJGwIfhFPeVVMSm04IV3LgiPVSLVFWbAf0kXjJZicGQZ\nPYwpGP+oLdfIX73URaAyFc6i4cdXe7o/ej/4sXohTKVeQvdmRXJT6HBznjXQ\n2y2olP9CFHESiWuRkBFJjfOgWPOg/GSiSFyCacePUdCh3F8iQFJGoEFPo154\nt+4g5dGhUlYH82v+BSHNRuabID8LuuzAbqlr85nPEIoR3mPDFFN5XATbIldU\ntuaEq5O3iN6u+fBrUeOUjp+QpGwoIcKMEtROOpaclk1cfMp+lD08JaYKFQKg\nbvgPO1hWam+9Hj1I1yrm2HWZHW3WvedOD43v8lXtYToNFec+izy6v7zec8hc\nqYmN\r\n=AgFa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/typography":"^0.42.0","@material/selection-control":"^0.42.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.42.0_1543964110860_0.7981362828341478","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/form-field","version":"0.43.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@0.43.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"265feacffc9e71a961247534ed3d280caf04a13b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.43.0.tgz","fileCount":15,"integrity":"sha512-+qdzfeC6SHezi/3hNdOPiUy5+9tSji3mgP64AZrC8BvEaDYrJdrJU2l8aGVusLqWDPM6QI7jDM1vJfwExgD81w==","signatures":[{"sig":"MEQCIDcHl8kz3dsH23nx4oc0Tf042Sp6xKdt36FVyQSyKt5HAiAJorLga5TOczdwcZ51jUSUIChITKx62BEjLJvA+cMmGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":417138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM61PCRA9TVsSAnZWagAAETwQAJO2Ywj3tFetT5xmKkrT\nD7+QMf0MFcHecWVnbrEs7phJu7eo1zqfNtrdJXmndsltbqCDlZ/Evi0olNVQ\n8x+sEMa5Nr+6uc0UK6aomnCWrmTE8BsFi6YLPbvFLep3ZpQVMldk5sYJYxCb\nKjPZfSuairn2tldCjwFAofnM22Xye3OVXrG1xpg8l5eNli5TJyUFGF2dQRKA\nKa9h8ENBC0sYHBW2MBqtgMC81RAcZVKK1bC0EXcyCs8nryjFMGIRg+b8Ur7W\ndF+07BlszVgKbUnm+llIHJ7jPYIXXuq7o+LcEtUe7Rmhytdq8WtFiOEpecFq\n9cHXOWpt5/7HpXxkKvZZCYWoDcQrP6VFWrdHkBe1WTkHyDSaS0/aDhkLeGlq\ntjKLjt3FPER6exF+26sJUqyOl3SY7ZKgAsm1j1sINvmv+btF5RiYYGTtHUxD\nszfao2p3LiyUdMHqzu5/Ql7NS2tDyze5o7EvwVIJmpmvDuKFE6yYfNy+dLZ/\nDjQup6qPmO8Pwm/jUgzBIK3knsTqHHCDooymzmUb4kzz33iPu7T+cKY/AVuT\njBiq6OWbx+54zl6BAK/rNwcaoYPi5RhyjTyQmQTpBmuPUa2tgiT7veT+0aLK\nxw3Zi8N2v4rkfzp+TWRmIAwUkxZoETOSTAmTRp5MnfMc0b0FIGGiJnY6Zohn\nAz2D\r\n=hA1H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/typography":"^0.43.0","@material/selection-control":"^0.43.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.43.0_1546890574535_0.40526689559978424","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/form-field","version":"0.44.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@0.44.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7518e885c0e953a2a5fe0140af927c30e066f4e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.44.0.tgz","fileCount":15,"integrity":"sha512-SK+V34dzoBCQ/CHn5nBp8BAh21Vj9p1pcok+/WpYBTeg4EphTYP2nUQLMNEN92l6zjgAYf+g9Ocj3t26HNHWqA==","signatures":[{"sig":"MEQCIDaUVpDums+fh7ukg9U9XtPCgi8ZYDoJPLE6FprbmCKPAiB2wrwgpcQKdZWwQLpMOLUitHrwXY37S33ZK3HDqHWO2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWINeCRA9TVsSAnZWagAA9ycQAJgw0J9FryDVSmDBwGr/\nPKMeMjzM7EXCD/Q9MVu1v5swhm0nQHvjoW/dBOHmAQuGyqb5Byxu1CZMSatK\n8rWidJeAN0OyOsaVaHT/u9gmbPQXl9ef2rfDgtnYx8zaFpCCLzzI4xHM9qrk\n0ddN/bUMCyVrFy7YvxHwUU/WjdABORPlHUESMXws17GALKy7mK47KDSE0BIZ\nYNM1eu+YkaQecgse1lFjrHS8ixMDvIeJ0dzZjM4WD6PNgNC12qNZzbapTq0x\nmd/hVaBABFMsqeZyWCkwd2wTchZhbogqkt9jcD70qewfgD9HYoSxHX4kgg5C\nwPg10VWi0vZZCqllUOlSzYd55zSMCv4QmN4q1OeNrdBPyjFcbgz452u0z1t6\nKQU16V9i/pGKDu2lR4qRL363Us9MgWDcpDKYCmom9GDAzKlt9YuFxPaZkkgO\n7IT/qseo8Uga9RxSAvTIP98DFt6udGtmRL4DyMRXRDOPHhN9UdRp+f0lW+bR\nmMemivrywChZGwbKOxjTlU4a6DZ6mT8Jin3R1EkiSEkV+m6m5dWVn8YCtSAh\nnCH+yhIHbTIVLelBNC41Grcpz5frAUhN5/eEW8MWGwHEp4K8jbLL6UM9vQ+o\nn0AzVZEcn96Ia6/GLwQ/DrOfa9A1F/kmrXfFUAhjuC+hBUXdY803x8rbsNzv\nkMdW\r\n=AU4H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"10.12.0","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/typography":"^0.44.0","@material/selection-control":"^0.44.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.44.0_1549304669965_0.07252138897609317","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/form-field","version":"0.44.1","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@0.44.1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6ae8245c3a60eacae35067bc8fcaad753801e19","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-0.44.1.tgz","fileCount":15,"integrity":"sha512-ZLhhG6gnUbfp9jtl6ssQVdTUqOVpbhlTxgDS/aMmvR9K+p05u1TiJmUlZ3Aj/MuSg9XlAh7U7hR5tIvjP9BUmw==","signatures":[{"sig":"MEYCIQDHJbVdAFw4dHadr6r5G/iMvDT66/L66vh0iW/yfqH+pwIhAMrWgurCIx8Xqk0SQyoUplwbjyP1pjR53hafwxxtxk5E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIsyCRA9TVsSAnZWagAAyqgP+QBEgCxaGTtrYP7xkHyl\nWLuDLsW/dLRNa5MsUQDg19iFRcDd/mK4uI6nKmrjSdv6GLelLGBN6vDwFgd5\n5BLC1Sbjgv3B44mq4pPXHgJiwhpeSygf763JKo2glvfD5dcTYoT6sBe7GN43\nVxOU8SzFtMwMEVW8+NCgEj1/gOHdIuY5aU1tLCV0Bc7QTjKepKq8YZnlEdek\nejGozwFJQEMIUNz2JCcp+tn0DT5MlpF+VUpwIMIZDQWxzTR8lduzaDFfi7cd\nfxn/GZCQJxi/kuJSgtOXsZ19b8ggj8vDsz/fbjj/aH3ypmkKUQEXgCckB68p\nIMRknCUQIPzBZZFdckPgq/5jY8VSqDKd6LOYuEfRdkbfwM/SV3PDRdfAwuTp\nGuNCYtO6chahS9x6SpLLoleYbhLKFBoA2b1KjRJW95F+o4Jd5NUVX11HR3iU\nbHy7NYZK0H3Ve/+tndKxgathIMKkYarxPBDreBZS2BJmCZ23nTOt/nnHrNjz\nniiMevttcjQ3xX+KOHpqUeu7IuHXEbJco9d4SkQoQVvQ3RDoGH2TMwlMYqE1\ndbvg35V5ajlLwePZUR1mEE859mnIBOhzpqM1q7tLfJQbSoNSR+f1vhNTPXiL\nd/0gqnhxGbKbum05N1c4Xy8ppBKTRRnvsjDX1L1tBHKN+WccGsKPapnk4ylK\n3Fek\r\n=iGQg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/rtl":"^0.42.0","@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/typography":"^0.44.1","@material/selection-control":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_0.44.1_1550617393802_0.5409199134888649","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/form-field","version":"1.0.0-0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@1.0.0-0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bb7ea9f194fdfe9851788754d40add8ad0fa00c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-1.0.0-0.tgz","fileCount":27,"integrity":"sha512-s48uQdhSVK/GzZrg3KJW3S1ZMk2kPcSbdVMOzCXZjPqWyG+wNDW6CJEa7EPYiHnjGJjw2GuCyyCSM1dX9J4VcA==","signatures":[{"sig":"MEYCIQCOGwnhetwL+YJTi/QKS/1uXbNjL14UCHd+s9TtPdSFzQIhAI1a9RP0961gHu0XC7dERWysbyJJm/zao9Ap4GBd5Q0V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":282086,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyRpCRA9TVsSAnZWagAAsX0QAJ2Ud4e68MI4roI4arP4\n7NLDZbqMCdt2+XR105cklKj/KmRl4ZRQkR6V9KM0TbZsPfuYliVJa+B3DEGi\nAYfOjikLA7HsXYbg9/M1+xKiXRMrqK/qJxRH2qdtSl7qKVLJnyAGxZ+Y16ig\n2iaA8fSijK7pkd6ABqGHJl538vC51+a2SRoWkd5Vma2HOckN4vCIObrKDwJS\n1xtCb9qg4VrTAryeA+cCuRnl9W9ZGTV5Ntk7ShYXHdXdErFVoARH+hDohShT\nXxPlTGeB25UF0zc2f7au84UDL03wPePp/fgn6q+Bfm2TA1S1yYE79sLI2kfQ\nTKkFlCRaWWiJwl+SHRZGHg2NQGLmJ+k/IZlGkbxhUkgiONXcpBR9FxDjE81A\nFF8CUbGzZ7QziPioQ4D9R01r6SFdMLoWRxj+FL4+JgV/gBY5/3oji/hvJQuc\nFSIjZogdlzQSgehG7OhV22NafIODF5drO9MYMhMhM1E6kGvQfcixQgOCLVhz\n6scAt9T6mbFOXLpZyWkpnuO4Ri1Fx3Ett/lDR4qJ0DUPmxmiAHRFHjr5HYvN\nXqKjFntbHCj9t5rWjX0k0igLwXJEKLb6FTBqqrEflFQ1pBFCPTqawy6OdIUx\n0Ld3b3XzKvYDPPMkfPP3zRck1G6GEL8T7mpN9fFAeS8HW2x0d4zVWgm3lbx8\nxOvr\r\n=f5nk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.14.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0-0","@material/theme":"^1.0.0-0","@material/ripple":"^1.0.0-0","@material/typography":"^1.0.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_1.0.0-0_1551311977050_0.7547653986655485","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/form-field","version":"1.0.0-1","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@1.0.0-1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe132371f21ee6d74335b894dd70ef2514accbc8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-1.0.0-1.tgz","fileCount":27,"integrity":"sha512-+KHyW/K8eTppqKh8osJlJkIDHQVqp364tDPyCaSN9SlI9M3afcUUcjIJOTsGcs3H7chhppxEuDDs62h+cTEnWw==","signatures":[{"sig":"MEYCIQDnNhhpqGK7/75kokyP8+eKKnnhLpz0Qe6982HNk70/KQIhAIN2lRd3v2aWHYvsYg1gxPBjdHMHhcLQPu4pv9UTc38Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":282140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXLCRA9TVsSAnZWagAAeeYP/RWJyi/AZEXrjB3I0F0U\njTYdTN65wvPwFTkCuXTWiI2rZGUs6HSORJYVmbNFxEvGG8xCB4vVEMarW5Lo\nZkuWzqNeWj/RtZ9yR4tMQiDovFMynxrspWvCm8vvN93mwZXhTPGCnHx6mlWW\nzUceUsHFdXpeYpieQKYilB7DVH0/g9Nhxq+bmZIXtn2tdRe3T3sq36H5Y9FD\nouDfojAlisEPeD+whqnaPth+eO+HHv5gotLtAYP2UV3OcOmlvQXMuic2dCDR\n9MXaM3iv//5RnK972p9j7y+1+cnnYpsEz8V8fOxuhtaS7BEvMjODCI1BqSMA\nT7vc2kYH/Zd9ZPPmTK56furZrklmRc/nG3ZoQ+r3f81bGKgXR8NsSFGU5xqj\nGdNrG43hlDM9RBVdC3Wci8dcppHzNQAVdJNGilrLKp8Ic0XT8G0phNV0GHft\nGfOemGWqE1GAXk32+vna1EJ++Kt3XME+Kv59B7RbPnrJLhJMGk/HvFMGShoQ\nzUd0IrwrMX6Qeffg1LgXpQRZSdYELcfpBYpAmTgiGOSG8YqDSgqxyqH8G+kK\nQ+4EwvRISKJhq/c+SIrz7DO+S4jhmTBQcjsJLdSlbu9LUqgQZtFJyMmRGDib\nRQS4OS9CdZ8j4ZZdSTNRvnqdw/Fc0TPornC5lHqqU3VvLUckq/PwS/IanpR/\nP1nI\r\n=Jb7g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/ripple":"^1.0.0-1","@material/typography":"^1.0.0-1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_1.0.0-1_1551742411128_0.30303101169572577","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/form-field","version":"1.0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@1.0.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd8b17f72f146f035cd60dc6f2f24990c5af627b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-1.0.0.tgz","fileCount":27,"integrity":"sha512-kCJ93ROW4u+PW8jKo/ORlwM0vxxEobYR64lQddI8qSPGVoOL0zh4OHs/MqR4QQo8SxdYYunXV3K1x43U9T6yvg==","signatures":[{"sig":"MEQCIBnxACI5eDbC/FqG7aLQPPfrydW3pkN3IcgrD7BY81zXAiBpYPXcV2ibnH0KJ49UhhjQcl6DJZfU0V4W94cvEEPHsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":282130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDbGCRA9TVsSAnZWagAAyFYP/0XruuOyTI8R5uUv1/ys\nihzp+jlkmDr04FTsSID26ECYaaq1XfywJRSI0cU/JwsUJKoI5IBzIs8OeNSA\nrcem5lyaQnn2ikxp+O2XXUh0OtvuTArJz003HnB56bu2GO85cw8mDvzPF1Oa\nM5gnHIjvg8bU688Xf+Pa6o2UwMFYjXiYKdMXi4cxv7OXKDmqHyWUKxF2Q8bF\nckEtytSMVEOxs0lY91x8ChKXmPuMf1wDfyp1HJRkxuyvsNnNfZd8oBc/sYhY\nR5hwvEmbJCFZ0FXozsTVg6zBvunyyE0nBMvUZS1sYmYsqqbqlgn5zP4Adlzx\nD56qJZtoJfUZxq3QY0qgsCv0vfZD66UgrzkBuy7K8mT4UCovavVgBceDfsrY\nCn3rRBfYgRS249yxfaQDoHV57HyPOOEPBGHDohkxi2OLDHBEjk3VxTbfLV9m\n9eea/OqMo6yb+aErT9+IomCQjtlQfh1xoHmJbRz1QRxprDRj2U4gsvgMWDZH\n0Ptz6QS9d/ZdTfr8OG+VeLoiOYX9uB+m7xKyd04ZLzuQAsCRXvDJNTSUiGb4\nOxisNQZuYwD/8Z4n7UNa9qywbBNAkktBvA/2jPwU5b9TO2CVujJikBr4y8X9\nX86SramgQeQFko9uts6FCKO8ZrOlUUMVP3N5a9PW/0iDqXrrIhNYNIYC48jP\nbLBE\r\n=cE2e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.0.0","@material/ripple":"^1.0.0","@material/typography":"^1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_1.0.0_1551906501231_0.7624354382956793","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@material/form-field","version":"1.0.1","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@1.0.1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67832a4132dec8f1d715cf90703324943f918081","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-1.0.1.tgz","fileCount":27,"integrity":"sha512-waYkRZvREMPawjO6f7FYeoxbX+ewtA6j1jwL/YEza9gR2kKjCCNDHMcTDT2FlnrWvtePTfgmYD6RmptCfFw4og==","signatures":[{"sig":"MEUCIF9UpYcDnAc2Fdb59+5kMJxFDPBTsp6FbqNLhtSUsdfIAiEAurjNKzOvY088Vu7o+NCGQHb3FuUGUj9ggEDYlJ9i7I8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchtwrCRA9TVsSAnZWagAASxEP/Rtz2TVqMIcPPADOMbuv\nF2Sqt3+4g3WVdwxD/sjca8Y3lj3QCHKk2Nva4PhHpdbpOSaV4a4Zn8ivaiun\nUueF9P3U3amre/mAI+kZgS/VFzT+mWv9G2duZ0hKer9M907xg2QDm2SriZIK\nXfWAK05UAf0L3umdQw3C4eSJFqI+09sOitL2YT+oBednskgOMviCuun3Oh/w\nbQXoiVJm9/gHI/rjkRY1ZfZofayaeD4EQER1l6uolmL/ZlicLG8RvpPFSYvC\nLG3fqXTB9AZt/7WAbFYtOztf5qpUCMuFT98mTmOksMeOhVXBrInrZOODE/9H\npbFNmn9MsG6ZlVNIRAyaZ8q2qqdzsTQ7NMZgoCTBPChWvk05oDUUTOGpHiZa\nlsrRrpNKTO961xI5ipcEzjdCUkq/SzOWrRwUe6GB4O3i3b0/nRXduWyjmHx1\nmANxRbRm/14sDpbC15Bl+GorVtmGHGb0oCxznL7x9hfqhThfGAr+p1l5B//y\nYX6t7AP80uyMi/A29e0Xrh8LFKU1Pwo5S6zM4M8uYz3sfH8RkRSPZB6XasQk\nfX5wNzas/iyXGuMJ/pOpKAuZJtxvIKTVj+J/Rfk25lad/MzolRSgFtGEn1+y\n8ZWaq6dgNiUGGAKmtgcR9d7cT57ylMXfiMESdHLenVQp9H+bt4x/PF7Q6bt7\nUbTa\r\n=ZB/r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.0.0","@material/ripple":"^1.0.1","@material/typography":"^1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_1.0.1_1552342051722_0.6901761372277992","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/form-field","version":"1.1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@1.1.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4def529d10c416840bdfe5988a320b8c491e7cc1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-1.1.0.tgz","fileCount":29,"integrity":"sha512-/m382G90rctenVAbPwTzAVtQGm9Bjnnvde03WPijFE6kirczi6pJWns+cFtN///e5nUc5fhBwNdpEnJmoUYvQg==","signatures":[{"sig":"MEQCIECg/r80j9qXP5byh4WBJUZbv3IUvmHw6xKcK6H5xk0bAiB6koJA8TXmmnlIJ8x3IUw5ru/gmCixSlir8I34KcBiFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmnzJCRA9TVsSAnZWagAAFmEP/RBrfxIzrwzxgiB0Meak\nXVcjXdw3t26OiRVW242OCHmT+j106dGWF6j5gSucxC0Yw32nwU2F+rtL8upv\nrGpmxkwHDDpwL0YtF71dW1sUm/JZW+f+1y2aHfbHufcFFfrfR+SOwxuiA+W+\nAN3PSfi23GbhHGteJQXpqKCq3NkFdHDJiUBQ4xpoHvrNjpdFPwZdEHnkoQQh\n0QizDjKvX9BKlfQ38Qyhfum4fepLEFuR1sd+bRU3ryukeeSzIgV69rfRpuGS\no+na6AAnkTklBHGHf2o4jT0fFwzKR8kBMVkJLZmK4dbBF10vZ0X/+nxLB9tS\nxuRXs/uxyT2p/EkmkpDf4ZI5F31uDDeZ4WLjKPxDGpeG3VIYchyppC1T1qNK\nho9OO0Wbv3iXTGjcIJR8c+fF2p0B+gy9kOlFMRlQxU6DAp70+w3h0uHwMBUR\n6N9aMnnOx0IuU3KDy61IZ5r5sG0IXc+2aMOSZEWwR2G6cec8++805SljJF4y\n7iyTx5SrBlEpbDvJEjmjs3ONYsm0VVqN3dSwl+j8UpTOU9RvS0tnrXz+YF4v\nkMi/R5uC26xidxptWujA82BJOhGi1g9SWq74LegcCO+V09vUXs6WfSLJk6qn\nEOr5TtdXTOgZHH7Q6VJjwuVuxiP6qQile/7WlTj3QVO+VNoN0k7mbYg4yY/h\nHne0\r\n=+sxD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^1.1.0","@material/typography":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_1.1.0_1553628360231_0.016510407639630742","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@material/form-field","version":"2.0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@2.0.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f3c1043e90467969427aef538218ac2292d614e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-2.0.0.tgz","fileCount":29,"integrity":"sha512-p284isGnWffT1w6LQwkKs5i/Ft71a498nds9VQ2bQLMYOzomJ4z6kfZFd+QTUfpu6gBokWPc2XgB7LBi0bNL5Q==","signatures":[{"sig":"MEUCIBhjulmnQafLh/Xleo2u+FcazmwKHBBQo3hNE0jdXrlPAiEAqbx+ARvepJoRRo1anK+70W+aiXR0/NIISv8nYFgCL3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxzb8CRA9TVsSAnZWagAAznEP/0wee9Bbx4zC216AJmyk\naqNBHn4NIu8RHHzNMbiaVQmaEmkshwUeQ4vF80vJOFidGngbIXC8qJ6LMaYV\nJZBfjRoO/Ldz4NNj28zRxT/36lADxLMndLhcKJ+GaSdaza/rLougGuYk5oaP\nEhxdoZlvCHKw6w0+yMPN2y8/rOaGLnSVVohGrC5lnX4AyUmh6uBPiKuYyXqA\niNnvcMprcP/IxZa2hNGQMPh1l/rBwl1l54cS0ty7ElCsnTXCNhG9WLGQ9Rwx\n1aQ4J6qTirSGgMxgoy1zo1R9RxVlx9v9YOYXgjwaWTF+5RzWpc++A74VI4Wc\nwuPSTbBDJ7FTZtZDFkAOKiYaJBKf6BOfpEM1BTtUn6d2A105dnLv0ELnZH69\nb9s2+y6De6NmTcjN+xdd1CoDh9Nh4riKAedWm2Ud+ovugsndD+9YoMA6jGY3\ngu9mZmFYZ7o7Aps2Y1auMbXi0UnyAZttW7m2U4LQLpUFRwT2MygXFZvmoO16\nQoMPq0PIbmJXmlM/aRbsallNglRdkBRD4w4ammamoH7FzgaNirHk8lhgVwoo\nienGPN97ZBds/hcnVcySqodMUNx9OOmN3E6ZpN7skbk4kdEMhbJTUFADG52z\nXLJePvmg+dXB9dAkD/Q79G+J2nrI/bMpJyKxDRBgkFX/JmLfceNeMTf0KbxN\nOcgX\r\n=/4gx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^2.0.0","@material/typography":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_2.0.0_1556559611168_0.9905092695061293","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@material/form-field","version":"2.1.1","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@2.1.1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c90b4f14cddc0d333e86e13b6f1b206b9b72ec64","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-2.1.1.tgz","fileCount":29,"integrity":"sha512-5hbW+jQoC5svJlTgaQG5MH+4MVtL5mbMfCHhfbvOJQ/kVPZpGKEJfdWCWvJcyrh/1KLPYU3OTh6k69OC3qcDCg==","signatures":[{"sig":"MEUCIQD6CsAd6G0aIn+s1laW7WfcDqf0ut7aCtGWxpmzwxUuzAIgOhxoOHdQ2ha1D1vZUrff4IQbFN/4vH8wZUc83BwUsFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":202797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1bP+CRA9TVsSAnZWagAAm38P+wblHSRCWmIQHHz05vvR\nzu/f7m0SGk32Ig7EddiCQKTywYF5/Tbgp8rSYqDFftflf+X1s4FTbY6CJ52i\n15YMZMaOXp5qiCQOyONHUQeWNZy6LvyxxPX6Qd12E7nWqyViKFSPc9XK/k5X\ni0bqKHe4Q6Uk4kLfpT5EELCiEUaXCmoJ8nCUCSNO2/sc2TdUXCsiCkRAg96j\nv5OiBqKm9N7MhOMRTXv5Cy7V7XLsL9aG/u2lF9LlCXlRKQtAUv32T/vdfLLW\nF9Ze5LObzV/ICMwa8mM2RprgWsPulLD9izxcTXK3kpc1sTJT+OiOHUQ+jMB5\n6yUpGvxOKMqT/mw3NONNCyxO9cxV+X5hXpvdTMV9rhn/jI0SiQepAQjgRksf\ncJJzs35w1PDoJxN4b5Kd3jjSHzXxT3NOY2E+l9dwbAiyII5NmcTnY3CFrUFx\nPYur3iWe5AycA6FC8tPCqzTZta/Mh6Z5UPebHVx1Habv7nQdyrnR820UM89O\ns6grScEaW+NjGns3Q/ZDGxirMQ2rDBXaX29/Udf5McqUfG2+VJC7YZQl/LsF\nQmY370JyZJ4e54h3hZ6lWqzM/pERwb9WXBL7rC6spaskO+AhIC4gT+ug6lKi\n1fODnO69pWaU0Q1/485V6SaolI9CTX6MNwt2XoDyX6hG3cR+zrgtA3OUsJWm\nuppH\r\n=kNlc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^2.1.1","@material/typography":"^1.0.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_2.1.1_1557509118151_0.7666076734511147","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/form-field","version":"2.3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@2.3.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f36b50ad8c96d6aa856fa74084e5e2128218724","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-2.3.0.tgz","fileCount":29,"integrity":"sha512-f+RmxxoARS1UV5/yLhZJ9x2b7ueSKZJJCvaUfuppbv/oIkas0dYeW6lIkGo1ienNZyr2ZdW/j2KiL47LahYP/Q==","signatures":[{"sig":"MEQCIEoCHL1DjuubG3X2P6pJI1VRTXiUFzuNoABQ6V06EXlJAiB8TyTDk4c6unxZmENpKe616RamIBiyw1WGaNr+fdMPkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":204534,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7abrCRA9TVsSAnZWagAAdkMQAIqCVhN8DrRWRE1LK51n\na7gvmr4LZedaYwMsd0iv43U4TLVi1gEsvA/tfhgTAUyFBqVcvLvnasZzoCWp\nXjukQzR/NqDDoUGvwUJDYKi2IicdzKf6N/GFiaZTNX0INd0rBNkREqTKHTXS\neBfgzmAJ7IWiqzj/xF1qDBhgeXAA3maLdgWBswnZ3T7whys+rlBD/XQJ0wKa\nRzicaQt7P6fZIZJQcgMqLSSpS8KbPr3ai6b+rLh+2TvCz00Do1t2x3xYGKbr\nqfdYQLV3UqK4lOjDOhkegb4hemflh1X2dOcmGDDDRfd6qSwmKWWdiuGcWx1E\n6ctFoufBTYTXWFHX0WnrpbrV/y6tMAPNgw+oJZzxWhbxmhz04gaWC9ptiggZ\nf1HOOzkx1DUDflgeulNJq29q701A/exIcyRbyCnZLPKzTR5vCKJ8DPoLedgL\n05m46be8Txljh78pb5WjqlhUZJBE+js5pcS7/pg2I29rUoZcN8iIbexczhRE\nP/A1yQHJDjOUmjl06c8Jdc3quBaVfpZibqOpEZtfdfkxhORKZbnqKXEzGts1\n4sHdZMBGESkhTodkcA5hA5MgjNZ7pgbKbhVPNMKAhuBkwscsWfqfeShrWgVr\noGfFtTxWookW+jtW6IbnRa+9KKdGiaqIUXnr4zvym2tv3g6aqDRMygQEpP63\nOm1y\r\n=0GhW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/ripple":"^2.3.0","@material/typography":"^2.3.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_2.3.0_1559078634080_0.3202166006874967","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/form-field","version":"3.0.0-alpha.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@3.0.0-alpha.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3488c1765d4a98a7b49ed7d196cfb31c31dd5b5d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-3.0.0-alpha.0.tgz","fileCount":30,"integrity":"sha512-DcnE+2CymCmNtamnSDtZCTMbWlovh+WYyfe//KE+WXcEi+hSBO8yyFPtYMGw3rR67vQXEU8GTAVi8Dz+dp2QlQ==","signatures":[{"sig":"MEUCIQCsdi0CqCR4OMAI2GWV5eQuyBqxLLIbKlYv1W2XejbESgIgA0Qn/ajH8rw3/YYwbgeee+Xxcm2MgjqxpIVJJsIaFP0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpjCRA9TVsSAnZWagAAmncQAJh07x2WdluRkVCahcA2\nuoMR1tydOYXrgMhXdxnSnS1muyKD7GRHJJAIf8N4Y15wiakTWzypD+A53ZuK\nhrzqBk+PAMfrJOkKvMIYVho3X1kvMfDUK7oIKfQ4b3HnNIz8PUhFfYkXNLSc\nQQOln9+yRtyTf0D9r/6hDNsarG98aqMw9tg9YoXL+XKnMCDOCn2zBl0eteZL\nwVKdkCWpyoKJ7fEr0kBsO7u8ksK+2n9CSRF1yVZUGLK/r17w7WBjQ7XkkDpO\nAOE+uR3RAOB8cXWzPIUwQEnx+Lp+xHhaRK5geKrC4InmTBCJR2hXEVap9hnW\nGArFtcyRzeozxQJg5UFC1ji6xmZHT10CuMsbWkyeBB9nut/waEjNcDHhlJnS\nlhBjPdCQfcnNBCE/d09Iuuo7EfJ6e2KQjlWPn4QXmM5kX9LlFdpF3FfPhM6q\nqr37R/+xWCd9cFd6DYSjVe9u/6y7XBChAl6YtQTImpZCC24gGCwBLw9YOeq7\nO/py5HeVZknM+xG7m5wyYSSTU/oSqguUCWn/CwvUtllJxPaAuIPjiE7kJvDf\nPYsCqwzKQxx0zP+4q0e1kiJLDx2R/MbWME4Jsj+O53a6ttkv8V9PqDSYZ8yQ\nRpeq/fEnmkGUzY+UMlJPxsmhrJ9TUpS+QmkBO5QYDUGdg4SgsekpJ70KfyXx\nWk28\r\n=wnJY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^3.0.0-alpha.0","@material/ripple":"^3.0.0-alpha.0","@material/typography":"^3.0.0-alpha.0","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_3.0.0-alpha.0_1560312418836_0.564133012158061","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/form-field","version":"3.0.0-alpha.1","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@3.0.0-alpha.1","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddc8304819130a674a424a6a1ca1d3acdc6b6929","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-3.0.0-alpha.1.tgz","fileCount":30,"integrity":"sha512-7PH6Mbp5rClV0IYGp1uU2lg614S6nD1Brn6h1hBO9RAJD3YkvA1ZQ2LINFqFppUh+EaLV8Io+nXecxjGPH/BLg==","signatures":[{"sig":"MEUCIFjBTsHeB+8XclbSZuA55LoT1chR3bQuYprQgXWlK3wDAiEAg603gAUrkGfQcjNHWoTss6LDo8+XrvATOqtwtwhc8IM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":205701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUw8CRA9TVsSAnZWagAAjGYQAItPk9XEIQ7hdnFHgOdk\ntb74lb7DJIuf1/O2PB2txTi7yt8yNVSuDxWlQa6Kc96+IMblye9A2aN/0g/m\nmMXQukf44wpECBMgeqby6lBRhnpwyl63gU640oZ608ddPK98mQIdZalZvkvi\ns9rw44AiiXSpLU0n+p614ifWb1Rc9wQQL44918ccxxrX4sx2XSsQhdidCBj+\nPL4HAy7TjTA/rTagkSTL35io3e2Mw3GdXPCeoWZQaDHu0J1lPVGnhmMs0yld\nfokEZHrho7FnZ4c5he8b12jxBWX+6rbkoVnKdkZTe3iiBGByUrhJMDWsZbOw\nCfKWT7uEK30nZuCBoHvJZm5fXamKleWeBP1gyQ2Z2gIFHVmPIy+Z8Qst4ggQ\ng4PX4r9KhCBZHHvjTM31XKeI/bwgQb/tiFkdkATeYSTgdd8drB9tMK534U+T\n7ScDHiFNfN8qmX1dliQyYhycejl1mi9tIT9Adli/cqnlmZRtwxZSpqLPMroH\n0QJu84mjfcC1rS5kebd4SqBYvO0c+n9qpgnpljMgHL2tD2Z93dEBcMVxjrOx\nUYFBptgNwPZZ4TwqC6dy5qcFwBiKLfDAdgP3qcpTPZYu81LDeA/kOem0IgFH\nQZrna/WhzunMzt7snxn1GPN5ynOKQekfc0b7h+2PxvOjtkhwA7CI5IF6IQ9d\nDBh+\r\n=5KnJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^0.42.0","@material/base":"^1.0.0","@material/theme":"^3.0.0-alpha.1","@material/ripple":"^3.0.0-alpha.1","@material/typography":"^3.0.0-alpha.1","@material/feature-targeting":"^0.44.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_3.0.0-alpha.1_1560366139849_0.3514181488672199","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/form-field","version":"3.0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@3.0.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f6f6b71e2a1fc17daee718840beff0b9fa349c5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-3.0.0.tgz","fileCount":31,"integrity":"sha512-eSykpOIx/SSGiBB8tMRKr3+MQKbNzBR6ku8Nr7RiLqHQfL4DL3YnwJwtBM6L+8gOA2CJ2L/G6D/04/PZ28GbzA==","signatures":[{"sig":"MEYCIQDMhapI7rY4ibEreRaRtv6KBCaPFWow/zku5KmcHPxb8wIhAJwFpGXPjv4vY8OKlTh+iBTyNWXwIBgDsZ5H2cH4UBTd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":206822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/uCRA9TVsSAnZWagAAQfsP/12OPRYiqfDyMStazDxe\nN4XJ5sdlAAlzUNofCKxBKfFHwWW5U4KsxCuKnFvjW8qzwCy5ZvQQQQ5LDr9i\nQvDffYaL74Izq7pz7xt3dQiDMpMWQ8/o9gAFqdMiEbxNJDKUeinCFfhpCKfm\nqZYEPDLS8QPcFVCWdWPJNBvGM2ijFXdZi2IggeqskMhDf/Wl+Y5WedFmLswO\nktQTctzbsROHmfX/RxfiAbpZNAXv1eWSit5z1mnwUt3o/49x2em4wiIxopaz\nRRXOsaeEAAQHgXulGJ2xfGWh7z3gIiU7yfQawdfG6uNAF9HTxjuASo/FFTCK\nHcJeksFLLKp9WtVphuezp94HVE/OAOmJAgOQIrMjiPB2vGGy3hbzosLaYF0e\nGgjyGPBtxTU9l/Nz4vgEPgQEcXmybmgNkhJgFIIil6KoPFLLthnFzVcj2dTc\nff98i3QO1PZIg7A/ZFNQppJ9E+qd8Mi4GjI/Agz0CHP7ERKjANUX4a/kN5TM\nhFzUadF/gHXkUUD7HBFgYg3jqQEWdNsnZ5UUjNrCkuwtqbjiczqm1rcjy0bT\n2cnYug+Thgq/hlzG/MMOoOByh/dnj7YgNQo54+PAGrrAerM3t+XReH13bGFB\n326JkEOtUWuo1oRqVUij/NeUNEulPicRrgLpGavgquenSTxzoUKNlcZZWimr\ncWYX\r\n=8zXn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v10.13.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/theme":"^3.0.0","@material/ripple":"^3.0.0","@material/typography":"^3.0.0","@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_3.0.0_1561501677719_0.6209175623539092","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/form-field","version":"3.1.0-alpha.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@3.1.0-alpha.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f08a4080dfc128b6822f0677a35ba8087da4c8e1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-3.1.0-alpha.0.tgz","fileCount":30,"integrity":"sha512-SSIs8yf80A9xcz+Lod2g1VobgsI8IBGPHnZYGULoAevHsvUVuV9DBg1rf6z31h96N/ZsadISxwMwi5LoCJVM6A==","signatures":[{"sig":"MEYCIQD1fSpXUNmEEYoG1q70s4t+jGLf6UEt1LvTbuXM0mfCZgIhAOpbtWRS97notAtPuqVMqmbDh6Q/dsJOzXiSUIYYX2/4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":133526,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdEtCRA9TVsSAnZWagAAA8YP/RSRxM/wNS8HwBfpxuBp\nr0VNeDA3by8JMmRIReZAGDfXUKsWoW1/DCiKATeawu1FFF+VsAbQ+zVWcTA+\nFae4HCeDABoL67KF2TLFAgTtTFJUg8h5H7dICsuqLL3JFK/6DlRwP/itdQfO\n5jwAVmJhy5wGPt6O73xV4r1vzAef2ZGl0NypGEGmJ+hBysbh3YFpaW3+osGH\nSyifJsCOJha9Y0OlQRpxn94LjCtL2BuqY6trTMayFblw6KBFknpbMPqRP6aS\nV92QC8Y85fOoVld5guxhESxvGQOkCaqGA9ihFCvHirmtgIhehlXysa1lycgS\nS09J6vF5Xsqb/75ynrdyPKVZTMP4yzCzAo/smuZ9hZmMztIn0qvvad9SpIBg\nEM7N/m2Yknu3o+BThZZ64cy2VixZbLTpl/kYeG0RVL79XUe8fnjWI2E9ZzCC\nQ9mrxDd36pkbNDWKlCkYxF9GF/MmtI3M5fpgbsQLAAap390AFVdi/4sEXPs9\n9ndA1YHkrCl5qptMjyLGZQGa/T+diSY8T6BQBCFS9DnRz48RRQN2gyf9nxNn\n4ASX7QxFPi5/lGBrJK1PjQsW4UVidHIoT3lKUd+SRG8eur3L12UMTyCcn0us\nRyr5VxkZfqE56KLRJ9Ja5nsIn7xRWfJfWYF2davhYV/e98GpFHE6vZ2NNdsb\nF6Ta\r\n=4TWs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"42b485550d87a4c3328a07847b4070d15f09af8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^3.0.0","@material/base":"^3.0.0","@material/theme":"^3.1.0-alpha.0","@material/ripple":"^3.1.0-alpha.0","@material/typography":"^3.0.0","@material/feature-targeting":"^3.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_3.1.0-alpha.0_1563283756652_0.47488149451780326","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/form-field","version":"3.1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@3.1.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08e3dabd7e2be4e5831023b486975f5690f0897c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-3.1.0.tgz","fileCount":30,"integrity":"sha512-LnT9DRj/JRgkx46zHKt4H4VyYAMNO9rsvpsat7/dStN1o1ZSNCtHfkQDqVfXz93iDP58sEsLMbgTgh05xrg/Kw==","signatures":[{"sig":"MEQCIHOGb82UFX+0XCw6FD72NyMgzoWqafVhnk0Rw2yEMd5XAiAfuhR2DrvQTISE0B27pg/wRQUIilUdwgq3wtPa3yCt3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":133915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjKACRA9TVsSAnZWagAAf3gQAI31hT6WF/9Uf47vCtaH\njdQzmmRtufXySz05wSt4/S6bpYcSxcLPtrnWEkYBMDeo6mF0FwMwrJufBsC2\nrrdQbA9SLCHGgLoYPkVgpoCeR5NVZV5oKV6O3y4yIX3SFzZRItNRaSpdoiKe\n0xJni4+STOrZO6J3+WlikOLmnl9vCd4UeQvEKiHwyGC7Fxs1uS9MbA9ZdDS8\n/shTsMGF42ickrvlyusFRdcouEgVmjBltYioJGcVk+rBs8DpXCl9ARXq54q1\n+XW05P3IZRFQTZVlH98hPYz6rgGYUC/VERWxy9DH+lqa8Bx6lLNhhE9X2AQ+\nJL/V83pOwFWJxRBSO2EFaCx4+crU9mvcb5cPsXAJ+6eiLg5PDd0fSl5+mm+X\njONCQdni5JEDoeZFrjs1c6jXvqHRM0QcIUaKQ6nIeBp555yj1h5fGkw3f16q\nQhpwjcZmwmegFB8queV/CqLCfTi2DocA+J+tM+AVQD0dZvDBJvbJMrLNlTlT\nUVv6+z2PhD1HJf7GNDgVgES2gLIg5Zwp5igsCUH7bi0rt9BaGEgQmcSOxx0e\nuUGeVC1PQYgSkBHEugjumQJ6Z6VHAW/r8EYj/RQS/zVv1J/WOvBguqOqFYZm\nB6jm5Y1DjKdkFfZrEFKISiwZSIbVd7tcg/58wmJhLpoTXGId2L50icoPyGSf\n2luy\r\n=UgRZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^3.1.0","@material/base":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.1.0","@material/typography":"^3.1.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_3.1.0_1563832959363_0.20882272102952815","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/form-field","version":"4.0.0-alpha.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-alpha.0","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":"bicknellr","email":"bicknellr@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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b9985c6d38ff30af86866644ff1bfc78c84646e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-alpha.0.tgz","fileCount":30,"integrity":"sha512-TeXSxPtn2Kybkw/eLzT62y0JmMoVVEc18+XQwslNLMfZqgxQXQutxUUuMZX4cJyiiyikeCk4WytzmoPXFVq35w==","signatures":[{"sig":"MEYCIQCEHiRXV/aD5UDyjwstiiEN2roBkrMgaoDLsgAIXmM5cQIhAOj1wsZR5UTDAWCNizj7N2sh8asliQl4dmgJn7lDgyIH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":134165,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4XCRA9TVsSAnZWagAAyo0P/3UZHHewDCSTYVqdhViQ\nFM8wsw+BYp22jkkx12ouc/pnv8ogyEcNIt6+QmMmyW9GodyfViXoIO7zCsyg\n2opfm+sjSJ2AMv8Yd5SWNqmXrkGjeaRg1qXa5ulEP3ahBsIbuk3HbeH8wC/z\nsEQr80gHCyQfNyJAHkevid2SDNaiOCMwMTyav182Bx73iq8Il3MS1HnSZgr+\ny/0Yh+rCieyWNJDTiPM42wWV9TTSxqpAI7pJs+4ynIGiIWOUM+af8QB44Y11\ntN3f0tAys90s0VQMIekbA2+TUhlVMcnDgVQhJncCd7/UhC+EHGlKnMkhrzGk\n6TibwRklSiYZ6dymrcWJI7cwzQUivVCNI5ep5mNaBEggUBFzONp/xrhBxCCg\ngcUZh1bgYtXUssnmqZKtrBQfszFtVPNu1RSB1RPAo+li7aF17sszLCx2ZpIB\ndOPtWCT/XDMNxQkW3FCQwJU5DhO5I6I2Omgedu79/Vnq8hQBy24DtxTFRHCy\nfhzhQK2fCVFSBZpvudhs6N6SkpK5CvCLFWpa6Vw7wSOMmIPzBqrDqvQNsU3s\nKWqlf2wtRmbLZH7XgtNphIIgjh3OJaf1/VUcuDIoobCGmHc7rWJZdXMWNBWP\nYrenCCsPm8hZnBb9QQLTULDQOEHbMco0U9QTc7rKgxOKN8K3D7yGk/P2FwCh\nDV7J\r\n=YV45\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"184b37f65b79a260f2835bd44e422dab2402d937","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-alpha.0","@material/base":"^4.0.0-alpha.0","@material/theme":"^4.0.0-alpha.0","@material/ripple":"^4.0.0-alpha.0","@material/typography":"^4.0.0-alpha.0","@material/feature-targeting":"^4.0.0-alpha.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-alpha.0_1565212175972_0.6487424663246597","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/form-field","version":"4.0.0-canary.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eaeea253e79dc22d6df2b9c798b33106860e308d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.0.tgz","fileCount":30,"integrity":"sha512-LdQYf21bqYwXeQdiY/vTorzugfv5ewG3c4U8pg3MdawULEjZ6cXO06rT1RpkAa/iyHlkr3HS43Ut50Gml0gPwg==","signatures":[{"sig":"MEQCICsiPtM5v1172yQY3Z0lFf3IQ1qURK8wb9Qmt2/wAF47AiBPyJETyTL9HNbMAEOq0x1q4I/fVK+g9VENlhDPCGTmfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":135322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEnCRA9TVsSAnZWagAALYIP/j0mPxVE0XcqjBkp4tzU\nuQ1dYtTxysPrX65nKB5DbR7PtW3BjyI7ylkXEDdqSr5EoNCVufnNQXlwCny7\nmthaJ4xOmVmmkmBln53te6DEb/x50hBMbDJRWGAY71aIDMg+0rXz9xV+46Y5\nK8gMn3j8Yl9tNx6h6B7yOStan6AtPfU2MTk5KL7A2GH5DZReV7UfduGGHC67\n08314TPN04CCZVspwwoK3saBnVseT4oGbmA4HF3g2jd6SLPYGvTlhQ84TPWr\nSOPvS+eISNOcxMcHAgHUN7yi90MDeyPjK4fMsy5BpjatZX8rl1LZbQkoGFgw\nLWwRnedDvgRF7IKrd6SBRIIvjj9rtT7sjzH0eskueLfZyfaTzjZ/OjlnT/Yl\nlmkVuzofkdEVO922+IQh1UJzVXX+piNtQweXFofoX45v0pCEECwIaGImGKUz\nD3zzrHxB0A0bughUpMLoTQaXyrcugo1Ock7iohZW99Ujgj6oZAnDVjGvp+vP\nFkZInTzGGf6LDrrBpwJviRUcOKRa9qucSclEIzklF6ny9V3w/GViI6xDlxOi\nZIc3UqxwlwG9OSAnIUP35vCrNPvneJKVMDBiHNfWQrU2YfLg30gWNspQm4ob\nPgCT3Lbb7QbZMx5KLgJaerZ7z+H5GH+5wn+iG40UuLs4daGpXaEvwGXT4B9t\nW1BR\r\n=Vt/n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.0","@material/base":"^4.0.0-canary.0","@material/theme":"^4.0.0-canary.0","@material/ripple":"^4.0.0-canary.0","@material/typography":"^4.0.0-canary.0","@material/feature-targeting":"^4.0.0-canary.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.0_1567658279374_0.6235260320560614","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/form-field","version":"4.0.0-canary.1","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89cb67c839cc5b794de9f14954fe1bbbc73075d7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.1.tgz","fileCount":30,"integrity":"sha512-xlRN48JUCXR8pHXhHmLHoAcFdutotp9F7rb9oxfI0JSVCYW1xLO4eM8XdjTD8huuLH4hQo2gw35COGWJU7ULjA==","signatures":[{"sig":"MEQCIBX18JfZEahPD2WD5MDMBvyMl0dTtLrnL8T2dAyq+I9CAiBMcvaXGuXee93L0w1KGkWpWG7UwxpzEHMOxNLaUV6r/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":135714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQmCRA9TVsSAnZWagAA+04P/1imjrNJrjOFQXe30X8s\nvRLsr7uGEYdu5kWVByzbvjzOonjuGG6OkBq4pzJPWNLkpSRPPQ6whPMNmvUp\nIzjd8YGTQ1smfKUHGQJULnT9tYPG6kt4PHMrWABjvNUJfGIk1nmBX/AIsoIa\nqQh91oYXOV3p3f6BR4rPxd4869w4vcDkUjWm4vWpq32Ty11ddezfWOLE7LOt\nr1p9l1o4YhUgXoWuKczgFhpeh0lyMl/F9ikEm7OqXKio2huNmKuukMPL1zl1\ncjSCdMiZ6NufasRSHVehXfkADWiHxGa+L9qbtbsoHxW2PLYxeI5e16VACpw1\nmHVDwUR+IjqWTsek2ujJ3liOZXY6j/XTdlk8S5b41+oyGs2CakUlvjnbMbsu\nlNgBYnO9EY7v2t+677FNS+DQD6L4p6ssH/UFQ/UpbQCmmY7tbZf2xjD9kHlJ\n++I1zALAGLrLc86f3fJ6M3VyIicmOSgQq6CunHzhl8vaM4qOD3oFdOaLBeuB\n21CKPUG93Gol/D8it7sWrsmzIxVJ3SvIumqTel12KqFzyJkNkNB0PYi8ohHk\nMbFqoEOKx/na6Cma/2F1psdP1qcauYUxPbofLtXsB1VbULjmlUCeDSWq+Amb\nYMhNahyrcoNCyOCbEZ6CKuula5tYG5s/rR3AXw40tfm0iHuCzwD6wG2RMu0p\n1GCU\r\n=XFtW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.1","@material/base":"^4.0.0-canary.1","@material/theme":"^4.0.0-canary.1","@material/ripple":"^4.0.0-canary.1","@material/typography":"^4.0.0-canary.1","@material/feature-targeting":"^4.0.0-canary.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.1_1568060453684_0.6129547648881437","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@material/form-field","version":"3.2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@3.2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be35298526d7436922636ec8b163733814cfafa7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-3.2.0.tgz","fileCount":30,"integrity":"sha512-4XjZGy1S966IOUxFaRAKcZOvr5qqvx8r1RMvfCsEzTB45y9Lo2puilNyCtatVAULRxCwszZb7Kbd++cpmMpzZA==","signatures":[{"sig":"MEQCIGNHQNCD/BsYYpsld2+W7Kmiiu7hhVIlmJhk9lQDnz3sAiBd5h1Xvw7RifYkPxMGpxUXh5g5uhkYIfc76mfRAwmzJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":135871,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder5lCRA9TVsSAnZWagAAKScP/jfnJ+WP4PBi1RKk4sOX\nW4QUSI73QZ1U9IGdaFvxJFHdJr7PaK4qAYxyjK3oL/ZiBnFUsKzU6/HF4bhj\nOjWLCR4IRLLkRjFQar4Lj28UcIOtmyaDDDfOOJSwRIRr0YGQIVp13pPgY/Ut\nnrt4nHCRMsmC1jWxarcvcGc+K1dXLbMsVfVKF7BdVGwGV9Bu7ZL8WtPurnMr\nB47DX3v6QGcUL4kI4unA65QGd/Te0DK8gl3QwKJyxUzliRBH7rFpKKIfxIOT\ng+7WXG58grIUJfzkn29WloxCGk6WeP4BNDJKleKN3jBWg+AlbhgQxQZTkcWv\nxJ5grboX1bd/G3+tlXUP2AJ+2nZKWNbHj6Dx0/Ca3hOEFPxZ2wDd07Veeb7S\nojt9O+VgXM1bHY6XpSKUPRSnYjCnU6AIA6n2AUPCm5kbRHlUlJWGyfHePNKh\nnpi97UveYkWoKtLK+2wppbbzSLhiIZeqw31W0XaNn4eqvRakVA665OkhePX1\n+VE689jgvCzigLk7fYbkaa5ZW9MzSsLDq9yeP/Ws2+HMiYab2YuLtGhAnQIs\nodEQtae+wQSMTzIQw33jRMRaejdoQrFaJapeqU9mJxfiRks0NGnJBskb+3eZ\nlpCMTy1UM0MuTa1KAzMNleeNP/uqpSzOE2brisTSQoU9kGvEHEo9b6QcAM6a\nIneR\r\n=7lSe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","gitHead":"abf67305fa705591abea3972006a18ab5fac7f63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^3.2.0","@material/base":"^3.1.0","@material/theme":"^3.1.0","@material/ripple":"^3.2.0","@material/typography":"^3.1.0","@material/feature-targeting":"^3.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_3.2.0_1568325220968_0.18964944074348988","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/form-field","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.79d881baf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6de0d928f1f95215802a13afd3fa039813acb909","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.79d881baf.0.tgz","fileCount":30,"integrity":"sha512-2XW4ZpzRePM37TC77MR8NhCNDmdMiazcsWjVfO4cVdCpyzF24q03KA/v1T2g973trVYSDfd1R4+OAcVvEZ8yfw==","signatures":[{"sig":"MEQCIBQctGWC9UA6Htgez4OClXLNbWvM+qYMS7lb0pVwFvBRAiBlT/xDhneLk+OPVLWikVmx0wpL7/OXCoMiK4h3z2jIEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":137244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev02CRA9TVsSAnZWagAACBIP/2aHSZi8cWew8Jl7Q1iY\nNw/bapcZKM2iBe3Ta5X2bcGifrrHmiZI0kQlVA6XU7uzBDNxUDqmbmA6skrL\n51OPokFs9iTGzLd6e+cTlseL3kznQsslelftMNUILIYFLeMrvO3h0AxaAl6v\ngnl9w/cn3G6fZvC//iEMGZMYGcrBBV/rAaJ2ZtlMB0HwaHV45Ok2RsSdM34f\ngmgayVSRvf/YsOGC/DkQNoIiNWdZbB+qGmu28Ax9MoBc+JU7E2dRAtjAoWb6\ncHFxOThjBihIQpLJixAu0dC2Annj1lL6uMGYhc+vlud2t5g+aZcTrW+25RJL\nYZK/JmP3DgRi/lBoVqSgDzcOp/Uk2kHtUlF3g3EQl0geuH0Hy5bWs0sM1ckC\nUoFhOLH+ib2Mka8TdEKRvrx0rCpqxfsxVz0V15Gcg7UPWE1DtPCuZX1D6WxZ\nTpDmBrOehf1FfYHvisCj0DIIe/167omkLM8eaneKqRiIULuL79218U8mr5B/\nJlKIXmSscNbOmzIR4V3hoF3v1Vi2XFRERG9R0rtjysIxgEvfK4wZ6poBP60+\n84x8R41gyvO7yTpt8E9i9LjmOvtNPG9Ifxpj0Uph/ay7Xa09SptC99VWcaww\nN6wDqLiS61pDaL3zSWGpWCsAo2Fp+t/JJ2BSOaW5tTBxShB2xK98949T2jOy\nk/C5\r\n=STu4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.79d881baf.0","@material/base":"^4.0.0-canary.79d881baf.0","@material/theme":"^4.0.0-canary.79d881baf.0","@material/ripple":"^4.0.0-canary.79d881baf.0","@material/typography":"^4.0.0-canary.79d881baf.0","@material/feature-targeting":"^4.0.0-canary.79d881baf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.79d881baf.0_1568341302040_0.5860365567563295","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/form-field","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.e851d4f40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1c7213f72a301a2610b9bd95512e3bfab9f5e94","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.e851d4f40.0.tgz","fileCount":30,"integrity":"sha512-5ecf7dfFwHQ9uY+xeGcxHuB+BelitLHOQ/6w53F6z7Np3dOp8mejv7NVtQ6quXC1HtOSDRHfutosMGDriCGN1w==","signatures":[{"sig":"MEQCIBWxVzDmWt23MHq7B5Gvb/oao9u1pTJ6jMvpTRuEkA+XAiAyGmj0xRuO2p1cYKFcLk5me0o15sF+o8osSrtgmEgY+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":138972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexYBCRA9TVsSAnZWagAARp4P/2HzuIYVTNRdxC4N5dPp\n7oijx5A+NP7g9gzcbEbgIDSGDDPhmD28r3gk0xhhFSYprqi/xrPRVbzThS70\nqXfyQRELduHcSXHqqeGn/V1UXIT5Fa0sTUCuU/dX8wiMtu8xVCahagWcY9Fo\nrLU+79WyVbJRwQY2h8emNseA1ezDNLUJZHh/Nk7Qmtdkh1gMTfHj+iXOFovX\nVGVka6afm9vDh1EH2Dv1Tr/G8zblqPhBq0TXHrxn2mfxiBVtJu0BeQdpVHls\nxEL9ci77ROuC9n54kYXSxvYhRgbDV4vT+vja8oTGxPOYAB3hhGe8qHLinUvn\nlPbSFrmCDQrAeGuSoKJfsHlfdJt8ZHeubKiNf58H+4sE7TW89BzCqSkzgT2W\nSyKPr3KyYSjSyI2Ln2UNOqDhVjQSuMDiWKOOEnzeOdHFPBiJNlKlyx/PuyXx\nyXZ6zXKDOsQoyGHZ44h4gyVKHBjYfukzvJdmjOUzfajCXSJ1Z/wyzU67pi2T\n8KrN/U4AZldPBW95kL117eNTxpR1quEFTYdJSDki9ZN4YzDXTsbHolIuxCPj\ntrL+q/lgGvz1PWfTsTDekrEfkU94VugNhTQn2aHin48LwuZ7ZfiLXteLPSmT\naDB+9gokBX/WERXEEge+wX409IBjDr+XyiwkD2YOdaWBf8pMzq/4SJ4DTD8S\n27cq\r\n=d50n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.e851d4f40.0","@material/base":"^4.0.0-canary.e851d4f40.0","@material/theme":"^4.0.0-canary.e851d4f40.0","@material/ripple":"^4.0.0-canary.e851d4f40.0","@material/typography":"^4.0.0-canary.e851d4f40.0","@material/feature-targeting":"^4.0.0-canary.e851d4f40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.e851d4f40.0_1568347648790_0.7676941346349819","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/form-field","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.905884690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"995b8d9beaced8e44df9d68b39d4848078b90379","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.905884690.0.tgz","fileCount":30,"integrity":"sha512-wid4JSGvP/gtvkOR29RQXYiCzsmBqjmGoJcaFIjXNyH4pSBh6vJyfS45xAljgAdiBph2KR+COKTDnJ0mfy1Nrg==","signatures":[{"sig":"MEYCIQC4FVtXUPdWjGfcdXqN1jLHNA+MUl+6zhxw3qoOlNEFEwIhALOQwIXAKeCfMOeDVa3NmOiVF3E6+ZsVijA7KTLMQh/8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":139188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB9CCRA9TVsSAnZWagAAHOgQAJbUHU7ZANelqO7Jg9qW\nCNS0VMVVLK93qXBctawNEhcUDC3Ky8GJXCj4gMijOro0mM3WOiJPlWW4zLfo\nHkoG7x4Gf763XH5yNEHLLh6b2C+Vj9686eRg3d/yqdpFXZXT21jS/njELnLg\nvNw4lMTAoQIxjh1ROwYprvK1W7fP4g2GWzR28aXPDoQFasrJOFRjzMl/XKKs\nqyB8mtP18GX3Cvzuux6+H6z8ZBOAXwn1oPRL1ruOEzS6VC6jqK0S9uNlLu8J\ncvwqre0ohyHygYNVaALkvV2o32Mg/MUJ2Txz8MamIl5UTct2XJRM/La2Zeox\nd39aTsjX/t3cas7oaHMaibYB8W7aIfIyOQDqRS53qUEmaHB2gZMrUgM+8PfZ\npLlGlhPrYZm48WhhHkpp/k8tjfQfEtlJ5heaXFsHhURMbNAo2D1IfE2HYax7\n4Rh0F6wY4L8Pyc4tZcP5GuUFajuofnwx2+xdwdXY/l6Ii3rx7nX6+qXG7WWf\nklDdwHv0n7iHHxZr4whCTTCwfIyGg5cY/bxGzu5r4A3Unj6WM2sOTGwu6Hia\nGHZdt3k+Y2VMjK97K9pQjzdsFbLkxu5lCl59RjV949ZxVXo3Uc/wjNDeVAAR\n/nq8pb/zuhLJwNFvRVSKqOkgtX8Qa+VDCkH4M+2dCssGTiHvb0xeuh+ByL/G\nPnUE\r\n=G7J9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.905884690.0","@material/base":"^4.0.0-canary.905884690.0","@material/theme":"^4.0.0-canary.905884690.0","@material/ripple":"^4.0.0-canary.905884690.0","@material/typography":"^4.0.0-canary.905884690.0","@material/feature-targeting":"^4.0.0-canary.905884690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.905884690.0_1568677697610_0.6262128087304688","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/form-field","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.199534d61.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bff560fae19fe6ca130edefd721be17f0b4b834f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.199534d61.0.tgz","fileCount":30,"integrity":"sha512-h5mbFWmBvsNoQBrhcNiMfO2iyxFZfgg6KI3qEDcwuTUKWMKfAya/bXEmKR84GClWKpHxfq5jfXP0UPLWG19CZg==","signatures":[{"sig":"MEQCIA/0BBbczbOIcs1XFxXaIgVDSIIGJe6a08mPlCkflkZHAiB5mLXp7bICOeGMK0kUFZdEafaigHNvenEjbDlPEcP/3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":139404,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlu6CRA9TVsSAnZWagAASYAP/3dzkk/9PveOQBOnoqbA\niCeW/8z4w3p+YPjKIwjwIgVkF5drXHxNLXRyh1+7/xRJIwxfg3TwpcaH/mey\n1LeNSRM9E7A27FDGP3n47g3yc7xOWrtGxUrdfKZMSPn4kqQ+2al5qNQlLtfT\nlpSyUIMLVHHVrFOflDwGuxRJLL9kovpxRdS/piDO/Vd+OlanqihEbfWiBZ+O\nwOvUTj2L4ftbi4aWSPcgsV4b1AntdHUCuTl4VL15IriBiLKSFBgwC13yOZe/\nd/kOkNmBYhXDqZIapiqnucMnDlAhRAxVJIP1ZyHuJOweQAD5ErcyP9jb34wA\nnF75Z7D1b6dVtkvFh0xf1Kc8MrXbFC6IA+tb8sAuD+1phJISPqmJmO7V0lkC\nQ5Y3Xw8t42KcSNcE82XOtw9wIjPtRu8dJLu+IPHfCHy1UZq3HkoxLK60Pt1V\niqX7XKjP6JYhhCll1jxjg4TQlJgphVrYnoArOnemiVsx8qkhKMpEENlx+ZyO\nom8iDDW0M2IoE0iGJpNIlyyIN7dP7RGqmQJL06P/hXrWmv0+gnOQLPutBots\nAJsp70hTW5RiSJhWfqb4XQTn7iO01R37c6z9n6bixT7QiMlI0rHPw3ad1GDt\ncKK0k/eIvTVZD4c9ujhk7vvDXeuaTm1q1TElmH/46jZvajMmEckrNCNADlvg\nfizj\r\n=inMr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.199534d61.0","@material/base":"^4.0.0-canary.199534d61.0","@material/theme":"^4.0.0-canary.199534d61.0","@material/ripple":"^4.0.0-canary.199534d61.0","@material/typography":"^4.0.0-canary.199534d61.0","@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.199534d61.0_1569610681616_0.9392282162115984","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/form-field","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.22d7ad2fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3f784989aa68e57691ace6fd853889186fc18a7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":30,"integrity":"sha512-rhgELpXPAJNuZQA9u4jJCH9nQjIeG1WeypHJIhZ9bieymdbwRp6EDmq3vu/N3e6kUTKktmizJdKO6O1TQRL7YQ==","signatures":[{"sig":"MEUCID2MEPWBR1GJat/4Cai6Ogi7/bV1LqYq9xa0SVLrlEaxAiEAkeHxmNesHBbM3ZY9Gj7DoGzs4mEGCc/GCDTnkiQDLYQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151903,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphaUCRA9TVsSAnZWagAApL4QAIPG+Sb+ux8eiBhbamLT\nDvsVP5CecrriIImdcUTFcAYwxQgaaF+eIXOOx9wDX38KPQehsaVoIZIrfEon\nfFkUydQwBsyZdlkR/rmEzLuOeIm16HqPaCAtT8hbkviCuQFEHzng1uJv/xli\neojG06MqYLXGsnEOlVmM7bEL922yNCoQFVxh2uA04vIDX/Q2Q8kgxzALkoJB\n/Vrth2n8Ek/lIZIobmlZeLo3trK7JJXwP1QXtpn43klItbZlD7j2YMgbmIRr\nS8ozVChHKHrPxFsXpZoxA6HwjukQetHg7TQ7iSKz8gjzOI7HjWW54YzAtGN4\nC90xpls7n/tkr87t2OkE4Ugk3lC0mR80CZeOW97qhgzDw0r+mYDWS3zwWV93\n5sZHc0LXFofybnvxRmRRERHHpxJwOZRLmZuRkkN5WtJXNwNbUej6CtD5aZbG\nP5NMZ0KATSWeWkA2R/g7dKpZzzdTM/D27ifSBFbzihZdyeA2/ioTAXZYxDtW\n9G/79F5WiY6GIZM1bv+QsvUZFHybQNQ69aBkXCieSwFwGuiRLsNosDGNPQ0Q\nbydtLwxSXirodFpDdgGeFpWCKPNQgckMy0DEsNhEAdElL/XILGdkc9ywD2CU\n4TKAqvHLgWfhX7MvRvDXhyMV1XW6QEeNqhBikTG2hB4zMyO6U7PDwlA36Lm9\nnb0v\r\n=siKq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0-canary.22d7ad2fb.0","@material/base":"^4.0.0-canary.22d7ad2fb.0","@material/theme":"^4.0.0-canary.22d7ad2fb.0","@material/ripple":"^4.0.0-canary.22d7ad2fb.0","@material/typography":"^4.0.0-canary.22d7ad2fb.0","@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.22d7ad2fb.0_1571165843937_0.4631519741894945","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/form-field","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.735147131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d3b886f0195c840d84e585bdfee3c2faa1a6f8c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.735147131.0.tgz","fileCount":30,"integrity":"sha512-0Brl/NBvhI5EWbop1aHFwzqEX6cV+LLCdbdrLTgJHreRoCyGd5lDA2wUw3plinVWGSQVfigLKYmcb4EiREmxyw==","signatures":[{"sig":"MEUCIH6Yhw9fGZC1IxhdXfSSUQ/f3D0F+K+/bnJ1HeVbJ/9jAiEAsGphEiJ1NzQhC6TFw+FyqpggBwtKZk/yAOKXYu9OFYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":152687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnEiCRA9TVsSAnZWagAAwwsP/22d1HG7ZKNWIURCxGs5\nDEUb/LdFV7XWjlX/yQDaoZOufXzquDMFHWvcY13kYcWvhjMY00NYqIgkD9i+\n3aUDxSjzlEbTSW1aj4aU3gyzNGELG/RbSxWAQNsp6hOLRWFdHM/ggLDhkZIt\nBkB8JwSVNx6H2TvIhhgM2g8mdV1CSflcpFUm8ovALW7dIXYz8uBZKt7fcfNn\nHoIRM03LjYtc+x2SQ05c4BGEhrrJdKAL9SQuEJg2c1TkP6/VYBs8U4/WnzTh\ncMW5aG5G7aO1A4aXHj5zzl0RF2a2C3SUa/mpcXcGuDWOqhPfsfFVqJtaAzvx\nhCbHJrX+vArFNuHT0P1LlCXexkyYiLQao7czarvLuVQxPgXerRQDJ4x97zui\nrcQGdjkKJy4/VQThNfh3g2seB2q6gtPJgAjLFEVjFNLcTwoGnDWQO57k9/oG\n4jWWRu2vPj8UR0m7q9LVEBOwDydaGRKoHEFHsm1QD7N9H5VYlRcXK/ZTUvRR\nIdjlDZv41FDCzbDyUWXFDR25S+Jf90KWrLQW0bRf8FeGHFuU6iuU8y6vAX9y\nW7wbqFwKWFUuQhRkhRAFWNaWzdYXg/mZPWaOy9JGSTeU5ohqJNMd/K2UElir\nTk8/vfRWs66kJyqH0oyrSE2v3nToG7RSFyuz1uhpSp7w1w4pTTym8YMuSB69\nFn0w\r\n=03qJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.735147131.0","@material/base":"4.0.0-canary.735147131.0","@material/theme":"4.0.0-canary.735147131.0","@material/ripple":"4.0.0-canary.735147131.0","@material/typography":"4.0.0-canary.735147131.0","@material/feature-targeting":"4.0.0-canary.735147131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.735147131.0_1571189026464_0.6066850802851032","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/form-field","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.062ade5c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"029c78ee6ada34ffc5b166f08acbde8478766a11","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.062ade5c0.0.tgz","fileCount":30,"integrity":"sha512-acVuT119q0UVOL5TcTEoAJfXbcA/gchbFMuslKTI0nmvmAk8iodDNWvgsZ/VnHR7dH6gtpiN28iFI4DmrHGZDA==","signatures":[{"sig":"MEQCIDmav9u+PiQIGw46JBqQvtAUs5/4WUFshWDTxHVrL1gXAiAiJbKx5IwtoUj/hvcJz3I/VDoct+KFb4/Uh81DTfUKLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp716CRA9TVsSAnZWagAAD+kP/1llZI8UyOclbuKsLrDc\nRAXtIkZrRQlCvXCjf/69FETTCp/6qFN8uBoSnjUUOyS2j3BBLiozQ4TDp56J\nHPgEyivrdiwIog4Z9x0mHcGq42JyK5Koz+BqvT2ZvrVKBduQ1/dFCcGOZJL5\nCBdS3siqhWjxI+l0AGeOWiAEanf29uRRSn6rkUEnQ5TXoAidE2kMralbuZUT\nd0UseAXxDTzJDUI68wriI6gUi+IcH17OqVRoDPR48GV/fNBZ+evpSoqOj4Z1\n/lr06EWrz9auIasIUz/ei16JphCgpqBk3vQlJnuTdFBaRe0AM7It1d7MucwY\nIONLdbClfcASseeCVJ8z2igFB2Z1ML1sh58YP4e5jSwR8HxJukkmIA/icodn\nU/Jdj/NXlXTKRJYH0x5JSkSYXnU3OhONK8OVoBQh44muR4+D0k8ONannfR+f\nu8vPucmfRNV6oqdwEbyffhlCzJdhVk/Q11Xzp6OwW7x2UWENBx6m79Y6axBx\n+Cp1FGthO6gbb03TWaYjAsLKJgI95wANbsviBjjqZSqBUY0+U3sE4OeO9C6/\nMGjca1oIW+kqhapzaVWsRyp5svQ4ZWfAFbIMPWjT/4XiQid+9uoBF+ij636q\nF36VAKMkgs1k/DQ4Bfde5cuoSfjKMtgju3GelJkDfjzK3gTL8TwlNnj/4izm\nSdC0\r\n=8qPl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.062ade5c0.0","@material/base":"4.0.0-canary.062ade5c0.0","@material/theme":"4.0.0-canary.062ade5c0.0","@material/ripple":"4.0.0-canary.062ade5c0.0","@material/typography":"4.0.0-canary.062ade5c0.0","@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.062ade5c0.0_1571274105690_0.983043181050431","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/form-field","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.774ad4f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a5d2fa28bfaa2631ff7bb1eb974b3e554276b27","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.774ad4f8.0.tgz","fileCount":30,"integrity":"sha512-uAsv2qmksDiAFjnParHbYuFmvrGfnLN2VBhl4HQEGTuZADj3+OG9Zxy/qHuaOdjzdMkBB5lUMZy4nEPN9VjNAQ==","signatures":[{"sig":"MEUCIQDSJch0EDFd11duqfVckRE/otkpbxOmgZiBMD0jrT20NgIgEvbgQ/uBLmLJawXHbfvn/lkgDOLa2OcAg+L2yLrgKk8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+hlCRA9TVsSAnZWagAAK7cQAKFQ1oUAvUuurWr+09ov\nf/BZIAwST9bUfAn2X2BpzAqN3crwwFGFqmEtTnBJD62C3zGAUkqQY3w7MrQm\nuTbW6GI3vS3kyljFtn6AFwfgjZTC9R5s/aXhNId/4tj1MLgy0+B97h6tNjxN\nxKC43ff0esCaOTTwRZsHHJbnyl8cImGDut5dlrYahL7z07Hskw7jWM/cRZnY\n+e1fP24XPP4zTrtUSJS1mitElV5+t5PUnWWk8Xe+/4ejl8utuufRtWC36foR\nJxgOtuwo1sDUqvgXEG9pkdlg2lo651RbWH4nVs7xBtUU7pLuzO/KuyJxIdBV\nJRWlW8sv5n17pQWkC//QNiSoy3dyH3Oeq5bIE2D6Nba9lpu2gWVESuP0NQz6\nLd62MM03spxqSmYT3AS9e6e6mgksrVHseSWzlzEhC+HcSQk1YYNO02AJ1TvJ\nKn8iqo/sexYqm2HfUe60tRCuP2+pcd7DjDXrIMdMu8yfh0h9knsx0QZJjuVk\nd2/u9sMioLy3aGiSlNAcDeSZEzgbmpzjdHcLC1yRAXkz5OwLgOo2xLmP2YBM\nBaZb7dmRxrx1FI9o4202WccDBiijVIS/L9h6XtQV7elZPP76VAVGBSB8oqlc\npkjWlIYglHSFQ98l6lkKONXWNaXd16C4uTZrDne6+iyNOYSUloQhjCpJZ8/s\niK1q\r\n=27Jy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.774ad4f8.0","@material/base":"4.0.0-canary.774ad4f8.0","@material/theme":"4.0.0-canary.774ad4f8.0","@material/ripple":"4.0.0-canary.774ad4f8.0","@material/typography":"4.0.0-canary.774ad4f8.0","@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.774ad4f8.0_1571285093117_0.5049016503635042","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/form-field","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.5916d18c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a38215015305fc16ea38cc82373c1c5586b14921","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.5916d18c.0.tgz","fileCount":30,"integrity":"sha512-Vg/oMucVh6wsyU19G9cUQbZ/6VdRJvOjXUTe8xOhRHAtZIuN1hpCpe0uN3X90oKVCG3qFoLM26yuBnWcZJHi+w==","signatures":[{"sig":"MEUCIBB+yrqOjXsFjh0U3+9u2E8mqL9o5m5uKES+/RxctLrLAiEAkqq+AlrX9aQJDGx/M/laHyBU8YnULOSWlPTxxHvi9wA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhvdCRA9TVsSAnZWagAAa3oP/09oEraWgU+Xqf48mYKz\niWG3+2gytVZQPG2KO4t9AbEoLsnfOltUWMH97PdmrUL4ixah5ZPR47FoEVcI\nlmdi1irXkRwdSueiphonUzDDHONHoyoyJNrLrPnPbCUaa/F5dPoPMTV4nkFs\nsPHPFmhnniTlFsUYSd0Q8hgKNZEB4nZ+axR2HfOU7KAfIP48qLUreJwp4HPb\nt2lX/F8j5zuz3hXvoYUy7DQ95Ugb1d7OZUmmOTKq3lWWoh0gk01tI2tvX9Q7\n2qL3KpcWsZ5+zqNnb7ZsLlg2Q08EyahzPPF1QNtQKqGKCxlAD2HOPBAxdVU3\nOFIC1/vPguHFPMBZZxwcOXxv/jGP+o2ogShUu7hs1nNI5ALmtEA0CyqcZS7O\ndKNF4w2GdhP1L52nweXGWJ2zdtlIsVWDRfSMImXg1w7MZ9Hlj3IduUHOcGG4\n+foRcDqQrNMtTTeLvavKhRNvXuxGT+98TqIw0CpTUL2vgY4pI27xDNP7BVHs\nfvQNJOXvLp4OeAj7Tf+SvDkpDli5uxNKCE6gnQWfrzuxCBjxoWyQuhlpNcGD\nDYfsCByh4f/1azl64/PKJpf1u/slw40NDhChBZ8rlb1ynF5j0FmCnRvXucIT\nNnNNahOSTzjeUYy/kf68xWZmSsUwmHCeGoa6Ep3/JbyahdYejsUJ3FL1Gz/v\nkOLm\r\n=TGCH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.5916d18c.0","@material/base":"4.0.0-canary.5916d18c.0","@material/theme":"4.0.0-canary.5916d18c.0","@material/ripple":"4.0.0-canary.5916d18c.0","@material/typography":"4.0.0-canary.5916d18c.0","@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.5916d18c.0_1571429340729_0.3283469737138123","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/form-field","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.d4141c95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2fa3cf2a95e08ffe0e914acfa8f57d43b43ad9b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.d4141c95.0.tgz","fileCount":30,"integrity":"sha512-Inf5iZzWEiZxUtL/NGq/WoNptlJWK9tOxgvuJVnPf3v164eKJMvlS5as4/vyAAT0QDVz1Sw3JtOuqWG3/lPBfA==","signatures":[{"sig":"MEUCIAjAAdBBMpwJ5XMBw9YKJHu6FyvcNcpqZ/KOSLvBB9/HAiEAhWc4J6iC6X6yhcJ9LcNujj06xldXqHMRafn9rT7OCoE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQCaCRA9TVsSAnZWagAAn5MP+wVQGqWLht5Vrz95vq9h\ncIXDmMVfxHBB+ARX/vIjoAEhOM9M/6lJ0rWEKv4LJh4gnLn0aZ4TuJ6W5QL8\nb90BMK8IgMe8LThxsFJ4bh01yJYGTMLXFyMz5K43oRK1JoCUHJW8x5OqDiTc\nfw9ko8H5IWlJb4ovVhyv1RkbEJg9teQZ2+DFv/HEbWpw92fsp3yIcHzFJfI2\nbEUHT5UkdQ9ObhvCOqEtVTrh96E/CGtpxNVD0pOnJFK2C+bGLf4lKOXJiDHi\nciNqIm+wc8p4DJYnGNn++3c9YSoBo7IyWrEHBUDr3XJw0FYES0eFRHD2meec\nOLEklr95r6WZYYDsj+cpKmYzPP0vuTFxH/t/zb6LGh8qgytdP9D06ImCQVnt\nDWxjuCPCsOgXtjViLwRN+qs6CbcylxuPYo5/IbJrbDAIXLEw6X2xHbNo76OL\nk9QyBrXws25OmLJlOwm4ji8KOJyOy0EpyAk+Ie+cQVlNhixfz1nBd6FcbKH1\nG/6EXI4SsHbaU8nLIYhT2PEuD9VSzhLfItUIuFZXQBKvOWLYS8H1DgOHk1XL\ncsLHmvVXBVydC3Nq7ShK4nPJ5CPHtLAHAtCy6DS78jzqqkf4z6XptK5p/gKF\nz3StKf5GspG6Vne0+wBBR1euaMdOll0SoZ+pljwlrkaZEIIvruMmq9svREee\n1CeW\r\n=Z1b0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.d4141c95.0","@material/base":"4.0.0-canary.d4141c95.0","@material/theme":"4.0.0-canary.d4141c95.0","@material/ripple":"4.0.0-canary.d4141c95.0","@material/typography":"4.0.0-canary.d4141c95.0","@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.d4141c95.0_1571881113607_0.1886757645280066","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/form-field","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.2b878b3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7c52ebd33225bce828b5001d32552d366bb0d89","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.2b878b3e.0.tgz","fileCount":30,"integrity":"sha512-HxxlfSZdDQu1+Ayu6EhpWgyLpI4bxF/uWJyP2UVRCJAz9DNalRzuo7USh4c1Uj/hnP3wSsgBKZGMNpS3LrZKvg==","signatures":[{"sig":"MEQCIG4Eg0TknHAW0y3k8RUWwqgoV5PNra/HwGSNjVVePhqZAiBFUy9Q1ryoeT9K9ZHJMIdAQ0O0ckRGD5FOjo+t+FkD3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslm5CRA9TVsSAnZWagAAw8YP/33sgMTnENbzwUPOl2Ez\nJrzMcBmV7N78YjtM2SAV6mrBfe6zMD/lvQTVWbuNhf12BvQwLMozkkKrblN9\nBBn4MROtcvxsLs3Xh+i4rcyq0vqZlCyidGSti7dj12biAzzug5IFVGhrqupp\nfieM7BOEMgtTXYENHIH5l273/HUj790GizsVlNz6YS6N7CdR1F6n5hCxTG/w\nj1EW8s6mWQTQdC9qOkqJ3ScaawPa7jchoR/kwyVdIX+5gAfpa6TRbxt0zXUQ\n8sU66x0Q2/ZXkvQNz0bKOYygnu5ppRzQ1FjNr2A1tjWa1fq2rMhyAILmqvGQ\nHU8/Rvtb5tpGe/9cm3c+ImbqJ9fWhjiylUmJnLkaYy2Wl2jceJTQpGzSSmqF\niGsbW8468SVK+kMdKmRxvSzhGWkaU5TkQqHCbRP3olhCTSF8YPwf1W+WRYfo\nvnrQTTqBL5iRDtnHbF5ERGsN/Gnc5J8L1NieqWF4t/XzIiWHRLimzQoua538\nu+m7VpE55XR8cKMMJU+NdDE2+JkGTjCwiymgXo5LnS8ScQ2RyXebm0tIGAB7\ng3IZqSHYXAmF8RSoKf96dimLCkUhQpuvL46ITXRXUuDzG02ukVXd9ZPGM+tp\nd58G2rorEZKX6jJDAhIbygOa+OMGvPovPtqbzMNcoRk54Zua3W/QezoJW7Ni\nW+gd\r\n=pBIv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.2b878b3e.0","@material/base":"4.0.0-canary.2b878b3e.0","@material/theme":"4.0.0-canary.2b878b3e.0","@material/ripple":"4.0.0-canary.2b878b3e.0","@material/typography":"4.0.0-canary.2b878b3e.0","@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.2b878b3e.0_1571969464987_0.2957898818676499","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/form-field","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.b06c0efe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0ecfb82304e78d1b00e3e2470542fd6434f8e50","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.b06c0efe.0.tgz","fileCount":30,"integrity":"sha512-IjngySPcM4mIELYQKzFA2EVJlB/q1DnSMD4zzEjom1shjGWMAscgDaJun+tSPFOZ//fh/Kq1Vwe+uiPd8CTMxQ==","signatures":[{"sig":"MEUCIFX4AX9Px62LWQmtOyOlfCPcRNy3QodcH0ZyDeCJgKBhAiEAqE2Of+cCiXeq88e5BdIBy9GSjmOkpF7Q5SSbLu9En8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LeCRA9TVsSAnZWagAAupoP/i86TDnNGvxrsCmmXXPc\nov1s5SXNEsg92uvocKy0nCtEbZx9kp3eXLveKUi14xXEMV3Xhwy7b1ajCA/h\nWRAUDGeTCLBoSZFvfKWt+TDj3HKLq100NeKRE58Inlxg+LRRWVMRFGzg1wPD\nh4fut31am1zOKQ1AxMxMPvpJNXTyeG0qHL1vGh2rbnF/vVNvPX3Swq29WUaL\ntENFAV+diL3C5JZdJ1bA2IJJQJzHeoLtyzuY/+xDkrhTXDAd9IixnxKXPtfM\nHCxe5DCP3lpkDg8e5pWFkoPylfAtlvdfEWvYxkAxPx7bJydUivS8nPRuPtMW\n227p0x5Kb+3z/hyGXhznsnaq4iGA/t5omWHD2HaCFnwv7VFbS6ULy8C5zzj6\nqtlKTlQ+ZOUTH9PKC/rbLiiDmFp7xMw9fw+ZVQmw3dlnFK924KupwRkmxnMZ\nhCJ6k7p6ZB0mQZhhOG0siAAKKWC+tWoYqtgwcWO5Ps2HRuy/yfFnbTh/xu7U\nHGwUvT4dEUN1vCXix81ilez/ph6cbcLV/BhdIFYd8QMoH5nVtn5Ll+5NY/YY\nzL/nGye1Mvup5VxxxsW5sdvmibizl4QaYkFMw4/17OdnPaedPdFEASszQtKS\nWQIoqHn9Pb9kRR5PORVm+ii1fMlkzaZBUsT2vZNH5mu+EhobBG1anOivxIli\nBY+K\r\n=zLUa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.b06c0efe.0","@material/base":"4.0.0-canary.b06c0efe.0","@material/theme":"4.0.0-canary.b06c0efe.0","@material/ripple":"4.0.0-canary.b06c0efe.0","@material/typography":"4.0.0-canary.b06c0efe.0","@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.b06c0efe.0_1572053726226_0.9883453739284844","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/form-field","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.01628efa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e1f9c28b07ea9dbf0a66b115dd99b8d753aa10b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.01628efa.0.tgz","fileCount":30,"integrity":"sha512-L20Yf6wS2AQrmBULr7rFTOyFMJa4E0bDDVtH8gmbZ0Y4LiA7M+s21Y+4YAzLISD0TMSkQzgDdQBaDxq+cd71iQ==","signatures":[{"sig":"MEUCIHQit0B/HBqfgtnwCKGeWbOEjh2iLEv1Hg2QijrQJhKAAiEAsoaVIEp+Wlcx01Frl+Ssrend5C6Rnr+qNIkFh+2Izqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4HLCRA9TVsSAnZWagAACMkP+gNpC/ghoRWLraFokDct\nVZkcYRyGvLB26JYoGK4s8CYHb7Cn5tk87rURDGdYvGu7z33EUnMgMXlZyT/J\nBnwQjGWDDS7lbHZ8iFHF8SyMhTCDqcbI1jp6AozPLkj1FGGbMeaNamXYBhQ3\nbfctiqOK09pTQuUfvIP5zN+vvXAz3OABxn9Ciu7SKIrbSVeAPTHOiS6kfKrg\nLB8GDvVTlK88sC9lOgm1RAt9entmacXZ/RmpbowxvjADrG8Yaed58qgqxXNb\nIGnIKjnFVSzSDMH1QbOsiDsqaxcRZvgGDm7AvVXwWJDhtz+kiB8g8LXBbazu\n7K8aSgArz34CmBIYMJlX/jgzQYYupju5rDodBj30YePLcr7+R0Da/rf32Bw5\nu3sTX+FNTQ+RmsWOgD6NFewfW9nTToLFUIsFpckfAilHsGhyk6lNg8HRX6sQ\n4R/W5BpB4Hdp4WoRBd21ReR8Hk07MgCmeFwi6pam3vRB9U1H9YBMevvTwuft\npvFqbm6Q5CfE0p2V2DpjC2kiGYEKAFlgLzErX3GswM9VPuOjivmSCKWyRxw/\nzQC4sQg/l6MGEcYPm8Kzu+w4ghgtt2gTvVHFz5zLOAOGX3D8pK+gSpFSoyMt\nkDezU2RjEVlu/+Pjo1n6pUz8+gU4K7OBbIqeqkzEDw+EMi4DxIEr9hgafvSR\njKG1\r\n=tDAk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.01628efa.0","@material/base":"4.0.0-canary.01628efa.0","@material/theme":"4.0.0-canary.01628efa.0","@material/ripple":"4.0.0-canary.01628efa.0","@material/typography":"4.0.0-canary.01628efa.0","@material/feature-targeting":"4.0.0-canary.01628efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.01628efa.0_1572307403541_0.8141514250440232","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/form-field","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.b5c6d66b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab7eb1aa285e260728f5ea86be06f6c38dbd2dcf","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.b5c6d66b.0.tgz","fileCount":30,"integrity":"sha512-Bn5AqNRkvzNuE/gDDuPfIzTsHiXavD8W0qr/yB4hU71Co1+AB++3uVehvz8u/idVZno445Lg7V8+1VqvosZ9RA==","signatures":[{"sig":"MEUCIFMVvT7FwnxmfjvMkcTZ+gVkvqpBXWIxEBadgloJ/RYQAiEAw/E7uBS7UwEX8YlQ1veVd4/UAVL1XeraZ7kBeyQBowg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH12CRA9TVsSAnZWagAAHusP/RLVJ8q7ENQ20c/saTuf\neFxs5IT3UV98PqcUGkG6qh1eap3T8GMeiej3NYm9lzEt4swytbRsZvtleei0\nMp3VVXTC5mtOq4o8g5KFn9O3F2GXyXvWDc40pF7np/9IsdhwYky++Zf2Dq9j\ngbMofBp2QbLU6zA05ITivuqdZjSWlZmuKVIOyTDG0dpJKuJSB6iTnIv9XQRV\nMcmJemL3+UyVW45FT2iIoc1KcJvGS9O+x+HYvnQPsI8NJcfmgT3zTOFZx98j\nPoB3zYaTHUx2DLWHZipXB5A6OI12C0og9+xlY2TEd443+DkhJjr8vi4+sbts\nM8K59LtTEs79Rgn4RZAXeqJpYlx8lXtait7nPzh2SYPX4KhsZr/UjEga7ns9\nxe7NRSZKyGTERhnvelFQ/Q3QtuDkJjd/XC8Z645Ved5D42tgbo0EJhlu3q2j\nA5nmEVqTNXui9ApbR+8jEULcB4e64NASyX4EL4yp9hZLvfogrAJ/AFozdr/l\nyrkFBuwsn2fbVxZL1QBweLibadm/YfhTXAGoSGrIrRw6Xs0+PmWgCRHzSOwh\n4mY2LXLv64ymchYqfDo3/mN+5jEkr9vgh20DaUQ/GdO5cQySEbYJSFhn0zU+\nXWBW47lj2gL/IooPKFfi4k3ZOfKKVTa1ZCrvPjA/cFnmI5DggLEW8T/zMIEC\ntVQ6\r\n=vsgr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.b5c6d66b.0","@material/base":"4.0.0-canary.b5c6d66b.0","@material/theme":"4.0.0-canary.b5c6d66b.0","@material/ripple":"4.0.0-canary.b5c6d66b.0","@material/typography":"4.0.0-canary.b5c6d66b.0","@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.b5c6d66b.0_1572371829966_0.4305651534251449","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/form-field","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.cdf858ea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da26cddd306d6ce2ae3d813f2b1628ba83ee587d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.cdf858ea.0.tgz","fileCount":30,"integrity":"sha512-AjYNEw/yXJc1ViWBH6VEt6wU6Tp+5kaKuh9IPpX0ODHWLbn6u3TFoXfSp3XSUnn76kHK+Bxuz5zTUvJ8MUQDMg==","signatures":[{"sig":"MEUCIAuaTCJgXvYB2uvUIaZISYlS3tGWg51Dq1SleVsbQzkVAiEA8L5XuQREOd2VHURy077Rt36DohazGcriiaDeyIDuqnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJwCRA9TVsSAnZWagAA3+sP/3XIhQ4A/m/h96FXkdKj\nei6xavDDVCxEiz3X/+hDupOfHRxnkJSOVfgiEd9egTad9YhBGtkNkSIxdP6l\nJkPiBZnaMPTfEPpBekg2P3JH+lTo+l3cq94pFBu3Qv6tD7qjrj7UzDFm7GZU\ndeh5MwXW7Mba3k1hazl+XlXxGz+RBA3ssqYMoAl4dzYhoH068AKcwGMyxCx3\nWCFzIeFd6whmqh6nwW1uIbkq3ncBQg/ziv9S1lLH+/v0jd7TUHwsnzJ38YqO\nqVE7aDFvtdHzc0zYeokoXx0cDZJY8rwwLY9Gg6nCi92VTF7AlUNKCJ28ex+u\nysqZlWVJJuuJchOrqLajSnD2PHo8QjExzMJoUDXnP7D50QeFeHcSvwu8oqY+\nVJF/DTqIDrnNRBMa0rWCdtnxlwN+Nob86R8MmnuTf+E672hESnhi4LyqkDdU\nVAXj74Va3IUPZbMA9ZIixgL3WqBUzYRzlQoMv0Lh57oaKRT1sjRDMfcc0oJ1\nLalIxkthnRfj2joD53VUfTg80C75Es55X/ecuEWF1M5scJ7G4d2wbyunhjmY\nidzTgndZDsJx6ploAe4mcNZpQYsjcGKnce3+PSjmNZGaHmn4qcyaFQuhmVBG\ncgt0doHg+o8+JoBQ3/S55auSwP6DQa/e3xmRiEX5bUdRMiJ/hWetAGdG6qdS\n0jPU\r\n=ttjk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.cdf858ea.0","@material/base":"4.0.0-canary.cdf858ea.0","@material/theme":"4.0.0-canary.cdf858ea.0","@material/ripple":"4.0.0-canary.cdf858ea.0","@material/typography":"4.0.0-canary.cdf858ea.0","@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.cdf858ea.0_1572631152499_0.7100930904539346","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/form-field","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.719b57e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c30be43f7c20f659f287b2924ac8960ec7c5203","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.719b57e1.0.tgz","fileCount":30,"integrity":"sha512-EEk25x8NBPARNLnCgZrH87KbAoHVDd714hfx091riNSAMdvbXEORvktk3b5Wc5phsCVQbDJzkzYmIcvpW/1D2Q==","signatures":[{"sig":"MEQCIG6zH0O93lMAXP0Lz4BCsyk//74n1Zcxu8EmoMb1BwaXAiA7CyUuMJcNrKxQH1fjMXshZlvhr4CWe/jYRRj/5iVQ8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI8wCRA9TVsSAnZWagAAVcQQAIZiltsSxGLfw8hdh0hZ\nT7FfAGjoF+6VDLWTjVzpIZHBBxBMUgCWw/zcwAG5SG+VKdJNJEu8cAEnPUX3\nRCqYp32UGUvG7ZXGGcqN6e6BnvanhOCAFubV1hvH8P0JUosPCujGLMC1wAbm\nkA5k2UkVLFApvnlvoUALuZH6tEm/GO8ueKxIUkIVsWlXRYHd2Ko7kJDwDjDg\nTa32lNsmqepk3WKpvkfdIVzJOrBfxPuuF4WV4DEEwg/BgCSVC8G7jgNoO+zx\nENizXRFyuJbip+jiEY5eYDbzOFxcAvRGdtWKZIEtIgCvd24tfkpmXKKRAaLx\nCWWLLz/CCAF6BRtMCz1GqZ+CXaCAJvG4i9Ch4NnrtJs+nu+NApGdY/9SZ6OT\nkCsf90cCMgD0XDPCMIUuAQHDCGN8a0vSLwkvtg+UBDJAZaYBlvTwKb4MIUtw\nPYJWCWJb/2JhHIqa0q07BDXiOaFLNSobuJq4bctFTqfRj8O8AzSAlEWXXxpW\n5BgFAUpzWGoUqWEhr8uhpNUkpX/ydZSa4T0yx970bMRjzquM9f8u2nUgTZIE\nud48d6+Qz1wWeUsa+5bBMsTbb2/zDb7Z4gSNwCIuvlTIS3G2u3+qJhahj+7V\nwtIw/L4WhIaeLlinsrYGvnsCpjlPjpiaq3fJJDukJ3UTs312G83kSmgLr+O/\nJtgf\r\n=7xkF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.719b57e1.0","@material/base":"4.0.0-canary.719b57e1.0","@material/theme":"4.0.0-canary.719b57e1.0","@material/ripple":"4.0.0-canary.719b57e1.0","@material/typography":"4.0.0-canary.719b57e1.0","@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.719b57e1.0_1572638511705_0.4799038180965478","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/form-field","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.97cbbdc2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2365bd5d48558c45cace40a9d2ae0c2ba7dedca4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.97cbbdc2.0.tgz","fileCount":30,"integrity":"sha512-z3Es0U5ukDNKC+yhtnCXJIEsfuSE1oEZ3f1ij59idxoDaUdFPTPtAAtjvoTsXqfxNFKENnpPOrZta8yD7gMvBg==","signatures":[{"sig":"MEUCIQCERC4kWPLEbQcm5pc0KQxVxnmc13+GHSUL8MwAPIfc6QIgaoiVcb7VoNgwrPdBttIFtYnF3V28GuuP35pIvZdbhp4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145487,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJWrCRA9TVsSAnZWagAAGNMP/jpnlO7R6cCMGreoSRuv\n+MnRtPw0ywHTW8z9KzJuy9xMKn60coPiX6V1818SxjrWpnuqaJlnEq3H+oXt\nRFAgeMmvFfGvDI4bzrKuIxHPvj0/HImd2DQc8rr42HReIqIja81mX8SrLXyy\n1oKrD7DVoM81xLqbgWfPs7dZi3hfbeQoph6Bts9BaHpuK/6p8cxFqM0zCSum\nT7qM0XbI5+sUfoVi0dOBjCoV5qRiPQJ5y9aAry9eLZfVV8EXhyQXJwMOQ+77\nHunst03HEm/RdbxqNzoA8T7RMHQD03OWNMPOAOyJ6w1LQgakegIptZkVNdFP\nDF250wMU6f5eqfGCiJc/ALMiM56ilJHf5ZAqSBd0FRt9MEp8DS9pxJrG11lJ\nYzWFHU9xn8agxTwBdsvkGq9GD8lsICWd9B+4V2wC7WTB+EatmTOtts23/jxV\nwOAuHdyMlUIQPTbh9NBCcCAEyy4cIDIoi3ZxbIpusL59zeFxGovky3Mq2PIJ\nS7Sd9BbdSYXLwWMbD5Z+sUlbpnxU+MPiVdbmIHntSHMdKfIQY4g39Wv/BoOX\n1dxn05oLpcaOEp8S80qgPYcYRBn4SKZyO2d5NQCeHlRREAOHJabIyhcVMN3x\nlJ+CHjooDy1MEuxXOj4C6GsjSoMpMUsPi0OA06aKsOm3aV2iHbHFWKAp2jAN\nljQe\r\n=qcd1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.97cbbdc2.0","@material/base":"4.0.0-canary.97cbbdc2.0","@material/theme":"4.0.0-canary.97cbbdc2.0","@material/ripple":"4.0.0-canary.97cbbdc2.0","@material/typography":"4.0.0-canary.97cbbdc2.0","@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.97cbbdc2.0_1572640171313_0.5140367433497315","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/form-field","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.8e36b3b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd7f24bb92b0120a9e7a5742cd99f589bce474d8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.8e36b3b7.0.tgz","fileCount":30,"integrity":"sha512-1fMvblEcf9QDWIUpweibuXOBeSEG11eaZJUGAyKzBuiBh+V3E254b8pmoeyTKVryAKnOzO5bZZwgqUB5VgtFeg==","signatures":[{"sig":"MEUCIH74vuNQuHSrxmbtx0yX0j57hS//PV4MMGsD0869++mRAiEAwqVfoE+43ECtQOxljTeSpS2tVCn0fTZ6sQ/4gy9k0bg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ07CRA9TVsSAnZWagAAslMP/iNkBhKZ5xnM7bfgcUaC\nbgb6QdJlMjIRV0VlMbcp1kB0CRku5IORn7iIF09vtWip//QrM4BkHGGL7Ag5\nGPaJZa2Pdmil+ZMlArqft8udY1ijbUfFo85K4GZ0ME7qSg2KEE1uHDTSpYqM\nqUzlCjGnpDUoEWSzoxK579KZbrBgMuBDFxm5dBH8bPsyz7idyp38/C1Qf3qq\nzw+trYfuiheVdRSM/mY/r41vLWPfy8/Xca6SD+UWUTNsglcrdZqd6YU/Y1j5\n7TOBH3wIEiPneZqX7DCoQhIVNtCMBjvYJmYAfnf2iZOjScy6bcw/YoWfkMyW\nRO8v0eDzLfKmSNedVqr1j438puCaYKQPrOs7mt+sddxOF7uMLCndLipC7DB6\nzkr1PagZNRPZr43e12BzaNEbFe1AHz2Lxma2WzfiYxHmtiINfcikRmQ0U4hT\nZT0H5/aXt4Wg2rwGMZbdG3KKqVTdGbHU2LeOiDQ4Em6V989uEWNKe3lPZgRD\nXynMdz0lVoKZ0RW4vswK1dNyDtEsr6CHOWDQ0JApyzTH68mxLZm+dMkWcuTv\nw5qXwmaxWPHZgsEBJMMEDSwdn/viQ97IsyO8BYoFBVdQrypXKFeYq7NUpwRK\n/QvP/rxCqXjdobVcygg55JIAM031I4o6zNTIjhz8meU3qtwepRp5UOzjSHyY\nRAR3\r\n=fZCT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.8e36b3b7.0","@material/base":"4.0.0-canary.8e36b3b7.0","@material/theme":"4.0.0-canary.8e36b3b7.0","@material/ripple":"4.0.0-canary.8e36b3b7.0","@material/typography":"4.0.0-canary.8e36b3b7.0","@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.8e36b3b7.0_1572642107202_0.4640729828128445","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/form-field","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0-canary.62d3a09b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d921574f68a5d0b17adc5cc04af0f84ba4406e2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0-canary.62d3a09b.0.tgz","fileCount":30,"integrity":"sha512-o8I02hPjTKZQ49vOKf78DhQPI6aIJN8MafFXqWPLITiONSHzGSNQ4jSRi6vejfFWNDn5cQvHLTALhKcvCnI40Q==","signatures":[{"sig":"MEYCIQC22K7t0nxU97aSJBnLWy55TPDAGcr2LtzoLlHP6lvVSwIhAN14rhPtfKp3CKGZbcbaquovJZjMf6xjwFw5kg6PvyOe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ9rCRA9TVsSAnZWagAAJ6IP/1GwrlyCdakuC7tlz06U\nAWNicLs3hI3KPtCTKJ1o+ptpNwTJok35vvfq50uQ6EyISNzJrDchnt8U9b4o\nLPOkU4VtFdgBvgvA2qgCXd5ABYAmxEjKd8gmG+CvR+U1nppiaxQ+DMFzBQE7\n61hGcttpl2q1krYJEltGV7lz4dRPdy1vN8Y6oveU5eURvTJeR8SdbT732hkD\nQSGHoOkjDeJQffyPWWdgWxBW7KiHcoMQqOLBQHlMHSUt+IK87z9JZdyXzYEX\n3W0fagysJ6Bugq2oZB/MNfsNpzlQaYO7fzznl9D9bTKk+6Rpfo0N63aBn+nJ\nPfYT3AgGidXer3OJhyrJxW6TQjFaJBz3bxZApe0ei7Urk9su2rDLVXiOY2j0\nWrxcLIh2T5BKFkgXvqc63ySQYpK7vS59uOqpVAeISR7StFyp4TCyHqqhgTLS\nsIIqMVIUsi7idgPs8gi0DkN6J6rqc/RuW9C0eUP7OuCclIiFp1uzN6F1N5i7\nrXvVSVZbMH76U/7JLjgI09PBA+UBOQqK7O+Gyv9RArrike3M5+M8ucTruQlx\nj8dI2eCWge4EaakdfO0nDRJ1Az29OQGjnW5bhT65oKqp1G7eRdikKRkfDrfQ\n+2mNXd6n+C7ZlB2ibxYTHFaQXyLpiwKO/Zt67JwEyrvDCj2GVZJK/Pga12Dc\nqh35\r\n=WuNH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"4.0.0-canary.62d3a09b.0","@material/base":"4.0.0-canary.62d3a09b.0","@material/theme":"4.0.0-canary.62d3a09b.0","@material/ripple":"4.0.0-canary.62d3a09b.0","@material/typography":"4.0.0-canary.62d3a09b.0","@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0-canary.62d3a09b.0_1572642667188_0.09914083361497017","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/form-field","version":"4.0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@4.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"196dc80fa35876ee2d6e4321e8186429ae9401bb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-4.0.0.tgz","fileCount":30,"integrity":"sha512-M5+c7mitD4NIH+3kU2+uX1mUJJJPNYSUN3bAmhjbMxMISY9jkrbv9k5T9jlWRaIqvO6qJ1aDFOQASV8CsWstYQ==","signatures":[{"sig":"MEUCIQDpWtCyaORHknp0QVGyMcfRn4FbzZMxiKpjEO3lcSw6pwIgNxSTl3JpFvdO70q5AclVTn02Ekoc3JuEudn/iae0XCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcboCRA9TVsSAnZWagAA+zIP/jDggSF9ZIbBIwyvjhdm\nrphwDXCLPqxPAY4M9KVrXse1d7OdPq8sbnBAvdQwu+/ou7LTivGqIy9w1KuF\n1FLZARJ/hD8U/J2vLoviRDHWJ1dZ9L2GANg1fcHecswKKjs93q4pwVT6N+od\nuPOJnK71l6ww1mZhc9YT6scs+HFy+QT0dlzNe4K9SZNAQmssBi/LmIfc5awd\nTAzqyIJypm2g5A9F46iF6k+ExEAQ4ZMWafXQArw9U+uYt5HSnWxN/is8A/yI\nuo0ISxlFShonSl1Gw9BaCVyTIDomzFDmgXlm5USU8whWjLd3UktMVoV7d3sZ\nq2WdGGE5XWt6/PF2APkb+6vuRdAaLiUWwqAjvKTOBJ+omEhppr3gfx35kQBe\n7Z6jwyWId8gOOLR6NZWb/bZ1ArVm29u0h+pXPPOZtSCFu2u1/PgQB5V2mpLq\nM3kql4aP6Vpc8H47QYw7k5bOn2UaRqLury7ijSROVsjaL89Z/ypS1UUDVl1R\nQ/oI0/g9F14GGKtYwhOdrC7dSo1CA/WJwT6jI5UIWlF1wIZS9u6nvwVY34DP\nBDvez1YJjY8DGA3x4YtHW9OzAtfFzjg7lCl0yfeExUn9piw1/tKI7VrMPusV\nn5LOtdx1l4i9cGIIQkW+ktik7nXvWyxNajAjwo7VsYAhRUJ6Yg+7KN7ltF92\nn4tJ\r\n=Ewmm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"^4.0.0","@material/base":"^4.0.0","@material/theme":"^4.0.0","@material/ripple":"^4.0.0","@material/typography":"^4.0.0","@material/feature-targeting":"^4.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_4.0.0_1572718312366_0.9012775787119676","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/form-field","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.b5eb51e94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbc55a433aef67b927a379e3405e57af84d95b2f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.b5eb51e94.0.tgz","fileCount":30,"integrity":"sha512-ZugChTVsFan63UcwP7xPJmfMKP8zdhIauhiTmJnv2G+VF7ChVdVe5Tn6hUNWuBqNcBJyGvKqHT6gbT5DKtSLIw==","signatures":[{"sig":"MEYCIQCPT5BUCx3d75rKp48Xt1B6b/+ji4TFfDzv76MGoHLfNgIhAIbSG/lYGof5zUyq3Rx6VJPJrs7bN7uDDSg/O9JhuJUP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGOYCRA9TVsSAnZWagAA8uEP/j9uaE0SnM4xwCYPMaLX\nJCPL8X6q18ZlFdSg5U99q61lnPic9vj/yE0W5FE0/COJJIxTc6Cp0owfuek2\n+fQfiixZGDsA0LXQmQ4UZ8hKww7jplEd7X7Y6xdsUe73fdC3sly3XLHvAxC/\nme6RIkbPqxMWeX90MiiiUZEwrCh9VUPFQzfg0/EmsWaiuXryEH3PWtkTenV6\nOsGfFDcJazVV0ltfqISi3rCgXvfdgLzzLw9bzMxsIEJKMbNCKW/wIdGIXi0H\nsgh15EYCIi3MvbhJl31NdZ9ZU1DefN03JKhpKgbQsamWImK3Iwx40AxQmqYE\nTprI6NLF7QaNnQ/KD1HRNJ9F7gUCAqPy283F7BghuwPdhXzHvL/Ua1MUFOQI\nD3VCIDCLx8/zJVb19cY3dkyLyEoC4fYw6FKIUTPV5TFkB/HmW1aq1jzMGkZS\ny6z6CGRWXwVlaA64WtIAAcX6DTp07Py7AEFFWg51xpqz8BmCLqBLs1DXWKnN\nt8F70CzN1UigOrTzq3bhpWvCuT0aB86b15md41H9DRKPOTnV9X5yfDhIYjGT\niFl1gvH61rPPBMIBMqA8EfWC7wg6y7OF6cA4uRcoRwL/96k7kprpy3y+j6V1\nd7zUtyDWUPVw+HUfEho8uGDiYK4osMyzs8i/d/yPQTXhQ1w+/NI0K3m3KL/G\n4aR0\r\n=FG1l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b5eb51e94.0","@material/base":"5.0.0-canary.b5eb51e94.0","@material/theme":"5.0.0-canary.b5eb51e94.0","@material/ripple":"5.0.0-canary.b5eb51e94.0","@material/typography":"5.0.0-canary.b5eb51e94.0","@material/feature-targeting":"5.0.0-canary.b5eb51e94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.b5eb51e94.0_1573151639737_0.33843719717591547","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/form-field","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.58500806e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b846040c032d38d87be3d7f4d7b5c3ae5a8e2b2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.58500806e.0.tgz","fileCount":30,"integrity":"sha512-w+k+W0hPIByFUE3rHqrkvtqhuIlJRVfr8Pp3LM0FD1YjAqWlAhGNeWHdtbhW9W7who4TihQaeGytdCehQ/jGwA==","signatures":[{"sig":"MEYCIQDLVi5vwbzEQ6dlFX3fqyEjesjQVUrYGdSagG2aOzkkdgIhAIJETo8zI+yb79eU31Ylkeg4bZJEOlofkySa6wYOLEju","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYtkCRA9TVsSAnZWagAAJcIQAKO0CTU9xlSc+uEh8FIU\noR4o33NjZRv7hXeSmWs3ecsf9NWD3rMUCZQ9nBKzn39xUtQ5cs4zTe0nxnjx\n9HLcby2YG6z+sgKCBxN3Hl54TkC8A5LsfHvbbmD/TXebtNErS4uF2dPqt1TB\nJxVNo4mVHUxpTtYykRTDKq1doujKvaBY7qLGH77quQRVvuiBPZuO/UU1iwVS\nUhL6KdBns2IJmiGzwVLNAjHFt5nMMpb5mqt2XX3Ln4tBMWnzndTcpCNy1D+W\nsMui6LfEfPJ1Jw51FS6LjNdfpYJeAOr5KcIb9P+Rqjf6SVmepI5hQFKPs5dl\nRK3tuDSCsRFlgh9U1tliyuU8k6C9SHgZ0vIoxTkUeq5aLcl2Q9HCS+EDojS7\nowcGwrUHrf1tfLyvqQtmgzcF+P+TfId5HwpHB0z6L9PUULsWFp3k70VOlZfh\n8nDy6WtP2PLyLn0H4IUcJ3RYqGrZ1YubG52CLhltjx7hzeCZTmh6yg23zSpj\noYAZjBJdnLiIxHF6X/TnqAVmsk4i5E8mWU7U1q8PTQfsbfgdewotWU9cwarL\nwtfOLeZ9RZAMwBAxYfrsX7ZV9c0vsIid2mMH//ARb6nSsJsiX/9XR+mIzHgX\nFNsET2isxxFMM0ffdxomVBb1UUi6YsxKYcxGEmgGfEGZx6Mxen25m9SS74QY\nMEtN\r\n=7s1P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.58500806e.0","@material/base":"5.0.0-canary.58500806e.0","@material/theme":"5.0.0-canary.58500806e.0","@material/ripple":"5.0.0-canary.58500806e.0","@material/typography":"5.0.0-canary.58500806e.0","@material/feature-targeting":"5.0.0-canary.58500806e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.58500806e.0_1573227364624_0.7354516895476979","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/form-field","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.66299b646.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30a32806b475d8d2be61c3f571d75e86a7186c30","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.66299b646.0.tgz","fileCount":30,"integrity":"sha512-a4PNQWgnOEy9raBAtHfJYLYX7ryDWNiIGWEUN6iYS3F8+C0j/54m/IEG4vurKiC/ocFWkVaBb6HTBvFGxI+T2w==","signatures":[{"sig":"MEUCIHhVCdmnrNJiJDM+n8VPZr/Z2pedepIxPj7vi2yqZKQNAiEAwFX7c2EqNLgGVVMnPkzbeaVivDXkJAOZunnYx13svvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdE6CRA9TVsSAnZWagAAHrwQAKDeKbB77IrW3vWNPvmq\nLuh+6wwBfQEPrg9tC/KTcMX6RV0Ui3W19M+8X/fHrzkTwti6uSJMku0A/hqK\nNTQYunHcRBNBy4WreGpFUactzPPP0rCm6y6ih1pgPKd7kR4VpKTmzGHTCjX4\nitEZfHSEyLwZKLr7HkOe2iKzo2yjnUaDpDegyUWjylaAVjl88u59UcIJ+AUI\nh6C2b/G8t4P+/vGMSs5CDMqRNMSgJWqhezNnJPcr2wP23qQfGG71IDNEwImp\nL6ysVT9q/Uq9r3oVtRUySQ5pj9rTTxZVls6W4c/K5l2AMs/WSuSAIMGU8MuK\nXrH/9p5qKX/kgpB9FTpHt5jj+G6/woyFdmP7dH/OL5MYejaNkW4e7v8nTblr\nEizslOxmLH0vbfc4Izp/jU4jMc9d/56KlN/aEbFihhfJElq5Rhxdt3wdhlaX\nPPdXGCBU6e6TUZ9lTgh/7g/W1tIXf6gYdPWcQr/cuN6353N0rffg5PVH9gJA\nlr7Lh2MEulNE1cry2SmDj/1P3yBkUtBM+Bd8YkQoCxy427f7ElQEqj7Qnol7\noYNyE9L7Q8aiA3HD+LmEQlaNAj5eOdf+hSIGr3K15WqGXEgC+7ZnOubWHHcA\nVsA6tSnaVxJNwf7NQ9j41LbyPIxBUz9bWAswghXM79Ba9tWRyni8aalq6FMk\nilfx\r\n=euCP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.66299b646.0","@material/base":"5.0.0-canary.66299b646.0","@material/theme":"5.0.0-canary.66299b646.0","@material/ripple":"5.0.0-canary.66299b646.0","@material/typography":"5.0.0-canary.66299b646.0","@material/feature-targeting":"5.0.0-canary.66299b646.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.66299b646.0_1573245241741_0.5772696585836319","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/form-field","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.821871e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3574ea96c9ca4fc2196624885ef5bf7a3829df76","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.821871e04.0.tgz","fileCount":30,"integrity":"sha512-STYv48j1BnBAdJkLF/O/Q5zKjGcK2j9QxF9eD0dS4mCJ0UmPcVB4cgpUHnXBPwLlk3wg5qgJB9HmBf+rpO1Xbw==","signatures":[{"sig":"MEYCIQD25yda4EnF97Z3UFIH/UB7s0vY1CDm76KD9eAvsELc7wIhAIMHPu6VCaNblcE+RftGpzP1H6nlcTat1eEvuowzjz+N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd4ACRA9TVsSAnZWagAALcQP/0xSvEaSt1Ho+lB0PmqS\nhNcBqMQqBGkcL2mRPNKYj6HBThZ3YyT8YOreLsj1HLs28iwE5JteCg6KBHPF\nCvmt8WnKJL1GsTodvs5nvpI3o8aQnibP1sborNhrq487f/+2WsemVhxrebHG\nKxoc8Uf5g+cbU8IpUDh9bXVJWkcXsRLXpOBUeXH7wAQdU9c/wSh4L2/Msean\nbIhEB8R8aakw4gnIWxSmmOBixMcUwJdXdPuFjhcPiHwFn+t2FvUUFFQtE5ou\nH+XVHnvSs34W2BZfjYCW29e7NlEjDO4wriO/PExfgHtxVHR2W+leMwPqcniE\nAGJYD4871ZZqbo+z4l4xlHPTWyE7SMrsZ9M+7LjgFhOBHznG15/khuMZ2hyj\n48TclHLqhvV2QdyCAZdWKiDxpdLAj9KvcO4vvUm2C/OsVC1DbqVoHW2nn1tT\n+liCVrR6Ui4FJ0Xk7+RyClwh4kI0sRMPkwVBr3eo1QLEbIpXq2Ztk9rsio7X\nso8yqSVbaANY/5rOYtGvLwATcoYQRrVBFaUnsr1+1Ham0EpUKqzxwZMp8UD2\npazhie22itJddLFrtwYSXBe88eMxvm9ekDLFIndBltVIi/TLAMQsG2WrOCjM\n6hFyLE02VsDXC23sQBOYpb2RqYUWF6XGdYoaZMvFvT0Qt4ZAKNSmlZcaaxfv\nwQz0\r\n=lqi0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.821871e04.0","@material/base":"5.0.0-canary.821871e04.0","@material/theme":"5.0.0-canary.821871e04.0","@material/ripple":"5.0.0-canary.821871e04.0","@material/typography":"5.0.0-canary.821871e04.0","@material/feature-targeting":"5.0.0-canary.821871e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.821871e04.0_1573248511846_0.4129272191330804","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/form-field","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.491fddc31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ed122581c54f1f9a6b92fa1413ac1439288c562","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.491fddc31.0.tgz","fileCount":30,"integrity":"sha512-NMckPNtjpaQh2mlo3buQuZXKjdXA0aW96EZOlADIQvKYHIzDoZcg4guciIsqb6pLY+RVElZEGhpzMiPKlu99pg==","signatures":[{"sig":"MEQCIC0gylwNPTZ3J9B6YWY7QPDT7m6hCqSyA/jsKqZJNMNUAiAPpSk7dLCAo5Aj4uisR8cUCOUzs7qcq/V9fFssY+NywQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxeclCRA9TVsSAnZWagAAImwQAIiR231ZQ4JlZMlt78R2\nJIZrPHiqAYxKgeGZ3c1eF9JcblZNmVEbF/I+SoganhLfcpYYMdYWX/ONabZ9\nTW3jURj+K+/YCxjTi3BDkFiflXgoW04gEGkBD/GtnIBG4K/zcgTEEX4HDGOD\n6qKoIzeNogtT4s3wP4muUJ5oe5BOLs5kXxWaaPcg0ZQVJRjR7GwFqVu7KROi\nD26mXjs2gLRDPfyUL+gemClzv1F7eFB2ouC7yrUhI+M3NkSXlMBHPQarSVp8\nwWonAl+d2CvUB1iOlHznRaSQ7y09aSyyV29kybKv4Q+3FVgD0P5VMxq3UoVQ\nHkcxeGJ7YsV31NRH1b5XXiaXeeaGGcv53+7Mb/oxUT3oGrMY4Hq/lbqi6c1w\nXvS7WEI679feYbr3aNE5LAGITskTssVnA835ELNgLRRbkEsZd2DC1J/2n26b\nuL+lOVT0m9TTRcFFAfQIrqoVv2xkv/aoBdAsjkT8RlJ0My8LtCkOONmUXML1\nkvLfJTFEsh9ccZ8zCeymlqe7+uy2v0lI2pF6NeCjT/WnC4EtZ9wVXzj8y23j\n02QNWfqFYd3U47jdYsAluBzIcjGPmMqeH7Wf3ZCrH+eoysuaRhSZLAnMQDfl\nvG0Ft5url8lWzK6bHnDUH1alcf6JurVwiCCu9zRAr6NMLDO22f0tlH/dy1av\nFApR\r\n=Uwgd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.491fddc31.0","@material/base":"5.0.0-canary.491fddc31.0","@material/theme":"5.0.0-canary.491fddc31.0","@material/ripple":"5.0.0-canary.491fddc31.0","@material/typography":"5.0.0-canary.491fddc31.0","@material/feature-targeting":"5.0.0-canary.491fddc31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.491fddc31.0_1573250853519_0.30816101050503364","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/form-field","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.b0cecf145.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a73bf7a5d07044205078d359ae0c9657f06192a0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.b0cecf145.0.tgz","fileCount":30,"integrity":"sha512-dKeZwq8AoRY1YkjCjXUo7A9S6QmIXaDjRJ9Du+LSueSpQZ0Aktus1xjFgYwQqPnLOtb8ytLcXIQvOAyfbsvZRA==","signatures":[{"sig":"MEUCIQCu15x72h7nUDZCGpYfQtxGBVJReSra437Xd9KjokxNiAIgUB7c6xFT2U11zq/fkeJU8YWDsS5TbaRxnX4ujLJNmxo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwihCRA9TVsSAnZWagAAPvEP/1e6CzmQaKlEXUazYLhi\nAgIZraNTRUZzmNADRF2nsHpKtTtAYw702mR4nPo4+hRMhXQ+B565ynvcm7N9\nXD6NkqACuzz1Zd8UUpI4h35Qr5ihAJ+tlh5R48+lmgeYw/r6MPB9f6U9q2BO\ncnPw46PtlbprVblhfo5SJUDGuriIAGSlVWoFZ3dSZmgf07Wtk3mDngHV1GEa\nbQa6SnixBIcprOKzZipko2OOqbEn5XxGaYQnBkZ6EbwVKApbgvqT2fiVE0e1\nOHGA5QlxZj1P+53aB1pJdqiTc6ct3US3DZpXgY/fRWnMgwdaSmU6XxvH0WcZ\nD0fjgojePgoZ8FTg6V3lHzx46WkTUxmkS9l1/B9bnTQpn1wZIg+rPbxznxFH\nKeJXvKJtYXR9xLJ5f3sxUL3kSmCWW70G7a1Xp3jcZfgSonXpMA7qwZ8pOn67\nyZBAW9ZXbzC+yycv9XVUzHeBwsFKEUIprTTuGOmr8EAiyHvhVM8WWDs97Vdr\nI4JRWrwA5j+VKhOMMo0q2ZEtxy2I14YEm6zKmeSQ3wXlL5MprvNFairy4Zd9\ncHilyKlwujnm+7oNlM5rKxtqTXJa1O0OBYRXihfeAx+13XUeScGXs6Ehsli6\n30Qj4YyzVyYS5W1bAiyG/NO9A5A+693ncFLIfYTJmMZ7rDvn3ZAYPkKhox2o\nykv6\r\n=r2mY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b0cecf145.0","@material/base":"5.0.0-canary.b0cecf145.0","@material/theme":"5.0.0-canary.b0cecf145.0","@material/ripple":"5.0.0-canary.b0cecf145.0","@material/typography":"5.0.0-canary.b0cecf145.0","@material/feature-targeting":"5.0.0-canary.b0cecf145.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.b0cecf145.0_1573324961433_0.6479143360935353","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/form-field","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.afe0dd1bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df9d3bd5d9da0502cf5c5779022e89a6f974ba92","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":30,"integrity":"sha512-/2tXPu04HItkPEAijj1J3xwS2sssRSwkNEX5KuiHizd5iwXfvKb17ggcgAIoaps+ucZ6AJYNiCGh1f/OzE6Mlg==","signatures":[{"sig":"MEUCIQCfBr37reu4N/YH1wSPn+bbdUzsI8nL2/9wyqzkQ7qGdwIgIdUWk7WS2Awhxga0POuF/tCbBGcEYUDdegrGjGDc3Hw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYBcCRA9TVsSAnZWagAAmFoP+gKUfnszB//RhOjJ8A4L\nulbcLsRamMbDkH3p3FLtq2CVr2r9ijWr8tly2ZRGXGKy2L3NcTcTK/FohaKG\nZaekw1kf0ENyJ3R2TLUNknYQyc4zFbDMNEpPDpPuUcigz/r2ZmZQYFjC5iVh\nLtuBQwGoS6UQEOs5RxJZIIg02MxMMIShcAx4AriXHxT5x7bqBGM7fE4Nk2Qg\ndIm4alweNqJLzfngrrfQbHAHM93HrTpsenOLpHvYPVkNBzMOMwhP0p8zqFUM\n0F5rfmUeZ9Re63Maffan6MxuwGJjCXwZaEUu8U30TjZDNQafPBSWh2872zHv\n/w2dgYmOOBz1tNoREBRjNU4hq2wx7sRolYmMRMhBUlWdjkEDN+naADhIKQG9\n0GGS+0P3ZVOdcCsPmCu5IZnMSN/QjOSfbtSpv3ClL1KYCGzXvTcpGmnX21Ft\nic7PRk5h584UVVGoWQx6S1Q5u0wSB0JkS9xey0BotxLYf2PiAZPRBkPQxUky\nkIzK11lyfyo0i2tvnsrfAT3ro3xJVm2DxH7ounvyWzcvKIs6KE0afQypYBG7\n51H1DP7ZLLyfvQKflHdl9uoXWfHAMSRPiQrAezxpcjOnMJntmP9pm4GoePRd\npeyDN9brJr3XUkD4pWO9/dDo3Cy/O4/DKidN7mF5lxSXnUJ+oQGtlXFd10in\nS+0U\r\n=SURP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.afe0dd1bc.0","@material/base":"5.0.0-canary.afe0dd1bc.0","@material/theme":"5.0.0-canary.afe0dd1bc.0","@material/ripple":"5.0.0-canary.afe0dd1bc.0","@material/typography":"5.0.0-canary.afe0dd1bc.0","@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.afe0dd1bc.0_1573486683600_0.28302756215514857","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/form-field","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.b4cfdc40b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dce420205aa7c604f395b0513665af2b30f8175c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":30,"integrity":"sha512-JBqgCCkRblLOoC5UZd+oT+bZIDM5gu8EfYW7p45sSQmXR1GTDeafkfNEUpFEg/ISXn5KUgMWPMeXOUiYZ00t6A==","signatures":[{"sig":"MEYCIQCHEb4aT08LwLTS1wkERa0eOX6KzNcTv7A0etwbjyzXsQIhAIg546GJyB7I7DnEBECw1fic5IsjS4bvhxm6/zo/dBaW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXnHCRA9TVsSAnZWagAAyTgP/jnGcq/MOpcLMLlhC+xp\ng0I0PKQfriekjdOiML1+t3GhPa3dYqVAcfGfU0WyTu2TplVqODcsu15LoHN3\nvI82tSLcOfe6w9r8HTqSS2HrnobuyJ6sDsqQ26UtYXJbp3G7AsBb3uImXCcZ\n9CHqJ0yLCmClO1eJ+ZbQZcd9/GvafcmB6CRgkKjJFyFo1lwxD2zRf7nBCYr1\nYWS2L944Z4GvNbk11PAwk8V1wVmMcLEq7n0GSGATtJ6hwGP7EUo1lGq/Y/nG\n/nACeelnbj4pOzfc0ppL30KclS3WUkVVItClLb/xASWa1jxNpD1Mz3C7Adb3\nlZgYWzCr7nCPShnaCPpR85hmcoKz92iJER5fvh3pIXSDxSMRu+yx958I10qy\n5PKn0MbeXMnAeg5W70u0fwAVarIA3tsuirbwajSUQ12HXxoIpuObdpsj4khL\n/jkEnvSiJuFs1hon7nJIs3vCxzzW7nAs9q1shgz+jfDGggChoBVJPwXIaKGN\ncxzeGJcJ8ycmJtPRMD0xF3RcfRre2Cerx38Kzd0zv2J6JhbcW+KiF/m8XH+X\ni6HMRtv3e8bFiwAyUvcxu3JD1anbNzT2JiZtQWyo8hqLuZev7aUSVkYCg7bc\nS6upId7tzcgme35rduLb2N2q3dGFBxsboY8qODYdj0Xv0yocB7vLBPLsNccw\nP4hG\r\n=1pKK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b4cfdc40b.0","@material/base":"5.0.0-canary.b4cfdc40b.0","@material/theme":"5.0.0-canary.b4cfdc40b.0","@material/ripple":"5.0.0-canary.b4cfdc40b.0","@material/typography":"5.0.0-canary.b4cfdc40b.0","@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.b4cfdc40b.0_1573747142524_0.991839929562305","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/form-field","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.525989b5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18fea1b0ed427292af4438974d4d7d6a4271264a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.525989b5d.0.tgz","fileCount":30,"integrity":"sha512-lFnfSiG30EB5Vsbmcn0QtLYpZvAG/gauYH526N1hsyGuNjPTqR3SLhGEt27xyzNE3if7B13yEmw41Nln/eR8ww==","signatures":[{"sig":"MEUCIQDKPFJ3W/9lbsS8rYN1EjNhmjtnoiJ5ykAhqAspsxQ9RAIgYRuzYglYq/3dKkvvUS38rKBt1CSUcodwYn9n678dsYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzeO/CRA9TVsSAnZWagAA758P/Rvo2akLuAml27eHwWkZ\nrvBt4gMCOtT+bXd9hYGqH8CSOZ/SaVNqHXMmsKI16Q4SxSSR4m0HhXcxmyVa\nLJo6hPxfakGRWCWcJ9fRRHXSVTRdKweGVYkTZo7GKqst4kBLa4oAQoMPO/li\nqYV/45+B++ZqQ2R2UXQICbGB5bW0saLeBPX9oPybDUh8psQVjoGvLtgI/nTi\nA137dlxVZ7obowdN01GfSjghiBf+nf+JanpPfXFxBEAKMoiN9XgejMtpXVJZ\nDj82Rn5EDBVQcPNs/UV6qKZUsfSP6yFHiWYVh1UmXx/TVbpMLX4JQnKOZAj5\nomtFD7cLa5T+dizWrwlMgxPrG2/A3t0F8uQnja9XucreOJQThjBozMXQ/PSV\ngwFuh2PxPPLqIwgOfz+PoX5zILgyLNnopg2equ7Coxui2mBVPGs4/s+2Bf48\nv4GoVOzjZV/YLN0KsLl2lXa19ghwsTV/EiW2ID3ViEb7aiOh4sM/b37PhEZk\nfJkOMqW/LBIsoPqIT+EL2Em9fjFVUQIdmQH07vZcfsPHRMMEwGAeNwoLDWT9\nMcJRoz/zvcg+jkaBGYILXpckrQ97JWb6C+1Nf721Dmv1tXD2j1uYML2C++QQ\nJFu4+hwFgvN08d2w6ghqyCz4ZotHjWnURCvK83dJ577Balnw8e1Bhx+FlY65\nS2Wj\r\n=fzzZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.525989b5d.0","@material/base":"5.0.0-canary.525989b5d.0","@material/theme":"5.0.0-canary.525989b5d.0","@material/ripple":"5.0.0-canary.525989b5d.0","@material/typography":"5.0.0-canary.525989b5d.0","@material/feature-targeting":"5.0.0-canary.525989b5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.525989b5d.0_1573774270927_0.30803635912312854","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/form-field","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.7084b403a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29c54086247b3a292260c123affe8383a4f9c6b4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.7084b403a.0.tgz","fileCount":30,"integrity":"sha512-Ij5+OTDWZOVOPKOJwLLenguFfGqqfUB3bkntsVAv3LknoYLEjquYKszPa/ZlKDKaVswcoMeZ7mYhQKarlv5xZw==","signatures":[{"sig":"MEQCIFuL8gsOBPvRTVifvb8TY2M/+wCW+ZtKUiYdKyTrbCtyAiAaXMBnn4R2xGMY2NR4kieWHc2xQzt1D38fzoWXuIhb0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfoKCRA9TVsSAnZWagAApNAQAJLnHm8Pj5n1StkxIapz\nQdl/U3MnYN8BMWcMfKJw/oTkcbzcX9iKc5rnDFvYID7cKdKD146I3hGsoWGj\n3dswK4AT6FqaUAzQWTiU9+uVd+pvMcji2HiIiJd+S/3AFrkKSb/aIMKcTXR6\nCbHCifYyqXTOnHXsVH73TPkfmtWun+txeHxleaPZdhJfhZtlsLQCNSK2bbLI\nQ/vtE1gKQ1/vFF/NvsdYw5UfLzEwZK0gKv7LO9tagSY1xBV6zcXvM5isFUYG\nxSRnJ9cjHEE+7D1Iu3NXIrUV8oS0YlbHJ1XbSXQRaxZLgcgmpcrjYDrY39qm\nuXXMu29LcBKMbTrHfDk8zBEfExtYI5GXRiN7PYp9h+GxmGiHERdd4O8XypdH\n+4XaQgsHcVyfLt7TMhzErrL0yj9FBSenLsnB+57bsz6tQUzr+SMru4TyVUhs\n19zSxQQOuKrA77SaACvRGGEgcL0bOrYfD1drDAYlNJCk5vYYOeHZC970Dii4\nBQaZH2ZnXsWQ4wkVPOdZMG6S0TGNfVB3QC5b451wzPT2iBN1nZusiFAYk3Mz\niGhkuekJ9zy8Tki2atqv+w7bfpUhTLcCbZlvOIzEaSJR0NBOyOAyQLkSKo1L\nbDnVwM8jUEHDWYhFAEoAxp51LMzDkVYnyjuHTp8yqe+RZTa9MX8++4G8ZAh4\n1YuL\r\n=wXTT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7084b403a.0","@material/base":"5.0.0-canary.7084b403a.0","@material/theme":"5.0.0-canary.7084b403a.0","@material/ripple":"5.0.0-canary.7084b403a.0","@material/typography":"5.0.0-canary.7084b403a.0","@material/feature-targeting":"5.0.0-canary.7084b403a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.7084b403a.0_1573779977609_0.5820625456233119","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/form-field","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.3cbee6dac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4b055282cbf9d8af73775924bdd22cb770c052e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.3cbee6dac.0.tgz","fileCount":30,"integrity":"sha512-7lfz1GBB+BFlMcmJkFNEroWreJLTrMiqq/yl5D9qMkRFQ4zlp37OaOBbNfa1Bb6fsdISeUnA4RIrI36g21UiwQ==","signatures":[{"sig":"MEYCIQC9SQX1LBvVlFblVkkeV67vWo1emsDeLWXnG0i2nNK2uAIhAN0pxV5HU2uesjMCXybgsxnl7tM1fwJg/+xR+LlsCPR0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyelCRA9TVsSAnZWagAAuUkP/3fKQEifbaxNoS/mlEkk\nIpvKiF4I7TpuPYL3LWhWTvKUcwrEfCKkPaoKXevFlH4w+yoCnFOo3Gt/Qukz\nUgTSp30whShw05BDuGbZJ9nxZjxKoElGNPEsXlEQoMSUxZ/seHR5618verPr\nVk+6zdsOfx5XjpveTdp+waVum8eCSu0a/9ZgA26Wm5RtClk6qtjpGWPPVYbt\np69QXRpxKgFp9eFSnAWfigjYY/3ru/iioOZ3FjcSVVsbxwtH8F73wmIB5MBt\ngIAnRK7ppXDbRWQKBBbP12ROMDXroKA6XW/8a97TLB1KWkTcaWlmZzX9QPKc\nY3luuvc+3lqrI3F3f7WUqjpMEW+Z1gXJknTNQ3dtgtJQ/fojNY298oxN/Hcr\nciun/XkFQzZiAyc4rawCamgVyp1MtbT+teTV3Y3rEDm0Trh5euHFWCpmm7xQ\nVg4xa9Y8phkukX2IEp/B4ZrBqyFwF5UdQio4ImJ6w9iNI8p9vC3F6t9jC32R\nV0By1GUvOWpoRWCbuBwKpzn717nUD2dUuzNkwcN00jxOPWM+0kiwXHnK8vUO\nsw0DDT5Rg2Wuz4E/iq8S1LucBmKkUY7eDfS1511BwBXspSUuQTeYZ3POQwYc\nACUMGbW3mbmA982m3lIPeLtTLaYQaOi4RPMv4rXelgrwSF9vbt7zYi0C1jux\n0LwE\r\n=n5zz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3cbee6dac.0","@material/base":"5.0.0-canary.3cbee6dac.0","@material/theme":"5.0.0-canary.3cbee6dac.0","@material/ripple":"5.0.0-canary.3cbee6dac.0","@material/typography":"5.0.0-canary.3cbee6dac.0","@material/feature-targeting":"5.0.0-canary.3cbee6dac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.3cbee6dac.0_1573857189225_0.7366180990483482","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/form-field","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.591a6ad44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3fa37c3979a83bc8517495a13e6499594cdcca9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.591a6ad44.0.tgz","fileCount":30,"integrity":"sha512-JyIibC7f9F6ruHTUwm5L3/PObSbArE+bUk6jDJlDEe5xTU3IhIVpxtKmVZqR5zTyBkip3T06pnr524PwWymoEw==","signatures":[{"sig":"MEUCIH9XyWXa4tBQnizmkp/2/QOSxBD2+2aPYMGzKO9vFvLNAiEAsEX738XNDXD3tX4antJ2+Q4abQdvYkGcjUhZeyPvkv4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3mCRA9TVsSAnZWagAAZw0P/2izZuB8dVDlMgyvpogA\ngg3dds897gBBQRJc61WlLC02bNHXIHK5gvwwPmHKHhnAkAPv0UKwvLkpzQ9A\n1CaSuS8c/HN0TxCzIwPJY7dAK3nAjEiPC8i8qyXInX+IyAD1XN39amwDIvkl\nd2NNqtTNUpSxcfdXnC0V12c/6F8UIUT9qC7gBGfWpzxy63RU8k2rFQVFJPZS\nqppmUEmJxcXV22BATaCpcueuYnz8UZuYHQxcAdGaYk/FEdCVnxp8at7oJ4MB\n2n4Bsh2RqmiU9EyOSEzr0KsnQO03VGPB5DfSeZbWgpaYYO4Di8MQ5dBygIAF\nPO+CXnf3uAFNp9QiNI7/WUY7XWazJ4PPB+Z9owsF03waqk0g37M2iIJ4u6TR\n97hjHEB9V3rF9WfooP+/z/sfHKIt4oTvFPUDQdQl4HPgN0WgGw3qupjm8xLI\n9i+qLHDeimuRP9Zd1ah5GMOTZhpq566zHHldWb41TCyZhXsWeQZjJXGgda4c\n6InvXzwWRXAmT2eZ/a2LbHm/JDKm1bEB1BaudbwG7bjTdSuf+SMiouy5siw0\nOqoVE0TjapxJiyjkDkmNSqHeZo1FYtlxvF4p6AbAWfCqB8h5PMoHNHPIysya\nEPTK/efkIBUJA8tboU3lWJbOwtsfkilMjUc56KnL78kU+aU+pbWKlFXcZB5j\n1Jnv\r\n=nB5F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.591a6ad44.0","@material/base":"5.0.0-canary.591a6ad44.0","@material/theme":"5.0.0-canary.591a6ad44.0","@material/ripple":"5.0.0-canary.591a6ad44.0","@material/typography":"5.0.0-canary.591a6ad44.0","@material/feature-targeting":"5.0.0-canary.591a6ad44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.591a6ad44.0_1574120934449_0.5324627898316474","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/form-field","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.5729943ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a229aaf39ded827bbbbdbf8d781104f6775a07d1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.5729943ba.0.tgz","fileCount":30,"integrity":"sha512-ebfFH0atMvOurFd1ZAwnHtflUf7rHLXsApKJy0k6KJ35vf/3nH8MFeJvLkeurNZ5xvVk6giClDpoYfaXjhRVVQ==","signatures":[{"sig":"MEUCIQD8UvpQvzB/dMjGCOtr1iVwXAD/hdNaeysv8cjwYpIxigIgJ0WKKEVGvjcRDT4OOoHi2U9oN/NfjuEULEhIR/Uefbk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":145399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1MzxCRA9TVsSAnZWagAAYi8P/RcKWcF4eV6cjJKFXtY/\n2cItESEod7GathPXn29W4yb4Bi4MUtACHyNVgx01r0xu+Yoow/kZxX0dyeW+\nx7+KtXiuUFPpqSYk9aExxGcKEW1Y42XMfM9SSZHakHzpzepa4pDQd4ZbJ2DQ\nr8FVJmXLmfj5/XC0hV0JWeYoZc+rfOhcJhMIPFYaoeqRnRPYJ9b2K9MV+8G8\nwy9Szb1cgVT23DuiBhlYRgh/eQ8f7z0diM8bzHgy4JWh/HADREILTxnR5Sae\n6XYojlPFBahBq5SaQmUIpXSik12IqMzoWP+L0tXXVq1OrLb/Gmw8nwA+LF4k\nKuPMV+mVwMZ2hyUhbQM0yr82pQY6jM1Xy2xfAK57J1v5HawMBf8n8EjL2ozF\nswj4w4zjMsJJizJiTsG4Buk5JO8UBi8UZ9ZLyxguDbnvYFMc6Df38ah7HJWF\n2HrBgtzPgw6z9YD9Ze5dkqpdmALzAR8pskzxBIecimzkZQOJnCMf4Z2DjGm6\nE/dQ4MepcSLVkSVb1BAd9z/9EGE8pMjFAufM0dovFefPAbV4kwSWdjCFRinR\nJUYO+I7vz1ljm1ew08nKBpkS57e9zL+mnGlUfTLVinDJjCXoth2GVfnGYwub\n4tew7Jq9YLGstRtqgZW/DdIdomx8SyjZqaJdkn6T9u/OoNDCkq6KPai43NmP\nLwie\r\n=HBvh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5729943ba.0","@material/base":"5.0.0-canary.5729943ba.0","@material/theme":"5.0.0-canary.5729943ba.0","@material/ripple":"5.0.0-canary.5729943ba.0","@material/typography":"5.0.0-canary.5729943ba.0","@material/feature-targeting":"5.0.0-canary.5729943ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.5729943ba.0_1574227185148_0.4936292514084355","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/form-field","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.e89750dc7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23491e98b2833e5be5e389e526f14a28a98c659a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.e89750dc7.0.tgz","fileCount":30,"integrity":"sha512-QqIm1PO1SbXQBvG5aqyyUDNHJ/unJRhEFjWUx8DW3A79ytk0WIl1Uong5Y486MzgCeI9sl23NUe6WQqNtptJ+g==","signatures":[{"sig":"MEUCIQDNgjC40xabQHsVeXp0EBcpSyjk1j07WPyRU7F2FgTydQIgeDZRdoByee3GHtcd1mKQen3VxszOBZd7PrlH3naeVR0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dr/CRA9TVsSAnZWagAAZMYP/inoOhU5x4zYD18LAL73\nbkno1UvKl8Z8SyrKsjrb8FkGJU20JdWJfUqPyOg9oP8d1WD/XjkUE92RU3kO\n2FMmHpGm8c6FE602GLAI3EMhDRNNhjFr0fkmgz0kda3kUuYtbQFrmJavNR/m\nTJgxsBLtoTSoo6SFH4kp8lYRfP0WoL78dL4ZfsYzispiez1zsCEw2zAfloro\nyLckxX3eaV2hK4lknh1Xm1oviiITphQSfviF08VFJirJmYGZvuPH7ZGzGu7F\nzuQeQYFwwWzDXHIGZ4+pidlVrxMEVosqpyhEoOeZwUU4epYfhR67+LxVedqM\nV3b3ErS52eyHoNpyyeLVbmF4zMsgaGSR//tnocTWu/BCrKQ0tvZXRcV9rg6R\nSVXBXaeeFSO/gFZnr00Ki7J7jzeGGRAC3ZU+qbq1i0tVcrs5LW1fslb2g0yi\nbkQ6gGhtsRZ5Cem8LpioMuAI3ZtUOHSLsldfhln1fMRYmO4hnzHWjUZEtP/Y\ngg/Nt9fM8Rhc1Fye6emRsplCbKxvc0MYqXsboJ+8OzV7yVqFHeMDA+SbLvxa\npmQFJjwoKSsM94oYDFxli617Yml+VFsswSobvGZuszSL2luW5IJeaShKSggw\nSunYqkDm8mRjisi/1Sd300aN5MMI/lMJaDO1wS9TYoQOuoonTFUtB+8PkXl+\nrvdJ\r\n=mkvm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e89750dc7.0","@material/base":"5.0.0-canary.e89750dc7.0","@material/theme":"5.0.0-canary.e89750dc7.0","@material/ripple":"5.0.0-canary.e89750dc7.0","@material/typography":"5.0.0-canary.e89750dc7.0","@material/feature-targeting":"5.0.0-canary.e89750dc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.e89750dc7.0_1574820607568_0.6879223218833761","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/form-field","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.3e560b33a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a8ecf1da415720b713cefb77df3507ee4e60c7a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.3e560b33a.0.tgz","fileCount":30,"integrity":"sha512-6OfUXWsBeGb0X/2ByaK6oINO2Qw82hbF+e5sjKez6AFoQ6dHJ5NSiqX4Gshc3ehliHMFw1CSTTe7uH1Kjg3l3w==","signatures":[{"sig":"MEUCIQDm9XRhCsvfXgRdFPMsKvEfhFciHn1qPpUO8fUV1acitgIgT3jaNzxxqkexvAFoiH6xj0NOi3QISIs7Kczi8lwyE04=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsxCRA9TVsSAnZWagAAy2oP/jqmc+utsm4342HRjHf5\n5qM3vW0IGgG+NWBGAmR28mx7kgus3BSgQZNr3hZcORTyvVKAQUTnuXu8K/9H\nBG0huLfxANRAgWi0+KJ0OdJ3VWG+jT9l+nDXooFrvBGCUoZyNT1zxUxAers0\nAZYopTlrBrXg0HsimhFcfD3BoPplsxE7xg1EFAgzKsVzgMuKkyAjHhTovCUi\njyj7dVktiykHaddDB/ZolaEnERLzLiBkk6M0zguIvOfXFdhALnPmVgCRsoDm\nLo2DABCHjnUcG4wAXVJDUfpEgknWBIjWIXudBW8aiam30iiAB7rwqXfwnPR3\nOkO1qP8DKtyo+qPYBBDubSm5/MBG4MBwhySlfBPG9P8N6TTyqc7mlBuYGOZ0\nwtkUjfVMzGwdRhsPnxhU2hqqa22wg6trcpgmsNij8xLtoObFoIWI/7oTIJYH\njB8kSkavOyHO5xN89arY3BI5nRRsQyc0Mi1LQzaAbiHO7PSuNjU2UPyIVsgt\nmjZfs2M2UB70C8Itq+ZveY7GUydjlCRHAJ/jSRGIQL0PseWtq7KbBXSEaLQn\nlvnedK4hhRoxRKtnvsHkpdVbn3gxy1gaFTytwNH2k87BgYRZKlCxzTcCC7PU\n8KW6JbX5vJCATjsr3D5xYTLKMQzqTE4SXY0gL1Mit4iquytgLc17rJlnfPKD\ngGqc\r\n=Gykj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3e560b33a.0","@material/base":"5.0.0-canary.3e560b33a.0","@material/theme":"5.0.0-canary.3e560b33a.0","@material/ripple":"5.0.0-canary.3e560b33a.0","@material/typography":"5.0.0-canary.3e560b33a.0","@material/feature-targeting":"5.0.0-canary.3e560b33a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.3e560b33a.0_1574820657080_0.11750398824318853","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/form-field","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.7fd17ce5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3b5a20fcb76821322bbae44ea449baee9e11020","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":30,"integrity":"sha512-ZsZmqDyJWv/DpUCPayVq3fLqmfiV8Jw/aKbeUks+Mwu3fIXaN8wKOjJy55+TnLMHCkD+rM7UrtBLO6bE1GhlNg==","signatures":[{"sig":"MEUCIQCsHV9Bgvs1YfNOOUGwspbV8mjo+Nu5+RAZzTsiviJ3wAIgbS57kv500gZCD6LLmXvS8/iuRxJLhbD4jGNb2PgifI4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtICRA9TVsSAnZWagAAP3AQAIq4dPnUU4EYPhT/0GTy\nnhfbV1EZ6fv9M4/bkzzhF/SnRwozEbAPI4IqUF3ZPHScuCEQ4Z30VEwpYtie\njnUSKfYwclfNT2Sc4PG+QIuaWEOOVa7+12MkuGtiVref+esarqZwPDSha2Ic\nvMyGNPGvkaLNvGpNNcJzz7pArC2y1po3whK5NQuqJxTZ9tyDtpkHfwGyT8Pd\nMLcPZgraBU92dzZ5QnyXHoq6cb/TQIE8FDNZXQjfOA5ELYsNAWm9ADQ9SXdT\ncDumKcy54dP1behM74I9s98Q+iv+rb6qzh53YncBNv6dmPvu75BFgYHSBQdV\nDeyd4fm5mBcsOFv0PYAMIndda20xnkjqSkCs8/QXwqM9lFoYn/xCafftX0kH\niE9Oh3mwu2UVxxJN46xkaV5dhjJPhBpsbo/LhKZfhkRxQZyOTDaDliAX9o5x\nXG2iO44GNFbTm76W66hIy2h2PoUqXFZD8m/QZ1CZIDYQrz8h+O5BF5/uScSj\n/cdDHw5NsnjB/JMumnWrW3bnF4Kl8G9f5a4CsFTgkmROzsb8pidvFutadqmc\n6dVkQZVJucalcWpVydEP4bOAjWxjm5p92H5Z7Afu776W5iOgccxmV814PGzV\nKwvYn7jL01HWmbQfiorOPntXQUn1PWn86HL9ZNlCFiJ3utvodCZ7JOPP2Q27\nKvF2\r\n=3h85\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7fd17ce5e.0","@material/base":"5.0.0-canary.7fd17ce5e.0","@material/theme":"5.0.0-canary.7fd17ce5e.0","@material/ripple":"5.0.0-canary.7fd17ce5e.0","@material/typography":"5.0.0-canary.7fd17ce5e.0","@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.7fd17ce5e.0_1574820679961_0.40173183991407124","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/form-field","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.ec729683b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13a1defeebdda93d48a281d5c5cb658a74a47ecc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.ec729683b.0.tgz","fileCount":30,"integrity":"sha512-O3kYdiLN5tU8SUgRdO+A1LuOQP1TAGrO2yMavZUtHvJ4eiuhbtAyoxtAnHT1r3XRAWgPsYLwEcUpnJYLWoKwhg==","signatures":[{"sig":"MEQCIFEiiS8g30e6uq2e6JUYOvSv6kMC3lMKOehi5LnGWH0iAiBStzBYdugbliC5Ltdsv0HsTSr+ZAEbRNwfq86a908jTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pxwCRA9TVsSAnZWagAAs+UP+wQ/XuKsh1erCGLVv2do\nXzvhC2FEcu75Mw+WzdPg/TkTzvgd7xkWbu1lWyaCtSqDZxTQ0fJARdN7SMaR\nhnPVma3tIcgFdpBt9B4OOqfeGpNPK+GS9D3bEunOxlJXUvycCpKbj+ZbYjps\nA/Xh78Not9d8EBL2ig09ejlnZUGsaH+xRFKQbEf1+yZONFw8vOaBVQtGBDik\nNJVyl1pGfOU1e5P9rbKg2tkvtgNY4jxvgjUe2sPRUZL0iIfhyCSv1NY4URFu\nM8yXO+fOXpkGJKQnxXDV51MnX2EPsTKTvG5bMQfTwiXTXT39oEPmM8tGEzpW\nJn/blM9Fu1/1AIFDQ+4aEv8ZCEnEG8c7lfwBhS9GJIpG5uWoINX0POTnncPX\nfUg+f9k9SU/e4QvHPmBDfzFF6a93ubcPlm0ZuNSh6v3I9SNFRmpUwqTNRrCo\nzSXRTmD4+OFcvxMLqSRw5eZ8/e+cE5Z4+BMNwmFJQNQrlo3TgpGSSucsE27Y\nINhMjpy2P5L2SdIB/DLvxxsMqC1TWJeVgjO25pwegrNz4ufUBguYCfrK5UkI\nznJ9rj7Duc0egzrSMkQse2zSuRIZ6ZjL5EF8RGgwUt8Q7wz3JIm17H5xcqaG\nbV6yZMPzewlHyeb3I1a7xFcPkMXtE/CyCANcnfalP58h10LE4u/bebXmSPO8\n9ree\r\n=W31L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ec729683b.0","@material/base":"5.0.0-canary.ec729683b.0","@material/theme":"5.0.0-canary.ec729683b.0","@material/ripple":"5.0.0-canary.ec729683b.0","@material/typography":"5.0.0-canary.ec729683b.0","@material/feature-targeting":"5.0.0-canary.ec729683b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.ec729683b.0_1574870128065_0.7890922177263806","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/form-field","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.b8bc4a26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac19b4ba06fdbe80751c7242e4886c28aa7642e4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":30,"integrity":"sha512-ih+6lOB757M2im8JEiscgEKebhoswCvvM0ZJ2gHBx8czNVtaWmAOArIf7tKwZA1QtKGW6eYUCJ7o/zUoLQ4v/g==","signatures":[{"sig":"MEUCIA/IuGbXd9gEIxL1goo28jOQ5uRijAwMO+huZlIkfU+HAiEArufijo9W0aOACS9iUPak6UOIP6wIMD5d+SXtaiobwvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3suyCRA9TVsSAnZWagAAtAEP/11qD6J0RKaxJs21aHjp\nLxOF4L3rYlZmrCSmHkiWkAkiDI+Bvs23wIMNMJ3HRK32hrzXKnkkefKyR7lQ\n4Zd3aV5kIDEklfDVQzQpB/VwOydGCiW4XTJ2X8wOBnjOGbwuK58pWWw20o6a\nOL30tGp+cbOnKS9v0SbR86mhyxdTGFoNRCDfvzQFPBZoFwnL+32K4Nq3BUwJ\nYLBGtLQg7ep5e2Sw+fnJeLwIubpAUuJ2mlyEmmvr79csXfIWnbGUjy9FCoFa\nDsENSzkTpdBWQHaDaNCa+8Q4/0xg18/a+bZlkX7B12hNoZ0Nz2X2/37aH3cg\n1erVA0oNbrrNg+ZEqBzzevhWTb5V4s0PaaIu4ogHKYZite5isQY/46G3QaYA\nrG/CQglxmhG7j2lYOgQqQj6CwB62lsPrhTVcROghHo/jTBqgmj3rYc6DwTg9\nz/ZZPUplem2CUa7glW3h+Vw4HVO4F6EVLxyX0VK8To88Rjm2uTrMGnSUa5bR\n1vHHkt4iNZi78Km3Dwq4b0m5cRp3DWlz9iUVj0lzW+Uv1h7iWlLKhR7b9cY/\nN1iOmIslzOS0/7jX6REQwCYvFvJpUPucpTiy1/HKXLW2eRWrLhaKxP8cqth4\nMpVsvtTcNe4GfZLtrI6Q7Fwfq78Dqk8xNS6c/QklrFWYJ+b8k7pvH06mwZR3\nF8ql\r\n=VAxD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b8bc4a26e.0","@material/base":"5.0.0-canary.b8bc4a26e.0","@material/theme":"5.0.0-canary.b8bc4a26e.0","@material/ripple":"5.0.0-canary.b8bc4a26e.0","@material/typography":"5.0.0-canary.b8bc4a26e.0","@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.b8bc4a26e.0_1574882225757_0.7097256216638903","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/form-field","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.f978109c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe68729ecc46811e4541a461103636e8bb271c0b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.f978109c3.0.tgz","fileCount":30,"integrity":"sha512-lv8hKc5DCncREc6nSv65w8l+qpB0KOT+CCaST2aZ13vEXkaxJeyHQd195fJ+qiYjOb1tRepWB7slipEQ6Vr30w==","signatures":[{"sig":"MEUCIQCXqWx5uat5eFR7KyoabZmizI+7EisiHhnBANXJ01DxMQIgZRgdm2y61w14plkx7YFWjwSi/4IjknbJb1LUnc5zSFg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UToCRA9TVsSAnZWagAAcYgP/1lQkrcwj8x+AmEzyLzN\nw9/tTnx2dlzl126PCDkMYXKekfc1sPGIcexBogPIiJsPTrAFdbZREKecXXD0\niKLejncq0pnHZPsY0lIp7vWOh21jQcGPTJzDKIE6XzJiL4kWg8MLlvys6bCv\nOv1yz8q+x28V1KVK2wZ2crv3RHHG1wjKR6pT9JuY3aIO8Qo+8pL2CP4PX385\n4qZFIcbMNOygCGM0xjQTClwdZsjQ/18JOwK0a7RA28GWZp0kg+gPVVtTGKMH\nI8ljmYSCdbo8x50+75led3riXQjaUXo+7ZhR1U1LBcFD7NgDYawQpGxF6DYE\nVUwQo7+fB+zkoxlHt3X2OHHJuL8vBS9lsPy4cHG7hz4MCda9q2oQ7pZ22UB0\nZVydClHV6TNqaT1dM8+HFKQlzD7594EjGsT6KEGHg4Jax2JdNIqO1q4MtumZ\nxSYUcaFu4q29Cc8P4tpVbMixSU4V/Fth/AtP/1HjJ3Ej8YFxYm9JMecrsPQb\neWOHHrIlbEh3YA3lGJjV4UCJ6nWWHrc7B/ONPgSmklQuycY7p+i1Pmacvi13\nX0njk6TfCiwChW2SeDIFoPC/ThQPW24VXFGY6TT8GmWWpNFZVI+T5VsUJlnQ\nfMcOoIEQHQpy8Fxv0BOz8GIQeItpbfEWhkiCVAk+fxQrXZ+dR/ahqAmWrQdm\n6fpR\r\n=zNDN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f978109c3.0","@material/base":"5.0.0-canary.f978109c3.0","@material/theme":"5.0.0-canary.f978109c3.0","@material/ripple":"5.0.0-canary.f978109c3.0","@material/typography":"5.0.0-canary.f978109c3.0","@material/feature-targeting":"5.0.0-canary.f978109c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.f978109c3.0_1575306471970_0.292533828605257","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/form-field","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.ad9dfe706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea68203d72a0230405b18c99d271482ff6bdfd08","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.ad9dfe706.0.tgz","fileCount":30,"integrity":"sha512-hSKXaPoJ2N5HSGM0S/W8pOXKli3n/UiDAfVPrWBrv7UGdAroDXdd2ee6kF0myoAca0/QXIgQeSpJeqcQlezAoQ==","signatures":[{"sig":"MEQCIAOIvSAfbH1A9+mJqzbo8mYNKgOD9cstEGaWjlAvt/igAiA+GqJYyOzFdnqHknbc8yw2Fz+Fz4Fln0pBJZF5Xds2JQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1ECRA9TVsSAnZWagAAEVMP/jkLYXod50Q6FajqfirJ\nteJIlu0qujA1a7H5yz5aRYNH0s9UzZEHvp0ie/lJrbNKxU9TriRKVyl/qBW/\nufn8cPu2Qj2j6zvVpVCCGzvTEFKeVz8Di8YdyQoD1T8WV9Gq2UcjhBW0//NZ\naAbrCFBS+kY6ubiMoghnbSn6m2egs7B2FnTT+xu6YXECe3iD9QXcWyvS57v6\nNPsRFvbLEMNhz274JDKcUBrpVBew2+Mmx7vpKjR0oAg2UHfVLwEJrlNjWNCB\nBo55L0wyMZqOrHZDmoufLHlctOSj/uS0hR+g4Ju/A2b0LrNccE5rnoh+0LE4\n1oDJGGCWVCx3/TFiQrUMm37zeqqIbingU0P19H8dp5yoJQIZHHSXgO09AnOy\ndNWiEc6XHnncUAfTbZXjppBuFb2TeNCtIRBLc5tU9yZw8EYLCJUoDI1tsEAC\n3ZXQtlsL14jzG4HRsE5HZTd29UBYRSZ6QaXDCMDgdZgoz2/4jydp5q4MdHDo\nwcGRsTNvKPH9BceOCcH099kececwbaKfw3A+kqCIKpfzhyOu2XpwMp1MM1Er\nRnxAt3I46u0W+WBxJelT+KW6aVvSyQc4yiIBmQ8VgdI/uVLfcqEmtFbLditJ\nSv3SR+Wy4+qLBCDegyx3hD+BWejyxAgRbXqsgRwTi1vLcIabLIOY2SVw/8dH\nizYE\r\n=4grg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ad9dfe706.0","@material/base":"5.0.0-canary.ad9dfe706.0","@material/theme":"5.0.0-canary.ad9dfe706.0","@material/ripple":"5.0.0-canary.ad9dfe706.0","@material/typography":"5.0.0-canary.ad9dfe706.0","@material/feature-targeting":"5.0.0-canary.ad9dfe706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.ad9dfe706.0_1575415107695_0.9504138650946994","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/form-field","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.5e45d77f3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"736d0a7745ebf1bd2cdb4592961e7bfe15714b86","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.5e45d77f3.0.tgz","fileCount":30,"integrity":"sha512-tZXPAv/vPrLKED/PflwP0V1UeEcXMA4spG02gyBmx4vtmF/G8A+Q/G6iXH5IvqGMXshct9AnilYaWouC2WF5XQ==","signatures":[{"sig":"MEQCIH6Zz3UfGtNLsh/XXuXUqQ5wJsjhLWJ8wTVVBhbNGUyNAiAsV8+x/ZWXNfYNN2i8L6O33u25NRnyD+iwh4jEbulYVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u2yCRA9TVsSAnZWagAApTsP/igrSBllb+kWc6yUTnNe\ndX+mZC3J9QVJJF0Y6rBhBfwrtut1p0ZjcsT8A+ntunu7Mj8jJ8bvyI5d/TVn\n71s3NhBCuNwpes/zmw2pHTI+Kiu7SzlxRH/G3/V9aoun4O0lYjO1YSU4HfUc\nS07/nn/1Aw1zADsRSRipxGbRvWlB9epQASFiai1hDpkpuOCGGvhOmCvcTOq4\n4vjz/aEo/YZsbq+vAENI/zDQ4StejCEHWbNlQcGOCxN0Gsom1knCgDLl3gjA\nzr1acKltzDYhhq4Q/7GCo9hfD9Ug5PJsgadMo63oO28M3AQIJffhmxETrufc\nGgF6HC75jmN90ud707aCctv6cD+8unIdtZvQTcTcdHLSUs+8hNtV6bTU+hgl\njfKvp9fZKdaB8CZuAK9IJKeP2SB0MyIT10kn+bycwgA1yjzk1j9g+aSxgQhX\nTvXT8dXcWErepd9XKHlbBIfD7WN58osiQ/ha/MY9GDsdR4JhvLJHc7Oyv+SL\nPPFuVOZCNMoT+j5mOuTvJ2/uJ2blBHQlIrah9wQKFGh3mUdpKlwFvgG3Zv0u\n35Rrp+9q3nPLCxNgL4qDqjZUPKODlE7DV11kJ5sWfbikBCc8alpaurCox1MX\nDYXpHQfdKFAlULLoVUGp6HoVA4qn9BcvOCeqBr82uFxVPp6Gcbt6vGQ1eFTt\nwb8v\r\n=oEal\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5e45d77f3.0","@material/base":"5.0.0-canary.5e45d77f3.0","@material/theme":"5.0.0-canary.5e45d77f3.0","@material/ripple":"5.0.0-canary.5e45d77f3.0","@material/typography":"5.0.0-canary.5e45d77f3.0","@material/feature-targeting":"5.0.0-canary.5e45d77f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.5e45d77f3.0_1575415217952_0.34363795001244357","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/form-field","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.d10e8cdf3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63f1c8458b9fcd17678064c38ffd2012668c6006","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":30,"integrity":"sha512-r6Ayrf3eWLfgGFC7R1dN9+z1jCnqScuB6B+nzYYffkI8fQfYqGVoX+4MynWczhpxpk+yaVMJN1Gvv1ryEF8v/w==","signatures":[{"sig":"MEUCIA92YQOdMEpUddqz9vnlZTNtuSXrutvDNv21ZG+r3D6uAiEAskneNdXmpUNWIM8U6UcU64cGEME0ltMfpF7j3crNXR8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3OCRA9TVsSAnZWagAAfZwP/2stSCBoZHdQdu4jhIdv\nolW+zAhTvITL+PJfPmaYsrCNd7iFfUOoZMhY5NryYlut3M6ojcNpPM2t03X1\nqiKDOSEEqmOCZQWs4cYJvvWx3iRq2jXn+eqV/7UcjiSgG/Kus0fyh+cLheRr\nyaNhqvBQ58kyHLZf2Wl7YSnEHwjuffj0xFNPzUndv9Q29Hv/RpgR5SRv0E7C\nOzH3rY2jz1yh4cG2/t3UTsKR6ooJWby+gyltlRq8IBOPtRGqjWMX0QBdFHyX\nRxutoWn4Rwe5bwPb2Rx8l9b6O92XrtZQGDtths+E8qm4UOFiUCfw/tvyX8cz\nbllE2gxNf/hW9PzijPlW6CZpJ1iPOB2EU1trP57u8t604ZsN94giEEOyfnV/\npeYGNYOyhyW2kJ1tDUHc9ZoLYae1CDrFSaQNGiMDcputEg5UyYQo1XTRiLZs\nFff8LzvsxoExe8jXUM9xNo4EvmedSljtIJQjQZSIXiWjfdDoA180CJ60RJ6o\nogebKmbcywj6Wf/dNnbSAd+zulpu3jDwO+YH10A9jov4lINZjKl8+mQVkFIB\nW9mKEpiwU8mpAg3EnB7M8ndGHRYl4kuTk8GUttogyo/KQJmzPuOcXmQa6jJM\nxCUgbFPbg+7uAkd+qh/lD5EZyDYq2JvvBDYmZQyVRd5RzWjeecewZj1ElTUM\nJ0m3\r\n=1sAx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d10e8cdf3.0","@material/base":"5.0.0-canary.d10e8cdf3.0","@material/theme":"5.0.0-canary.d10e8cdf3.0","@material/ripple":"5.0.0-canary.d10e8cdf3.0","@material/typography":"5.0.0-canary.d10e8cdf3.0","@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.d10e8cdf3.0_1575415245931_0.7562201641970179","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/form-field","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.a5dbd8a2a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dd012b534fe76e50eed70a509533d523bf12284","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":30,"integrity":"sha512-EAkHx0++eHAb7FPyNdokSgcsF8c65t9cVbZBQ9SHJELQUzc/IsCVWvLLxgZrJrUJIYluYxeH7M+FEj6TOU1RVw==","signatures":[{"sig":"MEUCIQDQ0b0tQyC2fp61FHnZMgm/0ZYa0PN9ayfvYRq/UskIxwIgPPeIpGY4J7WyBU8kBy91U0WzabKw7APkgbLhIM6L/2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vXsCRA9TVsSAnZWagAA35kP/jrQ7UFgL7L5dip3GFvU\n4cHTO038mflZ9fKZ8C36ToXbydjRTYlLv2WAq5Mqula2FZXSQsYPJZN/BPvs\nQ7YyVz2IaGPR8iinho6dgZ2PccV2E6kF1Rcf18Vi6ULYPR0UzDYOe86ZB/n4\ndrmMkVWd/ULM1Lb1oiyrR4UYRvs1TU2lKoSWqP6dz0moTdLEdzhww22zmAcL\nCA1+EgIGvNiMdxK7vvEvN4sMTLbETBkh6nZjUX2A+7AVjA7MgWHqBNnReaE7\nrs9Ep+iAdWOe/QjvAPCgAXlRHSJCu8DASj2AvLHPP3B1Qlerql/TMYOrFTYn\nCIWeDlZax9pmXEbHS4YmL3f5AwoJSiDh85xWe7gX5HiWNcrS9Y2+t6GENAGx\nYsnZkcl7FkAtnKykEwMImFQUoxX8usrvyrZkFkIZr4dN3YkUOl68PRqFrCP2\nq3oY0W+blBRPVOJFsEpZ9avGvuV/q48A/ob74J7SNlmhjgCl89eHdcxIIZJ5\nConIfhxFzaXHKar+jLhaomcO1qd/HMK7IcAMtCXObNOOr9K+RPAu0efauy5+\npfQjN1dnW/k6QTfocfZTRCUSMURW4A4pTYaT0IWNWQ1LCw6xgjG/vVxNtpvI\nhye1WF58KqFAFXwO6Z9ENifZTgmvUAJolP+NnmDOjMKLWFTnVqATJbXNykai\n+Phr\r\n=c7Gj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a5dbd8a2a.0","@material/base":"5.0.0-canary.a5dbd8a2a.0","@material/theme":"5.0.0-canary.a5dbd8a2a.0","@material/ripple":"5.0.0-canary.a5dbd8a2a.0","@material/typography":"5.0.0-canary.a5dbd8a2a.0","@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.a5dbd8a2a.0_1575417324540_0.4247499007854858","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/form-field","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.ba879b68b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f87397800c772744003bee3ebcbf106756af7bf","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.ba879b68b.0.tgz","fileCount":30,"integrity":"sha512-YsH9Ir/VlLcUTd40sdqDj1Yknulu6jmeNq/V2mWLnQvsn5v/U7VjHtKHAVKQUrr/k9IsZ+UozCPmOZScllosBQ==","signatures":[{"sig":"MEQCIBa4+9UtaEYs55WiueyD5SMvaOnVKZ1XYKt4p8z6VE4DAiBE2YFd1mLjBr7lpPBIDG7QFVnRmOXxUbf//xQjIz6JYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BWpCRA9TVsSAnZWagAAvfUP/R9tNujmMg9zRzrWfnnz\nSKIcSJcwKB/k/M6i7Dh3RkqzTJB7bcwj4EYpv3I5m0oUXUI61BO0VpvIuidv\nSY81+GextXrceGkMYmskxpCJRtdpMISBFZpc5CP2BKodFUNyn7+gCKyAR0nR\ni+0Axp7uzHiF4RYfHz1DvGMaFCVyoa9H6H26f8uEeukuAPCSIQWwBf9fcMX4\nX/t/6glR+r85j06hFTykEsTgiDXyEc2D30ykfnnWs5xDmUSJfl/kccxTd3hX\nwOc34owxb7pdlNjx893bnTRoKKL4q0j5T1S+JOJWYFm2VOUeoXHi48EjGHdI\nU4lGtPtqkots9M1DkjyTNtvNHlqmbCMNguAP/FvjxRc5p7G3g+YqpaLXrrHn\nS09bPtmQejJ4LdWQ+7IXQE3AhCVu3k0YlBLNb70bKjHolF2aiqgR4TGo2o3D\nViU4JrY/2o/iHZR6HTBjed46U8xP7YidKyuHORaEIyynXd0k1QYPeh6eqIbb\nTOT1PdPw8DZmQDMJtJM1yQI/gVa7Rl21K1s1EBkIXSQXoraVniXf3bUv6zbM\nEzx0Ckm5RUqv0ZKWraITSPVvX2wK23k6X49EMGib+m08ZfUf9vxLx+WmZR9V\ntQJ7pTpjRRWTP2+rpU5Jmk6OG8QxloCTUPLSDx9hnD5x5kpybsxDT6YJ2LBq\nUDR9\r\n=rT5E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ba879b68b.0","@material/base":"5.0.0-canary.ba879b68b.0","@material/theme":"5.0.0-canary.ba879b68b.0","@material/ripple":"5.0.0-canary.ba879b68b.0","@material/typography":"5.0.0-canary.ba879b68b.0","@material/feature-targeting":"5.0.0-canary.ba879b68b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.ba879b68b.0_1575490984521_0.23655771545120308","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/form-field","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.aa0eba489.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"934798bde93d2a2c10b4cda004142d1c651b5723","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.aa0eba489.0.tgz","fileCount":30,"integrity":"sha512-TV3y1c+X5oyEILWqh6T/CKBNZRZfg1A4mMPaqhGQOgxlZqrXgyZeMxEB/pBrf8UVimDBqXiPM+5606ZphiylIg==","signatures":[{"sig":"MEYCIQCfQJqKxe2tkwRJR5LxtRwPa+IqpscZyhhK7f7Kp4Tu3QIhAJ53bqa9aVF19X5+eAxjKyiCxbebzNyk0kleLbmwIC9R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bX/CRA9TVsSAnZWagAAQr0P/jDrLy0eYXZ1+mTK5xyD\ntHXQaliycs6DRSMNnbcKjFQ0nt65KwPgatBUo3H47SlVIlK+Ss7GHA6AJ6jr\nBJYAKrEOhOvhpg2YRzRia059s7wCiThiHKdRXAHVTfPlyV9erizY1FBx+GFX\nFm77zBLoKw0F37pn7nkDm1Vu6b/esComOwEVj+f9caQCfqCppBb3lWZoTF7Y\nkUHzw5BxndQfx57iqCD2IeAx3BYY0dyrgDo9qpeCF6oSPXd51AM6rACQ/1i9\nUbF7gkVDhB+uhO4p3isosZQD2ukHlTu4EZGq7NuzUmDMwAa187wzrdCJZAwF\n90ISajh+5bORfbbZxgnGhW5VMor28wTCmZuZWn9P+IN+wgabU1kzcceObui+\ncmVslG/fnf9VwoTbKHUxTU9JdHfKgd423yKwLIPFemZ82h74ae7iH26SsRM6\nKR9oG5JVI2OulsXv6Q9k5Hki9wpoUVk7jL/CM39JQuyqJjzGvUqlEpD4sg6w\n/xTU2u53Nn/59PbN8YTlyf0dfS8uv3STjQ0rUIydsrP/5pIVFhM7CTOAYHDz\n9PKmncL87qPb+7myYw5Ig4+bvfilPwQVOUGO2IN3x1m2sVH1cwYr4dArC/SK\nc0fh7J6qlrtLJ4g8kKXSPpbCWWLCerl+mGv4FVOdtQB0c1cEfUMU/IbuXDwr\ncJbi\r\n=jBxY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.aa0eba489.0","@material/base":"5.0.0-canary.aa0eba489.0","@material/theme":"5.0.0-canary.aa0eba489.0","@material/ripple":"5.0.0-canary.aa0eba489.0","@material/typography":"5.0.0-canary.aa0eba489.0","@material/feature-targeting":"5.0.0-canary.aa0eba489.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.aa0eba489.0_1575597567409_0.2054446484065542","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/form-field","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.cb7b71a86.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c80a357af08d4ef2d95e4efe3c605fe04dc6d00","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.cb7b71a86.0.tgz","fileCount":30,"integrity":"sha512-Js7dTnfZLirK/xqywxPosaFhJoQoEG20YQNVow/r8kjxeRhV3SFWqbfdzBNq45u7jSLvKbuNheU0UVT8GA0hYA==","signatures":[{"sig":"MEYCIQDx3cEXCd1D/5rlm2PuqbqJblzs/sHZVH6BP5R6SA/HjgIhALiKmuQWLZTT9jFqWltmzrjqQZAH/nP51C/c0z3R/doJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uqfCRA9TVsSAnZWagAAHmoP/RgWA/1+OaK905DUySsS\nkOaaZQJVY2GgglesUgLyTXYvDGVsZh+ZVhmSh7km+Cjgn2mcYy/UQS0edQDo\nPlg3kAxD3bbGnGl6q38ktoj7U78bVNhTN03QX0+Pkkgx1QRMHwqpxGXGKqEY\n0cPaYAwnOZ2B3P72TZqSNcY9j4Hc5rsSHQk6bQtYz1z/SJ1JQl3wRqYHuu60\n0xJDue+49WIt7Elvxn0/ZgQVC2Zt5gU7sE/5Q6F0Op1lgIdiRFP5uDLMLrKR\nqEYLmGOV2uHwuD6ISfy82S1ruZlmqcAJc6AqrOjyb9rS+YewBW4nBc8vSaba\nIQBxE9x0bmpWC1DPnXNl/1C6HcgdgQtZpKdB240CleOXTm7WxKqug5fXLhn/\nGw8GEIylKA5MTtrekz5Yk5NB3GIo8ZW5hrDxiGEcuNzfNSIbnRbnjumpGBDl\nTFy7j5/2yvbM/a/YApJHofP3SEGPaei12L4Uq3BsoPvk+/fbZYMxyYACxiBg\ngFiD/qhZC7SeXyDvXFCFz1iltDkdokPSzT3U5MWGr1qbFiwPwjrMEBn4oxjl\neX0AuMedTSX3CXJFwG0lI58MWnKzRyRIC1K+5jf+jLNjflv6htxAC7SC6DHk\nyO6rN5hnwLszc3rEmrx4XHnsAy+ChdzmGADQpJZi5iEgbUx1/LnEs7dPyt7R\neiG/\r\n=l6Lm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.cb7b71a86.0","@material/base":"5.0.0-canary.cb7b71a86.0","@material/theme":"5.0.0-canary.cb7b71a86.0","@material/ripple":"5.0.0-canary.cb7b71a86.0","@material/typography":"5.0.0-canary.cb7b71a86.0","@material/feature-targeting":"5.0.0-canary.cb7b71a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.cb7b71a86.0_1575676574920_0.8777938814028272","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/form-field","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.50f110a6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2be6c7225ba3ff4abc02eb408d5ae15f0be56863","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.50f110a6c.0.tgz","fileCount":30,"integrity":"sha512-eM9tGvLBKEBJeVuPqBd0qygY7vRoDlSDrh6YXjQxuKc66nFADSqOdmgPro+MieGlPp8OXBFebxzfNdohNeV9Ww==","signatures":[{"sig":"MEYCIQCFqnWnb6vSh9a8U938QS/SCxyIZA+AAYhRFdCSRdt4QgIhANkbKtkhrCS8SS5glXzitT/3D5/xe80VPM6YgohWmARz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd788VCRA9TVsSAnZWagAAdskP/0fvkZC8qRSQymtOIvC5\nFWK1XHs9c0pWsH5NXhdQhmkN9TB0XL+0dpA6J+M1e17ycrF77X/oqVT93Hav\nDjKbauEhGrrv9HvFkZOteUDjvZ/ZHsDOIv+5DQFdmvYbDjspwT/M49UtKd3f\nZRUq4FhsfUHdv9ZbHon4aAbrGDnp72yTVf7qTBnHBqfh8XXAF2BZV0RaSSS0\nAD06kwGiy5f+haCSLnc6voTyJfV5+k60JArMEGNi0KoYhDLzuQ2doZmR+Jyk\nRDACEpmo9YBHLZ8zMuYfKGpeWWJ6SpuHJJw4Tus6QXuxye1zPapn82KrXtHk\n3A5HjoUIHvm1e8rdbcOGgdXt8RAZ37eRP/FHGZ6rNEWfN2/uVvi2xKErUV1+\ny+OFe99ngW6QymZ1rSY8MAYci+LFXCvPzkQki1o7aonK+pc9F6VuiaxNSXWY\nsFNsNDINYFoZl7xiVnUDEd62U8pjOk6h4fg6Sb6YqrFWArhZqEoAeH09N4mR\nYwFB8PFqyC1k0JUUdT9HMYQf9Fo0isjtwwyIp6dXpxPNqYI0dJlpkc7yniQQ\nstraomvqY1ab8HZEnTnlQ8SppAa+DkDVDl7txQuM1SWH+HjFJEPBZrMIvWyA\nBcMf+K+x7XSIt5ot304PQ3CecZOQ3jGuihDhYluB6Hj9fQxfRmmNb2qGXvX/\nXS53\r\n=+6RD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.50f110a6c.0","@material/base":"5.0.0-canary.50f110a6c.0","@material/theme":"5.0.0-canary.50f110a6c.0","@material/ripple":"5.0.0-canary.50f110a6c.0","@material/typography":"5.0.0-canary.50f110a6c.0","@material/feature-targeting":"5.0.0-canary.50f110a6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.50f110a6c.0_1575997205446_0.7279767820103327","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/form-field","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.878a08b7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a026372245ec14c0df669026d9ab7811a5bdbae","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.878a08b7c.0.tgz","fileCount":30,"integrity":"sha512-s6s712VmxoT1HXt501I9zld/0X6/40914YP9MCuLxLwsblLqD8eST09W0lrW6mpDonOf3BvYLX0WGjR+ODuQtA==","signatures":[{"sig":"MEUCIQCa6hyEu2aew4M3LX/OeTvJ6rNj/RkrCYjt3sTtW+yL8AIgdaFI8whZhmt06X4Mv4w66ZShViz5JO+ldbjgW74VWO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U6nCRA9TVsSAnZWagAAVzgP/i6qfb4u7rWtdkJATef1\nKKSV3hZe50H3PWAXBD/3LcMn+Spq1bhRgRZRORiMEdSzUFueKd1SYX3VGSQC\nXQoQw+/pybWi1RntnnWpzBthfr7tdtR95zb3iNL0/NnIphjNXyvJCwXRH+7c\ns32iGkrEsO0hyttAnCTJmGzjWkFANWR2uVEIycVJufsP8M1X9M0MW5SBV2Xp\nqJj1sU61xkfif8sVR1sW6fSGTyY/XPTyOdVQJqbWuuwz+GQXEuKcZDReWpnq\nBc6+2vYXQs8mZuOCJdqqDNMcjFMkw2lybNbLQMry9cB6lvuVUehuNIZv9EWH\ncbArhA8GHW2cWwnFK2/hfEkzyrNPtTtq9oWhJXY3xjIzvj7cEM04XCCGn4pi\n/Z+u97oPiZJ7IieeNkmbtJveDo0G/zHdHfZVGy9X5hFiw/glhSxfNjoXfSMj\n+MDp2PBFhaOnK5ypUfqctYn/f4t5MgWGOeSAefIlOySZEkND6dWo2gpNkvv2\nOQ0BxCVvDv0km2d5WVkA91N679amyQAZwA4Mv9z8vlGf0fU9hPSsyXzQvZYv\ngy1F3gk3lkRSe05fO8NaErAi6IUMSlOFYcISNHWUz7nYaWXR9txTmf+a2vKR\n5KnP4fC9ODkx3YJouPgrJrRaPFEssLv3Gw430IyhczgjcVLBV/MVecmdIUfU\nzjBG\r\n=iA9g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.878a08b7c.0","@material/base":"5.0.0-canary.878a08b7c.0","@material/theme":"5.0.0-canary.878a08b7c.0","@material/ripple":"5.0.0-canary.878a08b7c.0","@material/typography":"5.0.0-canary.878a08b7c.0","@material/feature-targeting":"5.0.0-canary.878a08b7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.878a08b7c.0_1576095399546_0.34451916099596924","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/form-field","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.397905b4e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8162e6c79d2f782d30b8884b86f5173d4e7664b7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.397905b4e.0.tgz","fileCount":30,"integrity":"sha512-ijnOq/VMFvYh+JPg+zbBJSCzb+Bg3PIhzVvac/B9GAEXMuw5sKtZPz+CgAgXbRV9higv4KmrnaXBJnZ6r9zvxw==","signatures":[{"sig":"MEYCIQDhrPz0yoafh3L9mAqLB95S17SRul7n+DAN7Izce462OwIhAOkSyd0QxA1I2ONyApvn2xy+iYy9Muc/gKIOgmwrPsM/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8apKCRA9TVsSAnZWagAA27kP/0s7rRbSTCx9kIQLfoZs\n7lSiORvhMFK7NVK8BQkYR8NIa/Xl5HMYF7Lw/xSRIKyGqN4G2Otn7AhR7GqW\nCWZI0X79X/w90U9WdL39XYXcyemZuV4qqhXUaIve0H5hnaEXbA+2qYl7Gm0I\nV71/5OYN40IqSSbphmuU8h5d49QMbwSnEMkcZGUm5WgjgZSG1/KFWJB+DVcm\n0U2gPkEr63roZigQ05xT7EQvPdXdSo+vP5DphOcDn538KmRMtDSSogw45ngK\nNo8Eh4FvGRMGz4MtT4Ispz5i4l6PR+2yjQ3oMgeS9EUCDCAoGW/LW33BA86j\n35pRm1DEsZsTE1QKfybpbsgHG9MUhbI2aIoUSK5xGzwrMgKxH35rqN+LKOFn\n0/6XBSJosyvcAwdHA3OcCErijzCT/XhdJz44h7dkVyCH1/6zC+0RuJoWIUCT\nvNYPGuFH+1dtb4dXEwirzilKqEh0Q9+liv2tBRbHXTQTLWKoZIvWmHC5mW+L\nIq32TDQJUmOMJBX2MR3cBH/8yeZL7mU9kja0XzknVq23KHYM+KTVWqzAfBmI\nZvazE2LMkE9wLBHQBvT+NeKK6gOHXyjj8mo8nxy4t+UtLcW7o/ZDSkWU6aty\n+A3cFe1jeYfga3Jzn+bjEOcgQFoBiuNgKhRnXhbhfBR0Lu48vAF5OZZ9fa3w\n0jgD\r\n=K2Cw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.397905b4e.0","@material/base":"5.0.0-canary.397905b4e.0","@material/theme":"5.0.0-canary.397905b4e.0","@material/ripple":"5.0.0-canary.397905b4e.0","@material/typography":"5.0.0-canary.397905b4e.0","@material/feature-targeting":"5.0.0-canary.397905b4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.397905b4e.0_1576118857944_0.8329579789191437","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/form-field","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.1fbf5bd1d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e0485811532e9950ae1ca90f054fad00fa4c4f9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":30,"integrity":"sha512-VqseQdHNZm3nAmy7/uUPI2brZ/WAI3m1mAdQzpiW3iu65ybm0bfMTpRWvlh0N+uHxpEq7IBw5hNAoWxSavPPvA==","signatures":[{"sig":"MEUCIAdu0pJ1GpoFR5o4oowzD9OkymQarOpUUqBYMUhJSTkdAiEA72192MAYXOsfEMneeIB/jnBa4BBG6H/+V82obhFIKmI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o4bCRA9TVsSAnZWagAAgjoP/ie8imkWNaEiYNKB+F9r\nj3CbEeXQgWDHVWIueDB8u6ITWfLE4urgue9kGG5vJqxQB63ot+j4jF08hEmk\ni3jsVTXvTDmyjs5fzbuOD/yoV77a7j2Fw7+tLFs0HH8faUXdpkkBgthXGxge\nljY81H8uvhhoQ0rhyld3xdNSYfqo8LWExEjIPu0F2QYcFWPxLxJon60s/24P\nHA7U2UxvUB+vaG3rquJMB1fnwrBm54Lgko12wzBoiJkfnA15ydNpZgOmQ4og\npG5ccbISOI4rQLiL7yBZLwKf0zBbZmnr9mwhfNvaiKPRQkR6UqKOSlLtRfSQ\n6PzCdsAwQ+t3eTRCDUYh41rVmGD5kAWYIi494s1IVjpJGzz1KAnIHeEu7LhQ\nXfUAQ1ssDjD8e4aU0iWuT5Z0qGivwbOi1PMQvrIjReWDvQF6Znh9hWg64OKv\nFFSXM8WWLG3rKyrhcnt7YV7cWeGp/tFm4x+9uPPsTeKzqR+gLoBDIoSYs1tr\ncX4HWNuHilCj6TqWeau5Ux1WjpZEuMiD18KXMu8umrF8p6bjBrqVSWsuBJjk\nNRSkZ9+X41bOcqzt9UUoizRmIrVyvIKgu24pW8lhE+zUVkDOvoNq0p0BuLg3\n5IyanUYDeEZfrv2coOrFv+1d/PYtw3YWWsm170K33PO7xZTKjbKzUK2a9lUE\n345S\r\n=u3Ld\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1fbf5bd1d.0","@material/base":"5.0.0-canary.1fbf5bd1d.0","@material/theme":"5.0.0-canary.1fbf5bd1d.0","@material/ripple":"5.0.0-canary.1fbf5bd1d.0","@material/typography":"5.0.0-canary.1fbf5bd1d.0","@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.1fbf5bd1d.0_1576177178764_0.06582363709584782","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/form-field","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.b723dfa78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae349d1ec636024688630070f370a159c3c62779","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.b723dfa78.0.tgz","fileCount":30,"integrity":"sha512-rB2WhjmL4pwwg4L4j7jcht2tc8V5N9DeWMf0mikS+TKNCpOxHiOmvBpijA29A749+IFvSeoLV21bBh+o6sbJAA==","signatures":[{"sig":"MEUCIQC2GLpIimH4Q3lumS/r0zuVf+Ma+Fv5cFIXnTXj5LGHVwIgOULphH/On1MCZ4CjNEy28NO3u/25Rb0n2ZoWz6hCAME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p6uCRA9TVsSAnZWagAAPOQP/1mUBLiTI7QQ/ApflkEi\n+QOU7+wSOSUzAFPGK0tNtNj4oB96q05ARrMqPZChtmW34RuLpv/0C4/TdXse\neFUr9Qb6b+kYOVPy/LlrsTGRWGyxDcJ0Dbs+T66nXS2s0U0ukhQEiai1FHAW\nPxKlk8F0wHL+jLfS9Y8L0YBynXAq3+OEnQxEGeDZiYOqwBMOgtI/40YI5RKZ\nqG2VvQxHEQmVMxIbiwGXDxXIt9244k4HXFcbZk++dkntZQZosb8O49EdGpZd\nVpsPn6D2qei2+gI9OpO3xT4AKBir0Qg6oP7bJfqiO21uTw0kTvowgJ2s+ira\nYCqynl3qh0/a/ZpL2dEcf/k+gIDPSobjMcccYWlgq0wyxDB8Hj+vEIA5wsXx\nf86j8mFa6df40eXyxyCEgIrmC2WAfY74etlh+EBLNawID8hKwKWDVvvUGzvA\nyuA/XNjey3I8MbwPsSqo4pn/TqlVkDX5cAQj1dq8mUO6tQyJYNAT97qMQl4G\nxuS5nOM6xScm7R54M5GV8loY5FkU11EbSprMQDXHOUgFhJDVTWxxN1obowvS\n5wn3aqh8JIzxM9G9NVSrBv3J+ZpkBPdWqbMm6aejRvqbZQLHp8hXKeBigRF4\nOVisYZgYrMe2M3Botv9EylN7IfiE7TmUebH1F2rp2S2o3M5cguEinRLvqOy9\n3qLn\r\n=YD1h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b723dfa78.0","@material/base":"5.0.0-canary.b723dfa78.0","@material/theme":"5.0.0-canary.b723dfa78.0","@material/ripple":"5.0.0-canary.b723dfa78.0","@material/typography":"5.0.0-canary.b723dfa78.0","@material/feature-targeting":"5.0.0-canary.b723dfa78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.b723dfa78.0_1576181421793_0.7956583487244924","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/form-field","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.1c494e567.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b664b45acaaa5c9f53d7d0e98fe6b8d781baa10c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.1c494e567.0.tgz","fileCount":30,"integrity":"sha512-SUB58157HjfsbvSEC46QtyL/noqUxOYRY4qgEUxmfeXpljduch82694eH7LW7XxLK+js8e37JzJex2vI4/d9Dw==","signatures":[{"sig":"MEYCIQCoQxofgj7I2PTD/NtGlPwWrQO78zImPxC8Gp29FvH1rgIhAIdxM9HuESlC1kmLfQdYksXxmfXFCKgXqqAvhYpKXHxV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s80CRA9TVsSAnZWagAApAUP/0iotTLjpw/vMptJ3DZW\nC/z9LFRALWR0pTs4gMgU23UTwi5FJWbDh2YvjxWWxamttfvXXhkQ+rWBWNpv\n8sAlVUdvpPKsfKKv01R9rRW0hZ4hsRQ++VQIS8hol/314lDPlcxyWy+SSjfT\ncXj1s2TEwti79dOVX38MeaW2VbjdcnR9PziVrJvGfk/iXIEdmckaOQXZ0zPU\nKannesFwPAOoC+xUfzqBAdoI0jZD3iljEtQ0R654dHloSbHA/3gNItnUjTlf\nLnfsP2uy/ZK/mm+J6MkroqjW7zXmQ2+YVENPm0AqWzGfMDDWgR4RI6K26Qa1\n+8AytVqB1337RCsxdeMewO5HkGZKlFNNaqC4itKiDcq0ZxdBV96gOceRipfz\n0ZtvHrotfNTl8MJkt/DSipAxUs2oYGHPVah297inGPSnNG3/ULpr6uLAzFmz\nmiVfNmcaoqDA1l0pJ5JwjtelcKR1FMrz6CYdgMIrEpPWYxaBIfNqOGolzK8D\nGAnrhMfVWPtKhWA9UgnqKIDLVlfB5LmgdaJFQA2qBfapTzAy6IeCx4FRXvag\nayk5Ez40jMRrw988WvjjANHNZSrcYKG4gFZ8WK38a/scOR2yxSBZ4HsOlfgR\nicSow2dCsZqo+HYMnz6fuKOz4JAxZQPcxJ+luQzS3B+BGoWXstI1y1euyf7d\nCKTs\r\n=fuQk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1c494e567.0","@material/base":"5.0.0-canary.1c494e567.0","@material/theme":"5.0.0-canary.1c494e567.0","@material/ripple":"5.0.0-canary.1c494e567.0","@material/typography":"5.0.0-canary.1c494e567.0","@material/feature-targeting":"5.0.0-canary.1c494e567.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.1c494e567.0_1576193843412_0.5558423210020598","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/form-field","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.c9e98a125.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dff96c1599899c11be93c58ca68c8024ef59f750","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.c9e98a125.0.tgz","fileCount":30,"integrity":"sha512-t6CiL+XXlLhgyaz02qJIYIyFDoImEASGGVs66424lt2fBeqg8Sm0anfz72g02l29UVssmeVuL+TrNXAAFjBLfQ==","signatures":[{"sig":"MEUCIBzTdLcYl2tvrhZuGbz91hyH83/1gexGE3siYp+sYm1xAiEA9fXbsqqtJFbK0Sjs+xJvtzWtYlXxeosyZa4X40QfhBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RoUCRA9TVsSAnZWagAAp0wP/Rd04eRCnPLogWByhJU1\nmHY4b/XQdZT62Mt4/fjuTC+bG/F3UF3MBZioFDh3/JPnyCiXrJFXmo+ZQxsk\n2JzdHdpid2cvOU6ca3ZsZn4WuABDjdXhyB9uzPxr6sZwqoz9OmFTdbbcuWDQ\nFZ+ZS4IgJJAoMKQWk77EIYJjaOOcUTyFO3xQAql7tijZDQbODI4Mj1/n4+JA\n66irOh+1JwiC3ZEC6RCUT5gOu47mIenpJwCxu32eYcUKDKzorKvHUL/zZiOW\ncQ5EIj3KGMib8HGpVI+0GtAqIYgDP2FRW8E6v53Ka1s2TGXlHU6bvJ4Dp8p6\nAt7m8qbLljFHgf6APlCxjNnP7QYTjNM4yNzwXDa0jBkGX5I/rFYj4bZ71Ins\ndR1p+wGfs9liwqlSUn0Eb3IcKABeuIbkhjy6jCkOY8a78+E8x/jKVu0gaw+T\nTL6lXNw+YOjHL30kYYEMICDjl4XAf2Kac0FkTmP/5z1X/VLVf/5yCCJPr2Sl\n8IpX3+5BFOgky14Xj/N8vKD1XF/RoLa3h4bU53BlV3Mok1AhYbVwprQ/HnWf\n67ova6eWU4N8dsSDRm1gIJcgbQDPr4PAt9of9rmA/TuoZOFX41eLRedzpl8A\ntKAw/C5KDJf0Nspo/A05fhXiRzi5NHSajTL1beexXevmDNnG2ANFkUU7YkAk\nTfX0\r\n=MPDI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c9e98a125.0","@material/base":"5.0.0-canary.c9e98a125.0","@material/theme":"5.0.0-canary.c9e98a125.0","@material/ripple":"5.0.0-canary.c9e98a125.0","@material/typography":"5.0.0-canary.c9e98a125.0","@material/feature-targeting":"5.0.0-canary.c9e98a125.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.c9e98a125.0_1576606228007_0.840948994107027","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/form-field","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.5ffe8f7e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88e44104d810d1c60c26b118ddaa84bfaaa9be76","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":30,"integrity":"sha512-iBFSgOIbzVkCvlOKd2VCI/ghdyiTyhY1QZPRMYfZubCNE8hlN3yt/X5YBzvpqaqK9FQY+Nuy93KRHfjwS9R0vQ==","signatures":[{"sig":"MEUCIQCDtzsCDHCynHBb/GM3mzVzmg+6zWo7kLjTRWhJC/q21AIgeYculhf2iH5nEhRowpjCdn6raDJmkp+N5KZRNaz88Kg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VfECRA9TVsSAnZWagAAFhgP/jvN+KWB9VNmmZVSvUIA\nyHp8/BR59a8fmLRcTFRveN6xaRv2uEDLdkEr60Clah8RWr2fidaoHjUsRJH/\nS+1iF19ux9f5ubmjdqg1w6KzRj3nJsNm7Ewxosv5NeHKb9TrANOY3/oLv7+K\nG1e4OktMVMgAIPJc13POR0Z60lkPJmTfzEmQOwGfwr1RJVfNXUVO42wlfv4c\nA+UKaSd8/43Ex19luAZHx6iSgKmqMEbpMfiH4tEC6hmHeCS5nU9EUsQPVFR1\nKfsMhSOUiubGpgEEfevIz7e55IcTUtRpd1DN8wZueTW0QKdd1srZYCsOE0hx\n9eanJdscjeM7JHBAfMfNhXztwehEuvnMs7zRecXXTnKgPmX26OBAUkjmMgk9\nSJPbuwq2KwQpfIm1GPRdgNE1wLeac1RCR+EbRyJDeMT6oYuvjt4lDmH1sFO7\nzSrmArXhHaPyNtY3gl91OOWaXV0tIGJuw1LgIKgyXb1etJptfHGURK1YIlL/\nk6aUyes2dWCAaLw3gI8Jw5TBSFqeUNOj0fJS1o6qnfRy2i2ljt2bK4U/UQ5u\n/qz/8lf1PjKMEx/YXVPEUtGTCrKDWanQlBYlTIAYyMXVEgpW+fQxh9SE80As\nM3Yh+74bdceX94N22iFkFrzZgNQhogtgNgBfhsN8N+UzUyYU0SvRF7sTEd4m\n+zzi\r\n=3c3m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5ffe8f7e3.0","@material/base":"5.0.0-canary.5ffe8f7e3.0","@material/theme":"5.0.0-canary.5ffe8f7e3.0","@material/ripple":"5.0.0-canary.5ffe8f7e3.0","@material/typography":"5.0.0-canary.5ffe8f7e3.0","@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.5ffe8f7e3.0_1576622020100_0.714816784650107","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/form-field","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.47949b08e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c8225f6e95a038d6861804a9226880fdd8dca85","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.47949b08e.0.tgz","fileCount":30,"integrity":"sha512-zpNTYb9+uN1awLPf99KIPOaTkz9FOMqWADPdT/yBgclYY92b5utZMpynuH9H41S1ToBgfNcZE17hB1E4SAIr8g==","signatures":[{"sig":"MEQCIEdeqdBPLgehOK+hvnHv0FXJlQ5CzbVEJ1feAFwo58VcAiBTyZbHn2QHewn6SfEXNaTLiv03mRlevsBVIHDbHPTvRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mSrCRA9TVsSAnZWagAArZgP/3gDxsHeA+NV3N/Wx050\n3KaydOpYvfaQq62zURX8fiQs2J9bICcLLcserDQsZQeELSX8CdwQ+cg5P1F9\n0s9UQ1mXzhYC3zNE/WfkgQDx58CNl/vZJXpWsnfCJmBCo876GjXQkBzTVuYx\nhtGAlVL1C7/fCN3kQ9+ZdfiWg5V7gmpYw859UC+sM1oH8cP/V4NTY27KAkXh\na4dPdLvAqfAli8R9dX+fqxhW+XlFH6G0nyAbEyN/9tzYQE1j5MC7tTrbTu+A\n79eRwF+Kj6YtzY74dO9wf9qYUjw8CCyioaHQ8/BOJL7ncQTaA3kogbRBoV9N\nzpHvNxVGmpq/Yen8ge5wzqvga0BaX97gCcyTHON7E2bJNNZz9m4kLDkWqpyQ\nMngxq5wp7IpVQcs0z4hHBsv1bMbkx83A1esQqOvjjSP4+zzp/W6d6Ii+d2IQ\nl5JJ+0dWXNEMThbz5UyImrF9sR9+xMjFuKNFl6S7MqCD11CjB/sdARZT0PtE\nMmdsjbKOqOa7XEPUltRrzv9qwLaQWIXNr5TLLtCuWTWmGYYrgSPhq3EVs9sE\n6qNqSziWbQnizFMYVNTMnxpy2EgNPkwJ+V/Owt72NFLfdbCyy2t+RCNOEbtm\nM63riqTjFCjq8Hrimu+9ztrgC1SlERGFM+yaMwmBNNJ2XLT90MyafsbEJGb1\n08gX\r\n=dbhk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.47949b08e.0","@material/base":"5.0.0-canary.47949b08e.0","@material/theme":"5.0.0-canary.47949b08e.0","@material/ripple":"5.0.0-canary.47949b08e.0","@material/typography":"5.0.0-canary.47949b08e.0","@material/feature-targeting":"5.0.0-canary.47949b08e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.47949b08e.0_1576690858654_0.15238853386909024","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/form-field","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.b240bcc1b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"158b5066b0d1601a0b84f827dbdaef9973c4c1e6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.b240bcc1b.0.tgz","fileCount":30,"integrity":"sha512-Cmsz0909WMx3RKhiZih0RHfARSymAAKEKh/TFVPiGEhiCjs+aUd4SUwdq1BLsVCGQJI4zpt9c5++juB261ZjSA==","signatures":[{"sig":"MEQCIAKmAXw2sX2fwO/Tc4YjCR+w8UATby08A8tty7o8eJIpAiAi8u9I0j7TotisM/zhRJswOi27czU+6n9yTgz+dqFnvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ns+CRA9TVsSAnZWagAAFHAP/0viRj9tseZ/1dpchDXZ\nicWnw/vbCYKtQsep2/aQARtxbhEC7efMQQdJVDBGVPCMgRn9bO43PuArz0bE\nI/s0Ipl0DqLF/sNc29PDCpOCBCDyOlrSvEDAPowxQ/w+a5lEFDWpDt5YE+aF\n0LuBeOrkInuElCNgYFJ16lGhKW1rVNTXCdH+LT4k2FO51pt5xhAmcOLdcOyW\nmYkzrh9EOsuNAGzd5CU95zZ1Pxj42xs0wvLOBOcgjx8FOGrXbRIAB59FyG0F\nt3ZWATWZgjvIbWqayiTsnaeRzKhRNTw+T+b91c7Znf6czuv9RMJK2cdp6U0h\nRhCaTzvVBVdZbDlBfxGU6EmpdjCky/bptnfk8t8EOifkKQqzE902oQghIhdO\nKAIiNqhwcwGk1xGyJu8shTBwNau3wGW59vcMY34OfRW7o4HOu1aQY6VxHxkJ\n6GiOvm53u8BuYDQOFasZJlpEkkPX/bCOOkQ/w2myqTV4aAl/XvIe94uJ+wSh\niBL4YFh17+1VbxoUPunW5Qzb/A6KVvzvjYfu2uqJtjixZSkieTnD9dTqJHM2\n+e4PG7OLjGPwuPczCNiNW71lIKBwtW+fvmKU3Q1zVwNpFSkcHoeaTL/gQeKA\ncMUAqDtTKgGiZxhO7+fVO0w3+3rSRNx6laSaziZB05ERy5WBS00lHOSxaT4t\nKqwL\r\n=BemE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b240bcc1b.0","@material/base":"5.0.0-canary.b240bcc1b.0","@material/theme":"5.0.0-canary.b240bcc1b.0","@material/ripple":"5.0.0-canary.b240bcc1b.0","@material/typography":"5.0.0-canary.b240bcc1b.0","@material/feature-targeting":"5.0.0-canary.b240bcc1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.b240bcc1b.0_1576696638358_0.05979840555371574","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/form-field","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.391674a26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe6a6d6ac8d51a60a4bf3f238b02da4c0b07d5e2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.391674a26.0.tgz","fileCount":30,"integrity":"sha512-GoFMJGJU9cwbSBcbfd3+RiCmSxHivK8BG7RaAKQwlEutin09zhluJC68HN+7CjqobRLoI4C8EO++ALRsTUx1Vw==","signatures":[{"sig":"MEYCIQDAgmk7F7hFk1udWJU7BIX66/AQahfvuXQI6NUyFP0iWwIhALD0Rq7Ipa5KD+I0fHmvhpGyfMz31Yt4GICeA46baU5D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntQCRA9TVsSAnZWagAAGFQP/RUYt+FUJXQbMHWZm749\nM2YfSjevRbSZbfnXPvgcm9qGYiFY57w1xsf5TdQ9MbBiuPBcJklGFaUwO1LP\nMCvK0eXJU/C8J+9a7uTutfxrJmePdhULNCS8pEXv9Er16OQMRNrWhj56IFX+\n+OFUv2oTOlUAI7iU8h69/1HRK1dMcfdZlL+n1S75PerKrbs8i3rpBXcubXxU\nI3tuGiA2EUF2OtLx60hb0QrSux4ubztvV2C6Ym9G1KE+wjT15SbywjVEVtfG\ntQCs4Ooqn/c+1ALHhSpHaQS0oJZC714gqm2MIeNxn7TyxK3Fcqo7ah16tphh\n59t2xO61fmzq1K2Gzj+SXJCz31cAb1GCzLUcApDDVgu9zYaIf3S7QIw/27xt\nXBrr/2k6yP+08pXjP3VkCZdcOpyVSD5mpqH7qKLETi6Jh4YxEUL2/w33xz7I\nfb/5t10k8KNN18u/DKCech/6NBVJaE3U8xbgZXvFvaQ/Gn7f1BtcH+1qa8T3\naUcJLofcoINTfNVbRfL51OUz4G8dCIx0EwIpt0fFgL9qyZddqSnp4fdJey5E\nB340rKg2NSgmG49DstxQBjdhmCwTyyWO2KZKtDevCGl68hvATypLm9gfAjwy\nZ10yne36ZKEKd9I9ttqn7kJ2WGaav+JwC9xH4nz7fANeEJupp75RVDX8n2hf\n4pWs\r\n=xko9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.391674a26.0","@material/base":"5.0.0-canary.391674a26.0","@material/theme":"5.0.0-canary.391674a26.0","@material/ripple":"5.0.0-canary.391674a26.0","@material/typography":"5.0.0-canary.391674a26.0","@material/feature-targeting":"5.0.0-canary.391674a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.391674a26.0_1576696656391_0.0481615380374818","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/form-field","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.c4837746c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a65f9bb92932be7bf2b73036a60d5266195e5583","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.c4837746c.0.tgz","fileCount":30,"integrity":"sha512-/SNY3gzLJ8AIeCeKuXgDgIDZG5xzf6VLDsYgedpd87UiSLZLbDtPt6W3nYTPg0nZNWesNIjAzDzwFv/gXqUe7w==","signatures":[{"sig":"MEUCIGNytGMTZB/QFOfbXT7RZokt8CN2XGes4NLKD5v1tpfXAiEAgduW7VGyjQRlhA3L4tY6xgPyf42EL+ATc98ZQ2SV+XI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n+ECRA9TVsSAnZWagAA4o4QAJ/aVvf+36T2wTdwZxCe\nUkYZiO3BhboCKCPXCg/lU5pEr+x1zbdm6RYEkxEpBSegrs6Co22Umgvov/6J\nuVaF8Oln3NgxjaROSpA5mTusGMJlk5gI4Tm88lRdOK8dGrssRQfM9MwxjI9S\n+SpfqsHs+qcvykboldLdbPDGnsYu+sVggRcrE4FETlKDllsRnCr41clTaoW2\n8/LTKf4aaOANJNFer1tGAJCQECCRWfnU7TAuiv1dfFuFZZ8SM6eSgsTQv9se\nHVbcORRwY/odHCvKQteZ1cmcTCepnEs2CgGBMfwhdwsRmPO+EhMfvVmT6Kv8\nZIiAFuD40a+frHXzyau5SvijDgDMSVfwWXfSPkPbE1/7PIRckItbVLPVJkVf\nVufaavqh1iZBZAsdV7VSRgskO/hhPozzgBB5WAPNYCG0sq+eNm4/PizzqJQ5\nyLDAJClqP+0OSXqhf/a8bVds7zisPI/jKgh5v9geTz7kJOe4DzROKzkXd45Z\not3VHK9r5ryfnP+BWjd0+OiBXj2NLPv0EHB2Z6Wcmx27dYZwHI5eR3CysGoR\ntbxJzpKfn8PqWRfMaqDuPD2/ocXvrrvQ5HRjeSt2iextqQ9acyS853iC+ViZ\n61heKNQxpMYIaKSY87+K7m40KxQP0CO2hYQXA5ysQmGpVWDtkMPN1SHn3pOY\nqPe5\r\n=riFP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c4837746c.0","@material/base":"5.0.0-canary.c4837746c.0","@material/theme":"5.0.0-canary.c4837746c.0","@material/ripple":"5.0.0-canary.c4837746c.0","@material/typography":"5.0.0-canary.c4837746c.0","@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.c4837746c.0_1576697732429_0.22831291919594454","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/form-field","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.e41a70425.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f63e84d5d475c4de17a21c770ce66e5ef4bdad2d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.e41a70425.0.tgz","fileCount":30,"integrity":"sha512-qi05RqeBZ198kFCNASikXYsj9llkZVm4uBXtNpUog2WaGvV1ESbiD8icKKwcl5Ytxc76qNpQYWR6gk5M2Y+UXQ==","signatures":[{"sig":"MEQCIGvADCENFBleyQRDsP6xrhjR6qB8TkEaEgO7NwRLbitcAiB5sOjPXcCVRhEnGqlTASV4eAgN66aHHsA4CzB4WX2DPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rRLCRA9TVsSAnZWagAAYpEP/ispJb//o88RMjcetB4C\nenn5Wl9jrswyV8C/34W796ECOPSzYJezvAoWKXPpN4QDO4NASn2EqMDmKdFQ\nlkOkBHDWfkq/Oevl6HiLh3+y0uaKRGPMcDtLBeR9Do2gAgMiN/6glEQCPqRJ\nlEEDkvo4QaPNm/0WwLy+OztWfKSbSNFeEMoQF/T9Gdhxm+ZreCUzvZeBNrqI\netEcUEGoyQZgzpDkZmI3F5UTdY9xqmczNWTpV2GOINweF200siw2utKzPJdS\ntYnQro13EsNBlMaSMvog5AynwS8BxNJ/ybcdFikOQ4/uvDDQ7kuWS1qblP9c\n3vEgx0nwS6LEz4jeyUaKGD0tHG+YuQOwXfIiK6GZW3/ckHk/Lsg8/zZN198B\n8HuYERnLtY8mmisxQ4MJPL5UPTOINqa9PtUWMFpn2gmjK19dHUMie0ND4exs\nyfqONuRW67X+2SR9Pst8lMnLIc7XKZe6LhtbB/3SPqh71M3assTpfq2afugm\nzWPr4UX4YrjN4uvtkvBUnTfJdyl8EkUDh5LwkIgT7VX2gkeZYKZAlAnbvCBQ\nbQ7jnyRpf32ugT+YiQqcGo3/IrDgI3qZgy5x/S9zqgZQe6WAxxkgcX3LrwzY\nqIfcMHC4mMmksG58JQ4fAcJEi1RgVzaEeNCM7MVQot54NP9KYicnmk5OxrXw\nlwpJ\r\n=PFQs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e41a70425.0","@material/base":"5.0.0-canary.e41a70425.0","@material/theme":"5.0.0-canary.e41a70425.0","@material/ripple":"5.0.0-canary.e41a70425.0","@material/typography":"5.0.0-canary.e41a70425.0","@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.e41a70425.0_1576711242649_0.7588157064308729","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/form-field","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.bac43eb43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8e96e1665d1142e72955afdcf33aac8b74069d6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.bac43eb43.0.tgz","fileCount":30,"integrity":"sha512-eviE4pP3z9lleWOSXFbQ1Ukz3bw4gbQuJ0bt6vL093KUtmU9Pg5Q8UDmA/hBKGA8ynl4ChR0sbzgOyGaEHZF3Q==","signatures":[{"sig":"MEYCIQCBKT0wJcD3Le36kJXyX3h5oshafNYymykneR57Gs1oNgIhANJ79V3AAhH9sZFDX/eC1jgLGubVfX99vHJf8O5JkSiE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rUsCRA9TVsSAnZWagAAPegP/05Vh4XfD+VHPA9iZecX\np6c0jklH4ziXTFaT7uCUtPtcaSWgRse/3SRm9NJ2t+VgrpYLCezulnHpx+X/\nMDu1mGE4QXV5ptN4bTU/V4PqASTxsT6+8lrlKCK0paXJV7y3nzcMnMEfueD/\nRU2nhyXU5wwQjombXofdtD6CzCWtFrawUKg8SwjoCiWM45GTh3t39Ry72CiR\njMgwXzXItPijLQq8wejWmwbts6hkAiuiIsgVUa6kSdbpS/e3ZP0H0CBTgcoN\nuFFS/fwXag1vSUfLbEQ4xtOSHGcwl+LFptlWCwH54Oyu3QDhcPf+tFltlmVH\nQ0KBr+8l/q9OEg3f5llwWQ5C4Omp9wbv0ZFEDxpILxbDkXQ/9l3IF2ztf4vt\nr6OKEGRUKOhZKgjGA1nOIyN+0XfDkEe3ID36FjmQF7i4ZZLIcB+e6zQ1MPKw\n2SKTIu4VTFmUNeNCSDdjYVfArCe6no4746R++53PrH+HaLeVB44hYYk69ZdK\nfze54YqSULR0uIyHArvAsHAxSFYtpJhZxvPnmln65I5n95ZrYCj52BTtJdwm\nwFnQ83FuGEjLNoFYx1WAHlCJBpo18czlLGSmGsslsHDjUDa+Tw6epQNugNwQ\nkLwK/2AKEnpRvSfwbRbJ7a8lUSXekyGIXbAEoETq0pz1hKTdBF5mFsRcQrO+\nQANr\r\n=IjVe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.bac43eb43.0","@material/base":"5.0.0-canary.bac43eb43.0","@material/theme":"5.0.0-canary.bac43eb43.0","@material/ripple":"5.0.0-canary.bac43eb43.0","@material/typography":"5.0.0-canary.bac43eb43.0","@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.bac43eb43.0_1576711468577_0.8037546944836953","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/form-field","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.2e491de55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d97a8bb2aac22da5d2ad35e128e9c6a7aef69ff9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.2e491de55.0.tgz","fileCount":30,"integrity":"sha512-usukokc2INNML7n54CONomjGzQx5gQoMgnv6HAmTZew6CourdaimJGf41Hy8k8G7bmXAXLFO0c8fBE53KjgIlQ==","signatures":[{"sig":"MEUCIH1zyyi8HCmftwBudBvnTFjJ1R96pa+B5wx3LlQBm3xWAiEA/UUjgpB+43IQfA48uC1/N6+IoJXYBtS4LeyYaMrrDwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1XpCRA9TVsSAnZWagAAQzYP/0+gYA2jCPxXrhMjG0/D\nUtt3FgdUOplvvt90iUWmwrAZZsA95gUUMpJK/pASyV1MH3MlP3WXIWBucd13\nmaCtaf9b2YZjil4CtXh0Qk2DuimzS1VXDivgNktyYnzKezPxWUETSAX373Kj\nrwXQqKC5l8kr0/bRI7juO2gdfmW6y2GMrZvPddLYxMHpatItk0+ep5fCCfff\nhj1AyO9DIdWpfQbHTPsbeXVG7rggiiolQll9ncFFGp1BwMTMYXRgmeKyATz6\n9OgT3vLVqg+756MWX3AnmLyL4qzsQ98/uZJipNuCIBdld1NDlvW0Dxx1KuOK\nm29Bi5nNdHNbin7JjSvYX6jDNGIyjKA0ziA9lKki3B6XkEv0D3wyXMos7Zgj\nzaoin9pOjC7dDEOXae9BYJC68tKpp4LkNa4OvFWIFQDuGJOx+YtYkhiFGrQN\nu0CkjLv1IFUbjxQx0xtjus3iJttmlWLm1VwiIQk1qlMuRdrNohgDMsIwPPo4\nJHGX6gAH8dTpNiDMD0TH2GGh9rUugBk7o5qTFB56P1UccCsoJm7Xnb/MA4sD\nJAlhf6WeM85jsKUKm5Kdb+uUbAnPXvCrQe6e9N4S3z7ukyRdzo/IDManCNVi\n5rczCyhpGtj/gsbhPVFhTM1HV+YDafRtjMXZ4g3EbWRm9/4LTIOQ6ogFih05\nMB0J\r\n=anKG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.2e491de55.0","@material/base":"5.0.0-canary.2e491de55.0","@material/theme":"5.0.0-canary.2e491de55.0","@material/ripple":"5.0.0-canary.2e491de55.0","@material/typography":"5.0.0-canary.2e491de55.0","@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.2e491de55.0_1576752617223_0.538881701795797","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/form-field","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.ae101c144.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2eafabee7e3ca6b64b3bd67643f812c7c60e6cb7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.ae101c144.0.tgz","fileCount":30,"integrity":"sha512-ciTSxmynYydMvG+HRXlxH7Si8xvwLE2NV9Zo0utStlWUUCewQZPEgdhnsJZPUt2/Fj6C9uFgNbHLi5MQQxDFtw==","signatures":[{"sig":"MEYCIQD60Mmy1EBdXhqnpYeSojSjxQL+v31OlMC5jYflUcjAtAIhAML27F5P98/iaGqM2CI9G1WAzGIDtjOupQU96iwfCZnA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6RwCRA9TVsSAnZWagAAPZcP/jPCj1XWP6N0ZnupVeXj\nmSDFbfzHZzXMRTxU1bjLsI7H+oLRn0FuFS17Oz4ny33It29GmIJCdgQVVd75\ndA7VmXi3CmCyr8hGN5N9VWDPpgIfLbz/2AUA8Z0ahVU2czA8sRZaJkjLSuCl\nhb+SluOmtHBmO6DNqj7WU6VOXbIvJ5qgMB2gxcxrDaYqksmyOYuiK4ha+2eZ\ntbeU02Gn41Hh73QIwBNDtKfAXOqjSEZn0W9ciHg4BaP7DiOsQySupWaW8NyR\nyb5QxIizHZb78+Vz+7C73kvd6Is/aBlNO99O2KYER17sc7pfZERO6Hsg3T98\ndV4o8Xm6jh9NEMlDS/F3gT5LTL4u8Jx3tVPSGq0aaSIU7UESc/oh59KXll6K\nkRIS+Q8jIkM5AZl1flbg19p2cAm59JiIXwl0VTAPoEM4mggroR0+R8GaKXg+\nr/TzjALlJAX6hGjHn8BWeiBKY5dr7JXGilpd2WTPKAKzV8lFE6ilWUnLYS9l\nd0BKt8gQ5lVNDKDANEOdc5g3dkLqsHfInYRwGqqYCsZhh6KpI7B3Igl5JAh5\nYkZdnR2c4q1bT+siNl98dV+xJPHZYCd6lCtbyqJdzOwELI/hubVaG8+qg9jp\nM5xYr/R2lixeBloB/I6sLFCpGuDb0zN821DghJnGhAjg3lNo3foZNsJcl7nF\nkuY2\r\n=PxSg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ae101c144.0","@material/base":"5.0.0-canary.ae101c144.0","@material/theme":"5.0.0-canary.ae101c144.0","@material/ripple":"5.0.0-canary.ae101c144.0","@material/typography":"5.0.0-canary.ae101c144.0","@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.ae101c144.0_1576772720137_0.9900374941558556","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/form-field","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.a51c31f26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab8552f6923e2c390f20b8bcb5d1fae46ccdd5c0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.a51c31f26.0.tgz","fileCount":30,"integrity":"sha512-nEXbn4RjeSu79Xsa8TKDjQc3fSnSjgd4iRYc3qfK8mMt4Nr9IX2Mwr2k4eF2WhEdNWPqvM8Mje5mV9IR+g2pkg==","signatures":[{"sig":"MEUCIQCk6Jr5uhWwhOEZssdq4QzLmBtvqyFuKCQgoHvgMNIiOQIgZsmPGUIyc0e/ZxsQZYSQnGPWy0jGMzmcSNcpRayVdQs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+7AHCRA9TVsSAnZWagAAFd0P/2g653vPa+eLUXkGr/yv\nJSPDfzfPEJgVmeA9YiRLx25KWRVj3RvA1QepfRC48zy8SuamOriltJnt27AJ\nwsxnjahQbT6Ojjn0hbdBqZa67/O5MQLmtf7A+iPgIGtX7an8mjauA9NW6too\nJ8BXXNaWmaoUToH6rzQQYxHdks4d/IF5gwN5TOZxJuprkGCrZfLYkSJJvb32\n18oS4S3tGJOk2MU8y+6CUxQO06u79tbsnLvkOtsu4L1ANdn2zv0Ao+cvRhDJ\nSKE7O7yM85jGmGCgkxBSFYy1iZ3+Bm4+RKsZD9iwUY0DgdzfUh1ixtEm0QjQ\n+3j5Ad6tQMLlpHdn7H263ruBYY7s/qHhQx+F2ToPp/j9s1eBd5p/6n9jyjcY\nvIyXx6+UfffHTbYCFqd8bsEMySx7tXox6P8Sn9ElB0ASCE/7f3b5CsXfyS/V\nw/aN7jRZmzWEnG8CqW4DRdSWckcx7FDCl8jhIA2azGBdbBCU8lWk/7vnMYgV\nVsq2Ux9+isfiuduS7E53FaGzm/ydjS8yoaCw+IBy2bT4bdjvRJq3rE+de99f\nA81CLuCyHj3+Eql4q+gAiOiwKvoQaERbkd9bkH/vSB+yX3EXYkUDSx2YVoKf\nBbWSjKFfMMimhQvyS3SuhlxikyIGw8X/k+CgHSnR5rKX1UHlbc1HowhCs1q1\nlBYH\r\n=KceE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a51c31f26.0","@material/base":"5.0.0-canary.a51c31f26.0","@material/theme":"5.0.0-canary.a51c31f26.0","@material/ripple":"5.0.0-canary.a51c31f26.0","@material/typography":"5.0.0-canary.a51c31f26.0","@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.a51c31f26.0_1576775686887_0.7228333228938479","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/form-field","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.21fc4e13b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a1a18477c2c85332ff1c70590b6ef64aa73ccae","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.21fc4e13b.0.tgz","fileCount":30,"integrity":"sha512-pDPiIfyYxfz1zGRs/NIGkzk/JYR+1qSbE1gHMnYCTaEADjeOO5JL4UveqCoR8v2thJAiCj10wEKWynOcehf+yQ==","signatures":[{"sig":"MEYCIQDYKafvgbX7f32VSMj76l27eQhebSs/nQt5f1374VKpkAIhAOpiroi3Ca8/V7tBZWmoW6g2NQ5Szb7T4+8WC1wcQDjK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++tCCRA9TVsSAnZWagAAbFkP/jmVVA/sTm4y2HPDkjV9\nSQZSl0pJ4c2nNpfZLWY/mjz8sbzsf5wsmuSYlSr1O+U/LSW7/66EM3HC424Y\npLYUFWfw7Y74NGqSehHn70I4vlNe9zB0oyoaQC27yMWUwmafzaxcrUNyIc0+\n3C2Ol/6LpethY4pfHSskLmn7uYdSFvAElwFew4uzimyA0TGJsdPP+kpefTh1\nqHGp9kh/zHGsPmfNrkM8xi5IJ8FIUXSbhIxNt3XHTHa1/nGgz/bY/5GWJawm\nqP0JokSFd/5bdCjTz4Av30MaO344mKj/i06lil6bxnVgTkn6KptrtZLdPwfJ\nKbDySbc8rUC3uButcoImUqv28ZSPQWSEnK44QIcwbC2F2NQRsFmOG9rhJQVz\naQRieYJMLnCL5SF+wZmo9S48a1zbG4LHFv0GUuaNNQlw31a7n+014P0GWNvf\n4Zli5/7NY73tFMs00Mhy8crhnPuOMfso2r8xAKTmnIMo08UltDZkgVEfK5/v\nRkI7l5RHaElxO4yFgcBEgIvB+u76MjB+crK9/WiYWRPNOx4b04DPjsK+rocT\njwyyrU/THH9ZyRBaTvOQkb628LxHUzkyo+pNx3OWG7BGpzUW6GgBZjLGkRxX\nJZCl4vArYHMycUvebmBFd5Js6Uv5AguWKuTgQterdr78xgZKmeNyXWA9o8fc\nDlxA\r\n=rdZa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.21fc4e13b.0","@material/base":"5.0.0-canary.21fc4e13b.0","@material/theme":"5.0.0-canary.21fc4e13b.0","@material/ripple":"5.0.0-canary.21fc4e13b.0","@material/typography":"5.0.0-canary.21fc4e13b.0","@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.21fc4e13b.0_1576790850254_0.7693462963943078","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/form-field","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.d2ae6e17d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5b9c7bdb29705fddec9fa7bf12dbf626c4a57c3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":30,"integrity":"sha512-LroJqrc3FH5dt31D8EmHdnWi8MqppBv0oP5ATZISwq8eJf993FED+3FJOX60zs4glaJDmaHAX4uvLxO4y/ofTw==","signatures":[{"sig":"MEQCIFf1lkSX9BriFrYUwElyFYgXFc/SjVHKE+jcx0OupJyxAiAfh50CCZssYr4K3BGxnax/Je3fbvpwRHU/M7ocbwITcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/ifCRA9TVsSAnZWagAAODUP/1y6eeJm5HfoCXXlV0BM\nT1KjWdJgEFhy5RFhUfFbQvKh9xNcK8JfGXzNmsA4Qco7gHE8Srod1EXlsGs+\nshLCwCg4NGHCdkok6xl7mE/yg/FtZORyTD6Vo9xE9qHhcgR0XtguuBVbMN2k\nDCI7tSaZc9kilV2RkMkkY8M3yUq2ax23RsdZof0K6YmKDj7hi7d3d+KpfrIQ\nfRtNUdFeuFUHgZdzkk1hR9V6H6NB8QSGLWnw+wjXUFXLZ9WWHdsyuHJPJwEU\nMdnM7guBMud49JnRunZelT01SuFzKzCjeFmuXFHr+gbHJROTbgvOCojECvi2\nakBmwl2utC3NgI1BYfuML5VQ2zwfM9LMWc2iPuljZGbo/ChDJSTrMw1Sm5Ik\nzoNd4TK32bEpQJehFUA9RnPn5AtdtekrCCwslGdvGYbsBYYRA5ntjCqkyO0c\n6OUTqaDwCDGTBPfFIoeopGUdtq54/cEdHXDdzayMikb6Bg6Bp0BXH/nO2ori\nYN5C/7av0YFiH7IAZrHAXV7T6I4yg/gSTmCz008PgweKOQ4H6GR4hDsiLLAi\nWQhVhcNGXE6DwmfdkNEWnrrdgrUDOv6hsIg3RBBipcMC13nd+vIVuDqhQ10O\npDOB8/Xe6e/IMKNkA7/RmH0Fyn22VGFusBNrZQV3oiUiLjLgti+aVbJ2io5T\nF6Zw\r\n=Pyc8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d2ae6e17d.0","@material/base":"5.0.0-canary.d2ae6e17d.0","@material/theme":"5.0.0-canary.d2ae6e17d.0","@material/ripple":"5.0.0-canary.d2ae6e17d.0","@material/typography":"5.0.0-canary.d2ae6e17d.0","@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.d2ae6e17d.0_1576794271029_0.6461857286359276","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/form-field","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.ba30399ad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"173972441a0d857886e8f690e9ff9ae7d4a84f56","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.ba30399ad.0.tgz","fileCount":30,"integrity":"sha512-jcmOhrbS3Yid19i+a3ohhc7GaOEaU1ivmnEM0AIMVC6UkQH+iV6gnzfB0gshlpcq+iDKaSHtzAwpegiJaa9CaQ==","signatures":[{"sig":"MEYCIQDm8DOwpQPfYR3EBLtyLqpeMSNrzHWxq/5qdH2LMMGQxAIhALmoCPVXVNOiKnxepStYv6lf2U/gT4harLTBKihWzvAO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B90CRA9TVsSAnZWagAA1V0P/0e1GTkFJTOKfWZM/L+h\ntAUe0HigROtSkVU6yhj7qpR1tQu8p5qRp2Epi1WQb8IdQAW9TLPHjn8s3hcr\nyiLGBkoPN4ooNB+grS67/cbe6Y18/2vS4pV0woNeOcNMq8hv7z9k0/zS4sRV\n91TQmYQyxAIx8zeLpRGwy8e5wh1ZbKsTlwIRxoUtMcjX9PpliDLzGaUWrl2+\nKlBUWLQFkFB07cJZPTm4PnkDGxOkybk+Wt6GdYcfVnKxTpmBshDdyxDl3s4G\nQE00FXQYJ1ltpM17wQpLYQGMHSYuQ+e1GYpEdUxqOu7+8LReQv/Yc+qGKl6F\nQNa4eesQ68lw5DGL3EvBJS5uUPC89WXsdTj0yzbhZ3kWkRmpPZykFo4eVnp8\nlQz1GzHjo2q55L2waimsPUFD9jwSZSYGdOSyZ5/ExODXCwvy3oWZQkxV0Uyp\nnyjFziykUR2PSsTv9qU5ihX9mlyv8UIq3HrCRrQwADfyZSXBifxZbkuLfJFe\niC3xXi4xK5ED8mNZU1Qck9qVBKsFDo3NEG9bagosn3LdcmK9zjnxxAgfTwKL\ni87l8JDajC6Ja4coyD1Gqz39fbpB0T15EnsIZRhUL78OgI/dB8lONAeBo/Zf\nzyoDzcPZYmBQM4zFW0kMQJFxIki5qjEohfxWSE9vpLpSO+RtQXFrzt4rFS9M\ncD6W\r\n=y9ui\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ba30399ad.0","@material/base":"5.0.0-canary.ba30399ad.0","@material/theme":"5.0.0-canary.ba30399ad.0","@material/ripple":"5.0.0-canary.ba30399ad.0","@material/typography":"5.0.0-canary.ba30399ad.0","@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.ba30399ad.0_1576804211617_0.13615219535798628","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/form-field","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.a08ccec35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a28101d76deed76799957ca2379bc240907ac8aa","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.a08ccec35.0.tgz","fileCount":30,"integrity":"sha512-BKpvSD7fajuqeJdpXMisRjh6j8WWdynxjDUiMvZUKwr9kVGiwQC2IuabgiLzE48XDGs4nGSMWjHYQTedd/yhnw==","signatures":[{"sig":"MEQCIGc9tv1hM/3860H/cm47pjQGNTNM2XF4qJmxRjvbIgbNAiAzzAisgsm4A+4vg5NOnXSbelrPP9kul4sRGblw7aL43Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/VjMCRA9TVsSAnZWagAAFZgP/1i+wNJDwaptOtTCgPov\nk1s278ooVDElj3QMcmXvC55+JCv1BlgHrTMT3Lvmlnj9N6DbB/jPwVv1SnfI\nVMhVst+j8IkzqNTCc8Yq3a1k1eGmKe5MtCYJElzufgHyjkmjkZKmdZCgTzvM\nuh8BUgKook9yCgEGIm7wPIPc0h7Z6v2Ugmon1olYtGq+ACnEFxH/WkkEsWPn\nDrOXsVqX8KqLZGfR0D/hwyXG/OQYHG3dcrCwf+grkupoXqze5UpjKUZuaESB\nvSU/DXSUO2mqlF56Q4qh+jrxDC2Cziqso0HtiHEdRmJmMEVJRWwqhKxplJzl\nhfpCLQEAtSUSioWnMIqkQu0NNkDlUry87/0ta3vOu9w98DvF651dOmvcd00z\njeWahXGtjRckFM8E15pqyRwCN8JJKnyF1zLVOBtNnB/jsmwgMpaN+y+F+3UL\nrUf3+Ktr2gcrWSAbuVdkBq/dCs7gVYYgQn6C7VAkdzc2VDPh5lpa/hEOEDE/\nj3zz6sTrahD/IS6kyeRIN9u0DOoJjCuFuKGDUrZBFw+FUU6y0yYsbfppN4Bm\nsB93RF3mUon3yHUdQLMqJjLTG5OpVnd8fxBZCqoA2oRxRzJjHlrs5J3IktUW\nwi/sK2ZMKMUb34fdD2NsfUjeqCRQHBEeMfzxEjHQECp6vwEu8d/oTYU8DOVI\ni9uv\r\n=24N8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a08ccec35.0","@material/base":"5.0.0-canary.a08ccec35.0","@material/theme":"5.0.0-canary.a08ccec35.0","@material/ripple":"5.0.0-canary.a08ccec35.0","@material/typography":"5.0.0-canary.a08ccec35.0","@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.a08ccec35.0_1576884428090_0.6508149497105713","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/form-field","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.a2f75105e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e9e7c27ccda4162ae717d5ac6c8c7a576b9258d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.a2f75105e.0.tgz","fileCount":30,"integrity":"sha512-XytewfEq6+hZxmkYVIwiXnHL5syA3fKznM3MXgDckbmjemUTYiIz3JNq1ui7p/FSmj3jnLNQGXozYYWl60fA4A==","signatures":[{"sig":"MEUCIGfrks7eAZwjGGjAE6kl/OgCO0biLoedawi3yZWJPschAiEAhJgQb/kyxbhXZhxXbB/7du64FWHbVFw/kY9VTmY+OPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARn5CRA9TVsSAnZWagAAKuEP/j5X5FYriNNSPLbGpZvQ\nqJLEfnwhDGvlQktV1d/PtMubf0f1F/H+4yGwLTtk9rfwAOvTMZWkqQc0SMkD\nhIKQAX2515ZloF++5fah0qxLcq9aEYvw17KAlSdG5OslU+uVJ3sCohrvnqQL\nbcmctwd29yOMgR6p6Mg28Ds2freU4hvbL1i64HtECRBRgARdXNvzrqCA1Swe\nAGh2zR1KJPoPrwlIheIHb++1jcH/9+dgiWdT7NInSVEsf4iBeu0DoVyc5ZN2\naUv0iM794dAWBCTIspOxt8cM7EOMW/C2XDSfrKYCIHQ6Dm5QXe6hgVo6L3AQ\nza3Tw40GlqUZnkrFgJpu8iK1HCJZk2glSaY4LzZABpp3QXvws5vDlojTMWhH\nC+66VBF4X0d2wV7vX93txSKI0BeA1ONc/yRr74srQrveJXIbrOzliYIrYBXe\nnWst2+snw5IuccwYWgGpJcVWfZJRCeMp01s7sQaBpv0sYttkSVISQKROy91T\n4TQ6prQ02/QQ5/wDIHCWUNCVPDkSXhkCa7g8TS7StBZAERAClPsvB/fy6dO6\nCTCG8kecvwYP2UHzuXFUlx6w1D/4F4/djePdT1VSsdLsbiAvOitTCD5yS3xE\nP/2i1VIylOWOT/hjRiraLvaflJoGWcO0Oe6Okdaj9JZDMQOEOZTtlOR9HhuU\n6Wis\r\n=Ic8F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a2f75105e.0","@material/base":"5.0.0-canary.a2f75105e.0","@material/theme":"5.0.0-canary.a2f75105e.0","@material/ripple":"5.0.0-canary.a2f75105e.0","@material/typography":"5.0.0-canary.a2f75105e.0","@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.a2f75105e.0_1577130489051_0.4927382036258441","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/form-field","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.c054a24c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03dd9a985071505734d9e3114f6ea96d02f5d296","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.c054a24c7.0.tgz","fileCount":30,"integrity":"sha512-2YMzTspRhJrlGQywukxqyYyGsQYCzcio4Akq/R+tp7sEQOHrQA1dQSKMmcGpWBg9mmd2i66O7JFGC7/tV40Hkg==","signatures":[{"sig":"MEUCIQCsylQ/vquRazrKWQw/9335vmMB0IRPsbYsRKAfXB/9QwIgONcnQoPviOKcJm8gZDgq9peFZeZ7t8Vkq8yPkQSrv/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATakCRA9TVsSAnZWagAAmCkP/1dBd158a35BggIwAh7E\nD4YQeTHUwJZN0SukEzQSOWArVg/L/xg7UCDUTLapZo8aQ+ALk/DJZNvN3LZN\nLwAntbn6llxSpE1rUy6GkuHihNesFMa24YnQktW1qm62v6OyvQGvLTD9WDkp\nN6VxNoZpIUaXlQIaUNWshvFF9149AHXAHo0ootemr+0QipH182lJvUsz/Zb5\nVWGfglFp/5SnxjhAjwYHBXk5Ch+p7GCE3kIf2oF74CSfbO4UektEWvGZn8qX\nXfMXukuKZPSEMDNHidhIGrSPyG8VkA/6TJ3sMMlE9LqEHDaydkyEbn8OMma0\nbbSVvmRmzKWBqL+34mve9UsS9jxk7ilhGVh0dK1bHoHg4vKLfwZEWOtub/aS\nQIr9JKd9SK2KL3qoOoJFoJTFjcSrPdFnCJGffB89s3rSDGTfxhr1XMgSYiey\nyXtvfjRO40mch/f6UEs2zZbxl+3JUyzZn6aM1MzWiA5Hq9MPdh9wWCVg5Fug\nj1jkOW/cQYcxWp5f6hXBzFUwo85wCb4Nnyv2NLb3tfaWbvO35SgO9Iq9aAOV\n653EQBHnxgRnFzzQhJvRL7x34et0+hKiZslLfRm8TmUKmwul+XmTtuQnNXq4\nh9eamabky7OcVFzcIaOuVyrXE3HYFlLkVmty/xYFR0+kfDKNwkaJG9BW2ZQw\nO08O\r\n=CxWm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c054a24c7.0","@material/base":"5.0.0-canary.c054a24c7.0","@material/theme":"5.0.0-canary.c054a24c7.0","@material/ripple":"5.0.0-canary.c054a24c7.0","@material/typography":"5.0.0-canary.c054a24c7.0","@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.c054a24c7.0_1577137828089_0.9619442411015773","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/form-field","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.c6808c51c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ab52f099a1ddbd825dd15790d9c70cac711057c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.c6808c51c.0.tgz","fileCount":30,"integrity":"sha512-akEwaO8zdQnlmu8LTbaFanR25oHF40WOQGD+fjSnewiVD+sMiVnGlpOo6OeU9HukP2FN6ZpF4qR8c9ziHqBcXQ==","signatures":[{"sig":"MEYCIQCRNDxibl9hlic/wcYxwtyIy9jscN21NGP91DTFNQdDBgIhAIxP0dbRFnLdDpRwSa+aubHiubUjloOSb67Gn4j8hF0R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATezCRA9TVsSAnZWagAAWIAQAIqfIpjrRPqGI+6iBTIG\nyYQTH7+Hi8+GTcH5HOHX91lMsczPLH6ollrZ0dLO/S7gbUwMFXGiXqxV4/bt\nMrazdsoqp/FZqlTi+MzGASxSHm42N9jVytyMVFvXaH3RJpr6V3gc+cCBZ+YJ\nGIr+Kh4wTTNbI337lJD/eoVxLtZbddCH41DJcKnNWL9lRh17alxQpsowr1g8\nNJItfS1Xnkvy60uXg4ziWZRPBFKh5shLUGSCtsPdFDdJIUjic4EI6qTgSCWh\nBhd+QOUpa38tvKLGNRIC3wXgIxxlvgn8zB6f/Bc6BBIuzj2HkrxiM6ksyRFd\nSCZ4Wid1xvoDDNGfkCwExa/VzQqBkfTUf27FQCpQXXMF0XhU9h4S8/UoZvwE\nMaps+BHLBdinosp6Y9YDJ5ZIavVIb1X2BqyjAWrnlk3SLtW+9zKA1uBHdAgv\nduI5q1rFV+mkowop210ncXCS/nbzAW259IbPgULpFJvP53J8q7x0owJlmbxF\nUqpYQRH967TYrxfP1jzG6Qy8pf0VRG0VpQ1ZvadV0xArkpNeNU77lcCPHOEY\nQjBPmOVHzjoIODnAn51WY6qFGHfnbFI72DQPTr0TNuUn6K4KrtBDb9aQQkEc\nDcYJofA5x2+w7xW3/8k1cDNr78eRlSQKcD1dB0VNVEzh7sl0gjHaUJMbcYpD\nZ04W\r\n=tt/L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c6808c51c.0","@material/base":"5.0.0-canary.c6808c51c.0","@material/theme":"5.0.0-canary.c6808c51c.0","@material/ripple":"5.0.0-canary.c6808c51c.0","@material/typography":"5.0.0-canary.c6808c51c.0","@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.c6808c51c.0_1577138099135_0.35229344882922997","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/form-field","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.7bce9cf77.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1909e3899fc3e2f1f4aacc6dbbe910632a4fbc26","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.7bce9cf77.0.tgz","fileCount":30,"integrity":"sha512-IwjKcKYZMxYKVhYviAn9+1LzG3oeBX4ou4cK0EkDxNrJMN1QARUnbBgYkAHG/GDm4lfzoma3vxsXF2JGIzLxFw==","signatures":[{"sig":"MEUCIA4OU4T3ljt4H5z7RlADuS9XqNm0YAoekjOr1qit7iWcAiEA8BUnsszi4zsU1TeY1bzoaZbVKR2MWjAzjrc5/1Jfbfg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP/pCRA9TVsSAnZWagAAwbIP/RMoGS7C6xHNes6Jt4Qa\nEcrWD6OfHFgeTm0XQRWX9cKRUY6BqAwM6oQHEHFTuWkyb8tqzFZkKULNJ9JX\n4FjrZMMah+lnpETgkQB933jQjQ7rDUF5iqlzyoow5TO25FFlcNK1S6dY8kdY\ntuqnVkk3XELQxB/VWFvPQjmKJg87ONlhuj6m42oCOb8oar5DI39Y/mCrM0QY\nc24Ds7z1WcnXKkSt4VUyXHd/CSlAMHzMjdmVGMXd/2tBaV7fy+JwJmFMInRE\nPfvSTbUjB4mxUzS51uUbtZpUVa9pRRLcvSPWtXCEJXxOARMFT/bXaAp2H8ld\nSg3AftR7OgxQpiUFCkwznUS4bFmUbbZqHShN0wCDkxdGEru4Ra6TuQe8gdA9\nMD2g/DcaOJSyqONuSmwNP3bPvwGiczNrFn6eScdekP/NjXnyu1yDhO/Rn153\nPEchsRhpO0Ygs26biA3O8jGicVac/hw9Ch+7M9R31wfV/cCgVsbTKd3gJ0PV\nD1X1oh/YoYHpcYnMeoJAmJtb3OnCqGQ8T1oVg5QEJBTZdxIa20lyMFzvA2NH\nbCIZ0oUXw/+Xq5aCUyy5oMrZq4U95yraQDppW3aiVAND6ggL0HpEBz7NZ6+0\n5z4s6xSxJ82g/0ZpWD6qYR+c0SLOWMa7EYpJBazEgrTspvqJwAscwnS49/5m\nGBfW\r\n=R30l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7bce9cf77.0","@material/base":"5.0.0-canary.7bce9cf77.0","@material/theme":"5.0.0-canary.7bce9cf77.0","@material/ripple":"5.0.0-canary.7bce9cf77.0","@material/typography":"5.0.0-canary.7bce9cf77.0","@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.7bce9cf77.0_1577385961401_0.7890176824351733","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/form-field","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.c92f038c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5db29ed770f89aaf6e1fc8fb1ee10ed3e790468b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.c92f038c3.0.tgz","fileCount":30,"integrity":"sha512-2HjPNT0O2wl8hDtUKa9FdvezSxDM1wb96n8hYPuLtfwDBzhwvlTq1J/nRkWMtETWf9rV3afikuw8OxRWZ2RPFQ==","signatures":[{"sig":"MEUCIC+iOBcpnaorqkaOiUPHVy/Gk+tIzqMZ9IxVVYfIqU5ZAiEAvynC/8aIICxLywUxAdx3fetXrKUawWvtmpYxI2L+Djs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnQ2CRA9TVsSAnZWagAAyUEP/32G8p+re4l//G101m6A\ni+Wav9gd1Lmg+CtZfpu9wPB4ikNFY2G9yxwPktfZzBeyEBlI4K/3TYp9BOze\nqAkDeEToSCeP7/lt7F+RSe5kdumbbhbIxbgZZKMohgaqCtLZhyHLp9t44mVd\nbCsrtpIBPwpOn5ogMUTtZeTbIstQS/L0WqTDLJYdH5zfnJ6ySBA4sqiynsvN\nOrAap9Y3g60g1r6KqkMgr+v6obz1zDIjjK3WQRVvvV3rTgr1AEykhY1XcJES\ntEaLfG4HRvA0gwS291lL9JMR0F1yjUFbHEi8Z8gYzJ7X7xgCIprQvFLLj8+X\nKUVK1dFFfkA69+lZhWLrt0TzTwAlTi8b+hPY0Bhqm4+MbH9/Je1lJpMSLqrx\nKD+p8wDHh/ucFInKjWvNwh29Yies0cKx0crBJDvhrSC1iLtogWCp30Lpi6dw\njVE7mSIvpSXph01GovuayfjohfPUFV+eS5fyFmwa6PwXCd8lG+nKBkWNAv0A\n1WUpSeHuxQN5BfMNs8rgnd2c4qN47Eln1L3DQXrWcPUhuvnW3XpOC9+5ZsUm\n015bpGgm3Df+/YzK+W7TtsqU4LVZ9Urjc46CG+A+TrOdB1pdDLEHfmUe6+bd\nofWu8td4/7RpSL6an2XpyFeE3Y9scFJ8BAiNSjoxkg8/NEpqQBmPa5AvwsCy\nvR1t\r\n=np3L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c92f038c3.0","@material/base":"5.0.0-canary.c92f038c3.0","@material/theme":"5.0.0-canary.c92f038c3.0","@material/ripple":"5.0.0-canary.c92f038c3.0","@material/typography":"5.0.0-canary.c92f038c3.0","@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.c92f038c3.0_1577743414477_0.38285921731338446","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/form-field","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.1f1ac7558.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e72727734f3d8a054fb748b4e63e1af2526c17f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.1f1ac7558.0.tgz","fileCount":30,"integrity":"sha512-9/s6tehATYoPHRjRcDYd8i5vhFTCRTpWHxYfaoYD3st4omFvEVepJZlODMvLJh4eihhwc/V5X77KdbALi+pK5g==","signatures":[{"sig":"MEYCIQDzlN51RL1mVL/c7C+AAwbXX7Utbzkkbat5ZoCdebFKPQIhAPL3cO/GFUwJ9bw2b2hK8zqsj0axcptrhS1etcNBp+Q2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDliDCRA9TVsSAnZWagAA820P/id6JWKNhKciTddOScXO\n3nSLRSMmHALEG/BN2vB1J6WPo0S92YvBPkDGjh9iK5b4yHUyT+b52Cidcrk7\nQCEQSftk6OhV29VlLT9LtgLoO+upEg0CBcOvKvfQlifY7H9JFMNX/rp4vjvE\nya93gjh7yhL9fF6ccN0GpaYhexLmsjXZGwbX7Gm0g4TZnfH2h/DSHebmtTe0\nJbrP836msnbYrkOxu5RABPsUDj5fhRmZuvYefIQFvmtJ5Zb9gx7c0dgg0yV8\n/mP8qFlkts2hrdAh+jEH8TyoD6SPPjk7165UFbQ93orkuUCLDsUZJmQAy5c6\n7p77FQdMKyCnaVfZeazNqPbV40JFLTfNcVtJqus90/T7hBVPl3/eaUbO4um2\n8sTJRV2gHvTGA2G6OpOumQbm2QOLvMdXbr1+OgclV0qprvpORutP05tJ+XpP\nI1pGk6X5OW5C/eX5dkiKRWBepg3MjT611dcnI1UpPCgkOcThDSDzMFPurpfB\nrT3TJR3cY/DTwku+bsTzv+BzBWm79iLu3ggDNHn3cxhEVvBlMqr2v6YFocRe\nvOuOxbml0/JbYzAh1RxAq9Wbr5lBoXBWSuPx28SJJXN0ANriwsABNTroJrOU\niL/3xg/yjynIG+33MPxGMRRxJjCJKmVwkele3jZTchDoJWGG7LxnB5j7VL4z\niK0h\r\n=0VDN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1f1ac7558.0","@material/base":"5.0.0-canary.1f1ac7558.0","@material/theme":"5.0.0-canary.1f1ac7558.0","@material/ripple":"5.0.0-canary.1f1ac7558.0","@material/typography":"5.0.0-canary.1f1ac7558.0","@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.1f1ac7558.0_1577998467135_0.9522935336020573","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/form-field","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.ec26e799c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f506778b93e615846d97d56a4545dfe6b11a61a8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.ec26e799c.0.tgz","fileCount":30,"integrity":"sha512-v7Lg9djc8d54Zx82+JKE3Z84oTqCXLjWo7O5bDpPryuqesImS/KGT6x8F6aZJTNnrO04KVg0GV7YeJ2Y01f9Vg==","signatures":[{"sig":"MEUCIQD4uW0NkfrKKYhHemBDPpaDEa5OHVFvQGXe1VqIRoLf9QIgP/XlDEZMf37ZYJCaosRxIgL6U3Ob8l5QFux+k0NABZc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmPSCRA9TVsSAnZWagAABMwQAIUx9mi93UBtSX1t5IV0\nRXjhrhuJlk1KPrqBPoA3TEz8xxyrG23gPFyo6gs3dLI7fEf/s5dY6iFmhvwg\n0N4b9uvTsviyq9hgsLR0W9MGzj3dGlfWD0dpN0CkGHG7ANRPTcqrBqJabTdS\n50s4VpVXQT4j3TThNnuuHc3CMlS5tHekBL1KXULAaaP6Ovc80ZJndnjeROgP\n8kvX9UaUlzNnD4l+xIQ7tD81y7KpTcOC3fOKJBkwt0ILj7TXpCZ/mG/6bPDr\nvr5OqZIPO/nsupPy8+WlU5oVpnUJmJm6/6ICTW6mmfqPRyqMvPP58ohOwIK8\n9caf6P7B8kpbNggx7+noonEksI3rK2JDy6TEnWjdGNrrwu7L6GkA3NnCWpCH\nk+Q3ARzKPAuZlmQTHkkH4k1vnnC3yuvVK+swft5IKyfNrPIaLrKg4+qvPUFJ\ndvcod+GpRg9IXNCfxjEtNjF1iu/S68c0JLyCoQenm2rDgKVAaFeBevy1AYaI\nDEXodUutowHUtW5xq4APE1yJjRLl5W5inEZ0pjC1aSwfBw0WxibCLnxJrE/e\nScz+SGxkWeRZDvHnPC08AsofFP7yLOLJZR1kWtAmcetJ+QTGs0WigYld02+0\nhFmACo5tgi+rDn0CItp0AFVIdOdBBxVIuXuP+UmBtn6lB1oc1yqZvrgVyYGC\nwlFw\r\n=CVrG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ec26e799c.0","@material/base":"5.0.0-canary.ec26e799c.0","@material/theme":"5.0.0-canary.ec26e799c.0","@material/ripple":"5.0.0-canary.ec26e799c.0","@material/typography":"5.0.0-canary.ec26e799c.0","@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.ec26e799c.0_1578001361394_0.925557336390807","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/form-field","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.0a40ced40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d581e63c82814bed755af05ffbc557e3309d8a2b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.0a40ced40.0.tgz","fileCount":30,"integrity":"sha512-7bqiSaga8HHWWj7DRN4f0gxiVxF81+dBmvpRT5iLFRKJk39z/q8kBsg8Y7i3ai8O4xo2xBKL9MyhlLJ7JLQZoQ==","signatures":[{"sig":"MEYCIQDWtbdMhVgqgiW7saYrzB4AJp9oPTr4J7/MNpPWAGzBWAIhAJcLybcav7rDZgadKQy7kEARc6VRw702oz5yJXexvzgA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3VfCRA9TVsSAnZWagAAfywP/RAo2wtIGPGb+qa3iWty\n/cGJPlerqejZKCW+Lh3eY5FPLotHOYfiSZY8/CO/E8tNRV6tScFQoiePFZsg\nGbqiImfqnua6M1VqA6iJV2E3TivnK1Aix6YeblrTdy3d0twQ85k4uS5zGy5B\nHpNbSM8Jnak7mO3yb+VleNfHbOVdVmlSDGw+LdhIj7dGkifp2ipdpbHXZh5W\nk7flYpkpyeqhc6j0/DzVESI5MFjurwfvLb4ZKqO4gWNfoWIyh1qFfLn4VaHv\n2mFem5QtH/7WYVeSALDjB0Rl+n7hUhGBUdmUf2a/VTxeTNm4azySBaIi0atA\n8fMYsndKCcGuoxPNMXm/3DDS+chJtAh4wu9qFKwRYgvbH1j6FvhX1nr39Kvw\nGjv5VOS1pE7D4ONKFdTjqPrkvWHDJd23Xi8kcaKwhCa9kOswCFyfM3WSM+pU\nyNBwUQrhulewy0qsElu61lvYK8L9aitydAIM36zENVt63rLIavBpJUoYsaW/\n0RjANfxaDsLlUKSo6SPegdJu98hMBafVYBbDyGP4t6n1lGj/kagJRKQqqOzw\nlidlw3EmaBCzmXlAnpNgTRHr4YY6Zgrh5Zf2ElOcdxhB7zdtblI63mjgkXBO\nieiOXi8fsPnpT9yVqlfyH/PzmiH0S/Ig+y7iWQXXMkAYz5Ut4iqvuQdGj46J\n6nhE\r\n=wWTJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.0a40ced40.0","@material/base":"5.0.0-canary.0a40ced40.0","@material/theme":"5.0.0-canary.0a40ced40.0","@material/ripple":"5.0.0-canary.0a40ced40.0","@material/typography":"5.0.0-canary.0a40ced40.0","@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.0a40ced40.0_1578071390889_0.07429694011992383","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/form-field","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.3adf84899.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a34b8b869375abf03045bd36696d7729efaa78ee","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.3adf84899.0.tgz","fileCount":30,"integrity":"sha512-er1NCekbfFfU63I1DQpyPpjHWUVeX8rR90I2wuPymL+jeA5l8rJ7goIctXUKSv6s9DIIrGuB/JzhxGqAoVAF9g==","signatures":[{"sig":"MEUCIQC1WG3oCJO6eLZT7KVoFDSNGoDmzTB8Z4FFHlpccp031AIgJTrd8/g5v2MPQLEJrzvrToJemgVMfRZ35zpLcpjK9jk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4Z2CRA9TVsSAnZWagAACd4P/RnEYQGBs5+uYc311DCq\nG/VSzkeu/xfVm0JrSatvqtAiDaqM7iaFjWPHm6sWVogy2YSy10lR8+n1EVB5\n4HJjw8+omyAFY3vsUNo6u3i3li0vAYTl+EVBfDvYSYK5CBVSUyDRWpUGXVcw\ntqeGMqpik9LUVeUFtExxic2MUNQvrYN/LYxryaS6pbCUE0dh9y3d9O9Jg8cS\nv/Lg7gPlS2L/B+7KvQpUoax60V7fOjhf2NDvbvYjTmm5nyXavI9+21xkFWIK\n5Vi70/vJfNqKflj0+5pzG07gqPdsBsrBKyH/RLXPeaKNTBaR8Te704VYXMlW\nrxXrn7qaeBTHIJKSZaRc0FL5WQzz083Kzlf4duHlV9XR4dC+pLJMWo2Xhpfk\n7cf3GoVopCKo5O9bI6icfU1hliZCvKA8D/NV7+vYvR6zaBPkgXQspZlN2mP4\nKknPoIWsPYr6b9VWY+pKkSgNHZRFuJLqXnQc/TUqTXtDrzz9Hz1nbzaABeLV\nSEFmQqLZQ2Fi4VtmqflNXgENPK5Nt5eEfa3un3UEW4Ue1Y49bzNkZaqDJnIS\np5PpskxbcZBrhFGDMw+ZtBIhW3uZuTnOoRBISp/5Yvb0Q4sThyxoMlyBkBGn\nkF7pEyvXY3pjmUwobDgflUOXHNOQ0k4PNix0IuglN3V9Y3P+3yfTcudeB3We\njqBa\r\n=LgSb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3adf84899.0","@material/base":"5.0.0-canary.3adf84899.0","@material/theme":"5.0.0-canary.3adf84899.0","@material/ripple":"5.0.0-canary.3adf84899.0","@material/typography":"5.0.0-canary.3adf84899.0","@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.3adf84899.0_1578075765841_0.9137770963415541","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/form-field","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.0d42ee650.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17bf4d6cb012723d466499215660e1b78af51087","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.0d42ee650.0.tgz","fileCount":30,"integrity":"sha512-iMR10uH4BaqWg2B4YCEfMunLXxyzhM+rA1E8ZuSmlO6ICufcgbfNvF3UF9V3NV4wXXCevk2mcHA+Qrf2JdfSRA==","signatures":[{"sig":"MEUCIQCkmi/0v+aq+4OsA/Caxu0uhGIg6z25QQ9aA1wLSgVGrAIgShFh50iP9PCoNXiwUzCGsg5qopm/AMFxCTFx6tVRPlA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7QSCRA9TVsSAnZWagAAc6QP/A7NrztonViDmDWCEU9p\ndWLjb4xULT6PdI9zeJ+TXTctxRQOvH6IGKApG9XEIIKr45oA7WWU3JMcuYuj\nR55goKVGk3gejC5o7YaoYYHv4jXVcZH77UI+Gd6VLNgyII8RwrkIuJ+lob1F\nHSg+0yeO6We7IguUFa4qLDdLnB9JcsWd+u9XEVe8u/KapuZVbenqCb7B8GDW\n+bxPwjpDz3IzJbGyWbb6Siy7IP4jkPRpZ8VGRsZYwbyIqlraCA0HWzI8/ryw\n3iUZJAmsaZM/EhK9tln87/5/hG6Irnl6+RFcqNM7EOMXQbzfUKwIldz1qmH0\nu4eLH1TXoyS2PsFFGZv7O/9+eFojXSwJeGOMV3oWqpPpRRzqZGO2jssP5Gp2\n5VwrXyfBocTewDmY2cirByt4I4hbSCh/7T0AthNxTIighByCn+2Yr480l0by\nzVK8nrA5hhkhzFWtBrpGayXt7Ym8TUUXx5f0l9XyYFuwzxWfYu1wG1lAxCLD\nvA2QrkQGBVR+FKa2zhN4sTdKgtX+zgGI0STLqDUprueexiCrnAQmGnoO89nP\n6tn2DyQ5jKsuOwHXrn6SoXW0NwrTZQCUaRB6bslyPrGQrHS/7cErsb9MNFB9\nt4SsyIqYiZI3kIQHJNs6pGU4RCvdcD97z0cN2NBP8Rvi8JczJ4d3rtOIq+j4\nmDCV\r\n=DzCD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.0d42ee650.0","@material/base":"5.0.0-canary.0d42ee650.0","@material/theme":"5.0.0-canary.0d42ee650.0","@material/ripple":"5.0.0-canary.0d42ee650.0","@material/typography":"5.0.0-canary.0d42ee650.0","@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.0d42ee650.0_1578087442221_0.42592034642550236","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/form-field","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.847dd1ada.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52293547a2605a0e2a34568e08c6d43fe326f24b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.847dd1ada.0.tgz","fileCount":30,"integrity":"sha512-syLzqvlhfAGPqgq3kl7eydt8DAA1o5lMSZPyJboKoysysa74WBSiDIA0IXpebSJnEddLJ2tUH5C5dhQT9BSYTA==","signatures":[{"sig":"MEQCIFNK2nU4fHXt0MiQ+OR3nfbzX47vqPzu+PYGCdbxZZPwAiBhVgJ4o2HJTXDSlxzI5EYiNT1S6G319kUEs8N/7danZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4nvCRA9TVsSAnZWagAA9MEP/jT7siXHg+qgchjt1nYI\nTsJcsf8FClfAxd8OMBfMaByqLsRc8rpaS1gYFcKkJuCzPLsBgJkwkRsprBhi\nf+HF/gnki+6ucX3CVJQ//mzoLYCxipGco7YeRktsdb26yh/dMtwu+Pwu40m/\nY98+0PWcVUZNhZVppesHOOVyrQEQmFzF51n27LDC2qTqPZkbgyln20W0RRz7\nrBszP962J0q3rrm3y0djS1vnFqOz3hGcjlNRQXJR9O582gQlv+khdPWMODTx\nlR9c/tPt7sBn0L0Klny5gzLLd3DCTIY00J7+6tjfGk7HCuMAFom2qdZcMcBi\njvwqKam3nUzjsfEk8tYBFXOThiXb3rl7DMOHlrTzKlEMk5FToj2cBl8tNaQM\nlHUmFqmXtLkSremOIqEHvorEKBfkKvZ/E+nSgbo1Yu3dN46x7np6W6L9znDl\nbsjUU2XK4WWTj++8cxqvEChL07KFpS6JPx0uEk9RD3FGm8L5YT/cPKsdvFwy\nBKPpYC67GvZSIkYqJ6Zlcw+bCN2iadLkawNDUGK7cqgiUBaTMtypUnfHsN1Z\nrI/VulM1NpodmimhHznMa1HOx/vMVi4kiHtRDqwZ0Jck8B/C/MhO/BlHC/Og\n6A4v2C1B67Ap/twcZbJbGVLp8pCZHpKryAnq8vbWJAwsMBD5vQ4pOvew4h6O\nQvlo\r\n=7PfN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.847dd1ada.0","@material/base":"5.0.0-canary.847dd1ada.0","@material/theme":"5.0.0-canary.847dd1ada.0","@material/ripple":"5.0.0-canary.847dd1ada.0","@material/typography":"5.0.0-canary.847dd1ada.0","@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.847dd1ada.0_1578338798676_0.7506268277423211","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/form-field","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.39df7e5df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81646e56d366ae2b3ebd4e401e9b09b9f5290970","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.39df7e5df.0.tgz","fileCount":30,"integrity":"sha512-dgjION7l8JxsoKaxpxljI8xSDsb8yYRa/FXgeL1mMFN5r1RqI/FPgSXmsRm0FAzzJSb46SPiqc+rtPqlQYnxzA==","signatures":[{"sig":"MEYCIQDBFUMoQcdc2+R6J715/PPMKHQuivCy3KoJWUFqP24yagIhAJi5/APLNPg/jTIbmWQzMc6Xw+EpN6kV/+DB4jgDs6Xd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9cbCRA9TVsSAnZWagAA9DEP/RCU/fte2cRWwTsGWBYZ\nOT08koMIUdO142v+AxeQ0uE9phsHg7QfoFGTNOnGJTnbxHZaKXsaBE9iAPnq\ni8hujMvU+vmdu0M2EwQeQ+Q+85te9WeCyeiWZxiyANmNNP27hlc31Nib0xWJ\nwmZZIDlrxsfPs9uPyUrUMY2NM2Xl/kfHz1aqpCNYS88Udg24McFfH5ZgU6Zm\nRr48RbR3MG4cGzbuef/3whU7uevsVkrnKpBqqLB6buiQS33sV21S0+JhUw5m\n9qI4EilztyH1dR5siZRkiXGIC6EUZhGmUp9CBPmdmCxZD6zl1a4PCkWz6R0D\ndHZ7LVedoozSXMt1+U6GNNUOn+h1qPqhoXBC4uEQhX20FTEBDlV7A+AdwNcw\nqZlYx2+l6vg2TUIdtk2HAOV6wjVprQKsDK9UgCTiho7eYryUN1EnMLMtYU5s\nAEsHeEEWd0Oz9kEqt6b1pb2PtCZ8/PQLZQmKWOgg3pGgigWUauY9E1TCny9P\nQJWyW0EUJOQCjYFhgn265F45nGGgcSyIpNasaWEa4ADS9bb7YxZOaWALcNAO\nQuQm3yXhZkkhJ6AX5ElFVi5eUTCj8npkClsFij3ZYIx1/enqPq/VR0tveRMO\nhL7mDEdwiesqEYv/n+z3Me8jnEmle77PujEYklN7Ad95Cdn6RYhWTXfWaFOO\nNwod\r\n=Luzk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.39df7e5df.0","@material/base":"5.0.0-canary.39df7e5df.0","@material/theme":"5.0.0-canary.39df7e5df.0","@material/ripple":"5.0.0-canary.39df7e5df.0","@material/typography":"5.0.0-canary.39df7e5df.0","@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.39df7e5df.0_1578358555321_0.9964382039422159","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/form-field","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.f1a2581ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98eb16b1cd3d5d151e16147f00aa9c771af6062f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.f1a2581ab.0.tgz","fileCount":30,"integrity":"sha512-NpNiIK/VBd1zLnmoIvSPblx/fyLoGvBi1aMjh9oyICdxBXdIP0maXG2XhCtbLvQn2eX5rHQO00xWaMGbwbnUsg==","signatures":[{"sig":"MEYCIQCULluw549MOmtoqOf7jwNngu38faorcZ2PpfJuafZh6AIhAMyl/ujLL1HDR+q7DnsDLaYVgOb1PIZsa8X7khB0f0f7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJz6CRA9TVsSAnZWagAASC8QAKFQVjI0ox7GTFxntqw8\nkb3B5R4i9hEzmBDBzALL5r4XnaceV67Ds83ouKMxSanohMk1a6xn9XKE+PE8\n1Mc/HEJZoYsAZT8LyWT6Zjg5CZEnjArL7cy6r9XP3aaEp6e+dcSq3Y4DdlGl\nn6O2pstRt+nVVQvYqeGcEN8Vm+BIx6z5C6hbGMrRzMs6AHri6VbfrWNKm0Zr\n2VMTJsWFJk7YoI3ciSmv+xeQoT8+I3yyVwP1oxt27DnpVd9+jPQGiiBDjvOp\nRuAPrdVf4R8qeNHfslJ+l72tdUqAw/ZeJxHPl3ngpSJEBSF32YYweAVLZqnp\nKjV1sDOXtE9y34f5Il6LxACYboccBpT4b7y4C5GLKcPDAnABKd4BpfTS2K2a\nCWf8HNv3aOSqARp+yM6B9N1XmJr73AOswOgPOyEzkiHzUJKEWafuenroNgyZ\nIj+XLSSNDm4Y61+ZbpYeHrjXq+HGlLKzjhd6MLYwAo65qzaoV2yQMp6gv+Cb\n/HJtVswHNj2I8Yoz2fW3Jv+FkxrnxPXeJPojFg7SXVPl2uB7ExRLb1ag6Dzd\nYanM8Delu0Z3WvCugW8yiqrtfh/jbXcTHjUxetHuMpX6Snr1tC+Dmuzy7cKu\n4aWHi1mbIFQRqCH3il3MESEObPOch1Dj6uzk3gXU80G2l4J1BFGFSpMfhRkC\nZarW\r\n=mSq3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f1a2581ab.0","@material/base":"5.0.0-canary.f1a2581ab.0","@material/theme":"5.0.0-canary.f1a2581ab.0","@material/ripple":"5.0.0-canary.f1a2581ab.0","@material/typography":"5.0.0-canary.f1a2581ab.0","@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.f1a2581ab.0_1578409210197_0.8811544854629549","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/form-field","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.7c7ddf347.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5340222091ce9c678956be068913e6caf74e5ae","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.7c7ddf347.0.tgz","fileCount":30,"integrity":"sha512-WGBOzQVkD6trv90iso5PYsr4BUPPewmLYlI7v2d3+G4OT/uUzorDToNflcDn0gQBlkP9eSCtuCVlEF28i5qdxw==","signatures":[{"sig":"MEUCIQDHcbi8TEQvpv5/3DieMdKGL71gqFVG9LibrtSiRbn+wQIgQiFl601CdGqfMgfeAdh19CKScTZYxacTBVjewCv5JcQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKDcCRA9TVsSAnZWagAAa0wP/1XwlIKw+hhU49+wWwf+\nZNBjttBBtlnnpEGgrBSfUQll09Nc8QKU64U7mAk5dOQJQAZlxjnCPNBIfPim\nGGy3gC8wc9mSh7s/4/e7v/P7H8woIdfj1dfu4zcCbjxhkpPL3g0R84V6Mbbh\ncrqHiGmG/xZTO85K095WeXplNyAEra5fWccmsh22iwOpGcrkbIsa/Mx0hq/U\n+nUfsHTkmkawDn9WF3C8UCYh8owCFjnR06jAgsIejBz56+2cXv800ccdnXNq\n+5mbaga1UYNbYerwcWM6cX3bKCXQ5eah4B2vkfOJb2+VB1UL3WIDEGrAeO1m\nbNxHO707xv+cvLdK1ZgcNI3fT+bpsot4rz+S1VdIg4KSDwJtNKPl7sq0bNJA\n1c+XqvjszmwgHD8cJdwMPvtQLlDyBj+dmTHmBVzV3oRn9HxM1dTg4iFavRlp\nqHZrx/x+1o5yVFUsRBWBK0uW4Ybsfq50S5yCxB1k2iYE6T/yuukKK0pBBpM3\nLzskpT/2yhvaRbO0nhE6TFMLChT3vBOMKPi5BNkhfvWGFRavNq7hKdCPFDj9\nXi3WoQFmiYypZU/jxO/Vwc+jC4WAwLYiyAS5Ac6DXJChwE71oppYwoUu5Eyn\n8SOVB4lw35tXcqcrBTEZ4j+Igk1V+yvUUxHim+BT+QF5pfZSBed/gVZNEMu0\nOAfx\r\n=Uo2X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7c7ddf347.0","@material/base":"5.0.0-canary.7c7ddf347.0","@material/theme":"5.0.0-canary.7c7ddf347.0","@material/ripple":"5.0.0-canary.7c7ddf347.0","@material/typography":"5.0.0-canary.7c7ddf347.0","@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.7c7ddf347.0_1578410203933_0.4120815930345305","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/form-field","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.a1c84d4b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1a894162ad35eb05d324b57d5f1f66fc9d3287e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":30,"integrity":"sha512-VZJfZ7a1/NlMzYkXdRqCc2zskvW7fn/6w3t7Z5GKEYvJXOw+64MAdEtzJwWVM6ERs4vOkRqfb1EyazAthFvEGw==","signatures":[{"sig":"MEUCIQDGihPS8JCb9ntt3X6zZ9saBVn1k3jrs1mPMAmvskPmkAIgSoDEdcsHJUQ/b9mAhIi2Jxi0ZxfG9Gb7S2SgMciiCtQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMmkCRA9TVsSAnZWagAAUMEQAIG8S3f4FKgsLWVY5ifS\nMDJE7+y+2PFJKHBWv9fFTPH17KAA6SolwCGmso7XO0B84QeETzeDKgL2wH/3\nRckJSD+SS5DRudlc9gkYkow59pjarXM52Oiol1J2EtWVXBB6ysdsN2dYgqR9\nsGhft3SyOc2ONj0BcHriUUNOqKhmj5SH5Y3ByTd7VhLimKkiGqhE6Wz8t0/g\nfRpgJyFA3b0hucS9LKbY972VulcXR8YnvCErR63MYgFp/Uzd0ExdJe5pHk++\nPcv3mqQ1P5fqmIWw0CSKsghGLbewNduw9rm+gsXJ6RUUQ3QJq1dfivlXDcOW\ngMnmU1+choIaElEgRoKERnB29m+31r+1dJ/Ig7XGdyUgIC2XGM9iflPbiKzc\nNyYn4ArC1K/3DLb5C755QrVwOIHBDHiL3/P4OeQjjXRFFkGvqSsC7piVf/Sk\nSjvkafd2YMlflQJdpTmUVloo5sdL0zRFDyjfPdvXVd+1nXUqWdWt4etNIk72\nT0HbRdRZQEBPHTGW7A9KbJZUE8Yu3FSso1p5ER2Bn938FsuKriSGnPFzn9E+\ndQ8uu+If//cGAIYzMtUnM6rUH13HGqMgVZr/QFNJM5Z4Ud4om/JKp4yo8cDm\nuXnSYPMPcKq/zpZYQyQ0BVXi9G+tT/aOyCwreUaH0BIs70V6BYgJCuEFUDhc\ndVvt\r\n=Dlcc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a1c84d4b5.0","@material/base":"5.0.0-canary.a1c84d4b5.0","@material/theme":"5.0.0-canary.a1c84d4b5.0","@material/ripple":"5.0.0-canary.a1c84d4b5.0","@material/typography":"5.0.0-canary.a1c84d4b5.0","@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.a1c84d4b5.0_1578420644154_0.29887901756642155","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/form-field","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.ec9f16578.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d08f1be8f17fefdb5747305025f58b8d0071a908","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.ec9f16578.0.tgz","fileCount":30,"integrity":"sha512-BFNTw7Yva8WxT7PQ8EVGe03fR7VFxNUi7Ibb8mta5n6aTU6NKd/I7RPGOW7avAposxmcplxVvxZvDXOs2K7b1Q==","signatures":[{"sig":"MEYCIQCieAaAyVdX262MaQLOAohNfS9fvRRganC8Dtfencg9iAIhAOxHH+8ygjGO6osaR3b94g+4OHYroIHg67+FRdI97rKk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN6JCRA9TVsSAnZWagAAJyIQAIwKRG+caugegREW1QXi\n6z+GxNL0eq8/K4HGsOFR4+Z6blgYSICSUh7GXso8kp43K3nNYBhLjFuiMY5M\neEmggHpQpXyAkad4qrPMyRyi5Ibwd3jx3M7b1XFPR18ZDOUJGnITQo+DnSJo\nsAKa0EnbKfB635Um2/pFRb4cegVHOcPWvmYTaqoYbpjyPdVSxo4MNIg0Buvo\nARAxhEpqBucqw+PXfik/lqpSnSxe9F8gTnsCGpEq75CwbJwi/LumukXdkvzS\nl2mbhU1FD8tpzDI1Cn25tTLuRD9vNhA2sflxFrQXMaOA93irJbkleEV3BPhg\nQqBgsNqlbde3eAx8f+YIDQxfELq0+YA3mRZDLg8VLYwobg3Pwfw2caCUR5fO\nca2IZZjDUU8w0nEY27qj3D14WzcIAstScG4imXBeodTA2q4fo/c79n6C/PIU\nFe13wQJbwt8ov2OAKZ9T++g55F9Nvuo9kFsPQ0DlpCL/7ePTJy8n8Rm8s4V7\ngPeP+0pFy/poPH1tnnp4gP0Jn3HoXnIJDFa7+idilBUbcaSB8OmrL07AdSbt\n/cyRRNyNxyExkhKO/pv7cPSecMTl+799HXBlkJW0IqC1TIaSeyICPtdy9Xj9\nukMtY2kbsdNDHtn3jLckxGPGUwFreDoGRxfuirc+I5j3ATQOwr7sqMUUv5Br\nYGUw\r\n=g79t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ec9f16578.0","@material/base":"5.0.0-canary.ec9f16578.0","@material/theme":"5.0.0-canary.ec9f16578.0","@material/ripple":"5.0.0-canary.ec9f16578.0","@material/typography":"5.0.0-canary.ec9f16578.0","@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.ec9f16578.0_1578425992850_0.27179181081734183","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/form-field","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.b602226ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6e412f0beb49128ec10ffc49e60445daa7c1f8a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.b602226ce.0.tgz","fileCount":30,"integrity":"sha512-HyrKuGjIOTnW/0WeZjfsm8TH84AEH7D/qyx672B3owyLXH4+9RsBNctowP3bi999uwEryAxPHZ4+A7nz8iBVGA==","signatures":[{"sig":"MEUCIHDNqdiJTC+UgSIRSZfxluIboA6R6G+24PAAij/LTQ/yAiEAgKCa2pMf2Qz3lmCgPdNUKJYPDwiBs1wHQGRHqX0dzdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFObnCRA9TVsSAnZWagAA+GkP/AsQKT1qitqUgHGMyA8C\n/TjUJ1w9d3diE+K49f5payCdVpgIa6oSh+Hzu2cQ7l0KcfHAa19HUCvHB38q\n+pNfDsY5JkJ04mZ0KrQXVWdgrCT7oNsGqo4jrImVQJJtbA2tkG825J8mnvYh\nto3+8N9oL89hSCwcuBZ252eD7SwjdCTzA0X8oyWk+YNhF6EQQ2tfwjsjws0R\nF+khFYnY1aMqDvGNk+AojWBTcaRO10p5VHWfxADzsjAGU32DYT9Xo1WoFdw0\nWFBTEsP5PkNxgBGOHJA0yLsGVN/NwiI9ZkpUKxFiYEdqEWS89NmGlcKJj5e7\nUEXilalEXpM8oUeb9d1b3WJm5ll5aea4sobviLtK/0B3LhvEEGxY4Pzg9EXi\njw81WLIROwkk6aAkakP+0AvXOFEYy0H+cjAwmgyM1C+LqJZjUbzBPtNWpvi1\nORDI0qhJD+1H1rBSr+EInMw7gwYoF3OaTO0s0NuVtnL2ePPxPJoyy4H5SwL/\nedngbQ2u+lU+NR8CRdIsxG/MCIcbh3H0aJaSfnnL9hwRiIDtH9ndpj9F4qlt\nj/56CbWwQqPpdx0+hpIwwFUfhhMe8BAiJ9BtssB3bk9DQuEt/gL6CAZa4xnh\nB8bfj2STv45Q9Mu3sjBZO87/lNVDLx1rfRvUM8Dop2g1RJm0hvhD+Yn0HVbP\nlOqN\r\n=+zHb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b602226ce.0","@material/base":"5.0.0-canary.b602226ce.0","@material/theme":"5.0.0-canary.b602226ce.0","@material/ripple":"5.0.0-canary.b602226ce.0","@material/typography":"5.0.0-canary.b602226ce.0","@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.b602226ce.0_1578428134878_0.320967202702517","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/form-field","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.b2d2dc08c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"898b2faf3744615185abb582e02a37934ed3cedb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":30,"integrity":"sha512-6mHkh02gjY7+2QFzkFAc05hTj2L84dQTkWZztpNXlwG4UTl9vaxoLQlRB1r9EJrf3Whmc1evQ81zD84xr8b2eg==","signatures":[{"sig":"MEYCIQDC1Ab6u54llQFXHuGSpzEuT2/6M1sg64/zRlWsstrl/AIhAKWEb8XsYCm4EqzsOMFU+v75AYGDnR48o5pVWMveG2Rp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPeACRA9TVsSAnZWagAASeoP/0nzBFbD4yR4nUcDw6xr\n8SYQ3IV8gC5YN5McY1D/hSsk//G6FX3vVwYaVxmbJf2Sykm5pY2GiwxTFg/5\nLxE7lKwRPTpLbmNxpcCKUfjbcCK10JArr7lBGAp7dY6ln1g3p6QHPy/g1s4I\ngPj8BFadU/Gd2aLg0fsRJbOYuyEV9GjKUeJwKoJbrNbYAYmDx1IVo4vgwmXB\nQYzwtwfiJApdPKDX4Q8X9AXSiZLxwPO+03AhaUdRPQwKHbHjVu8EXgMDqWkX\nbgRMV9PTlwpaKbnijrvh9hvwAbNCuiz8IoK7nLlNg89jaVqhckwKnnOQ7yUV\nsRxxRg5rVyecOyisnI2YOfM8nIf5dj8yfxIAX6c2hd94YT/5O82jtvgUQQQL\nb5+zwwHaa9qUxhoKbYla0jXj4kqq0SIvpbG7xJz3Jr9U5Qqf3qgSB8SdfJLI\n5QNVrCsLqIqslxi8K7xHXtzAcemIQMFM8SoCJc12EL0MdQBozExC5W7I+0a5\ndU3HHNB/0Z7mIRm2wQXwoc8qDFcz3zgoSy/pJxRlh30hiEKrloFAFW5Fc2eB\nTSHqWUiXoOCd/2wSKMjSoeITf0msDZj4Z2hVcCvc4dmEzlwAeE6cd08BsvxG\nPpmOJxi2Xhuq/zs3iroJ0i6aWWLhziH8bETCV7dbMYbUEXxZbWjQfqeXX7xY\nPtxa\r\n=a+Ck\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b2d2dc08c.0","@material/base":"5.0.0-canary.b2d2dc08c.0","@material/theme":"5.0.0-canary.b2d2dc08c.0","@material/ripple":"5.0.0-canary.b2d2dc08c.0","@material/typography":"5.0.0-canary.b2d2dc08c.0","@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.b2d2dc08c.0_1578432384539_0.4969156628380911","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/form-field","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.61f2d7580.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a54264c0b13d442ad072c8967c1aa58dbfc973d3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.61f2d7580.0.tgz","fileCount":30,"integrity":"sha512-q1MTC0ocJBqt4YIQMX9Rs8bZnBaws41HMO4YDRYTEdma8bO8YY4W6MqZE3FLi92WLcVVKnOwOqz52JLT4/C26Q==","signatures":[{"sig":"MEYCIQCFStZEeqBuOyiaO73ggxhzQWycE6m+3Yql4seRroPA0gIhAPtlUv8C/P6QX30r2A0661fGmwsrubmslhkFLbkWfqNK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPqvCRA9TVsSAnZWagAArQkQAIcF7ROiRgKYFwtHuTdt\nxgaybGYZsdmQhTU5ugMUaXQjvXzK3/CrO3pYrUbUpUXC5IcSwtZOZTj5j0Gs\ns9DL3Ps5Vf8QNH01OZrhe5xH6814oEbL6+ecWrvIsbZNZcDqVumNJ6S+ph1s\nEwjkc0HIHIIQAQxeMGZxA5e1A7TWLpfvjQ8iJok9jm1X6w/Kf9KqnfADrp24\nlzMJCMT2rx3aZqh3T1hV31d3wZyp8Mev8bcji3+HXtl72o1n5lv62QiGcwvR\nDMKxNajizZVqwIlqgPjtqS3v9H8/9o/3nyqx7dTxQtkZ+ob/aMm/L5lGi2JL\nYmEA8+tjPIlz2EOWJ0AujjF0iX7+vNbvhHPu0e8fD6RmVq8NGlkrcV+KKMeD\nx3ZO0/sUYfQCzYJhQ5PhnmrcS08kfThZc0+eKH1nA+2TnZtxW4FZF+gV6cT3\nWeZ81IQzwhunEyTwbowlmbCZbPgrTSJfJRsZJV+jVeRQOyck3au6IcejfK+5\nYotxzCWf/UyaVPCzvUX+/YHcbTXVz4ZUsCGWADRw7VrmnNHAl5zTPEOMWEZm\nOMmFCX7PtMJGxpRU4Y794CX7J1VTM85BtykLLMrXG2mC1fPfpmxndhhgWYCN\nUNgdJG1LgwyFaNkxA0+2eBJ9uJRX+S5lVWf67a5vwDcar3rRiUaFwUNBB/DU\nOr7C\r\n=9GHv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.61f2d7580.0","@material/base":"5.0.0-canary.61f2d7580.0","@material/theme":"5.0.0-canary.61f2d7580.0","@material/ripple":"5.0.0-canary.61f2d7580.0","@material/typography":"5.0.0-canary.61f2d7580.0","@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.61f2d7580.0_1578433199131_0.5740743669544632","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/form-field","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.d1be53a2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50bc9d79c479ebe47f2c9b82a020e6b00cf3b7fe","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.d1be53a2e.0.tgz","fileCount":30,"integrity":"sha512-WTVv269YIROnMM1iat0eWNQElbmaAXHlp6KaNUW/PtcajJ59ABwKmyokAtI3C5AF8mry5spSE3YH+G9sX/QQAw==","signatures":[{"sig":"MEYCIQD/wOn5yZ2sOFUpSsLKXly66jPvDeQOtPC2Lqv5rxBu9gIhAPhQcOgNaoM+tR/nyu9XOF+YuzL6XQmmQkEjnGSfShCk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQN4CRA9TVsSAnZWagAACdAP/1fG3c6nonLQA44jRu3e\n2uIwzgaJBEktkN+J7yRNJ9doAO3U/1sWMFMJC4oThPy8mhkMCRllbK8dAaV1\nHqykp5SlnyeEXpiT0TWeEhOzlFiVuBBvb+aX+4q6nkKUZDPZkMvTzhiP/0vU\nS3snzSVyrUQBSu7qv8c5xkmD9H985HmAZKte/g/fpP/t9wM4uIKCXaBWU5RL\noALB9lUQRfJ5e+9B+y8z6bXc8vzJ7xObmrPuFhI+yqMaouJu5nmx8700czpN\n3opxSqCnP8/PAgA9hZVbfAdj/erfKl+S6+IY+QJUbYwJp7VywzfrGU9DKOqC\nYcU4s/L96Gd0B5+P73fjlxozmUnC/jzBh68u6c1cWpRsu2yOvaecQlcfKwYx\nLP2ntNpPnu34ukWe8jNDPptu+C0zcBMl6kwjo1MgtnNEEsYJc9N9cQ17ziay\nhqtwxB3dbHSW3ZeQoOehcViFp+AriWvi34wW4O9B8dKM6GSaaL6HW1aAY3K+\n9jIt4UGn2/PNaiPxZfPkazFRgdx/qOr9+C04xwhuftRGOAmmEwe11Wflot3t\nC4FRViBEOqOXe5xTCZkU2gmM9Wip8YkOXwK/kCpL39bMgodfbHEUwfYbpIpz\nDAPN2mrpSKYvI0TlpihsYN7M6D6BGg4qkO2lvpoNN2fOHL2szpEHmvyZ7lkZ\npjji\r\n=balo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d1be53a2e.0","@material/base":"5.0.0-canary.d1be53a2e.0","@material/theme":"5.0.0-canary.d1be53a2e.0","@material/ripple":"5.0.0-canary.d1be53a2e.0","@material/typography":"5.0.0-canary.d1be53a2e.0","@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.d1be53a2e.0_1578435447872_0.3678556669092181","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/form-field","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.9b0d06e32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f94a5751700d13f8feb2861210f9d553d1c6cfc1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.9b0d06e32.0.tgz","fileCount":30,"integrity":"sha512-u82wX+JTbyS20TDXXGkDol/1jGTYhNruYD7J8EmyucJ7/PM2gK8+62EuJ9AHK4hUeEZDt6W1f4iQ4kSKukgU2A==","signatures":[{"sig":"MEUCIE/bOFlno9KKclmAGHOlWBg/DAvfIUpXn2cbc8cTPCVSAiEAgSZAhHJE4qqRM3gXvPkpPCfA0hVVRYQ0awrzia6H4sA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQP5CRA9TVsSAnZWagAAcjoP/2H5vB+/Y71hvstudJsn\n3bIH9h8ywCvqHYkucp6Bca7/ue0oLZRy/ycmfe5uNDhbmtxNbcUSg6NWs5Ya\nnLo6ZMt7MC80kqQtDV502gMz2slm4MU6x0pfqnCCQDZzt0Hjakw/OpRtc7dT\n0GzOdbVl07RWMULMM8jieYQZzIB3/Luj7uYJHCgq9q3Gt6gewwUYWD6Z3rO5\nVXhbz2+IkN/R7mI50cNgvFHOuGyjik1FI6E1bN9HYDTA9nU4eNvVYXcwr3LQ\nYszPADMDtGXDkYEiBiMzRaA0WXdn/0k3tzlgzinpUAJzAICtvirCt9M2iy03\nuZ4Wqs4G6/eCq2fSKe+EHZazTqCViVj53MbxJWfQt9PAshsV8tLaFAEOfUqY\npG8BVWhMmaIH6dOCohU2u3APpwCeRJX9ukmEd64W+0R/ZYyOLHR+EVxU5LrO\nlQzSkOhEwKZZwjuMA31Gz94MzZl+Rj9jQ/bVpNvflz6JhqQFnB43mRZwun3s\nAQRTpWLw+4y28C7V5wLWvFke13627/ZeesP3QAqm/hsi5N/ZtG0lRF6pFVzp\nxG43+FQEmFqAvp+Jo26WPo7q0k1pc+5XF5D3VLGWpcmfghmnvPX9HzAQnv+U\nd8lCKF/DGigtpI4+QsmfuR8y+aOxLfnK5IiJVJEzE5MwMxbx2q+bkwlJEuFM\nXF+T\r\n=1OEL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.9b0d06e32.0","@material/base":"5.0.0-canary.9b0d06e32.0","@material/theme":"5.0.0-canary.9b0d06e32.0","@material/ripple":"5.0.0-canary.9b0d06e32.0","@material/typography":"5.0.0-canary.9b0d06e32.0","@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.9b0d06e32.0_1578435576862_0.13886449894353348","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/form-field","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.730c807a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5c4b03ec746160b42ebe80358fe763adac94c28","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.730c807a0.0.tgz","fileCount":30,"integrity":"sha512-Rr4h3WnBgSikJ8kGsCRwe9CKpsYNpvYdRtW6xPz5te/QAwzDi7J40Qalq+Fz9GvrOZlO0xGEuknzoweiGvmbsQ==","signatures":[{"sig":"MEUCIQCIS9h4dNpjtuK0krn9Fd7qsYAezT1q+X7jCROGwCcG1QIgdxSrjMY3oKvuj5U9GZg/9O2yvSCcIuN8/tUXa4jUFxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQRaCRA9TVsSAnZWagAA7EYQAIF+Q+pZTzGdXZpbNBhL\ngVC4Cav14J8NNuKsh9xglRSxAoKY1RIw+eJWkftuXxHMtahaioyXz7Z+kLaK\nxVdNlG0BaKak/nXUOOOWGungoUm405r/DqlcdRNlKJzSSmBL7yb5dAyYVrsN\nQeGK5D7NPpcKpkBnvrZ0N+3orHeijodIwILLH5GYausTyONf2/rGDbjEEst/\n4FhOYdPcP1uJL5iEpkJCK8eENdvWBlI1qjTIkcBNPl3XRLzyLkKZmzbg2xWp\nHgXEPjeQKwoT8mD1yHXzVirj8Ov0XD5qrKskypePqn+KoD+ZkXTz6mirEknC\n4O5ZtdL+MjP26R8znRrBD8EbstuQsGDh7ccEC5PYjkqNyE+1043zZbjDFIiR\nDszrdIR4GTq/JpJcJWJ10exGzZa44hUHsGWpEiX2d+7fidroegp7Hd6wOwpr\nC0YvudLrW01gfTRFaglfhZrSG4iN72HGfkv+9e8slCr2BDuiJVnKkYAyVFG8\npixq76lKAe5tbcXcOzYyeharJ1AbPOc8Oq+6+zr6r/qJgAUx3nGBtS8v6N5L\nQgqGejNHpiljrETRSrVPCMsTIMmHi6NPe+S4EhclCOdiTK/IpY+O3+k77aeV\nGpet4e9t6nioEiezMs9fEMQ7OojMuhd+7RcJ85z7lcpfSVQDC5kH1WOxRmNH\nYVPk\r\n=sjIk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.730c807a0.0","@material/base":"5.0.0-canary.730c807a0.0","@material/theme":"5.0.0-canary.730c807a0.0","@material/ripple":"5.0.0-canary.730c807a0.0","@material/typography":"5.0.0-canary.730c807a0.0","@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.730c807a0.0_1578435674059_0.8997612165906164","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/form-field","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.2213152cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"014554845c3acdd64fb445919bae45a82c00e2e7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.2213152cd.0.tgz","fileCount":30,"integrity":"sha512-BDQYYmHbT2mY3NU1m+VwBvBiwSc4x/OQ4V2Orpw5+p+aJrcO1T/HPaaS5P9RLMDn2Ok2COLJ9V/xDxqxK1XEQw==","signatures":[{"sig":"MEUCICT4ImIQtOtRp6JL2XYIzYfgpaK7Jarh4Q6rV4iOeQEJAiEAgHdtL9ZRIoFOgl6vnS0JTqcL+oBUaWFjajA7nIC+QUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/XCRA9TVsSAnZWagAAgJQP/0ANqZpovnHHcuMR68Q1\ndIY/zkhlCkDTp8jQu5fvJZjMOb38zYbI4ahzvz/SGfcohJp6G/omCEaUslwS\n6o2xrFWH+kQzztv4RoQJQ78MzLerQHIgBLJN9njevW++OpSE1FHDVq/ZTvKM\n658Mdk0yZDMw5OqvTmdcv35cyYs9UWQLiw3+SgudFoDGaL4trigE4/u0A7oK\nk0w9sVHjNZJPD4mwWnKHo15OG+Uam8YYEs/kYG38dnqO+q/VQR8rBTyjJYwB\nNd/iszoik5byM3n6v0azKmozvv8z039vxcaf3RVfSpwAs8PkR6LdGSddWUrr\n9VmLOBq0ankIN/0UsRRboGpc2Z7jUcwWqscWsEpw0sfRbbs5bv/XOW2XrLxd\nTdXo4MPrK/I8aAzzr1qFtOOb89cJKZRvTmIzbKzHX/+UNiPC9RFVTk9RcfvN\nGPe6WWGZ9LDCd9+wiE4DX3LhW91yLSrC3itXFupqvYL8Z35grDAvZuZAzs4J\nxIQNocmBcauvQ1Ud2HY/VN86CpEN+IPg/yjYK9DVd4BAMi9nuK0AOkLyhIE3\nfckERzSz2vrCvRxjH15xw16qwptyfb0OCnrzKJkn+z7VSbOznd/LOl9QC9qQ\nzMExgsgb9If7VSQBaw15TcYr/XI8WRxsdjQ+jiDiskdPWbmN4So2/oX8u5GR\nH49M\r\n=X0hm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.2213152cd.0","@material/base":"5.0.0-canary.2213152cd.0","@material/theme":"5.0.0-canary.2213152cd.0","@material/ripple":"5.0.0-canary.2213152cd.0","@material/typography":"5.0.0-canary.2213152cd.0","@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.2213152cd.0_1578504151511_0.2765737959130372","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/form-field","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.5750f7169.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6f779e41ace347aabfaa15cdeba71acf0f82c38","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.5750f7169.0.tgz","fileCount":30,"integrity":"sha512-xwKJ1W1S+CGmUnh2l1WpnfrkHqePoa0WaP123dy01LEyj4s+lC1B/iqyQ0Tjx3R97xPARC42X6rpjX77AgMp7A==","signatures":[{"sig":"MEUCIQDsf42r0ashTqQ5ZBeRykb/kfGB/vK0bPBBghF0lztRCAIgHmh5FYLBtdTOiq/VYXFFtnBa7weMRgWrXzcp3/2Owg8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhf8CRA9TVsSAnZWagAAR+IP/3WDEoVuwEwmEczWSH7g\njS4CWDRmIQyccn1ZHXy2qErMtGID3DcX4QRnXLk4r7vqI92t7okHh91Fd0Hz\nD8nmsWKdDX/vJdUSeOy368bBxT4lt30EZgl7D3FfmNVkNXxgpLTt8p4I3bar\nii77lTbZkgu2AvY1EZ4aV8nluFORX0Yo8frjbOnyRf9mWKIGeIgKvCPI6OJQ\nMZDt3FkNhFp1IgsO4MLm9mi3dQ4+GAkQeKla+rH78vaeW6dQ3jMGbmwSgsww\n4ec15SFsht/kiU61rsQXAJP55yNO0qGd7CzFE6PE5ZqVWOs+qkC6ZmhA24Ox\nSwEkjza1Yc2OFu+ssBy61C+8Bf6pp4kDZboFfN1RdDEHAigc4KkbDlQx2h2z\nPuTASfWNg7paWCQAULBrBLeZK7oilN1fYl6pbXiBZMdIk33bzr8aMSNq781/\naNvuqHKNO4QEKQrCb95Wm1xJ8izoqqTafA17uk0oe0i9hfsUTKjzKQ5BEIpn\nk4HlHp26QWim3aBYLgTEyFWL3fZDmva7kqCncU3/b1FCPJIYbx43UNEQdDgi\nm3Av4zTljDCkKtir0U0mZRomVzCa3TcYo08dCwjcqyjP9zYKesNDLuYNp3mG\n8h+6DYNIXkMiSttaGwWB+eyHXJBvoQGvBaYW+Eq8IuyrM/ukXGo2rjfjKJkB\noE7A\r\n=+ci0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5750f7169.0","@material/base":"5.0.0-canary.5750f7169.0","@material/theme":"5.0.0-canary.5750f7169.0","@material/ripple":"5.0.0-canary.5750f7169.0","@material/typography":"5.0.0-canary.5750f7169.0","@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.5750f7169.0_1578506236566_0.7094084023401315","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/form-field","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.f7abc7a43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"498e993083565af475a290db9b167ce73148a952","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.f7abc7a43.0.tgz","fileCount":30,"integrity":"sha512-eegwjSDYc85p+dtZtIbi45hIUiSCSZvxnkTKGVRYz8L04wVzeq/YDxZe45JIPomqa6F9EaUHhkJ1BOKL/ThMRQ==","signatures":[{"sig":"MEUCIEz6mQP2eLsGWYyIIWpw+U17hWVfu3MyZ/XtCh8d4UPcAiEA2gC9UbaCHyfEFgw3NKoE8My/7gjMt97S6TPCk8PmTVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh8+CRA9TVsSAnZWagAAY/4P/iJWXjOQ4RWH9l+VLcGd\nCa694+bbhoM73gc/5E8AbeSeGUK3QfPE//kTerfbDF+w2nogaP53ImQyEsA8\nqyfwtzcGdu/3f8V+BhowSY+c6paJaoeqDifx/XuFfSRjqrZuJcowUy8AH3Uv\nmuptPW6vPWpbrLZ23unV3/vTPMDFDHYV1Rs7XnyTRehLRGgTL1kKz016FZj3\nCfBKky540Axpfs11sdDMcNWFxDSQoaLkoNAp3F45Zs+z/AtdRsxkQAhnBLsF\nTVaWtoDx7k7ayjJyT47E4Zepv+Vlg8U9/jQQxD0TbI5oKiGtMfaJGVCr/unw\n5QbUJdHHILBwEQNnqBzwhdUKGolBKAMJUtJ1kg6VtFaKReB+XJDiUrd8B5SQ\nUvZJ6ll5lUkF0Cgi9UxqbHNgZFj6Xz/7lt83TdgEDtQdT0iwUwYJrO1HpgND\nWFGAh9Qa7nCizb3Isb/XiXU+HlAivQci8GELGfzCtwyiHQPoWvHVsnani/CW\nZFw4cEf4tmQ5RorWNtwcKX4+kLU094vhon/WFjpDsVxKfrPasud/XbBslngc\nKw7FvApZkMO6jpIRQsFW8DET+c/rSNjnrRFIPxOnht3p67GLx5oYQWC2G4PC\nQ66Du6KqLU5bfqEpvGS0QO9/bhgbopZguVlT41EvnkInkEaR/iHz2hkNHih1\nECn3\r\n=K0bb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f7abc7a43.0","@material/base":"5.0.0-canary.f7abc7a43.0","@material/theme":"5.0.0-canary.f7abc7a43.0","@material/ripple":"5.0.0-canary.f7abc7a43.0","@material/typography":"5.0.0-canary.f7abc7a43.0","@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.f7abc7a43.0_1578508094369_0.6511007292426321","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/form-field","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.bf7b4a061.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70de2a4c37831299e860f573d5163d79e4511782","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.bf7b4a061.0.tgz","fileCount":30,"integrity":"sha512-PKhhAs9GINc2S80T9xVA+HS0+0cOTXBhJeW6IuWNodmWb5va1tSipvyiqnJy4V5oavQn4rwEfS0RovOralRAnw==","signatures":[{"sig":"MEUCIBrG9hYTyNxeNBbPTPT1tSauToNe7G0dqrcrK5kHjhoQAiEA5bNaIhGICP7cvHAOOSvdYo4+A4Le1t+X4P1CNNvXXOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiJwCRA9TVsSAnZWagAAYrkP/R8yKm8QxMpPN86dMBQU\nObiehPV9ocuGRE4suAGgOvpgxCZvn+om+Mdo2c40TEL6a0pZedxEJaOWhkP5\nhGstAPZcC1Hbvm2SKdEMCSWXvuGqKPpG+hNg9VlaejmopbnfwJljJIQc8UK9\nabExKalP6IAM7w9B+caISZoffp8ih45/SwBCnZJ9twKWyBMRj0DBXGXMgWpN\n7WgMhhTN0sLo+RBfibYbKEJ6mZpVvhgxk3Q+jxlbqwzRq/B30IyHl+Mu0vwJ\nz8UidAmKsX40o24cSf/U8etrDhnr84BbHYbdqaHvU1iNJwJmdRddFDhhQpFa\nSWftPpZe+vQDvEAKhy7Llyo0GcC+08N4tvHugh/sC3rVpPOZFdZ/cxZ14X6X\nBJJ6/iyDkJDnrb4+JJB0Zmz3gdb0VOjyDF1EtY+PFLYQBLSx6s3BRKNYeG+8\nAdGN1WZl7FnXQs9T8PffoiedVOzUnNw86Glqy7oytWyoGc4tbpKa7vtmr2Db\nEs1Rcze+0Hy+/LpYjk7T7NMoh9dcnqpNcsyg2UWNE/XW2lG+rJ/3NmdaW+DD\n52kVMXiSc+TcXqXGMa9UDMlzX3EIbC8vFaiYMk2Jvq+PIUHTWl//zoKjGUpi\n5fxi70s9mCydWO1d7AJAbrvVlZkFN7rXI9daVyJX1zN9UjqJ/Mw6ztVr34ZG\nOWck\r\n=km/L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.bf7b4a061.0","@material/base":"5.0.0-canary.bf7b4a061.0","@material/theme":"5.0.0-canary.bf7b4a061.0","@material/ripple":"5.0.0-canary.bf7b4a061.0","@material/typography":"5.0.0-canary.bf7b4a061.0","@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.bf7b4a061.0_1578508912583_0.11634428222102855","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/form-field","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.784fa7903.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a2e2f0a46c4a934a46b456766e2d8c0ca83a2b6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.784fa7903.0.tgz","fileCount":30,"integrity":"sha512-wjQOXilVHYcDrQ9ONZnLyo9JhLOVvO97HrPjacijb51H50ZneXwvJz3z2wBFWKfZJFysnL1ul99O2007DX3SVg==","signatures":[{"sig":"MEYCIQDat35zDX2whd8ZT1X8n0/+JXdZomj+CrXFRKlejWE0BgIhALBMSXGbnpnxoxPqe2bowfashgDQIFdC5Tt+O7+FfjEH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFikvCRA9TVsSAnZWagAAqEAP/2O1c3O6GJtpndmTLLcR\n9qRRC7ts/ThsHAjB8ltk7VdB827MdnEsMWej2jLNmyzckOPa+NnIpiOijXTs\nYXuYZlWk2758VhufjJ58Xcmn1nsgzMOpX8TanVQZ8mzimK9+ypp/jn9a0lWt\nUxZzkCooZiSRtaC+Dj+m7Gd23cZU0Hq8Ue/IpLVF++P9gZIJfjotX8T8AJb9\nRuQ9EzCHqWeW6nJiMt/KAOyf496RHQlUlltvRKqRTFoL32DpJWrzF5g6oEE6\nvawJNRJYZrQ0VM6JS7vv9K73OHX+Mo+VhW1E0pd6+bldl3wY+7sVizZYoBVQ\nfOCS7dIL0aG4uTvr/zd7g+43WIIJNueKfgG7FoH5c+TyNbQ27rKHsFNjbT7Q\nzo7cadwnVU5OW1Ipm8h2Q4oSO90pcQavUH1sjNzUEdDjLdl7fiHK+H28nNkH\nN+hRBWnkgHvCv2XKs5+hkIgxAsVkSpBB5EX2kSiI8jweeoblT7zd6qhNZJJO\nVQpWYOQdkXgRDmtVS3Geo1bKyVixFz7cXawznbsXoHu0P5hrU1vahEKvpCre\nBa22LHgM/aLYPOE9SWrqwVVX5lwzBwh2VE6kMTg/83KhfR8bDt7fiy4v1akE\njG1/Es5jv8G2PbWpQv4LvR3gUZdODrDVV51it7TT6F/uhcUCZ93DQ228b6i8\n2BH0\r\n=9IYf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.784fa7903.0","@material/base":"5.0.0-canary.784fa7903.0","@material/theme":"5.0.0-canary.784fa7903.0","@material/ripple":"5.0.0-canary.784fa7903.0","@material/typography":"5.0.0-canary.784fa7903.0","@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.784fa7903.0_1578510639073_0.07010008117054056","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/form-field","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.823c050ba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d478475c46ff1900f84dde583f683fafdeb6898","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.823c050ba.0.tgz","fileCount":30,"integrity":"sha512-+MUV0zvzoxb7C+qs3KkEJV89B20dyqxf+tzKGXCAZgIr8eB4CXHK90k9czuX35Ned4g0iOIc+rH2l2Ji/+lwww==","signatures":[{"sig":"MEQCICXligC3aDHo50hHrDO37SL1w9lqRPNW8MQOtLPrhmz1AiBwW+LPBE7gEylEoWAzHYE3IpdhBfvtqe1efSJbx/2dpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjdgCRA9TVsSAnZWagAAlXgP+QFHp//uRvXfryjzMJf+\nfSiXSQiEoWG7t8qNuP66oxpKG/CYMbGRhC2zFKjb76dS5zEIfZrm+Ap6/+wn\nsb4u9PoBntEBZ+T7q5jW3VC7cWwRMhrVJQiWUVflJkIW2EXz0YTI+9Yl5hjV\ngn4dPubNuqycpDnVebnx905QxKStrDAuqKWWJ0q6HqpftZ9EO3T/JJ3ZK36V\nQ6TkyzyRHs6hgBNsB6zE6uKOykGQZ/Om7HLC0wa6zKaDRaU0cXYh3pG6sz/e\n7r0h4Jch1ncsFA/AFnEgRqolPWPXswkLT2t2abm3MYJlU1DfNQnn9enTqFvQ\nNZcX54wJB1V66PwTlTFU8+xYaXLK7CEVKSH9wSeVRxkuTCi1HjYbre/k40np\n2o5QXdvNUYQatc20jjmuD55xJmpcoV4gruGGjiSZLv0mgouL0fmmMbz2ctw+\nXYoN8U396Hsf1Yej5DN6JHKxVxS+RfIO2pW8+71XA5GpsvUQGqIrgS/TDsOc\nEnncz9LZgNJDwnFuEMsoiBg1ystglMyTZ2lMhbyfzckhvlJG19UAoTnVZUGf\nri7M5tQBrQGnf40uwx9DD5tojPdwND7TcTvXiIf1GqPBAfcrIr8CeZUSoS0t\nJzA0TJSTFqBmFBOvLiLj73+yRW93OrSgp7xaxuffpfruSfQWdIOLwl+vUw/T\nytnz\r\n=96sA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.823c050ba.0","@material/base":"5.0.0-canary.823c050ba.0","@material/theme":"5.0.0-canary.823c050ba.0","@material/ripple":"5.0.0-canary.823c050ba.0","@material/typography":"5.0.0-canary.823c050ba.0","@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.823c050ba.0_1578514271585_0.2667770091661823","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/form-field","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.70c708dee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a64caab3c1633ba7a54061d4a64e43f292b980f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.70c708dee.0.tgz","fileCount":30,"integrity":"sha512-o9T/DyKq7Sz/WqGHrA0DbJsI0gL4JjH9DyREPAOxPSAeMiY0J+IYjaD9cI2CX7a0PdVbD+p866FNMvAvKQ6i0w==","signatures":[{"sig":"MEYCIQCmXPiS8l5jlLQ2jlJbbkThqe5AZYPY/U4TJvzyUz9o/wIhALo9Dct+2VZMTnw3I1OrcszCS3w8mh6Ds+BW/qVoAg8k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjoRCRA9TVsSAnZWagAABpIP/AmqFuiIF2QpQw7+9dwI\nuoI6Bza0ArmndD8gEsilf74mI0CXdCsozDTKx1eimac4bqCcQvJbU7rdTH49\neftiwyD9Jc3HJGFp+eC9tYayGdZCFJhPYBdtHq+PvIzMVL3Nm7fiiqHKdtcU\nPbWLe+ptFkhiFosbLAnS6xW9UauuqRJuLNGLsLtHkUa87/EAALNg1EjUa34m\nGQRyhuZmQnPFbKQHc72DNTJzEGjaZUh3LyNSRSrmOuOGt/jk7BD7uBkUbebM\nM+rowD+kUH+3f3MoU8zQc95zWshLsATglz3/kXmNN80W3kfpGsyqkgTjAW73\npAT7SL+GYjKP0azpb1jUx/qKDY3fDYwqcZQ6+yBIdJfrt3k5sVuoNE4iur2e\nBc7iAdwWrisNdZNpg5X7nKq99Mx3xOpx6ijjQg3lyYn/6MkuAuPkuzByQ5jh\ngPC1SKg7f17YZ+qGf0ktGfCcH4x+bYxPLLaAm93M/1PXHLkjL7hYkHI/XlmW\nU4IfwYvOQzPocdIZmx+1mawNhmvdzsu8eNY0xh5DwIlSVXvQwW6TzKFk5oZn\nyff+wF9SLxdBJn1MxjHO+SyQKq+NvuMN3sQjjm/YAjAJKolhylJ/YUu0xKOH\nWeUMLHqaO8Ts5vCZ8SKPt/TmFk6ST/J64ve5D/4C0tui253nBH5KssC6mEwW\na5P9\r\n=I7Rf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.70c708dee.0","@material/base":"5.0.0-canary.70c708dee.0","@material/theme":"5.0.0-canary.70c708dee.0","@material/ripple":"5.0.0-canary.70c708dee.0","@material/typography":"5.0.0-canary.70c708dee.0","@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.70c708dee.0_1578514960768_0.29443466874134816","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/form-field","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.5ed9d13d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29bc3cd744d638c697942245bf08aa7104625471","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":30,"integrity":"sha512-adsgKhjyFn55HQeED4F8bm9bQRn8DSvcyP1rYWPcgJdM0DM5h9TKINnRTAXmZLy5rJjHjgMO5XEOp4bdLgF18Q==","signatures":[{"sig":"MEYCIQCCLOLmevkwKp/+PbMkVwZH6Y0EjLBPUOxTale1P12G9AIhAL52CHRf6Cva7PeYTNf1V3JovelGE/7ew7JbITu0OOnR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkzkCRA9TVsSAnZWagAArKcQAJ+ApJn5xEhLqDkRXqsj\n4YkeQPx4dQB/x4VAJIpoLwsbvd8toniIBsn8pzR2H/SStrcOyYMEf0TPRb6N\ntpbg5xRJ9UA3eAqdJEvP3cAp/I8NbSwb5RUV+oKCybiJTTTfJ//oEbKtgriq\nAWUXRktpD9fkDFTu47xj2SPmYKhfBrazrqp0nxCnzWZCq+BUWPVpFIFESNy5\nYnGGhHR9umREhO5ZqxESCTDOHXWam18XHx+WWCUFreHzrrBsvAinVliXoUBS\nCuxpB7+F4HNZUssIKT/kyMmGek4fgdmZFgnaTmt4K9+WmCjZkMAVwArMfxRf\nL/hADiAWEgEr493JdWhAeSK8VLyss/zhZxYnO5HkFypy9YhuA7j4IXjpZq9G\nJqcpkDjgJekG9EEQWPJkEKI4fevjJTgGJL6zrYPWcHRZDaC60WVC3W2DsEJD\noo/HF+1RTPjtyYIvEcTlh8tjYRTvyqdEsali6GJzToDP8OdopMNBa1eUucJI\nISnMwsrRC4bRGpwe2R0luoqN8L2ch9DOCKg64YIXLc8CT6AEb53LHLW5C7am\nmO6JZfadVOyyaYY64K2O1z+/n9hzvpiY+Mspg6WWJDutn/yDoVgA2qjFIe4Z\nc0beA7o+Ig6twKGN2v2wUToPKyfAcljfp8jasKueUDrfC+A1hwKUKgrUXUNa\nrMxC\r\n=2FxM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5ed9d13d0.0","@material/base":"5.0.0-canary.5ed9d13d0.0","@material/theme":"5.0.0-canary.5ed9d13d0.0","@material/ripple":"5.0.0-canary.5ed9d13d0.0","@material/typography":"5.0.0-canary.5ed9d13d0.0","@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.5ed9d13d0.0_1578519780289_0.44398382647108003","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/form-field","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.4819cc7e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8d2e62c6c56e4a9016b74e64dce97b857371ec1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.4819cc7e5.0.tgz","fileCount":30,"integrity":"sha512-0abPJ1W2afwDxNsCwtVsx8A/urcVYG+Y2oExSmNJkXiv5dr2sWrmuT2zoWe9kK2MmAC88ENr71Vd7471WJaTkQ==","signatures":[{"sig":"MEYCIQD+tlC4V6Cw5FGHfgRIHvZ0Qiyh6MAdEXMtSCyK1u3GjAIhAJs3fA9+e8QiVOuWSB8UdM/zfYSe9zq+k9wURyLbnyOw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlCNCRA9TVsSAnZWagAA+owP/R+zD5XUCu0MqDAl7Sau\na0A1Qligu9lXqe+//P+8J2k8ej/vt8tL0GhtZvKhygzr+vr3xpUbmZAIOnM6\ne6zg+2hq4lPIMDogIdq4vXUlD2v5EwnPZdE7NMHW9orCTnzm9ZvaG7QQL13n\n2hiySQkPlEZpcId/QniLa/jf7yX/gOw8ph5HMRtWAZkd1exVh1CsydkjSd/G\n/zNI19WiKGYVccJZBsctxM48PQWH9+yGh+H9nGqoyK1Bz+kmhi5L02aHMckX\n5IRd72gO2pU4zeH3RgANdWS3YtitIxvVtStQVYPBn+FZFCkQtiS1vk3Sx5Lx\neE7lHs0sPLHjOJyJ+hibIZR9Kvod2Z1iFPVY7twxZ7EwcdPoope9gThPw4fq\nNMciXsnmQBalx3arbj7tMs2LpaMHm1sddkP3ZWYNkuESbGgZLRfU8VeMvaxc\nTwhpnm21uys/GKBasIk/qWZD/2sKMm6fQOnV1llRU5n8GcBx6x/WD281yes6\nNOn3QgPJYFXMN+EcCper3n9QqjSdjv+7QNHyFnkKE02OloT9znf1Ns+kDrUb\nWRWJDIYUearD5BVTbIUu/iLbhwhmxxbwxs/64JYeOqiK311dngaMWp/VCMRM\nnM87Gs4MijA6vGxZ/PogDLHg++brkiWqYNXYbNGKA5v+NGrYCMRkaPYZSIvj\nsle3\r\n=dob6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.4819cc7e5.0","@material/base":"5.0.0-canary.4819cc7e5.0","@material/theme":"5.0.0-canary.4819cc7e5.0","@material/ripple":"5.0.0-canary.4819cc7e5.0","@material/typography":"5.0.0-canary.4819cc7e5.0","@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.4819cc7e5.0_1578520716893_0.12468044322904426","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/form-field","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.fe3ffd2c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5f7a6cd6428a3fbe5fc6817a3d0056a741979a9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":30,"integrity":"sha512-C8oEnEtBP2Bw0AsG1+9cFi9shbUBc8S8EjAi2eP+ugTTHHf9WClGGDCms01HGOJ5TteoBsUH+xyVDUyhO8x1kg==","signatures":[{"sig":"MEQCIFkCQ5uhE3cLtBeM5y/suyovIYDkA/dz7NA8mrFyu6UBAiBnFtg8m9ZsaYPhmmyie+QdR708o69E2KK2AGE6lx24eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlTECRA9TVsSAnZWagAA+fMP/1ulk+fo74iIyWqfjJ0j\n8DVgyLfuu/PQNgiPMaArpZqyeysRa2IKiPV7/h0867hKYXaZVeZ0PXeK3WS6\nW4ztVmfp3gfIGpHPoiYVrn7IUpnOu9e2WTU7NFIi0hAuywlzTsxRgwEJmdY1\nHoumegfB3hEiyM2iDLTBJfq/SZXOsD+Apg9gd/WT0ttpyhZ1zpaPFq70i55W\nOukymPfr5jng0gSAa8P5SU6ONzJ590tIe7IB4HwII0F/jnYuNsK4JnKEwTLL\nCtJvmGGM5xxnowyo0IHF/AppdwEbAQ27h+CCzRVj6X4BYeFVfCTJwzJrSeP2\nIWW3tXpLMD2GbC8FTnvjxwOAcEg0qev3SzyTzRN7HvsDWd7kG7ELbaFrOlE8\nRg4McnFwghrgD8cr/wIKx8YiAEvHPm2oUo+cuzG/BYHJpzCE4rFh1SkkHWP/\nQ+PQH5tze2vF5ZdmNwhcCZknmVZMFYCGq7pr9rY0PB0oEutVScZCVuTa4r5V\nhypGdnQkpF2/HdYCdo/wDLozhlfY0EmZeZUnztxIM3UFlVbav/dD6flIQYQk\nhiAowNCSf/yzTMWItmIzCQfaNCmWzJ1O+GCoEQ0QbJgzNsuP8jadxQr3etSK\naNqHGcEePNzShswLAL/EZjz9oIYqN0kANJzuEfUsDmjBc5slvlaV+cxkedbM\niWzM\r\n=OZfi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.fe3ffd2c3.0","@material/base":"5.0.0-canary.fe3ffd2c3.0","@material/theme":"5.0.0-canary.fe3ffd2c3.0","@material/ripple":"5.0.0-canary.fe3ffd2c3.0","@material/typography":"5.0.0-canary.fe3ffd2c3.0","@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.fe3ffd2c3.0_1578521796396_0.6234741352755884","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/form-field","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.c0e850090.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61880ac568ab989501fe005cceede6f78aeaf3eb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.c0e850090.0.tgz","fileCount":30,"integrity":"sha512-r3FSVRavq2zOWFPW136KDLFdYeUo6nGzkWX8qLakevw3YNmBlnKRSz3jamSO4LB4THDu0VD5UMHaP87HDl1NYA==","signatures":[{"sig":"MEUCIG9purmbyz4W0RSwaS90XIkq7HPdxjqVMQ+wgwYoAl1/AiEAn5XCGjpVa1Gbhp2qPM4T5Gcx7Ic6NKScj7uu0ohVptI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZiCRA9TVsSAnZWagAAFp0P/R9YggNHfzTKasn9hMpj\n+89l+9IdTfB6Bax/M4s/+k22Fi5JouyFKGR8XRB/0BlSG5x53dZYpKcoeFj2\nZyuWRs0n4m5UDt0+HDZ2/hQHPI5PSSeFNmCVcK/jdxq/DFiSlGl+Qay3AG51\n619MnKSzGDZ7qd08FvEKh6OJMCzzg1eigoiJQxA85VC9/pQjgw3o/Kn809KS\nu8+QdYxSCChk4/qxUALgLvC4ORDOT6B5gENTiGw+8axQL5tHR/WM1NUZWu8I\nJSIcP9ffEfQgboXJmXYuW8FiNQSoHZfc8QCxvAlSPEllSWC6jkamGOc716rE\nm+JM7R3++a+g6e3QwvxNII6QG1z1VjSaWnv6a9PeMXDr4DFE4ilNm8yOd/Ay\nmU//IN5yoRyrqKvfK0iNrAA1BOWfHlnvj9aJ8eh+l3bzYXvumOLKGx+Y1i53\nJ8JYp8cGGw45L6T8kfIAUgT5lEFK5vJYnQO+dViqH7w7CyEzSbqroI1mufEW\nnxXFk9+TkBldMT3qg1VBz6ylceP03mdaeC/EnpfZgOjMW1c+2YJWKMMpXhEL\nYAwZRjLspTdVtgUQxmKscEDTK25BSPX9ahnRFSY6g18PBH3X9B5wzaM4OY9U\n76wDOJOukczLzCV/59A1o2lR4DabJ3LaljNx6jTWLjlXmq+U/0l2bQmE7CAm\nTuub\r\n=2Htt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c0e850090.0","@material/base":"5.0.0-canary.c0e850090.0","@material/theme":"5.0.0-canary.c0e850090.0","@material/ripple":"5.0.0-canary.c0e850090.0","@material/typography":"5.0.0-canary.c0e850090.0","@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.c0e850090.0_1578522209798_0.5818839048911322","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/form-field","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.615f86f38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdf734bae51ae8db3fb6fe144064e6da50dc7650","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.615f86f38.0.tgz","fileCount":30,"integrity":"sha512-VdnpvYGI6xZCtImgnAjbNKDplrjZY27bEAd2jz68RWckrvIuCBoYRXwhHpBlUqJgePQI5kEcdtwF4S+8G1GIgw==","signatures":[{"sig":"MEYCIQDJfm9PmTgBazsImS+NrjKarBkqrYhurv6f/mYVFjnFkgIhAIwWN18wtmGI8lhsfrbHIrJkRLWlnJxgCrR65PspPEWs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlpnCRA9TVsSAnZWagAAJTkQAI9hGqIEk0TFph7pmmHR\nlozh/uqrOYWcmKfNT6JP5R/Sn+DBsztCUTG0dAg9Tw/aPYmEMrDEimPj+ycx\nJFOJM3iGrJ09efQ8V5YN7jOq+m1s0cprGI5+O+Nyc/VnzeGBneFYqqnaEkN/\nEXtGrazya6q2cUcIaAUULyfk+3SOPaopvcVTpGunoAAFycdygtlTzMpefUzp\nVEq8Uiq2PU773KJ1ajZuAZ3uMhV+E1JzxWRA+QJKek/MrhqKn9Lgt2/pJXvz\nOQTvzzlK+RRaH+plh6mpErm3GkFS4rlTyQjZRlo1zmLDGPWgZLSDqAjtYmYt\ny7TzarMY6AfRMPcR8O8wVQujwCTW0i+DtABmGIP/HWTCoffavzeLr25EfmeW\nt/oRQylYvQT/0lTStngRaFXKdMfNHztRrIGU47uI8s7L0NzGeQOBpPgzn/4g\n1hPSkpRatgsKoNfcQ1T/7wjVwpOcKkVnjvcVzDrr8ZIKJdawzeGgC4dMpjft\n3misZ/hveXpdOQnlP1jq77piEtHUeOfqZz5zUaFjZACur+//+SAgUFCgDtv5\nfaGNVFvaLKWDV4sbMAdnDG4AHpfzEHDwoLYQAYHZMn7dUNAntbSow4gW8xjL\ngxLvQCo1HXrcE1pMGhBhIXjIgmfLutIrZ9g8nuWuC/vxvJuRdx4gMsu7VoSe\nK8wV\r\n=csg5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.615f86f38.0","@material/base":"5.0.0-canary.615f86f38.0","@material/theme":"5.0.0-canary.615f86f38.0","@material/ripple":"5.0.0-canary.615f86f38.0","@material/typography":"5.0.0-canary.615f86f38.0","@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.615f86f38.0_1578523239182_0.06034521427541262","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/form-field","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.1eb032637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d54f61c0e54f09f02deadecd119ef7db6179d72","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.1eb032637.0.tgz","fileCount":30,"integrity":"sha512-v8rhTjqJ/BakSJk6OWsCjlHeaSVH1oBQgABxx6nLc5fvfk1imNgP25B+UjGaEpwTgVy3WvtgtsmFvl+oOP2Rcw==","signatures":[{"sig":"MEYCIQC5AVHr+a+vSHGV4UvJNxxMicsOn/x5dOgxNSRkw41Z4wIhAKkHrt04OnAHqzSKOG3p91aElsI6zaoO0mQrMkI/4tjo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8FCRA9TVsSAnZWagAAvuUQAIwuCdes60CX5P9sQ984\nfNJpt4tNWLZu410gqtr6zAhtPmUD8z3T1MvFZRX5KAt7XXRrVHzuCv70RloH\n+KWSTShd8WjFWJkpjYmRrYmdoAt/+IT7GmUH7kZKORNd4bebh3PxoyLMwLed\nH1eMWKkAlP8IX7c7h2arjPkv0XDZf7gIN8kP+YugL0xa6/J4iaEwolRoHu+T\nrp2v4d/nDepv5VGrG9CuWnMtaM45FB7ogEgrKLYK1s9UG9l+p0BuXhE5EI00\nnoXNwqd5TEKhScPgrFHIdptFkjztA/DsgnJIFwVy5+ueCIqHvevm3iIqCuWl\nzXLRdZ4tEOw8G2rbX7w/DaRkAOv0h3wold2lmDE5p+9OjX0t8w2WNX3gl2cV\nv9DM2xTeXIgewJ7a88DRpCrtG/G3OYP3gLyoZ7QogFU0SRkLU8woavJmra9G\nzgJnwHt3cA8ILcucFmEmZ9hrXHQBFFXdwfZu44wGkQleMVcYTepgjM9QC98D\n13a211icCRn22expANG4J0a6iHbqrATkCoVh8GK927QWkNURV7zvrVKJnoCW\nvsuZMB4dCWzWBAGKqnLlrspXFE9+rqKHJkeBTdH9hTiDYg+iaAKYglhvxFv8\nutBGdnDSWXaB7NvxSxZsCutf2TZKVVaobonsmvGSMxZlpDCDb9Lo3ua0B+JL\nyDHn\r\n=g9Rx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1eb032637.0","@material/base":"5.0.0-canary.1eb032637.0","@material/theme":"5.0.0-canary.1eb032637.0","@material/ripple":"5.0.0-canary.1eb032637.0","@material/typography":"5.0.0-canary.1eb032637.0","@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.1eb032637.0_1578524420671_0.7265975167519769","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/form-field","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.5bc5ebfea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50c338ccf19e88c71201e1d5319272e883f26bf5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":30,"integrity":"sha512-+ahp+Zy2OuODtjEQACEv1hhB7yMaBuevjP5kScIkY6b7p8bKDaGF8qs4kR7/TX/mfDaFvaZNociAoCQQ/tFTnQ==","signatures":[{"sig":"MEUCIDOebeLJg2OSs9HxYyuRE0P6Piqa0tAFht3dbidXK4fEAiEA07KajrwptC82LiiHTkz5kO49Mxfl/evCLn0ZLQJ0PIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl85CRA9TVsSAnZWagAAQLoP+wfO9KPyAzJnIdTxKvsd\ndwgQHePUZULKWdx8wmjuzZ5zJXYYzHOAaUUhZ29fJgJ35/dq5nR+bVBYiWcT\nEs+9JRvyhx8O2eUM/8iHLneC0kw3nbjDb5q7y/32+opI6A7nM8mX84d4lSy5\nl14FjkH9aUlTkLVO++IHVe6ivxoW2YuidynvlMFgdiLksS8Bg6iOprZIUIft\na6fZqgUfoHPX9i01Kn6Bd4M5W2Bfw7dudfhowf/mmw6XwnH5z99Zr5CEiWMs\n5RmloZdC9OZCN/3I3x1PJX71Vybu7+xbgTvdINTC/6C+OcsiovXoEJzli/Kh\nQxgjIHVOjmZbPvh1apdEwxVzTHQe5f3pjPCbRNehurq6eu9FwuKdRKDVruBZ\nlBqYjkamzZlsJPCTtAbth4XB8elQt1TdmquU345aMmURTWNxxPnODzZrRxTr\nri7Hgnz0slKSnRgR/zCoSNUfXfdS9ZcVB3exw7dnQtHFdVYyk58jAUrBHrLO\nl+cQiFT3DR/4BmpBhPYFeoGReC/MGklT79d8ltn+2pYYDfTuTFhIQaDh8HH9\nvnIbpdTr7rAudRiiYugCz5uPliCTPJFVH8rG3tLrTlxq6IXZ7PFPVc/PHcrt\nX50TiQ19/tGDY0CHrUz0sgSaCH4KpVXpXd6PVvgg+I1BT221/se9mDGv26Wc\nwspJ\r\n=TEfr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5bc5ebfea.0","@material/base":"5.0.0-canary.5bc5ebfea.0","@material/theme":"5.0.0-canary.5bc5ebfea.0","@material/ripple":"5.0.0-canary.5bc5ebfea.0","@material/typography":"5.0.0-canary.5bc5ebfea.0","@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.5bc5ebfea.0_1578524473592_0.1594795097620898","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/form-field","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.1112b8def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6af828f95ea5be0cecde7ffeb1a26e767e2ba9a5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.1112b8def.0.tgz","fileCount":30,"integrity":"sha512-9nJkrKwMkgXIzK/Va3XCTWbHK05g9YgLW9uvOawdTpjFGNqZ2QNDtKKE9btJ0SrxZEuU9KBu4kEKKeBHi7ZvXg==","signatures":[{"sig":"MEQCIET3zugbilhZyipyIdYa9pDKMrkY/3Vv9eD+pKbMWYxcAiALPDqUwK3bi39NjWF5+DXOZF7F8aPJ27VEvGWFgVjmOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6TeCRA9TVsSAnZWagAAC0AP/1z91gGkUbLBRU2jqj//\nRLc40t9BE/tK5jfQdIQK62tOgpOFerxLFSJmAa880HBYRvFa6jZjQyDv0rma\nwbrwKo5hoV2MD+MS+RVjiz8O30gIt4XWLjayD08ZGQ71Le781tKHsVakBmP/\nSo8kz4pr49oE3tUFu3KdAPCk7ZVZ+Ks8jA309ZkDqx7h3+z85qK5UMmWAAZs\nxBtpqqFRgOTMLwYaCCkRXkswbErpOldD48LW3jcoz9thVGvirDmwuw/PTjBc\nK6OsgijEqITkqR28AJPXZxohN+36ZobGzr0/pifIvvQemPb1hZOYMF/CMDr8\nABGSuuGv6ZoDfAfaJyDGYMm9KoK4mlSPT8Ano3F84jpAQS8tcNmPLk9CsrEe\nJcODaZAQAaahaCyyUSZPGgBmBORtRW+vPVQbGXjAFOxkkMXqHsnBTWaYQxbV\n96403NKvGIxvwXkf+6H8WzM1yWqX8yxSt8C4As1YonPfBv3mfDVWrcuKmI6/\nTCttndsLUqkfcsIOhHJg+CVbkfuKvIv34x6ZKRBgeJNiqXxZhb7u91wtmcLm\nF1GmheyzowbRbJ8KE4ZJAm9B7ksBukSmORCjosP5VmElXWQ29Qh/KXB2oiDi\nBCmOlsXeyV+6DhFxNH7TlwF9kmJ/b0KhMHk5s0xd/KaqbP7idxknKgQI4Y5J\ngyze\r\n=5hI/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1112b8def.0","@material/base":"5.0.0-canary.1112b8def.0","@material/theme":"5.0.0-canary.1112b8def.0","@material/ripple":"5.0.0-canary.1112b8def.0","@material/typography":"5.0.0-canary.1112b8def.0","@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.1112b8def.0_1578607837847_0.8794935347835764","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/form-field","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.aab102017.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fea6f58e8808294021eb262daf2d922c513e4ec8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.aab102017.0.tgz","fileCount":30,"integrity":"sha512-gLIbrCvnsPo7RMyADG1PpNfB6K4Ll+ySArKK8Nily0SRRiWVBes/fEIVaq9OWMzddzUGg/oNG/V+U6qMB4rMaA==","signatures":[{"sig":"MEUCIQCfD56xhDXe+Ggv9iFwirv4wiW8zZGD6FWDSVsFp/NJQgIgQSo/FA5R3IRw3jNFxlr6/jLxt23BMoouj8ViX3teKMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8F3CRA9TVsSAnZWagAAFk4QAJtAPqoDVwLZ8Mvr+HqN\nEUX+ptmCMlJESDaFg9KZl6HNt3BDYeq2Kw2RnJQ5yhMNQrxKbjNl1/0hhD7S\nvNxOu3DDPNuD1YeCHF2Eann/LFK9/uoKlJmboqC6+FDqCMorm7t7KPDFBk4J\n2QguU7wlk6hI8+1xdjDOuGAsu4cUf6jDoFj1XlH90JMyNvh4ZY4ppweAq6Pb\nEFLs9HjfIGgkOpX/rZAUYmKrhg4Wbku9n4M0odvjQfwU9LnvnDAKq+AGS+AQ\ngnnpS6FMt9Mter5tV++uNM41QVDCIORmX+Nq0ycCyGFu0Y0khsM1isSYZ8Fv\nfE9fpqNx228hfal1/f9TBUzxFzqcM93XjGSAf+hGfUYi/FVlr7UFFkCvx5TN\nqmMJ4tQd9b3AeqkF7/daPgmT2uNb8GLY5BZLg3/WiYy0T3j6k4W0kDcASgPB\nVLtt5IvWnFuJWhn2LMdKQHsIirXR3/o651Sr6xveLIbgWN2RgrtC5G64C5De\nOHjdefPjjBlv4ksOf/GpWWSLQJ1C53xAXWoPtUWBb0kc/AURI5NSj21SN29Z\nDoW7COZJYw2ujA6wVVW0ZZx8ITbXEx/3bthwXjePD0NQJLZ5UVOkdRl+THIm\nvdkyufbtn6gqj30CHgHyYLNIVAv1yBzpIiefTavrnZ9lnL9J/F4jdOHSLZt/\nPW2M\r\n=x1Lq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.aab102017.0","@material/base":"5.0.0-canary.aab102017.0","@material/theme":"5.0.0-canary.aab102017.0","@material/ripple":"5.0.0-canary.aab102017.0","@material/typography":"5.0.0-canary.aab102017.0","@material/feature-targeting":"5.0.0-canary.aab102017.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.aab102017.0_1578615159470_0.9684579517793992","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/form-field","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.426913342.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e52c9d46c9bf515f19097b9f4b748fb48f8be61e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.426913342.0.tgz","fileCount":30,"integrity":"sha512-WcvlbW3c1DfUJCN66+MzV1SCmyMW47VUVr/1mgBfVyLBnh++SYL4UYJZ8VTR1ESHI2EcX7z3+VUjhUlF78Ot0A==","signatures":[{"sig":"MEQCID4uwf0mbMFK/aR0oKdluu3RelLyih6wqi6gKtMncZK1AiBUbwQOjZAUajATTwVFBh4CvnkrVAE/9GpGlmubxU2yyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9cFCRA9TVsSAnZWagAAnacP/jUlBruvYPXYBR6TU0l1\nRGEFLK68sBHp3YSIw6CQqY/SJXRZh8Yfgv1wxsfY3xHGf+cYXBdhSWVIPdKF\nKEVCXtaQi+TJQrR+RpkLtxDwBWRbVgqEBYBSMTSAz0Jqiw9ezyt4MCWsMA/S\nWzpX+331/mGBpzzIuNTgxIVQ/FIfJQGpU0OAfdE2DlscZamHG5L8qOKhPHze\n4IoTo3w5wESp/6ftq7dQcXwPT49qVx6zL7UuYN83Ho3e6tZPp9nXEwB5WiEe\nci9w+Ah23W69UYUdGV6JVTP6NcCHYhNxHaCY7Yiy7lqRs3sjtjxMcsLIq6Qw\nfYUEaLHTrI9yS0oJppC2AQAkm0efWd/RptEc5XoMvgbPT44Z9WYEcFzzmQbF\nbIPxFXcYHF+mgILYUAVjxAAu1U3+qnR+vplld+qcZZ3oPT4xOjyF5pcN2OPt\nIEVTXUBPUdDLY0xAK2Vqu/zWjRzsf//tsJYPYf4OP2556BlL9rcpM89wOPpc\nPITvgrQXSagFeVdI2rwZowGEIi5hLtQZb+VCwK6lIXvF5vF04GY/v2E1IdJE\nn685zW8DJUKldNdaqMaJi9vdP3hSrRqRrbO5q/QwH3L4JVXT5wJs+H5yZ81Z\nz9xITUeHp8Wm+V4hFCHCRCbJwe0f+oexh2aX/g67DJNxOC0mGT016haJLcFV\nIWT3\r\n=tqUR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.426913342.0","@material/base":"5.0.0-canary.426913342.0","@material/theme":"5.0.0-canary.426913342.0","@material/ripple":"5.0.0-canary.426913342.0","@material/typography":"5.0.0-canary.426913342.0","@material/feature-targeting":"5.0.0-canary.426913342.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.426913342.0_1578620677301_0.02153499223747124","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/form-field","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.d4ea9a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88cd18395d66214cf268289b9fda8c1ab210b5d3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.d4ea9a706.0.tgz","fileCount":30,"integrity":"sha512-wXoAuEAN0WNXlp+R4i0YV2nwBnxJlcyi92BBfKohOHJdnh/hfpmai4Agd3I2r/k57qcLKXFSMNaYMc9nUOwyqw==","signatures":[{"sig":"MEQCIEBKN2rRv9pHX9/wWbFnwme/PQroVmet03A9YYcJJLxWAiAigIGVUeNOmC7qzlso9lMZpQ2Qv2WGW69eLnHIH1/LNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLOWCRA9TVsSAnZWagAAyh4P/AzhOYNvQXgQxRljwYRx\nWykfZj7btQYr+LB8dutZw9j+SqRnjTEboV5ohdriLDmjOkEP2/5t+91V8s5H\nFkSEiIwp0ru1CuDUZ5cAWSyja9k3AaGTEKs25/rZYxMKjXlMgr2E/N9J1kwL\n/b7IFkTLPL/ugkUt8zSUX6ellwo31o1tsmxdfNu1GLIkzBzx1B/pJYXHrFWq\nkniZ89/S4nBViE3LZzYbDLEoPIW7XYslCcCuOHbz0afGUY3pN3ln0p8nY7y1\nvoax5EGKx7WdWxkxheTngSTK1g6h/oFozF1EdY8GlYrpKlJYovAmAr2eRepN\ntKgT2MS3HZ/kbKIz6bmEUj5QeyvYKuor1PyPyNYzGY4+Wcsh2NN/gc/nXodW\nffdmAqbwtHfhR1phmIbkLOReAhrwPwu3OxiBSPvUB/KLnRfjfMFBpEA12dpN\nJnZYMGGhX76QzYe7YLuAYr2rVzmxWcUIkp9Tdw6Rc45KP174r/+/+Wz1BAsw\nljyj3z6jnGvLBXqeIXqi/k7PzEwd0qv5hrNKt7LpxSDM+CI4yLyoxY1dZcQJ\nLemrxpsRvon2RH+ee/pwVXuMewX27PAoyLl4fSzI47CMUTtMhWA2PrpctWI4\nTqm6L5QSD+Cn+MKq7wxK34Tp0/v1KO6y0qA9/Gd5/AyJU16rlaVvVC9cPdmb\nXmdT\r\n=27yk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d4ea9a706.0","@material/base":"5.0.0-canary.d4ea9a706.0","@material/theme":"5.0.0-canary.d4ea9a706.0","@material/ripple":"5.0.0-canary.d4ea9a706.0","@material/typography":"5.0.0-canary.d4ea9a706.0","@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.d4ea9a706.0_1578677141700_0.05950322896626292","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/form-field","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.7d4ee2996.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"782e8dc4e88fdabef7dfbfe43d7cb1e665d58e7d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.7d4ee2996.0.tgz","fileCount":30,"integrity":"sha512-kB957DFdTLSCxjcHpFJPXh+ZQdxParFEcIAXNI0t58T9q74XrTPHijn7C3lMUYPlphi7FkfdU0U8EJL5CyFh1A==","signatures":[{"sig":"MEYCIQCg//fczrakEdm5l3n9Uguk7H0BCvk7twMWplX+SaBg1gIhAKSZ4xT25mdac4GAUWJtnTEm2enlsxwxxiB7YTa6NiIC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLr7CRA9TVsSAnZWagAA0rcP/iQ7KwEQlpvdC9FXvHMI\n31gfFlBN+jyO6IKPy062TdTrXH/YqzP5eiDZ1wn41GYsGePhJjTsIYauHMcq\nwA3jTK7ms5CHn9nItkof+awic6mtJzcBb7/Dxv9b5utURwSu+1MCFIpmHHJm\nft7dZbzM0UZKUG0FqnlFWdqMr4f27v47ePikJqlKuRimsUB1im60FQ0A4Xdx\nER2Qb+y7UeHOLO84hJOSoQZWHAl7uBc23yFjXKk5mNsJOanT1q5MQhYtl2hT\n/4zsf4Dc0eSHs3YIJ/xU+JekpAu73hO7SSMfoOnG5DpALQxMalJ5H9t05Ia+\n44vDDI2bQ77FCk4SLj7aHpg7xAyPOSNGLH7bEYVFT3+l95btYYywT3H6Kd2c\n0wOdCZa+YSLNjp5/zP5zvRu84U6B9RQeDfRXlCTYDjnlPiHVNqH5x6iUdW8p\nAEBIzB4XzwqIU4nTOEfGhTBTI/RRKWTpb6dhd+IffyeZLV+T5G3bhMXbc81O\nJVvYw2AWA9QTrs5xS9UKKtV0JF1ouptKDGA47kshc0K2vzpzvJ8eNxepL/YY\nYVq6Bh8Ia3h5KL+45BjLAr2TlPGqdyBNc8901e/q7EmCppuLgWpaC6pGnvfg\n35ZJHMc1EV4up3O5IA1GUuvoaOqPVh3FqACekBP27bACfyfMa8wJdQErEeDu\ntIB4\r\n=bzDR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7d4ee2996.0","@material/base":"5.0.0-canary.7d4ee2996.0","@material/theme":"5.0.0-canary.7d4ee2996.0","@material/ripple":"5.0.0-canary.7d4ee2996.0","@material/typography":"5.0.0-canary.7d4ee2996.0","@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.7d4ee2996.0_1578679035391_0.6988901338945634","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/form-field","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.981ec9b6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfdc5b77a0f10976dbe13ad8d7b42fa298bf7458","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.981ec9b6f.0.tgz","fileCount":30,"integrity":"sha512-gmcCd+fa1TZZE3wsPzId577uw6EcnzaJKNWEoSAGkrrUP09Vve1hFCbg4D1bZcjubNFenugiDm7vVgihaZG/EA==","signatures":[{"sig":"MEUCICl4NNN8DJHW3rRqyj9qgku2hRxTaFShtT9XRCjbMoy5AiEAr/T4JljttTjT6r7iBcS0FP4RCX/bhAif6ZPozfRRoHo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGNAaCRA9TVsSAnZWagAAl9UQAIFK88UbjQx+5lDjmRZs\nNLClPYhLt+Uv3uNftjto/8AzHoqBr/6Gno7BNHnhSyrjN+kW713mQKcAm0CZ\n0twbwzyj8xfP6AuyXLSTjGB2GZb+Nj9+ateRUPzJDI9aCah+67g0TGuBy7JU\nVnoLzk6sZ/Zi5D9a/IMRaKtbg3JYcbzMIQAaQMUGG5taHhwEm0dJiOj3pRN1\nfbMB8bwIu5936XAjvRSb52cGoszQ4HS3DWKAta4s4M81rrXjVBwcnhn6ubg3\ncy0vPpIvaM+uv3oNQvmkNxtuxgDgsOJ7vmI2FnG0wJn3eRhSa6c1pX+jj42e\nuGTN4PuNCTxvFDbM9EEmFg2DwjJFWkJp67Zls2t/FjR49u28sVCJs75pTthu\nDjzhVsueVReL8nNSn6F59zTF41wlVkdAnIXuqdx1QAsntyemakrjYbaGV2sQ\ncJb+bzD25iz/m3L5uSSkvDnFEiOh/MHM+nU5BJH+bbRqr2E6xH8ahd9coPhB\ndE+f/1trvcyQyJZhyhSyisCU0gT9QVWJh74UcHNcgiJzsL7+ZJ6iFcP1hn57\nSY2gzVIjNPpEuJXxwEaENMAEHdT0HiUFN1LKonxt2vunVg66Gp5PhEK4OsIU\nrRjm8KpC5eoNTATkGG0vFAbDbs1CVlmfMEhySXO9ojCazdZCVGaZ01jFdmH6\nTqgO\r\n=Metq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.981ec9b6f.0","@material/base":"5.0.0-canary.981ec9b6f.0","@material/theme":"5.0.0-canary.981ec9b6f.0","@material/ripple":"5.0.0-canary.981ec9b6f.0","@material/typography":"5.0.0-canary.981ec9b6f.0","@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.981ec9b6f.0_1578684442419_0.19897885649552927","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/form-field","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.737da83fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b0735ae0a0785b386e566fc11146c83f025b23b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.737da83fc.0.tgz","fileCount":30,"integrity":"sha512-G/ccO/UQxtT6Z63SC65JtseuD6yudpIFS8tDwn1qmYsJY/VuJ0NiM/J3T2NbtUwjm2pU60gp3wa/uitapuSqeg==","signatures":[{"sig":"MEUCICAHcYVxIW/D/y1Kx9WR4w0/LqOHqPUfSieb5U+UoBnCAiEAxsRGUxMnVz4amSerpj5ju4cA5NAQhdOQBeqgngMeHIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOpPCRA9TVsSAnZWagAAfJwP/jfiMsUFgKo99f+Bbr8i\nE/Mep58+Xh0vykgegn/iZHpX6/ys7szwkRwzpO4qlRy8zhuh1srZC6Zn4tlD\nQGni//V/6WZUlMOxuNvv/UMYNFlbTQwAoY7T1EDkVUnwTwQo1iaryo5Xht7m\nEB1nj4q/3YZiQ5eF4Dr+nGk8JDyhIlpOtqLuhx/Mdxztf6dOdmamwgbIKNyA\nKR9PZ8W9dmB9FuLU1e6zNGm7lPxt1LkO9pQ/NnC5mgFyIQzjIlUR2AehgchN\n2aAoNnm7TrDDyQrp7QYDtULaRC2zF63plK37R0V7kG57KQbCMVyGdmK5Xuve\naaTDvqPTAV3gPgexXsAWczQjfzHKdWShfhdimPKDlG8HK3AXm3y0hohkq2A/\nHvUC7RyhbLVtA9B4e9LunZlBFchZcxOfYkn9zjRjIAF1t4M1iWaqFDeccapN\ngKxhdoIbF4x1KBcAQgIwBS06AoadK/xSEiTuqATmckkyJBjSZy/aBMaUrQWv\n/KSx1hN/bkNdtgIBQ6Ut97QwSP5G45mom04r/5VDafUOQKJdCjeBnPyRLtqC\n9pb6p4g48cHg9pdwzbHEiYn32GxTv7gAqDBOdk6OAqiGYKuVCb103rl7GSFB\nwqC+ihhjgeEJpPF5Sokxf51c3y5dCnkq92xctN9ksEE6luh9w1ur7lktrf+K\nxDMq\r\n=nKtb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.737da83fc.0","@material/base":"5.0.0-canary.737da83fc.0","@material/theme":"5.0.0-canary.737da83fc.0","@material/ripple":"5.0.0-canary.737da83fc.0","@material/typography":"5.0.0-canary.737da83fc.0","@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.737da83fc.0_1578691150891_0.5074941826086481","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/form-field","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.aca8e6c18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84b3f58a2f3e30422f9403eae35d0e80bb58d731","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.aca8e6c18.0.tgz","fileCount":30,"integrity":"sha512-iu1zaUWBcO6AkJwIORk/GdpvfZBH2K0L50zhytquHzJwuzkcZ8oPNfDH7Rd/TGxX9UkuHd9qyrPjQsvpRFrb0w==","signatures":[{"sig":"MEYCIQCShrp5DjXjHXGRqQmK1zYfkGFi/uIpz1+MlCDKrC1YRwIhAMBWMdd2nEUUT7gKJFd92NKD6Cl6GL0tgnqMNI9e8xPb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMXiCRA9TVsSAnZWagAArBEP/39KwOYS7Khiy/cpp/o2\nSkyLMnPUhwM4RkeWsKXxSpuOIfbw4/ApB4oVigd8Tlpfjqb5tg3u7d8vxhV/\nomsuLEcsQ6LSCi36MfjPJRlO6fBIRU0YNJ21NJ5D0hj2xDaNQ2DOAopcgxU5\nggQjhOmUmBQfXD6p0u99xv8nnLTkdXquQRFRaJxV7juPInENVIl3eTH0TZOz\nkyPqnN87UZuKho6iByElMulle9Q9/6zPEXVv/yn7x9cxDrhhOkOCPMEjlycj\n2nTJv6UNfeReonjU3mpN8B4jiO+PVpcSGOBj6wnKcsgv7zaryTWvrKNvWR9V\nOMItu9dTra0g6+vrwqicf9+j1Q2wp/cL/POPiQsFF0L2ADAw60LjJlvtD4K5\n0dVCYwm5S5+iwFX8mzQT3JwOvLlXn4EthIUUJwWALpY5d1uZpLCYaWEjxDt5\nNAKQB3mj83YrFcfbQW56x7dB6WOD22YUYMlGrTkPJAMkW5w5KliW9OqqJ7R5\nZ+POGTbtDG4MEJwJau7sTTXMFVvO6tk6IfBSD8lb9ANeh8ejC2ie6bjvR20a\nxWIEFa8DXUonZNj2nEhkn9PgXOOe29N7+idBo4e2FiEVY99xmq7imv5fRx7N\nP6X9QQ9STSJoSYix5PoOjOG7eOtDrWzkBRLaxKPAldweoG/hy/L18yGVy1EL\ncDmJ\r\n=Mv+/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.aca8e6c18.0","@material/base":"5.0.0-canary.aca8e6c18.0","@material/theme":"5.0.0-canary.aca8e6c18.0","@material/ripple":"5.0.0-canary.aca8e6c18.0","@material/typography":"5.0.0-canary.aca8e6c18.0","@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.aca8e6c18.0_1578943970041_0.4667263974350311","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/form-field","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.c38d84e21.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0629f075beaf6e452dc2f55c1ce3cd9cf3ea619a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.c38d84e21.0.tgz","fileCount":30,"integrity":"sha512-7YLD1AmgSXXi6PqpbGfKOQvtNjyA0JXyhlwhFvlJwJjVuvaYYeX/c59O9kwt3d0EH01vU8TwJw0ViZvHtu9OmQ==","signatures":[{"sig":"MEUCIAFL91edqU+4v159QMBHbb0s3P0AY62llIiMz6kPzCJTAiEA9hQ/BT9u+zs+/8rviYV4kUNxx3CCNS3WuctfV9dbTLE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOuxCRA9TVsSAnZWagAAjD4P/3LJqtzXPdhjOZJ3cnmQ\nhI0HcCLgCM1jB4MZ9fA62f3RkA6rpXCcFSSYep/cR4e/cUZk4Tbz4synOlQP\nNulAyXJD0s1EkkUTpc1N/DTGhgu9wO2xFMUlDoZWbdYMtZRQG8wOQLmupnrF\nR0E4JhGFVZBjcnrv5c/4A09k/Dv1RW7lfGW8dzF6J7mbghgf9XxwnN/T4nFu\nW3Y4JBZMP+jznzF/fkh8Trph6BIoebnZg58xSju8VHuXKU3vf4/BUd3u6WYQ\nghfE4wTM3Jrk/d4c2vVy0qzzFHs1J9DDZoJulISTphKNcK1108tKnnl3jaPL\n7O9SRIDcrGuWfFPzpA5sxew596HN5W3YhsM6rBNWVDIZPSNX9VLAuu5PquzN\nNaxwKfsoWpxYJWCXADwOVTqmpqtYSN21K8uYqsL/29MSVwW0UCb8wrEoV/Nr\n64fwUHXL4es2CAYaEg4dikVVnNKM2knrBkFJ9olviqpJDkTFK9tL8fk6/vNw\nqVxJEDNyGqgoVvJC1vXFnTok6bzxFcEZEGIkYNwERsZNbQ6lg5SE5blrbOpM\nb/r8z2Zi2rcgGe/gbgWkG1xgXDxqPyFkq6Jy1GQpKQmobsmjYBbBehMlZPE1\n+XAQ376iDJpS/JMmx/Z7fyrx22U64PZUKEikbUmhuQ/G46MIRw8fWJDflGQI\nC210\r\n=wUIv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c38d84e21.0","@material/base":"5.0.0-canary.c38d84e21.0","@material/theme":"5.0.0-canary.c38d84e21.0","@material/ripple":"5.0.0-canary.c38d84e21.0","@material/typography":"5.0.0-canary.c38d84e21.0","@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.c38d84e21.0_1578953649492_0.4800609305923853","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/form-field","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.a4db5fbad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f78d1fa0e47d73e061a6bc1c58a1095ae4e8e9b5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.a4db5fbad.0.tgz","fileCount":30,"integrity":"sha512-LXW8Veb73l3kGiuzBA0etHHRBOFnCTPRL40Zyigci1KwAbb+TzXQS3oSBFmic12CgX8L/Vm0uAE8lt29Y4dBrg==","signatures":[{"sig":"MEYCIQCtIAsxY7Rifg+gANxcpIN+9HJpZIQfxsgKJyzsZWP81AIhAKLWxjqy+0iHH/7+M0Foyv8m6UD4EHHvfNUySmGQcNUy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":141076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSRPCRA9TVsSAnZWagAAKFwP/2VsC99uA+lvQk4q36N3\nohbfZrwIT8X1zngG66X2UyPcxMHKiwt48ysk1kXeebBRj+KBnSZTMEluPJEQ\nMc3JAfwdhsEv1jCHL08BiV+04LvofNwNQZZ9jhmNMneQZCs/yRtuY5c3HFs3\nDA9fUtSaeZzNToCioYQrjJw6lFv/2kbqxzZVm7462jG9T95ysA/kJFsDgpG6\nlsHLYJwZYKV1LXtIdC1bMIBtpLYPtPxEDYxuWJ1fHSNF1DFPDjsuhKWIrF3r\nLxwKCLBSk/jw38YDUKLksU5KJics2CdzgPOSpHThgnQHLyN6MJnUO2Pua6qE\nmabrQuPWCLuUNLWzskvy5/d0xPDq150ydLrdnbikqIbLsyNryNqBLVrlyLY1\nT3AI5jA9r46yWsphXdj+xtfK4YEZMzVAJQ8qWffBgJ/3f1LulLww8g4s4iWq\nJjXKHfi7KBFaKU4y/PN5asKEBygn+0Rsu9Dj7xf69PUo9CitIpjoZk6NWSmA\n2fdTrDmktDctE9g9PNCvhcQ91kLJefA3hPhI+pT9TUPyIBpITDo4T4cnAutw\nqo4muRR+TMfq1tQOA2svs2/X8zfd3SB55+YdyOm8+4lHQehFez5IZvd72/N3\ngvFvj2tQQSq1CVLXmhSN+zcqExjEA6fE65v5n5JaI4kc6BGN1PwDks1UeOj4\nil9z\r\n=NWPy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a4db5fbad.0","@material/base":"5.0.0-canary.a4db5fbad.0","@material/theme":"5.0.0-canary.a4db5fbad.0","@material/ripple":"5.0.0-canary.a4db5fbad.0","@material/typography":"5.0.0-canary.a4db5fbad.0","@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.a4db5fbad.0_1578968142625_0.15094105317009698","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/form-field","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.faa9af310.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"817a9b41055170a4011dd11abd53eede9d53b89e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.faa9af310.0.tgz","fileCount":33,"integrity":"sha512-BfD29Kd/v83pvNUTxliTYRY/ls3OKHmdXNGdOLoAaNqISl/+oqEHDwBZ78Th6E4qJTTbN/MQlwEX0bMsRZ6FhA==","signatures":[{"sig":"MEYCIQDW7vQdtE1ggg9kUuRGis8tLjuDeLh7UefjZ+o+vbdpJAIhAPLacNYxzmseplJ7xPT7MnGIDtrvjr99HPYbFMfWQFD0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfISCRA9TVsSAnZWagAA2i8P/3lBxWL+79cwWEnrrbQe\nXeqdqzSGyGjHydNJtcf9umKgrp1qs0EZTrGFba7fW38RGYMVSH4cVnBhROdr\niuM1qb0LOWfA9QM4XEmOKIQHI/zvh04/+6GqQIK5bp430JY+1sNdoU8izL2r\nlo0KiktUmPxymFSIFR/Mqf3T71d+ZxADygJnnH3ycsGkFbTyV8uMQ4CkJdUA\nEMMyyn6UQrj6twQKaJ65UJVZLQ29qY3rqhrW/xiKaUxnc3CtQRL3p3b4aSpj\nl6M0zzScmvOMFYIpYLxTicqSeemKDjyLLyK9nHfXDx0heU+30Itl12TYLGQs\nrRt58hp8f7ty0ImtU3l7DVEJclUc1biNsyB4CA7dMWr6sn3lSR+/rGNCfXfc\nvSPqtb7bLC/dcakQxNj/NJnlffJABh8rRzWS9y+LwWXPqqtQBL6rnDyGeUN3\nzYEWKm+sZT4XvQ4eNSUqGYuu/6hv3Uh59+Ik5ZayjZ6D4Jcsiy1woDzAvF5h\nkiwfwdseA6MbmKMcgz2f7S8MXkX3j2azU9R21P2JmxEt4YKe2WcAiyg+8PP1\nKgyp7md6QEqV1sTWQ6a7qGoJO3bi3TF0diG0DiwNks4uwsfKUPixCxJi6cjc\n2ZYlN6fOzkBgEEb0JLsRXSB0g57wnBzitpBxFoYgE946hbmK3oWyHhDR6r6s\nB91G\r\n=DO1w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.faa9af310.0","@material/base":"5.0.0-canary.faa9af310.0","@material/theme":"5.0.0-canary.faa9af310.0","@material/ripple":"5.0.0-canary.faa9af310.0","@material/typography":"5.0.0-canary.faa9af310.0","@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.faa9af310.0_1579020818258_0.7984449063498122","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/form-field","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.60354c577.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"022d394dbfe4ad663f88371b217ad81d1f24b2ff","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.60354c577.0.tgz","fileCount":33,"integrity":"sha512-CBgJbPuYUsDTfV97yN7OPn48Ge7LdA0SQXCpfXqDs1WCAJkeyzMYNFwYk6iz9UZA2qvrIp7xbjgcOtDveBYuHA==","signatures":[{"sig":"MEUCIEMh5jcYf8ZgHjfXlUxtbCWnrA2QGg+XR3WCdkCmZtDRAiEA1P02EDwj2bBKar9r9vKJhdX9pnddnZ7VnAGM9vkWLCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkS4CRA9TVsSAnZWagAAQB4P/isUSQ/XI5pJCbjtnk8x\nuSwZOjHG6zhZQIaojAvF3A20Wne6AzaIDbV6PBqcFWeoRQjT7m25W2nTtdgL\n9qD0lHyjJ+OS43AweBfrYZUmGfw8CgCErxFRvGgEjHsXGxoRxd/CV7Mj1vPR\ncseNhX5zxQJAZZiZRUEeme3jZTv6KozDWMWrJda6f2IaGmj64ksjL5ZI3I9c\nxUGKBmvu7tN2Ib6flkXgFhNLIhrWhZ2eicJAqdsr9hyvnqi0cX02vKy9BO4i\nrz8rnYAOuu+UXCgjJvIgYNMVj2OR93nDvXjT3w/BH2JZAJG9HiiNYLqeisxE\nR7dqeyMTzGvIhKTRbmpX/5hMDoIOhP4iSfEAqNg5QRIQSkDQ5OzFKifqQP39\n038U2I9ybj+tIGY6hsTApncjHnMeKJLvgvuYT8E4O1J/dKeejFSf8wvdsmEh\nWF3oup2nIU/f0xSu8wg2pDiCyZc5592GOqviC91XutAgHAmNPXMkP9W7UO52\no7BmtFkiYei6N8UUbvfmTJLsJmt8gbghVwcRt0ckMetAvtrUr0DA5jSsnZ1B\nXk9blO74nSJgCkvIfX/6Higo5HATP6iUyk04aX+I7jCch/rjGf6i8VjsocEo\nxDNSNB2PWeYb0p0Xob9n5gniwKkgCc8jswkxwi4odImRXzIPuS083tK643mO\nJDH8\r\n=2DTd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.60354c577.0","@material/base":"5.0.0-canary.60354c577.0","@material/theme":"5.0.0-canary.60354c577.0","@material/ripple":"5.0.0-canary.60354c577.0","@material/typography":"5.0.0-canary.60354c577.0","@material/feature-targeting":"5.0.0-canary.60354c577.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.60354c577.0_1579041976509_0.3171610205226001","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/form-field","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.d07c78daa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"777e519c33b2f9367030127a4530431407bc8b69","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.d07c78daa.0.tgz","fileCount":33,"integrity":"sha512-5PRcp3BW/cR75qvK5rXMY94hlCVwpy9GoglfX1N6TqSDnMfV9kzaPb1Ufj0Jpw5sq/X0FlN7oAu+n9lVRMtGmg==","signatures":[{"sig":"MEUCIQDl6QuCyJQ7b8nkI6HL4uFGF7oq418aIqs2VvnH6EMO+QIgdofP/hCCPANPK/MuIVQYxuR/bddR6SIozolt2Penr5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlEZCRA9TVsSAnZWagAAiLYP/1bhdWMLV9UXowqDZku3\nIeQPa4QYt77vsGCp6B1PABmotN1Pmga6sVNQE1D/quN2tiNSm7B9chl8skOr\n3x81/i/AgB3PFYSBeazEIZVFWCuhkuQhD8krJqa6+rfCp8JS/HdokN5UdQzy\n0LatQu6MivTkg44CTqiFIw63h/FeWwCPGLDA5/ogJp5Im8bJLjHLREagj54Y\nQ8ek71psVH6mo6VzYX/ltA77pU4B/0FF+bwUOVUfvQMeVYF+CCWUpF4hY1Fn\nmI2fKq0D+FYgtnkso6YJj/rnwgrJdS+Myz2dw0cweuxXecfMQdDrMqTh3H+G\nzMexTCBEf8TyiJAmh7p4o+364okkQlavXP8Orcg/zZbrO1QpBjKjVeXqw1E1\n8CBFiNOVKvNLrJfnnXluv9ZDnQkajH8VP8zykCZLIoAX0eqMg/0ZLcaLw+Ug\n2i4/hMXC7u8A/W/GZk+h8XiHWzPYnu++5+9X/CTL5velI6tcdcevhixZuyuE\nE7Jb37XqXTKJOCFIoR55p3rqOFoubEjjOCshiAAdmjr147ZEgfRbLGFOPMKM\nvD5ofkkOqqK9DW746umUJTAPEubm7Ku6Pgf0wtDiWWj33TS5lJp8x0DHR6l8\nRse/urG5FsirIQGcBTQIKet3H2P9kOTlQomsPQ6+jl/skbNi6dRO08i4jBHB\np5MD\r\n=N3Uh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d07c78daa.0","@material/base":"5.0.0-canary.d07c78daa.0","@material/theme":"5.0.0-canary.d07c78daa.0","@material/ripple":"5.0.0-canary.d07c78daa.0","@material/typography":"5.0.0-canary.d07c78daa.0","@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.d07c78daa.0_1579045145081_0.37168911390270365","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/form-field","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.8ddd5c6dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f24b2e73ce5b5fe0900da301622c3544ca0af1d2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":33,"integrity":"sha512-CHYqkBDgugG/hW3tOc4uvfU2MAPJEwj9O5wu3F9X6k2lqw8XUBezcBLuPe/gszjpfkY0q55OhXFU/M6GH73WZA==","signatures":[{"sig":"MEUCIE8tTZNMaHYZaB3tlzP2rPnT4NS2Am8JJepZ8hYFwtqlAiEAtQofpQd38uP6Z96a9AfxgwhAb75truT3M/l+hSgsKX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm46CRA9TVsSAnZWagAA5cEP/RIEaeVR9Z/EqqxK/MIf\n5KLMhx+GtlmWOAEq4LfN+cEr6hz3H1WDPs1IqtowJdF0NRScF2QuE4vJz7y1\nTB+LZMIv01Y5S9a1iptcUBAdUlAAIaz6EG5tWg1Y4/KBWYzGJyn3NNtfhPXE\nOU3gBQPq81PT2I3xbfm07IrjvMIwED/bIpdgMAhAfv0X8Xo9sEmgKK+QZSqF\nD08Br/gZCeMbG1litJmYKPMHmGuefqzpd3ZcwLcdDU74oNEqVpLsPxewXYWu\nYJDJBOUBHMIDN9nAkR6LT+zCjhF4/EkwxuspQFQa4JZ+jquey8q54BLE9Rup\nXdVciJv3FPgI+Q8QiCI5fa4ym6WiGSL41XsM5Ym+CZH2ZrlngCRe7oqAqvDV\nU6F5RIHLSqmlR9J5XEhJIHggAGZXpTkVsmzTByisgi8Ew1M37Kao1ZPyDQ1g\ngUzRL1/j7BKkHT0IKbSacaNrSBnQnNjnN4WoIgAM6Cc0o9wAwlmVtI64vYqR\no5iodRKHrL4ft1t9aB6GE9SbZP3a06DjaOuAdOwpK4A7q74SzGNfNDdKBVn5\n5jmYPE/9WGHJcvTH7JUEDyacCgjBSGm2ueW8uuKmumO9eV0w64cNcUoavI0z\nfFxo+ympndL+6rSkUvNUMuDvmZiop3NsGkCVGA9MqfgOs5yRAGTFxjS4T2lb\nF8ZN\r\n=p3ed\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.8ddd5c6dc.0","@material/base":"5.0.0-canary.8ddd5c6dc.0","@material/theme":"5.0.0-canary.8ddd5c6dc.0","@material/ripple":"5.0.0-canary.8ddd5c6dc.0","@material/typography":"5.0.0-canary.8ddd5c6dc.0","@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.8ddd5c6dc.0_1579052601682_0.5446325560787417","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/form-field","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.a9511d870.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c6042d8feb794a11caea4a8224e71f97ae1bb2b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.a9511d870.0.tgz","fileCount":33,"integrity":"sha512-MwkE/6peYGLzfGwld72BUORCTJOjVkZf3wJNIzhirMHrvFUX34QVy914QEIdl/DJFe0N/42gXoGlzMbAbaXzXg==","signatures":[{"sig":"MEQCIChZqLLrMn1NJR0kSEcp66M+0rONLBYnHndnWv3dhXU+AiAIyjWyjF6NJhDYLqYy1S4Edhon5Q/5Q2KGLfqwaw4B8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2O0CRA9TVsSAnZWagAAWoIQAJL+0dHExeaZaeG5pB/9\nn+54FG8sSEEMN4rNjUynn2soLv5GdZk4rlb5m+wKftTmRG/QHLR6HNIipYp1\nbfYbrlRAyEodi2FR9RZnlAIaB3RRNgelSYSmfYjmY3JzKbB6hNAq7WlpICrw\n3aQeXgxKu1O1dUGzI5/eVklmiJ/xROIvGWpOsbSbvKi9E3O5O54Y0dHATBqt\nkzDople8UocXXaU11nPN95OcFn3J0zqH3E1JGNYEtnMD+9qtD2ZRBT7QSb/S\nl5gPz0T9Sdj8IhndiX+/26sLjBN6OVgnksRgGlzkzVf76Xla2EDROhfypi3z\nzOAhio1PHkilwmx4hlc8mVvrIXXOyy2hMY+Mn25qGfFDxcnF0smtBue+BfkE\n19ueiz4WCVHor5pIStQKjVPpe1eGBWNEUMNS5xMYiuz3w8CNRVgpGWxxR6US\ns+saWe+xyU+O5e2VwmhAjLD+4Wor4hQD2FnN7cJ/sYqYSxP3z6JkZ4brTN6G\nsIsjtVVtLy9Uhj0GlO2dIZkN+cPOCUOx65sHr6Gzac95cIW26Ydf/iWdFvw2\nU4TyDWVcOvfry18J4dKvCVC+QG4RkAejQPkUnDdk77NxwV/J09p/FYQVPAq6\nrw5mdJ3oN9HvCPWFdY9NWQvHgKfWME3ztW1SVPsSYO8o+B3ZXkNX7dxz9vaU\nT7Nd\r\n=9WC3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a9511d870.0","@material/base":"5.0.0-canary.a9511d870.0","@material/theme":"5.0.0-canary.a9511d870.0","@material/ripple":"5.0.0-canary.a9511d870.0","@material/typography":"5.0.0-canary.a9511d870.0","@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.a9511d870.0_1579115443989_0.535060352804787","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/form-field","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.7c8583c4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f66afcb54ee10da7d91817f89998b994e1c07a0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.7c8583c4c.0.tgz","fileCount":33,"integrity":"sha512-P3sUdmp5MusAl3Y0o6vMpKoXcpHcyF3jyJju2aGdasi609l3w+BV5M8SlAfi3Lj0dr7ztl/lpqIZyWNeVD1mUw==","signatures":[{"sig":"MEYCIQDzyJpWVE2T9DEzb0rB9WecWJ9ShEZr4CbgTXhAT60mMwIhAJujBpqajed65REcMyCjX49PVEhBEOteqUtTMY2P9g2A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5a0CRA9TVsSAnZWagAA8gsP/3tliDmNwO/JAWrcgRrI\nUtIvEYiCOqgBoJn9ssq2p3YkooAEW6Bdmq3ngv+NqLqIY7ojzDa9wsOEAEac\nJztznQncghn6v5Z31gRSe11Vi5auDm3BIV1aOdQ/2jevonTjoWNY+0vNo83h\njLLtCbY5otFO+OIUiY6ugvTNS+IvMNsYSRQi+2xyg9+duCFAvD4ASs95DhAD\nqJXw1K3iVy9BFsi30eRAkgSoJxnKARQNGoWQru3bbTjTomSCrMN75Kr0NUDD\nSRdhEL+6ayQl+w08NkLXvA9VvwiLE/KMxZuj2cVhgZxv3wIDVxsMjGFwQp9M\ngyPj5oXLRTlCZJi0CEaOO8BcwpumqyocRC4U0p31y6CfZTbY0RQQJ/hNIQep\n+siLxLn1RUZ/rZUkCD43/SqZAh7ritgOr7RnDEws4nieex7tBQZhKqPw8i2O\n4n8dBxD2ChNplXoSd7uoMkW9tyhcVlMcHHUfD0xHm8eqD27qu2uCj25e78Ty\neNa8WqpEMElWQk71oP6xzw9FlqtXbkNpZQ+Tr73N7lPHWe6RdQ002mwVT78f\n6VAPW1xv/rhCOUiEZzxRzM/vPUHGLZmsH3ui4tyoS6oR+YCq3xXbT4BROTYI\nxYObZSL3Wo8stlqY8E94VcoPlbUKF9t98eKZWLoj+9SNhRq5UukM3eAp4UyE\nZZ0q\r\n=2sKr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7c8583c4c.0","@material/base":"5.0.0-canary.7c8583c4c.0","@material/theme":"5.0.0-canary.7c8583c4c.0","@material/ripple":"5.0.0-canary.7c8583c4c.0","@material/typography":"5.0.0-canary.7c8583c4c.0","@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.7c8583c4c.0_1579128499636_0.21666496778707534","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/form-field","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.5d4b82bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"791dc6c99869b8ef907fdaaa24d978c3c7d549a5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.5d4b82bac.0.tgz","fileCount":33,"integrity":"sha512-UN62Rdm77ACHe80JfORxgGLi3aRVpp+WSDPW9L7OjRMt3VE4kCwH4mywCW4iyId4FxZFazucxGPDSeR7DbPlOQ==","signatures":[{"sig":"MEYCIQDgubSULTEsUb1CXV6QJ+Lu8ai2L48pVC+Vlkm8+o7xggIhAJO9TZ8nujzydGRVuF6aZQ+HYXrBCkmpudq3JRKTNHob","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5bLCRA9TVsSAnZWagAABZsP/1XL1jtkTFacH65yBu99\nxTNQtkZzRAflYUCONYbqIKOmjVMe8S6ckmx/hmsJCMlV5BOJVx1/1/7p+9Nr\nd2o1mdLKQkeoQ6yJhsgenFEOVCtWAyb36LghjHqwlnXhFaD9WwIwk0ZfJHaa\ndkr15zueb4i3fW1tw+WxeZqAUcEG0KgFtjJaW/kQ9actd/IIu+DYp7Wbajdu\nu8ieDE6ljgxUgc3sugUL+WOfa8vFoWsN8WJfOpoKgVkoqJ/CQn6BWL1m9oPn\nOkiBMqbX1ISQL7ZLRZU92qJ/hj9u1zBRehE4/W+2UW3qusEauUTgKxti4kZb\n4dYZi9Xg3JyjAwitO7ZWFXjrFC0430ThBHJDzB8q6/Y37B7yryv9ERasjMvS\nfVnpPuBJdbYpvTbrK1ibm7OSeliEXYc2/c9LyTXiF6zEgflvgL8VSsZo+Zu/\npWlTbg00YPbjIF+UG/x952d/X5Fybz9hCU2etH68fXQmEgeCTU+qZPYCR/kd\nF6x/w/Db1QygYxILATGQozbzPUZyKH9c+kZXM0izx29osG2/4behVBe5EpEv\nfZIAbcJjkWY7R+fnAmdV6qLQXqiVUlpFui73O+xBoU1LGFQLaSnxa2iU7cB5\nMgk2FQ1AcfO6l+X5MSb8C24dQzNM72yK1pi+pzP8tHivxTzOpFryIfBPqPFE\n4O4o\r\n=iFsR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5d4b82bac.0","@material/base":"5.0.0-canary.5d4b82bac.0","@material/theme":"5.0.0-canary.5d4b82bac.0","@material/ripple":"5.0.0-canary.5d4b82bac.0","@material/typography":"5.0.0-canary.5d4b82bac.0","@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.5d4b82bac.0_1579128522866_0.4015184857956624","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/form-field","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.57d0186e4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf00b57ec4ea965a375d6da0a1733850764d7bea","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.57d0186e4.0.tgz","fileCount":33,"integrity":"sha512-bdUpPgz8KUGy3CMg7H5Nq1wXG1ZgJcbjqOHctP8WNyJxBKaAP0mrdR6L+BdB+k41jtE7jYQ2vmuR46z/82SY8A==","signatures":[{"sig":"MEQCIADylfzU9qsWaUip6iUOWOP01Pq93GXCxbuiXAhytPkjAiBNP8ZWwcn43/3w29MtN89rWD1/2xt8ZQJ1F3xCfv0f6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKjKCRA9TVsSAnZWagAASDkP/1MGvEnhrckefIs7UzVH\nB9XubhQyn+eYtoruWPjJ5Mp2FykWibLzeVYktS+aO8wPrip70Tmh6tzg+uDg\nk0A4tk+ILkzDCcWgKzOoe1MBTiFMzb2T7j6Wuf7Jr0HBJnlhBck1Mu3wpudp\naRKkSasrAxFTc5wbYoWEmcCqj+4IM5gm79z0klEjjhJGxdR8iWvXCqy9/YLe\n10tpqQMFEzG3pmt32AYXxJnUsKRnskaNOi3M8uDHQQsbF7k7fEVj0FWJdKni\n1Arf6MuIMdcfe4Hq7wTY6bmY7jJYHc5yCuVs8MpRkWmtRGxHWtjXSDf961tO\nGN2AsUdSYwzb6PVwzpdzvPzOs96tyw59vKSw/KtZRRv1utD4CgG0vYGp5PDF\nMB+boe0puZ7ohh5BfeuOs7NzJ+o20n7JqEdvghhJ3En3DeRQb7OJ7IrDvSa7\nXy2dqwtTGU6hEu0QnhYvsZGUX+zQncxaU/270gMYsBbrmZTCxeWp68lZ0K0B\ndRC7ljqmpK5cq9WWcyzW1ZSZ6ZHwrhKTYKrpYEFAR2At70GqmFks0SLcOWKo\nvCMQfgpfJ8wp4OHMiN6u63vZVTI1Dd846XSw2CccsNi4Np/EfTzv121si09K\nsqtPMfnySSTc+8TcFn4OHTnwiyS62EULkmXb1W0991t+ohEU5zx4Bw8mxvaH\noR7l\r\n=DfcT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.57d0186e4.0","@material/base":"5.0.0-canary.57d0186e4.0","@material/theme":"5.0.0-canary.57d0186e4.0","@material/ripple":"5.0.0-canary.57d0186e4.0","@material/typography":"5.0.0-canary.57d0186e4.0","@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.57d0186e4.0_1579198666234_0.9725834537858327","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/form-field","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.071a6ab70.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3135718591c6c5e7efb286fa628809eb3fa29e37","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.071a6ab70.0.tgz","fileCount":33,"integrity":"sha512-vI9gf/sh8ZYl0K7aOZIYda8uMygtDtKyLQjQCI8cm2vTXh1v4ydPhEReVN26pzCATY7ZSWLhrv7I5GprOGR6Sw==","signatures":[{"sig":"MEUCIQDRaRLzCEolplZ4mmDhljOoQ2/j+22AzkDybI+4i4648AIgRU6UOKvYYmLMbArWvJDlyoKHd9/pa1o8VCw5zgyp/z0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKpcCRA9TVsSAnZWagAADY8P/RwZj2DWwJHzPgJ8Hyy5\nXQHy70Wx2yTAAJmN4Or324wkeYe5Uq9SZGDwHjCYxTdnw3Le/J4smCrkaBZ2\n8NwMSzpu+z4DpukFIWaJKEmjNJajr6SqhZ8/aQD2TscwzYQ7QHmAPDJz3yTx\nS+nG3HAAGkIyKjDTZ8twWnpBlUG533SdhQce3k4Jr0HesGqTF9MKsoayXvAu\nxQDdNP9U1QXjFoT7iVaemkitJ2M6Mzs8G/0jNWIGHFDS4WSwEvahcEP0uxu/\neVlyi/YDo/9GSSXyLaR9r93bne6ErheVCDYQ3SeqwTkjdKv2H/uAfUcOSipS\n7GH++UdlT7kFiOfOOKk5ipZqgAXoM2xQ7p8Kj5u4WZO/j7lL8ahA+what/rc\ndXxsm9PJzrBfVizNM5gk+B7mokpSxfdvOzPS/xZ+Y6/9lLqPnRo0tfw0K0b3\nSVbXyeG1AnLcEDNl3C/O9K2SAmiayaL1fJixoES6tFJZRPq9pE63XoR2vb0a\nnHA527k3Vs8EjqPZRw3YalHiIRsD1EdXBOnH5hE4S8tlg0EJQ00pHw4a1cjR\nbjTdTj68c5kqdvdJezF6GfgAAXAeyVMum6+2t2PrSzypJlXRoHnVN7RQS3oD\n56r2ipMIEzLEjlqnrCnSfY7zXWFCGMnQHqUJ0N1PqQTwWhDRws3suOfvOlpn\n9ZR2\r\n=hbFl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.071a6ab70.0","@material/base":"5.0.0-canary.071a6ab70.0","@material/theme":"5.0.0-canary.071a6ab70.0","@material/ripple":"5.0.0-canary.071a6ab70.0","@material/typography":"5.0.0-canary.071a6ab70.0","@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.071a6ab70.0_1579199067830_0.9439649917150841","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/form-field","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.22e0cb618.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2e9882b362c6f399d65009fe76f4a75cefffe83","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.22e0cb618.0.tgz","fileCount":33,"integrity":"sha512-3GOlrTeRRnIgyNdndnEgeCi/N+oJk/fKN78xy63jd3rY3seCKdqkfSmEGx8HrZ9uSq4qGZrgKOFJQONk0dim9A==","signatures":[{"sig":"MEYCIQCo0S5qS1qFsbjdKUttBG3DY89ryS0KQagXRHzUFqQjWAIhAKcfpzsJ6TwlWjn0FPIVy2yM6tg7IJ5/FaJBkoddUWhE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK+0CRA9TVsSAnZWagAAG5EP/iqBd1xm3ylpwxSRt6lM\nfq/yRRqpHddegWWpQJ9Mhfu7cIgDeQhmjWahLLvnraxkvgKCE0Huvnj0+Czx\ngsJlGvnScD5oXRo0M4Hbby1EmptrAoplgaFJ4Tw9CSmLQ9CjTEYXr7fZivyJ\ncbYn8kugvO1Jd4SZCOjrXKYGMdchTUR6j7cv/1WkvnQqYCiph+iorSSPu4C/\nuikVnz31AwoikiEFET1L8s0NpZuBfSklEC0qK74YzTjtLTes5vBcJrj+C9/E\n7tF60Dj/BQnkvv6Vwg/PqOwUF/wfrdC3MQFeqLAr0FD3Qbr6KFgqofdz2oy3\njVU1ygteJ6P71Hr7IhsaIA51nAn+dfYLsCmDzM+k3aRM8ZvnLL1P5wyux5O7\nEvcY1ssC50nb3y0C2lN+6vwigM+swfFr1jEh1gwYuShgVzfibT8szoFZduim\nf15n7KuU4UbPqvgBTOk84xrgtpjy3pL1uj0VTXnXkZFKxFA2Ea4wekeqUpd3\nvvLmeOyruagsSlFzoySn5JUuFqLX2CpQsnt+4jjaieHmgnpb5Q8RsjhMblWB\nukppvkCzQ5ykK4pLZ+Z5DTXYK9VuaMcqy6Pqk+muNc6wIIQFr3G3QcEGegtX\n8UCVMiGd/LBgK2P9c9VZiqZsMxqWaiQ43JMwihge3UTyMrjuzO+VHH2VqYwB\nBAU8\r\n=envj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.22e0cb618.0","@material/base":"5.0.0-canary.22e0cb618.0","@material/theme":"5.0.0-canary.22e0cb618.0","@material/ripple":"5.0.0-canary.22e0cb618.0","@material/typography":"5.0.0-canary.22e0cb618.0","@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.22e0cb618.0_1579200435902_0.18325491818974116","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/form-field","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.f16f15b8f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e8c81c2757b652909a14620c59954995228677f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.f16f15b8f.0.tgz","fileCount":33,"integrity":"sha512-Inb1Gzb5QL6Dp8t6UsiiVunLKy3NIwgHbRGQNuhBi2drkjigctDrl6+yeOzgxvBGpNPlK8XwZzw4RLfdu1Zu9g==","signatures":[{"sig":"MEQCIDwrbvIEj8aFPkRq97vmRzhCWdrvryX+R1nJ80LTPXwQAiBysALlntdggYuog+IPTH7WuvwOczDWYiho3rpqifJ8cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPq4CRA9TVsSAnZWagAAOFUP/3/CiYYFP23IOtLtJjOd\njMmVQlb7MrVkv4pYYvPJm1J0xo4w5+Y/QnAObZd2kPTZ+axH+Orw7AFb/zU8\npemXvZ5XjYIggdPTSR9tm9Dqg81rLWgIBcwByLnIrOdC67gN616OGkMON2on\nZ1X++6zoszdkxU7nmr2ImITV0H015zTiyTU5dXyJHjA+C9yIC57SRkHHHabo\nm/5jyYW2e9TAPyAf7NWu9tiEp61vLLjTAklpDM0Oqx13KP1wcTXWr16QjRtq\nAqB3WwJCETQWh58RU9R7k9qzIABrIUh8dyYlmVEI4QF/MdGgvmgSlZz9CzFm\nZD7ZHDPiVliYmgWmT+aV5I+xuw9KrAAxFFH/GBzcclohFJ8lO+5JaZaPrItI\nIML05/XMqYw2CXsl8R8yuanYSK6jr7kRSx6PikY+pLoXtFAKvWFdMEedehO6\ny9NoFATIcSlH5DSx3nkTDKFY2WZ6/kvfHT3VfUOseWJJ/zxwynYCe911PFcz\nxwlILguBml4bpM5Pq57DzeU8GtMMBgrdb7ZkSCSOATNNP3KpYe3jmzX2NMDN\npcjEDfpb/Mo5wj+yywgsgnjacnk2qS0SGWBj9oOhNTnXURdTx84242GoDwrv\nlyzh5Z3wh/Ig1cGOI0KMeIhZoznN6ybfED9mK3ZrEiqp8lGv+CQ4kmRknjZd\nWP97\r\n=64Kt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f16f15b8f.0","@material/base":"5.0.0-canary.f16f15b8f.0","@material/theme":"5.0.0-canary.f16f15b8f.0","@material/ripple":"5.0.0-canary.f16f15b8f.0","@material/typography":"5.0.0-canary.f16f15b8f.0","@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.f16f15b8f.0_1579219640530_0.17740949179798826","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/form-field","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.aa8e43e9a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"390654154df30ffd8a974114df6baa93b9e56448","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":33,"integrity":"sha512-d51HsLh+svqIl6jJyCWogvAJ17sSIBCzjOdT2bYd+wFjoFCK6iaiTRTE/AoUnhnLZ03XwNi75lFGHgQNu1TATA==","signatures":[{"sig":"MEYCIQDQTt/pRtaAdtak+6q1H5PHOwuPN0up2PsWVsk2hGInKwIhAKKUrIeiVJUklskMXW+bgkNCqu5yVBDwMwEQn/bjbMsg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQGwCRA9TVsSAnZWagAAKBAP/igUt7hjrx57tfIzMolc\nVHOmcsiRTn7RoWfn9VMPSgctIro2QgvwCv/FcBi4tIZaUVfybm2adQYd8raG\nLjnSh3XFZLEbcuCCMAhzpEvmVJXTm/aKUOFHbgUA1Pq5BlpLS0PH/gnRaeDQ\nJncH5uvDH6mWomkjSXaQa4O3mb4zmYBG3VkAVshH8MyLCvcgj3EzrV26iI/e\nDef+XCT821DpWO8HBYBPO7AKc8r2+XySKoP+rG2z2NCwl6TkgUYckk6iXJfO\nlQQxXk1BIOuRacpr4KMkGwobVPuG6x4Qp+azGAngh0Pz5Gvs0F0Isynl+U1Y\nDsBa8o6K3zZpUppvxJCXy6wIW43T9fux/MdrUtvH+0SbEhwrmKw329vOqt6f\nr/GE7DScH2c1OX1K6Nvu+bs0q+8Zgldjn+cCNElF98ErByAtNcXeKFDYtAJU\nyAUsHtv/GR4/TN2wnNuQuzr+zs1sIRDovI89eZKZEPQkf2A7DXSWelMGxuFO\n8TZnCQe3UfaaKApZeR4wGNFB774ZWeovIKP3Goj12DniE0h4CkrD244syp1e\n7MwM5gUQhgasqKHx2At14KvSsMyVCMihW+xFPhFVnNHb+5d8LmjgWzGpkHHH\nS+E8xPMjw/90LEgYJAobgJPf1JTjSeLoIa1Gkc/gQDJoajLQy3iSRleh6sEX\n9MQw\r\n=I+F9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.aa8e43e9a.0","@material/base":"5.0.0-canary.aa8e43e9a.0","@material/theme":"5.0.0-canary.aa8e43e9a.0","@material/ripple":"5.0.0-canary.aa8e43e9a.0","@material/typography":"5.0.0-canary.aa8e43e9a.0","@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.aa8e43e9a.0_1579221424506_0.7075937787237567","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/form-field","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.fe1f3ca07.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb00086f24802b3efaf1f6839d1e9112e6c9c1ab","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":33,"integrity":"sha512-bpbl/Q4mAjphxSf5Ae5hFz8Ns20S6tHviYMM+MKBvzAxk1JNa34qrG7QT7gd3gqgSad5dYERBl/jN3y+GqTLAA==","signatures":[{"sig":"MEUCIQC8tSaD0/JSLj+x+keLKpMcAtnPcDJ6qC4oOxD1V/WP9wIgfCIX3b7MjtG6x/2E+yob4gbRDBBnz0vnXC8tnmBYsEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQc3CRA9TVsSAnZWagAApMcP/RFe66z5MMo3Te/NAVxd\nqh8sCt0rltYWnY/EoIXeTc4oRQodzIotjTApRVtvXu6beWhs/mtBQk8QXjim\n62+VhIYTTPkItIPL2YvunWZJ1WK1E2YOBbjld5nGcn0lfRfKE7G73+rVQI74\nbt+6Cz4Y4fES5cZ3WFaQVncsa1E3h8Qw/M1exBhMWhyb5vJxtwCR4LP51fIW\nhkXvRMY19dRvrDLFr9OlrNtDC9cqQ2Dpgg90Grw1hJRzJEe3H8IJ++QQ4mY4\n3Cm+QUV7I3rxQyR7v7lUEJxPG1feYgmCwgz6Jx7MpF7ED9dzNWrmCEvF1A3w\n1RGDSUvmg5zJR4AhMI+8+YKjDdmi9LQMHja9obBsIgHWpC1RnVeTvmB+fejn\ndU27Hm+f6PG6/7mbrZMxpzpW2YFM55PuGLVjbpxAVcszVZDJQRlJk7VJO1ry\n1olfEm3i/GBP49V8p+NXkWnOAwNhHuw69tmtkcv1lZ0g1ZMOxOtalmQEKLfM\nrLdMsYrGKrq2cB13SGP5DD2dDTHCY8JrqwG787Vt9JIyc7pkWBs7lU0KS7to\nWIhAJs9u//4xsz+Uhm1IU2OEs2T95OGwDI+xtFULBa7bpJ+GOdmAdoXV3HGH\nkE2L8FHkcCQNm5TQIOtLmR2LQj3q4EzEqZTzSoCa8pDj31a0FgxFsdp1dz0D\nEO5M\r\n=/YUU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.fe1f3ca07.0","@material/base":"5.0.0-canary.fe1f3ca07.0","@material/theme":"5.0.0-canary.fe1f3ca07.0","@material/ripple":"5.0.0-canary.fe1f3ca07.0","@material/typography":"5.0.0-canary.fe1f3ca07.0","@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.fe1f3ca07.0_1579222839176_0.3186455301514797","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/form-field","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.d405af26b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cbdcc943ee3151e789be3de80e3fc5c922a06f7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.d405af26b.0.tgz","fileCount":33,"integrity":"sha512-7Ea5l3HrYgJRUc2xmJsIzs0yjy2cL4BJm0BRGzm1dSiqZF94lCXBYorKNh915ubz/6+geJGZvt73Ka+D6PEN/A==","signatures":[{"sig":"MEUCIQDQ28bghPBe56uYbWkh/8z/AQZOqfrtHB5qqf4zqUKQ8wIgaElBpG4RV9sgQrrrZL5TSaBgWkgD5A95YQxMiSCYNYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfo8CRA9TVsSAnZWagAAEyMP/0npClhIv5XafS5TOkX6\nySoZPFzBbpWhU1s2ZLvaJjFZE11nap/bfxFExD3Lj+V2DCL8xvHeLeJPlZdu\n9UMjACm2XhpzF4OnVzrqOInzwUG80x90OknGOfH2c1xGDKa3uQB30yWexrEG\nnq+CnSRH3Eqwty9gf9yIA88WAFHIeBnYqoJ4Qd/VU5McoZmyHDinE/yJDami\n2/OrUJeg9aFmc3MKrkWC+qLjV03PV+wy1AoZP5Y0R/PWw6a46HxWlmhWSq9s\nUb0NXgd/zafj4QfD82zJR5UVcfJkNNaDzjr4f1rEadzQWFPAY7rVr0z8iWE7\nvz2cT+fY3AjZqg081Bb7FNheDvW2X6QP6m/njBTiXnfiYuWWGNZ+hg6WG7Wf\ncZc+nE4rp8z/blWYJMJ3bh8XEifqRWfp6E+cWqVyETDuGKXB5ClhQNDC6QjX\nOWEtybOSOWsknOQYVl472XwBQOkknKfVYa2JCetuq2PUswfJcf8hNfreoYlY\n60qLoeO95wcjlCFFgiAAih38Gy7y07eWtfV4Wd0FZACN0QCP/JOPOhNfcTii\n2uYfyIok5HCPnEtQSo4OlTh8VATM3JPbGnz1+9QQq3pbIiTtqoaOVLh1AQFe\nys3KhHVx0CEjpC+KDees67ec8bTUCk2E0pndqrj9M0iccEqN/c8n/wcMRH8M\n6vTo\r\n=ffO2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d405af26b.0","@material/base":"5.0.0-canary.d405af26b.0","@material/theme":"5.0.0-canary.d405af26b.0","@material/ripple":"5.0.0-canary.d405af26b.0","@material/typography":"5.0.0-canary.d405af26b.0","@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.d405af26b.0_1579285051479_0.16226521269068805","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/form-field","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.6e857aae2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"065d2b7f365169bcdcb81c84c55001c10984f06a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.6e857aae2.0.tgz","fileCount":33,"integrity":"sha512-ke634Bhpm1PAAggzSENiz+EFLzWFHSTLCWSQloOKHC9+dT+j0j6A/VXuiPjdg9A+zOt99b7EprMpQCHg47JQKw==","signatures":[{"sig":"MEQCIH5y85k7brKTCJTC2OAvUUr6+upjLv7IJlt1q7SGFv66AiAs/pBGeIvf6q3XaJv7JGP3RbSDNOm2Vuz9ihnVGzLabg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfsPCRA9TVsSAnZWagAA8ocP/2066pGBVwwZnrsV7Esw\ncZkSdsXohW4H5sk3lKUsdRGwZiiH5TmOAPStIHrh08XM0W37WotLLMqBoY+T\noi9KYi0hJDmIdMjBTITHD4282bBPWqCowha79esqwD7/dukixt9aHfzF1TFG\nBMW71AI3k3hoqPjSiMGWvFSpUsYR3sx08BHVjhJsNR42zSyCrwjevREmZaCy\nAQQknlB+6Mo3l1MhyUtRlXR93A7bC7e4P67Esl+L9SNwHpVQzmkK5CgKkc8I\nLsh4l5QwvtWuW6/8rg2Vy6GuUsMTF0tHMe0WBQUb9rjUpbsmPxXFBPCivqcG\nlEmZWf49kkd7xKJKdD5S2VJJUL9RKfa+Jsb3UzBgRJ768fukKyr3QT4d2JDV\nlHdkrgPp8n5eNd9D+Q0Z+qYioq5Ei+KbCId2DoBaYjBtmhS3PYRa6rVxlL7D\nBWBKoOV9ksbluqmddqkl1CS8L3Y+F6LT61LlzRY6lJO9imKWkfjPAypxQ9aP\nOO1Y46fjUBOuGDKx2jFyg6BXjl/uupKP0bytm6c/BdMG7CXR7chda6d/kDu1\nw4TsrBK39q7ku64YeH7aLvk57wOt8zJ8ZmGiqetH3myqBRTGhyEtF19lF7oh\n1qpQU3NC9p2wpz3thSc8GTJJWBoTIVQQ9+Zlo1JSsJkGjiBmVW4a8JU2hd3M\nU14+\r\n=ag7k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.6e857aae2.0","@material/base":"5.0.0-canary.6e857aae2.0","@material/theme":"5.0.0-canary.6e857aae2.0","@material/ripple":"5.0.0-canary.6e857aae2.0","@material/typography":"5.0.0-canary.6e857aae2.0","@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.6e857aae2.0_1579285263361_0.739144361953477","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/form-field","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.e2e764f7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1ff56e9786ece9532cd01179d5ff2c47501417d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.e2e764f7c.0.tgz","fileCount":33,"integrity":"sha512-yec+Lr5vlx6qK9wg8jRKvp6BYajdqpz2RikToV0lSgiMjUGXqBeeQC77NHwGbETBaH58QzhA6dkmjE9LRyCaQQ==","signatures":[{"sig":"MEQCICkiVXg0wAJLEjSPgGAh2lhDp+k5jvPjEBXiqS1RvS11AiAugJx81P93T00RH9XIF0+izpv3ypu43EvSRpwmA0kDsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf6hCRA9TVsSAnZWagAARp0P/A0TWhsFDQdxVhRTI/q5\nYyRZJptiELRBq9M+y6AS9YN9UDvm0rwx6ch78IoHNneiexsQdSahP/pfPWz0\nWdI3fVfWcwqZ/itZZPY2bAksgCmNqZullToClhzFhQ4RcWV1N6ASpAPRs4iC\ncMLIiVJoLmO9NeIXpYFaHpqDim55Zj0h2fQ4OhjJAERyTuenz1JWeEBju8Xl\ndaLXqdxHzYq7+zxmzp0QX785aGjrspmXl7AKsBh6seGTnx3C6zybcXZ2RV2y\nQgY8xZYLTvq4/UydPzCOLV2uoWy9c+JXLjmtseEJgslDWINgBwVqhfvedgwf\nAIhnX5qIpbGyIyuvDq5fkp4t9DZCWj93PCHSA80xwPdigtVyzthFW7Ov3Gsr\nxlKSG+ZEE3FjCZMq21anfAmDF3FRP4u7vbsXkuBdRliXng4WMXeg1N5Suu3O\nKRRAW1wDKbmncky1F1UHkak+bSf2w7fyoFkL7lg5xC3D9ptOcx/I7ew8cGKM\nPV2xXlWP2zPgBuyiblxUe7OK4wLUF5AQ3PKvW9bZ0OF/8Dj3XjAdOMiG7Wbn\nYLUGdAskLKXqhfvaliwvfqy8ND68iboGsuU2xVv3hD6iTzRADL9CYZhAMznZ\nYKXbWBl4zK+pSBkqFIRBBnr64k0m3BF0rPrZu/TPH3aV6S4O3dEUUgPPYHfT\njnAR\r\n=5bwz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e2e764f7c.0","@material/base":"5.0.0-canary.e2e764f7c.0","@material/theme":"5.0.0-canary.e2e764f7c.0","@material/ripple":"5.0.0-canary.e2e764f7c.0","@material/typography":"5.0.0-canary.e2e764f7c.0","@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.e2e764f7c.0_1579286177272_0.9141894393939594","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/form-field","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.7ef986a87.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b76831f97dc42a18ae018d1cdc5f009596bf6557","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.7ef986a87.0.tgz","fileCount":33,"integrity":"sha512-Nd/Uan0gdxJOkYZ7UCDTXXcM7RPcs7F5sy9q4HXPcs3l4zh2bFi/gQRQjtNc+01m3uWHGpsICpIogHyW5X/GXA==","signatures":[{"sig":"MEUCIQD+HHXsF3NYy8eTnuvKtUt2TSXx9n4w/NAMFdJPSLjZiAIgHk0HrPF5UZw9fVxxl8QLDJuJL1XhAy6p3PA4kqLhJ0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIgt8CRA9TVsSAnZWagAAm5wP/innUdI8tBBEEn0zEiaQ\no9a/feEiKpATVFidAHi+4AU2kfaWvO7hkCxKrjrDTPDaU1wLCv/UurhdGV3v\nkDa4IJt/2Y84ZmUhyGC3ivITwoi2PGriB/OZ32xAmQ9xoqneGwg6wdvyKCUi\nb/a1PEZUhEXUlmyEEfstAc8/OZRS+93zNc89L92T67HkIK+treH+pEFpPuiq\nelQ7i3pCNluQvPgC/xgAGaKpuzujxGz70ls3OEDBNltFj+ZAMPjWxDruf/8y\nDYUzFhuLAK8swkzkeY6z9/dx48AmKV/V+cluZGq/g1WpCnaXf2aoeo4t2NiM\nUXQBcwyQqaMfAVbc2IMgmF/YwCu7+WzlP1tfSnKCYj9gAffLd+4+4mjmgCpm\n0RXbjPNqN+DaEUh6ITuZ2AN3jm1Zoe8hFHwMhjYJMqYwQpWjJuMmVoT9uFza\nyWVh0jnDKcHYKe5dEyxf4NaZ6Om+YiiUVVQimE3eSNvCMLvH3l0zq6v+Q4ue\n7D3smdYnyDvqC9YgDvcdDYrOMr2uZn4oBM5wEpMbhXRBcO0pV9zpiDkRKjfm\nY/dNJz7XLGB8J63rAmawxABXFX9ZpCRDkj1gSWoRYcfJKfDdhCKYhx2ki6j9\nboXI0TW26A5NvWoS33aVcIvz1WgYPs+Nv5hPlaHdOT0wEkIhZ+mv9zO0jRSA\nYRut\r\n=hbE8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7ef986a87.0","@material/base":"5.0.0-canary.7ef986a87.0","@material/theme":"5.0.0-canary.7ef986a87.0","@material/ripple":"5.0.0-canary.7ef986a87.0","@material/typography":"5.0.0-canary.7ef986a87.0","@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.7ef986a87.0_1579289468560_0.2580552231510451","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/form-field","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.29402e2d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"973a02432071a86bdc6bafa6888f277be5702756","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.29402e2d4.0.tgz","fileCount":33,"integrity":"sha512-b2dKGFk8jF3B/cZegTRy5mt7pX2kq6ARuvmMDZ1uioJeRu8/Pxi8ViVc4tYHknvOY7317ir7+0pWqrN1e2gI2w==","signatures":[{"sig":"MEYCIQCsKLnpoCbCktBfH/jgH/iner0kdQnPMs+XJj9bv/mdoAIhAJ2+Mh0J9KIn/wrF8EOJPGUR+aVDtqiSOGvsapJGGC7+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhumCRA9TVsSAnZWagAAD60P/RGq5jtzwE0ifvc87Jt3\nv6TU/OuLLFtsimuPRy5z4V37cimMoVQM1rM5sCqihovmYyONfKunQEe+6EYi\n9QLm1R1Owsdn2vLOtqyw/ZkG2LIWseReFsrynUa7t/61eLsWDRfozb1WLYif\nQT1fKwhz1EsvjYzwN4CZkVx8RMgze6FhQjvDPGeyzKom0hERDLZO3XW4M0cH\nD0F/0N9bhqzt02L4IYHMnG64AWBOuuHozF1H7E2KE50XtEG7dt8N5+xLD5fP\nbB69lvEgfZX8GP40gbudN4QGispN6aFlnan+MJIEznEbJAPtDxGxiOsAQkpa\n2jFQtCAFueQJ3tLmYEl5wv7crBRk3cu/d39GBJNGSZaLG1lby4auadXV/Fwa\n4i8QhCYlOEenWdKGUDupVWwToq96oQwANqFc4ChClMzp9wtSISaGhntgdTXK\n+5jNfJpSxkENyGb9xCPSi3p1aVQaQdPkggNWc8+JWgc0ioQNIpceb2TEP/et\nHHQxAb8yugr7l2aOYw54BHt49rHj4Ya5AzMYTpPFqhwLMS50fRg72zi4cByk\n+knXsreqJnUwSCTKOi4/6hIdpaIkfZdaIJrgGfXoF+WqczByPIKbDdKerYfj\no/U0GCGhpI0y9paOfr++cklPHTUMMW8fD8stSnJAeBg9Ivr4uGCn7DYfWdjf\n4jtp\r\n=Mc7h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.29402e2d4.0","@material/base":"5.0.0-canary.29402e2d4.0","@material/theme":"5.0.0-canary.29402e2d4.0","@material/ripple":"5.0.0-canary.29402e2d4.0","@material/typography":"5.0.0-canary.29402e2d4.0","@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.29402e2d4.0_1579293606540_0.3150292184010357","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/form-field","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.2b3ec563c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9db4a8b44914bb77f3007b75950ddf1431a502ba","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.2b3ec563c.0.tgz","fileCount":33,"integrity":"sha512-svXwaqiSPuExJcXBRoneKSMvQue2KQSdozMymDPAXjPiSzjo+l6RhUG0QAinxSxAZztVtIxvQMjiZjm4haPpJQ==","signatures":[{"sig":"MEYCIQDX9vvl7OYksYPBWqNorNSlxNSuLDJ3BCEfLjuzgpPMHQIhAMt5z6KKaPx/KHGvAdGXwaIdhx8SFUYwhkTweoWxX+Ka","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj85CRA9TVsSAnZWagAAUX8P/ijVHoRgMvsntZc6aMiC\nyF5e+KTZyJdkkqw6FfAX1kZpqWK9R0bRcUfoypQnyk2yR+oL40xHsx5Y2YMO\n/G5ibYshHQHXysugDwu07Z34pxefVBN0qX48Qp0DmSGV/HRAZ0DIxGwQu/S5\nIgtxqn72d0+aS1Nb80yuk3smMgAe7Cte1wbGAc+8bYAO6rwgAVwrpWoIg2nv\n24AJjvEfGAe056KyJ28lZNtlAwlf6twn5mhweoERAE58yEPmdK8pxgaJpOFC\nYdjIbe1T5PWUYdldFm1QzFE4HV1L7cRQ6Yfyf4v89VnMHYGyI4qmdrxt+hjv\nlDgEGQmWMX68CfIS1sAXYobbHT6K6OJkFrGi5+Sa8klkDl+EyuESRf49xzjy\n6+h3n8cT4I4FVHWY8ptvT2itDbMOcvZo60C5V2nCsNzmyE3YmBwcczxZLt1q\niz2dNNPKfY4oJHd91FUcQBpQku6mMGnP+hxEu6JgsFykc36ckLku0q+K8Gfe\nksLqalTwaL5hEC/1vWhtQLW1u7lyVjXLgflE7VFaG4O5SRms0H3OqR2VkQqO\n0UVlWsYfaxYjFOv0kAoJX1bRNXmVYVtpw5fzyh9oqMy2Ur8bKRRMeDlwck1W\ncgXVftaVyE0RwOEg9tcKPbvhcTyrpGZTdcgigQgxhNRqb3HHwAdgzMrBSlb0\nKbgQ\r\n=+4yp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.2b3ec563c.0","@material/base":"5.0.0-canary.2b3ec563c.0","@material/theme":"5.0.0-canary.2b3ec563c.0","@material/ripple":"5.0.0-canary.2b3ec563c.0","@material/typography":"5.0.0-canary.2b3ec563c.0","@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.2b3ec563c.0_1579302713371_0.18866596654099754","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/form-field","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.e8a993677.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2257a3fc98c05497761a4e7fb2c42f8844f0f0ce","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.e8a993677.0.tgz","fileCount":33,"integrity":"sha512-mbaEH7pou6nMs8nGVAsXkb78JVeRe1ry+TnLV/38EqKLIoeMakH30NQlYLpH6ltn4msaUK/PA9RCpSZgdKh9xQ==","signatures":[{"sig":"MEUCIQDoIw2bJCRer29qLEP2Ss0aPXsgOgkk6wFUZB0r0YQOUgIgXsXjJvPJ0CB/rXejq+HTxU6RL+rhJu4QwEAzEXsv4o0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyvECRA9TVsSAnZWagAAKi4QAIjwt4fvbdVnTjV2Puvj\nuKhNR/Ht6v4QIFft1jfoTXBRTH93iiaAmkIJrdCLWF0NDgodnUmxUSnEm/uG\n9Ht/WkQyBlJ5juVbf+EuQ2+BJdgoVHU+kHL6QabXdVyFzrM+9aXNGRzhnZdE\nEQHfdB5yz+Gi8QXNPAdclU8WfyfLj+/C20GkmSLk3JlBWhGfirbGD62bYGmT\n0tmAKLHCbff56PL8Rff7DcDvGZ3ja/SBQEc6JY/KPjdpNA/9j43tN1aSuOep\nPdXQ5FO9i3VdA+kaVR9PBZ1YvhaVVj0Ibn8KMo+hWwQXoteAevtxnwL/hONt\nSGAA0uRallXSy75Qdf8L3bpjQUALevDCwvPGKC1IWx/Q3fyMSqhY1glsek+S\nEHAGVGWruffh7r8K0eoA79GkOVfVc1xSef8gIZjapqIV7feOxg7oQiFmbpfF\nGGHHmVJmHF0KasLkKF9Gw4Avu0xEtCMdnt2JMUg2C3cfDK6EPWRoWyff+68/\n55WEoCgC1wIUkdNgApaoFWjrWwKi6cGVGwC+31ZY7BMs4KwWPnXnd59dO8LT\nwVyKDXHo+rxCLquTVZ8eOPOy85ZA6seNhVOf4mjHnnZaiXAQpST8Z3YzwAEs\nN0Mmgx7oJmdebKSUENY8ikV+ke1gDGclP3HgAltGltzormdsi4P1flDzA/zm\n8yu7\r\n=ce9B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e8a993677.0","@material/base":"5.0.0-canary.e8a993677.0","@material/theme":"5.0.0-canary.e8a993677.0","@material/ripple":"5.0.0-canary.e8a993677.0","@material/typography":"5.0.0-canary.e8a993677.0","@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.e8a993677.0_1579625412019_0.11981501423673269","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/form-field","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.cd4903304.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e774d2cba90ebf0bf3eab73bd8149b54e37c855","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.cd4903304.0.tgz","fileCount":33,"integrity":"sha512-+trQ9e6D5VIy8FXasYTAfhgwzhsFQNiO6UTvq9C5BTPATa3GtpiOmdizMGEuJjjthcCblCt1qDbkeHWpoIqepQ==","signatures":[{"sig":"MEYCIQD43iI0JGJN9KvPBhDPM1LyixQzY+nKU73N8SVIo3NRsQIhAIdwp0fsZJbheK368SwBgIWRILF/XP69ZaTMosipObSt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ28jCRA9TVsSAnZWagAA5dIQAKAjqcr89JzocVDBbPsT\nsNWFGU/6bnQg5/zJ7Fn9gv+ZUdfF/X749fn6Cn2ZqrfoIHPrV67cdqKb1yYq\n6AozeAWzYFNXZzojND2r4mOE3z9ddcYyFF4xChE/QVEWpVCEHOz/GuUJsGqc\nIm5ZyIl+l4uTrG9+aN+BiYGJTainbirWGXQqAcczG5qRyIxGJcpZm6U/iMiM\ntx3cjSfciKGpTgBJ44fc29BTaDFfAleYPJziZBBzsAkSt/bOc7KL0HDirzhb\nWUqanPaa3vWhJc1//OyW4eAZ1i+Fb71LznoUFP96IT2CqXG3odlz355DD0QB\nv+IknlBJwGlm2mBTSIbyoXS8qcW0Y3yKePnCXSoE8HKn8eQGHMA+5WvOoPXJ\nnmUFKWMZ0zg/4ysKmihLF+MOznwdhib30HSCnPgIG6pT5BObdXnDSK9nR48r\nhv5plR/EiN607QIdhr3eH9e53XY285DiXXXnFuvqeceJ3tJoB6qbOWBq0xH2\n3AO4jMuNgIA6eF1sRdBmgYFQfFKba603j6dDsRZ6gyd+ZlZUD13Ag5/PGx0f\nQqKcwyX9zmbZbxUvDYs3Zuh/rZbpgQN4ZYGz9pKinlLMvBzVMNAJ62SLdg4C\n/AmAaEN90p3fngqkBiaQu1lt4oeOdFEZG7BuF185qPz3X785AlFFpNcKD15P\n6IqC\r\n=ai5Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.cd4903304.0","@material/base":"5.0.0-canary.cd4903304.0","@material/theme":"5.0.0-canary.cd4903304.0","@material/ripple":"5.0.0-canary.cd4903304.0","@material/typography":"5.0.0-canary.cd4903304.0","@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.cd4903304.0_1579642658600_0.5559313679103477","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/form-field","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.7e4b04b25.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f84c9c3f788fd9288e8a05c60151dbbf809a835","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.7e4b04b25.0.tgz","fileCount":33,"integrity":"sha512-OAWMfADOqAz7HhhYWUZxUHmngA2e5H2NtnjwMvKkXXEI1bDsTdUzVZQNO+yM1QBljsT93hK9bAqmkbqhAR5VXQ==","signatures":[{"sig":"MEUCIAENWR9sl80GrLUAX7jyXO/2sCNSO25VuQEyYFtiBLwhAiEAvwrBTnH0xPZ13gaHYSN8bubj1iR1VtOTcPep/Izouh0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ39RCRA9TVsSAnZWagAAis8P/jPzX9PIbxvZr5oabK7Y\nAHOjHYim+thhg0+Xq1a9CrZQQQPNAxMZG2PPTk1uAZUoQg83Q2ZTpDl6DYNd\nRy8ek64OZHmBRUCvKRD22jAYrEp/BJOLEwu26+CmwG1XNDqHVzofjv+yqByT\n77NBKMdlkh2cU6LfL7hyLUZDBkchR664KA2VnlNS9LXeqLBooC5sRNQKSZ14\nFENhfQFzSLd8k1ZviYmC59les11XvGEdm/glkv5lEjlY0rhQkdouWYft4e0o\ny4Zuh6rkTm5iOoM9ls3Ng8nqK25LnFzQU53x0/H2eYcvbCH6evfzXcvdAqdQ\nluIOShVeMx+v87UUKGHpGPMl95f0uzZLzUwm339a3sG8qNXWffgcpAuwGQ5B\nSDxGKHj5BRdEUdRS7kQpsn8KsmuUtvGZDez0D0W3Bm/aCvlqy8Z+7yAOh6af\nl9JR0SMGzGN3aeQgDLw7cybaEh+vhjgKOUKBPLCDQNYY2FSE1zlRHzqke/Hx\nxb/YHTxa17sYnNFOnz4A47hGU4ByfetC1SgbuVlRvLsgMdllT0oNas3qo1cb\nfqmy4ai1Z74eXb6R/KnDllehqvtW4gXIhPKIYo7e3R/QH2z5DCIvpQtznJg0\nNBBqj3QfBYK/KCgdXagxhvnEv+9lE9tJsJPCVjBh49uGBxY6LM4xFBcNKoIz\neJLu\r\n=817H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7e4b04b25.0","@material/base":"5.0.0-canary.7e4b04b25.0","@material/theme":"5.0.0-canary.7e4b04b25.0","@material/ripple":"5.0.0-canary.7e4b04b25.0","@material/typography":"5.0.0-canary.7e4b04b25.0","@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.7e4b04b25.0_1579646801398_0.9398996792350314","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/form-field","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.ebc296937.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8c8cc706b09acfcb54f6ccf4a52b5951e0fd721","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.ebc296937.0.tgz","fileCount":33,"integrity":"sha512-ECoO+kHdmACSnqPzS5rmmtGZvuCsNkxt6LHium8m4ZD6Ve0mXIF3Fl0JKOYyvnUroz8pkbOaJQxlL2zVXTncNQ==","signatures":[{"sig":"MEUCIDOZXe01/iSkiV2y5ansyaIkzVc4587kpv43UcijnkoyAiEA/Wop7grWOVHgUD3HRCm59+IVabrK1pqWfOwkA12sAfE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ40NCRA9TVsSAnZWagAAhx8P/A7M4kZfw98ZPwNGtocP\nsjSIDGmXvkXBL8E3MCeqbQytpwgQBFgvM4/rzyuBCdHeKKEkmGpynqVrw376\nvkRI/QfDbEAkhvcy2yejJlI7Y7NtAD3CWgODWOazLCPqh2rQ6ga8uXRldm/m\n1Z5bSUCwCIunLK9eec0cxd+9OR48mvYSdMvAXFrAOATjCc0PVO1rkr/nGTg+\nWwfyhMh7Grdtsz3brraTcZLipFYMKiOJi83Bu8thIfr5zgJ0yZHscmsmQcsb\ndz1XwdNLy8SgM5Dg4NPkNI9nxBy205uirpNbbt7jUFoNuU/E1i9niGInxhIb\npaUiKi/Z4b1V9GADKszHj/ds/u9N5B3kHQlaNx6hfzXWAhcyR5he397PKexk\n+Bw5ego+kwhwr1BrYC5RIjGz0pW3bq461PyL7oaViLcT9OqcthUrPPoDjUJH\ngyl1Twqs8FPfi6OEHIOR/7rjz81A7aqQEvZjCACDlFG8G+yYWIPqtLm9HIgS\nfioJvzEB7uqg0+4FRIDgndFXwIW2wEwiWK4El/RvMcVQ7S2wNPhCSqF44suA\noOznsNjNNGEMjDc9fRJXje1TTZuobfc27jqYhJe1QlV+bGBfYd0MMPmu0xeO\nNE3BVB8RKd4g9YkXCN+0cayi9rotivlRpgGXg+l/9+2MGFGm9FIQYH8ZnSix\n7SBZ\r\n=2yh8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ebc296937.0","@material/base":"5.0.0-canary.ebc296937.0","@material/theme":"5.0.0-canary.ebc296937.0","@material/ripple":"5.0.0-canary.ebc296937.0","@material/typography":"5.0.0-canary.ebc296937.0","@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.ebc296937.0_1579650317068_0.8938392290402017","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/form-field","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.cf33f113d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0a3fbf89bffa10b36aabf1e90fce10a73f934af","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.cf33f113d.0.tgz","fileCount":33,"integrity":"sha512-ygeqr/DagCCAQrWl3oLVwTwDCUZ+dBVkqZmq1UQJlFu5D5Um/vN9KaCKHR2tUyJni9U/mrAQ8kNAP7ndYKoK0A==","signatures":[{"sig":"MEYCIQCXwLZCYrhjrH72sjMlvrkXPcUHYHn+g7lfXgWsJ5n8vQIhALWT9yxri2v2MUiF1guQyv9easW2fV8nSVxKMfsYqLyx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6PqCRA9TVsSAnZWagAA0RcP/3J34rekeWeR0qY78OgI\ng3SimLbW8m97xni/BAQR/kj3mw+UFfB4zs1SgypVxVmfcP+BwFauodAE2KPw\n9V4qs3aTkEkv/sCN6R1WRgfSkNfZoF/Jxy8YtJaSGQUA4cL0+ieHzE2Ld4cq\n23fZDhhQqMEw+MIGo0ZuMnIIsnlegshGUBCmRAfQMzpm50ftcggbg95jndCx\nF94qLZTyaLV5+SR9VjZzgMWzZWqAWBQiVGPKf6a/wpML+Hce/dRB6gDp0Hou\nN+8zgrcQ/M2zUw2+IQgD3lJRhBioLkjiuRJGg7QLzv4x2p/xOYI3bkoUVDyR\ncyBVBGUEvPwNaumq9X3GJ/8AlWQSRAdO66b5EVGrfBlmrQW7lEYavVaFtuY7\nIRCsyL/uE8udYNwYSb1RKkZVBcqUGyvTyKkLYKev69EYYPSse8aOAagpnNc1\n5Bta8lyEAKd1y6cNmt3nLRImF46GSPg2vRpDrJH6cn6aT3wOFyeVMm7PV57s\nNKG1LIa+TkdHFqf5T2XcyRKpTRD2yjDmOp8VrSZZhjMo99DgeiKLDQ+LYC8h\nOplgiJ3t3LJXRHbZ3KnHCiests2kky7aNv/NXxxE8eKENzGMLhfFHesvVFUf\nYBsPzLtAPeASjyho8s7B3f+sEI87ipWg+X+0Rts6k6K6ri1uMGfBtVixAXUI\n9t2b\r\n=UAma\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.cf33f113d.0","@material/base":"5.0.0-canary.cf33f113d.0","@material/theme":"5.0.0-canary.cf33f113d.0","@material/ripple":"5.0.0-canary.cf33f113d.0","@material/typography":"5.0.0-canary.cf33f113d.0","@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.cf33f113d.0_1579656169962_0.3670967879332918","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/form-field","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.e1d5f1be5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c3eace5986cbed70c53ee90335a9fa1e7a56ce4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":35,"integrity":"sha512-NKl52l8ZkaD9dVFzYa/s0rIAmLfS0f+j6UaTqvOFKD8tI2BwwMIIfllLzA1m7Y8erGXWDIXrSKPs5grIIoe3HQ==","signatures":[{"sig":"MEQCIDe2Lbri7CTqCyGOHhL9DXunoC7zypV+wRwXqb6iN5PZAiB5i2C2M/ykidy2S7j0x5dOCJKfV9FWshj+GKNWGCpq8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH6aCRA9TVsSAnZWagAAlWAP/jLk7rByrEFb9B8PtEVR\nVH8B5xWb/Z9KmYY73C61+1qvl490DwUhqLsv5XxlJyYcAZOVGgplP6w34d5V\nhwcqtS1/agrwtsJYqOGIZHh51KodukRDAaDAvdvPmuedD2e8VYGsNJa/qsIi\nEEZEWrwfnT01jDqioY6X85N0KbmOC61YefVMlMzO7LRwWOy12d2BQsCZc+25\nc63vGEckQgCo79UgrTaoVjnTs3j/ntnflhkyRkHyD56qv5Bnat2LemvUW6SF\nn0452cqwFMvgRLHY9KNm0dy80Y8FwAJowIbn5yECasmUSuDJ8j0HbfidNc2q\nIjQV10d2h6p8uFgwFJDIb+s/gVScDaU0kZDYqR0W/ylRqn88WNkrQj5oA3bK\nO0Z2nuUQ70crY00LH92kyPwT5mnM1dxOf7SbPEtqc4qFuLWGL+itOzLt7I02\nmTK2Uzc7M+jwa6RqemSEvN/XvyytYqUcYJymiyel5aF2sGhR1fieVZLMJmJP\n+CvUdPzQ/7kGW4ySZsQ6ZTaecKyKeyLK0yRfOGETewtdI01QgGZxVISI3PEC\nmXrjwYJ890R8/anOZaYuEmYCBoahpotv+rhsOX+e9LTxA9H0u0pjVCGFmGUP\nYwze/9L2/gssJhBNvyziHA/3oAfqWs9eZbw3NJpeb67eVEvSgWB3x5LmqI17\n4NfU\r\n=tW8q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.e1d5f1be5.0","@material/base":"5.0.0-canary.e1d5f1be5.0","@material/theme":"5.0.0-canary.e1d5f1be5.0","@material/ripple":"5.0.0-canary.e1d5f1be5.0","@material/typography":"5.0.0-canary.e1d5f1be5.0","@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.e1d5f1be5.0_1579712154484_0.2557412365445584","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/form-field","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.6b6a4ff92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c6d7cbbe50390f14d4fc8f95be5159dc209c333","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":35,"integrity":"sha512-01T7I4PHeUyBEkAR/UwgQujgKSqPQf3S/xxXrDA4W8jYq/dJWBMEPGak89h6jZR+lQXhsp5wcCqAwjsu+PxvtA==","signatures":[{"sig":"MEUCIQCNO9sxT1Nz397AGL7Ym8w6P9vil15UmLdlV74dLRfQWwIgPUARj3ZtSnMIRgTn+iC8UhOQTtl10OSi4rskTp9YOTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143952,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI0oCRA9TVsSAnZWagAAV4kQAIlqQmDMsL1Im2h4irMh\n82fJxZ+vpB/arKuPOA3kygMX2pIkshxmrungUqoqGbHwmKK/yGObFKszzNPg\n1/GxML/qmkcWjEsaY/TclgtmZP7Xkzop8AkfM3xQuOxCqELiwqWpQTpylr87\nwUOR+AFByYGQEVtxmGgnf1sXxcQRjODrdCM4tuz0swrDui1/c5uUj3NJVY5/\nZZx5A3dMJC1TM8uyG7mQa/MQuIP89NF9hKiJdqAldBcfQo48YM3KL6wI9pzM\npULgJw3uF6An80XiG+wi100zCyyV2TgW9PzT58Usud3S4KNlT/0L/oCFkg8Q\nodH7nePIoqQLucH02N1YhidOE9Wa/tbOOjMbvbHKwXxGZLp6vQnXO7L6EQDm\neUdvSDMlaP0Ph/3LzDnXuDURSay62YVe2/ePGxKo+++gsIpzhTtlyJxm6oju\nkb5ik9Snc0zujokWIGRp0A3c/GGC2xUehBzByABFfGrFgvyOl5A4Vkfd6d/O\nohCvEyOKFGsSMMie365mexVlqrG6vxe+LJGZ3o1fD9ioux0euU0u4qvLLmR9\n3+hICw/SfedI3ZQ2AVM10I1aVzCzoj74Bsx7pyR2DEDxnuWAi+0VF4JUki92\nezoROrPkwYnFYFpv9GPzxnMDydg00r0SWs4puZ4XO4JRSTEjQU2fXKY6U9tb\nPbvF\r\n=a9ED\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.6b6a4ff92.0","@material/base":"5.0.0-canary.6b6a4ff92.0","@material/theme":"5.0.0-canary.6b6a4ff92.0","@material/ripple":"5.0.0-canary.6b6a4ff92.0","@material/typography":"5.0.0-canary.6b6a4ff92.0","@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.6b6a4ff92.0_1579715879785_0.7853320813838123","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/form-field","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.6092f71ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a32184f1f62a166067e98e6624de67ea3f1f63c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.6092f71ee.0.tgz","fileCount":34,"integrity":"sha512-uucLorhFVLwBD7C6/WiP8z+VtGv85wX5z0zKX6RjwhZKYQB67fsBMx7GYIRD8+Ns3/7qumtPs1haTsCyIJojww==","signatures":[{"sig":"MEUCIBbc5/PNrDSpbvQpQ0bg8joErAeJGfiRKgSMfb+xfXc5AiEA8PPKXTQkrKqx8Sk+B2LkHLaXL/J9p/Q6KddNxzpov+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLvgCRA9TVsSAnZWagAACeQP/RovdoTuBzSmqx2rHOTj\nc5ruzI1NyaDximLH2hD0F2IzLLSCOpkK7U9jyPwEFm5ekA7G0laFVPeR5XK4\n9P09lX+Zww6BB2yvYv0GS4IOh1CYq/SIGXDvykR6Qjvm5wJLHNYOmtwiugoO\ntLjfPWbD6lt6ysRn5Eo/JXnFYOKKgWPfYm1C7H5rjQZiHqGMxyEXxokZXT1x\nLlCBTCZtBm9ETE0M7v1T4K9VXsaCoTkV7pTEZ2FtIncBOy0nn6Mo2kS6rwrs\nxqdd5KRRq8e1ZVlx6v1EGFtnbA4+Cz9xTQ56i/LNqeYhMXzSZr7PlwHakhut\ntD6wERFImjW4YCswNdDN5B4N6XeAb+D1yeRlC47XBXMSSYL0mcJurYARe27T\nvgPugBmzl5XxkEWL71lLMCXY1GLmtcV1FcP6CVCqtJq+W4vYJrcW4tdNzceX\nXL2PuNUdS+b0R2rFaCtiTILsWfz8qHxc3JNY9mC0RO5pMEoDEaVjgPf9jvCA\nP5qgASuZPDESgnRVfP0CtRRg91xRj/HCg5IGcVjDYMTnsGUKzQZQVyXTKh9T\nWpEHgFc1QNWV3DFqYJpF89S9BaV0bdROIRqt21H8TSgT8ok3AAtVUvm7rDJq\n/zURz0UcX/xm58cf4DH2VnG4zpS2QZE/6+zEuzjvmfbFvTBzIOuotHqn6BcE\n4fnb\r\n=MXvk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.6092f71ee.0","@material/base":"5.0.0-canary.6092f71ee.0","@material/theme":"5.0.0-canary.6092f71ee.0","@material/ripple":"5.0.0-canary.6092f71ee.0","@material/typography":"5.0.0-canary.6092f71ee.0","@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.6092f71ee.0_1579727840272_0.24175693491658734","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/form-field","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.d8d95020f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5222915f48329c9d564b5e7e0a3154fd33b130c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.d8d95020f.0.tgz","fileCount":34,"integrity":"sha512-L3Eink+gP2zpxTs3HhdCslXVfFMYqsbhtBnVeYFA6+JeZ2dnuo0xXdcc3o1AS+y7dDk1tKiVedKvQs0tkizXdw==","signatures":[{"sig":"MEYCIQDiLT6FO6sT3AmujOJZeHqcYD2/Fyto2zfxPqmknGLsQgIhAKXVilLzN4OctblXfZzPX+fWy99YtCbQeoT9V0qXn2KD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNY4CRA9TVsSAnZWagAAZXEP/iWaM9fz5zIP6uR6n+38\nNxXW8XBQR3zUe2pmdDgWFRt+zUEMA/OaOo/WV2QvuTyKpcKJMrU2IwmjE36v\n/9GpjH+3qDwsn6RKTKYGTi+PaJOwQuHrlY883Q0NC8FSqY2FMsE2WuWKRK9H\nzrtSYt1p9Zb1W/ztYPOuLbiM8yknELnZTNYedbwmM+Bduo+d+y51oW8JXdOC\nUQh8YparYG4KusDFHfhl0AgRUVsVsQxYMk4x3XAREW2SvT6R5cHh+uK5VuU7\neSD2xwsFJry4RZjFCFDqkxUCFTk+Jgl1yCUY8BW0/Vf8lW7nF0gp5znss+fb\n4vtaKCONWwsqNyFixb/sKdbm76DneegCoHV1l10y2kYzZ+zfe1BTeqrnPCGZ\negALTl+yJk+NEpH9tRuezJgDc34eGFDO4nMQNJGXBkI5ehIPfbEMZZNHi+s+\n6rUL5BXLHfWAIgE+Q12T6c5gh0WCeokHab+XQNDUHX4fRxIfU++LuDFm4BG+\njJFgusjo464eaJz44XyuPNT2FPKyWCE6U+a7jehoOnfzgy6USm4anBzdjOU6\nekb5oRrcM+0XU5bPCrZAnOQyAQV+MSCMtZCHy+YyTuGim9kuwph3jWIFSQX3\nnz8cDrdb68c7T3lmF9sK2G8jIUMja7silZ/Ps2WPul2mrnwbvBgH1VoVGS7L\nF7NJ\r\n=hVjY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d8d95020f.0","@material/base":"5.0.0-canary.d8d95020f.0","@material/theme":"5.0.0-canary.d8d95020f.0","@material/ripple":"5.0.0-canary.d8d95020f.0","@material/typography":"5.0.0-canary.d8d95020f.0","@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.d8d95020f.0_1579734584265_0.6659938025139702","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/form-field","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.b7facc628.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c646368f4d846d0f870f9417ccd37e354794a9df","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.b7facc628.0.tgz","fileCount":34,"integrity":"sha512-LlTF1NpCYyBj0Qz+U6PVGB/m4qgBJCYyCGPG/FD3zyyP+MuFgkJNgWegzSyLhNV2m0MqCFaTmBVjjLAgIFYTHA==","signatures":[{"sig":"MEUCIAwfxd3ivR22w56I9iyHBLZsx/wchTig2i9mtPS3wRqQAiEAmZeZ+fl22jqUIlFQJLsY7XhXuTMdXqK0M8qrQd1vpM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeIoCRA9TVsSAnZWagAAIfoP/24D5lboRStY6EpH7LnH\nZ00icadoYuJeBFrHSqrbd9GlaEyNwYXOqo9LX1cpTLBf04dRR2marY3AkS0X\nu7K/BvfBvbWYG3gcN0QuYjsQ5bN4XGH2st6nZu8K/9mciQYNTyF6Udch7b0A\nMKZDQ9zW0ZzjYzaoxsodhM149/Jdlthy+yOs6STcfoGigVZX387fUaaRqJYb\n12+IqrXFrRawRWefpnNgUtSHEGZT04F9BMD8oK6TNG5Kn2i1KN1VlkTzxNV0\njLA+KLOSsEy8z+T3wevRTyKAlRK2Vug430vgqQCUM+0YNDUB5718kYNR1KkI\nrcRUPXwDZ26+eFAezHngNTm2E9hLENPbiTRnUPq0S3lbaYAnW6oH34LUhjQZ\n24mK2yYQgyjb3OgzhI4P4YygdExoX8CbX1/yxI2SYAO7LRfCTxvpHyM3lg9t\nkigYPIge4O4o2aVAaf08jUY0/1FweoBxtaWnzTurZbwpnFwZ4lr6v0nq5AIU\nHdcQgOsk8a0HgRlhegat167GvTcZOFxVuTJ/IlRN/H961AqGPJoLeq5KCVQy\nVoVxITysz9VYwbiaOpqu3viOKwHz0+8dEYBEPkswTy7d27XlRi/713mlJ/66\neW6PWQd3ncXT+lZLByMtXLe23k/T4nvrm/sDPddxCEtbTnDWqv0hmUV9Hrl8\nDkE0\r\n=4VNe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b7facc628.0","@material/base":"5.0.0-canary.b7facc628.0","@material/theme":"5.0.0-canary.b7facc628.0","@material/ripple":"5.0.0-canary.b7facc628.0","@material/typography":"5.0.0-canary.b7facc628.0","@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.b7facc628.0_1579803175547_0.03512756759774649","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/form-field","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.63f357dbf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c49e9ee193a7b324508c0fc55d419254bb29eb5b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.63f357dbf.0.tgz","fileCount":34,"integrity":"sha512-oHtuN4PndT60u56m5FY05fbxF22S7G3z5UAwj+CDgbfJUPRrvOoScS84yokaYVu4rHl6ZDoqz1sU35LMm5B2cA==","signatures":[{"sig":"MEUCIAbXbs7LMlES/zmdBZdQO3GAlUumXO/SP4Aqg4PSS6QMAiEA7Dj7KsmjQIY4pILUpfz1WdCcIZ6ohiVngTfShgX2M9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhZUCRA9TVsSAnZWagAAlmcP/1owApc7T+mFLnGAHWTe\n3bXz8UYBW1WNMuFBKh0NXQESybcMUhaIDyV6XvIb9JCwY6uSbe9cwgkMsyG5\n/ivLs+K4t8+xSurVFe9IDFUugDI5e3BHloAKxtV2NZxsuv9ARY4WK8pTBU5o\nLOt3KP2j1b9UZgp1SQZx/O3iMUyEwqRz7zm5PSQatF2MgnIB+enNROEDe8we\nJfc3E496s4NaZ+GKpQIrJHqW/OtieOQqJ5KS9euyRZz3rD4a1qfYova1brZy\nMp+wE1nC3XqCwIPjyuSzXndZmzHd4ZlhrGF1BE1l+6VoYVvYTulyD1Bp29yL\nLhX2XQ6sNgJa05kP6j3pxQmY/+hlMIveLlyxlgAD2gwAvrI1YZJSanHNyjrh\nvCKOHJV+A28xeru1M18qBONVeoXm13ksvGZ3SOz7EBgJ195aPY3F5YBlb2Q7\ncuyNXCJr8aDS0vkpZVvCSwqrzbpgD2/+o4pHfmku0m3HYhdmGrzbtelbwJKB\nPKlrpxjQe8c0ZLUjS+7ByPQi3p0MU0XdF83AI0tuOCO/KO/wuvpyZhaKxai9\nBCGauHdVvAIYLoV6p76B5gWOgJiazn27jPEgjw/y2NgoUc+FIix2c/jzJP0y\nxcsYWmsfiy+4L+Ut+B2t0t5uq+sisAJPGx4vwWtoNj/fP+JiCL488dxpaKEz\nfI5f\r\n=RTmu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.63f357dbf.0","@material/base":"5.0.0-canary.63f357dbf.0","@material/theme":"5.0.0-canary.63f357dbf.0","@material/ripple":"5.0.0-canary.63f357dbf.0","@material/typography":"5.0.0-canary.63f357dbf.0","@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.63f357dbf.0_1579816532533_0.6335313955814939","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/form-field","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.f2426d26e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffe4697e3ed18c60bc9dacda6aa2b51e086c2b57","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.f2426d26e.0.tgz","fileCount":34,"integrity":"sha512-QT31YwFc+IBujeK+LYgbc0Sjtyz1dboUx1+zZuZGd9IQ8YSiOWy9C3KvMBAoTchO1ysdtEazcCgvuBhLpO9PPA==","signatures":[{"sig":"MEUCIQDcmkQ2yxvu2E4COIEEHRbJQDW0yWTCv4BEGy/Tz4r4gwIgPS/mSwd3Ba/GZw9xryefNoXUo4nkQtRSIAnYRuvYbpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjJwCRA9TVsSAnZWagAAtZMP/id70Rp+mhA8/qJIKvcR\n3VZARAUSIxo5kZCTJ3C6nVaG2067WqVlVmJazt9ZdHR0EckUiX8c0Av3uiUz\n/jz78ZehjjHSIGZEtIAi3FSBiNS+KavYKrblI0nPvb1k6obe3z38FeAeGktG\neFgkxl2A7qeBU50WRk1x2n24PwgB5i8hdvxrQuk9mcB4KGEDoqpoZwwkWQvp\nwPw2k6Csm0clXFm1nsaBFzPQFRl9/f3tv1SNSUH3WAE1c4QdwAKBgAYr+K8h\nm2eCLXv5R4Jw1R12rMTcgHwBLAI/p5rx5oTCOCmD9Vb1ZAVUqbJJX1EbXnij\nUVXIUOUy4pd2hNHCT2txi1gQM5zDDiC6YCo0L+BPAHhfB32UsagByKht+Vwv\nLy+iMI2BfRDrg7fbPSQSSrrJLrwbeq+nRwawAp6SvdhMdqV1joWlc5VUF6th\n8FQkPNurqfQzesds1qA08Fx3PyioXWyHHWWhCZw4zS0UROEBZDCInj69vrHt\njFCV/jSaZ7gIsoS2P+ndMLRlNZl3o20Dk42rLQ99K73F3Bh189C8cEzDx0nA\nXy/CFr1DZHGc3KmWY05VJxylvBFVLRENmSyBwANh8wivrcTvgE+yVbLmeYcb\nFbsBUj+D7v3A8nb96TETaRf49dbUOTY+iBsOyDn4JHAmgsB6GniIjNTk3wgr\nVzCw\r\n=O2DS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f2426d26e.0","@material/base":"5.0.0-canary.f2426d26e.0","@material/theme":"5.0.0-canary.f2426d26e.0","@material/ripple":"5.0.0-canary.f2426d26e.0","@material/typography":"5.0.0-canary.f2426d26e.0","@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.f2426d26e.0_1579823728596_0.36437998836569196","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/form-field","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.7f5e0c23f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c42876be1d6ab3b2d49a7ab2ce481d610d10592a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":34,"integrity":"sha512-1e5whr7drIllmXQYLGxeg/Xa8T/l1k4OhurqtApHufjt3Ftd554wKC4vAeztV2EzOdIzG0TevCygPiE0VNGetQ==","signatures":[{"sig":"MEUCIBFdBv8Ilg/VKBwNhnpmKs/asrwz7/kyR+CgrA1ZFpBxAiEAvLbuQSgfuLjoBC5szd2oHQ+FHPU12Pyu221XYcJY2Bo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx+6CRA9TVsSAnZWagAAM1AP/2+d+g9QACsZmm9Ajffu\n73P2wdomHx3KN3UpuMra22gi8qW9Q97jf+sWjV+3+8Sy8CoknMwdfiflFrWE\ntxqwrGhnGUqtguGPW80/uPR2yvlA1QoDTyQa4HaP0YdIVnvHJzZpFGmhwu/v\nYxiyhohQ21YY54bQOmSiEd0nJ8WgKiqylyvevwTzDHVCIKWGPdVehqGR5vKn\n7kar30UP+CL76l4A09WRLe75D+Qqz9zjNAf+/fJbwVxWma+3UMTNlNKLHUG2\n1vM+ZMgQQWOxB6roEZhAL7S4fiCYj16sdjbrvSvn3PPDbwwj7qfgSiaYN6wW\n9U0nLtUF7oMbzHQ0Vyq4WbOXW0IWHvRvVIN6Hs8jDHmwNLXWqL4RI/tjLLkT\nT0IFUhYy4dQ8BrbyVFoJQ5tbPlMqZXDbAKfmHDQYBAUo/tG1yW3cxr4iVY3u\nu55SyyIQ7dHPFPIi2rB7nlHkwzO8g5NuHOtNy0iLFLAzl9ODHDBULXuooMrQ\n+ms2MN8REC2dHFrIQbUaqdr1DZTVji2PK41OxNaH5FtndaW+JCX4PxxlleMO\n3PNn+hrwyit+PC4MS0FsjAKyJD5VpQJBLyGauRN94thzrQKt8XQrkCA7xr26\nzR2XXQmBbYcSogrqi/lLJVXNsulI7tA5RV2ruqfstXGHkFXl8Pdm35uxqLcU\nyTcU\r\n=ART6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.7f5e0c23f.0","@material/base":"5.0.0-canary.7f5e0c23f.0","@material/theme":"5.0.0-canary.7f5e0c23f.0","@material/ripple":"5.0.0-canary.7f5e0c23f.0","@material/typography":"5.0.0-canary.7f5e0c23f.0","@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.7f5e0c23f.0_1579884474102_0.344221884718505","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/form-field","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.3fc3ab520.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d93425e312a1ba0a37eda779b01d123fe0b703a8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.3fc3ab520.0.tgz","fileCount":34,"integrity":"sha512-UgL/jQA5mIimnZvIhK7Hxk/jklMYSB3VLuX7e8gkQ913CEceiFp6kQydxsqFk8uoxQdZyPvLDciUfoFoIODTyw==","signatures":[{"sig":"MEUCIHiruerye7krY2nsQWQP1YQqNrfGZFY1wNzHwJBI408nAiEAtartcpyB3ZMXkBMD1cEywVcXY2azyxM5mM1KAXug1xk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKyeKCRA9TVsSAnZWagAAPPQP/RjAQR3ZRYjEaeKvgWzm\nZosM3Ms13cs4eyW2c13WRmwgQLwBxjJF/xtdGdb29JMve8lL2yTufI/BCl3l\nzgEYD+XuCSwPq/K6iMZsVidXC8Iu2T5zurX+yANVEK2GXMC8MivxSTIQ8GPO\nwwUnvdlYh9g6ouNCF1u+M3uW9KveQOoKNySheHldcSgIaLMD78sR16sZ8x9y\nqYy/7kZ8lbe65uyoqZDMxmX6/SgnaDRm48lrcvRoifP1aZ0L0Ua1PB8olp3I\nsMeYLd2ZGT/s4gNdsD16iPhP6HQPtx1GWPlQdVdMdFHjE4oEiC9jFxMe1XnS\nj1fUZ1cfktVgLi40EbjaWo5pgOhD3Hb7iFGvBcO55VqwYD7/QWM2FOaLzOfH\nei2hwcZFZe4KnkUgDvYJ8mXjBhfMbI9hotmyrpbT/rN/cI7CnGROG7Y22EC2\nfL2YE36hLXh23o4bRjetSIZdHG0cN+JwiO6WR34Zlb3YHJt3TpZmO0WgfmXw\njQOJ/aX+qDGenhDzBu4MAEXI+it03IX0G6xTgi6+mTwCPfVL9thidgc2ie3b\nO9I+ivizqAD59lPVKXpMqJkgsyqQ3OK6+AZ7yhxgSrrQbhiK+z5xkLQblxo0\nNgTQ2hub+/dCE/iG4YmJQpMiJECzJiwt1lp6lcyN55x1sSi/nYHh7OVr3IXj\nDEuL\r\n=xx9C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3fc3ab520.0","@material/base":"5.0.0-canary.3fc3ab520.0","@material/theme":"5.0.0-canary.3fc3ab520.0","@material/ripple":"5.0.0-canary.3fc3ab520.0","@material/typography":"5.0.0-canary.3fc3ab520.0","@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.3fc3ab520.0_1579886474584_0.6440858425652995","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/form-field","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.80a4d326f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68139f6df5dd5af17fe0a9a2f243a84a9fa9d85b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.80a4d326f.0.tgz","fileCount":34,"integrity":"sha512-yvLCTQckO0TPVphNlaDUB31iBfjGdV4fmHu6ieT7j5MSX9SGxuJqHzoPnwZVIrt7drfyiUeovoiArHpn3QWODQ==","signatures":[{"sig":"MEYCIQCs3XYYfD0lRYUs++qd9HlybhASiiJJ6cMnMwQug+CFCwIhAKHMJfyjJT3mH8JPJ3d8athiQ7iZPRBdwckdFNDlslOf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1eKCRA9TVsSAnZWagAA7z4P/ioObCrhVYeSiIAtITS/\niEheI4qLP2+glB74wzTrpoA1e9teFMNepeUT3g0hDTGiIoVV3JqQShBKLWwR\ndTxlDpb450tW8f8km4Ed8XOoliMrlhz8wCs+km0oiiwmbsA1KJXMHG+tBhPD\nxEQ7bk+xM1RyEc2xXIGJPW78XAeGQFg1W+jbB4wiuGsuDMWwIklRzhV8U1J+\n0W6Sovk19AWvtYkKd0UPoReuAkMrPlQwyhUdog4t6pio75BjLJ4zvc6sK6Wg\ncZ1y4m7Lau1m2Xmw0ivLpT9Db681jpp/M+l5uvLxsV/nkOGmfVbellVQpstw\nBcYCW8cGx2JP/ORclcXfuOyyuBe0Vi7WvOorUx2LFKfjPlgVLaTyrLWOx4hu\nTa3rcgGYllCqt9zlYPTnA7kxJg/CgPpJRrt7MsdAt+d4JXCcLBIHvAoRjuGm\nYz39M7qLk++uuM1rP6VBh4l1CQGbN31yCo5eZnROzRWnAWag4DuFXDlonrkl\nrMKNAqf07F+f6lm75WCvYKAsxjHxON70kbwfJbuGQ+t4OZ46FJF/cSHmD5qt\nL+NRo1QhFXUAEI+yLJiIsAoKo8ZFQDrnGwIjnvP3fIU2FEhxhETe74MM6773\nNmYlSqbhp/UofRmBv4MgGTfKiBhwh+wUmQrrgFecN1bSW0RbzuNWigCQcVc8\nJTPg\r\n=SGQ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.80a4d326f.0","@material/base":"5.0.0-canary.80a4d326f.0","@material/theme":"5.0.0-canary.80a4d326f.0","@material/ripple":"5.0.0-canary.80a4d326f.0","@material/typography":"5.0.0-canary.80a4d326f.0","@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.80a4d326f.0_1579898761561_0.9104692926211391","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/form-field","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.ef7de4def.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71a683aecb6fadfecfea2cf5934eb2d25add73a0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.ef7de4def.0.tgz","fileCount":34,"integrity":"sha512-noEXx96escOjK+Ltw0Bu/Gf5pC5WLb6rZbux78G0ZGjV0OdQwLS/x65ZNttQPxY59Q0xQUCxbKwEwUowggKtZA==","signatures":[{"sig":"MEUCIHwcvKSnUhNG4crMM4D4XhPGqnyUK5lkH5WTFfoHiZrrAiEAkqz7rdwvAVQfsoPHSpP2b0jtJOGNKY9774oxn7ABCFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2J7CRA9TVsSAnZWagAASRUP/2ttjRTvA5qrScBEg0pJ\nfxmCadjrqzzygNRFtURq7UtlmpIX6x9MWc8rsM27fYplBlTrqVuplvmzyuUC\nrSE3hTedfM9YYG1xuQANPimalVZAdkiN1bONHXnW1WN4QXPqT7wxxnnod49J\naBwLE5SA3i0LoUi5nIdI/FcbBp4DtvaIzyMpsHnLBpmYMyyFs/Jezbh5ww1f\ntthSrpqLUTkQSdOFDAp/qGetHRhn/vexhJAGG/cxCtKZ7Eovlr63d0HvQvlc\nuOrt8nfIJnEUF9gWHOyxDC4Dya7JlWdRSIdCdM2NWH4FbFGsP2dPSPNOUjox\n5rJqbJaDukcSNsTZc7hq9KAufyLq4WuT9djysx4DNA3ZA27JFjadBvGu8Es/\n897Sax7QuvsqCIrN4ngT9brXdg3qECXocsw9Nw4QpYq68rDApwO9bzEkXTuZ\nLgBmio+h+GM5Df9VQH2HGuC9FltCXjfvtb/iHNu5forJQkEvFyW1Wlxq/tjA\nPmU2a1lpH6LaALtUxbu3qW7lrsVjY7vhjqYfbQJ1jnexYiuT9ZvnDYcgxIau\nJh300zplZQd7YhSUTsLIr0eI7BId6jkIkFFHL/t+fGhma014CgcKrk0d7/mp\n814eiZtBPEekDj7vnIbJc8HQBHI+cjCTwmAZd66roZcuIElueA8yN6xeBnV5\nNAPX\r\n=E8c7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ef7de4def.0","@material/base":"5.0.0-canary.ef7de4def.0","@material/theme":"5.0.0-canary.ef7de4def.0","@material/ripple":"5.0.0-canary.ef7de4def.0","@material/typography":"5.0.0-canary.ef7de4def.0","@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.ef7de4def.0_1579901562289_0.08264550146705507","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/form-field","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.93e2288b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9705ad06cd4e0bf2bf506ddf095bc8d91ab5b9b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.93e2288b6.0.tgz","fileCount":34,"integrity":"sha512-uMbBf13ci89IQwr0aL6lqf2cNMhnq4RRPVKXTBKQcyQZi2NlE/7H5lCS9T18RsPXyjB20ts9NBcS67WVjY1IPg==","signatures":[{"sig":"MEUCIHbg7/tpUL7t9p24y1wIH0AEPUZxtVV1NDxbKx5cB/3GAiEAxmK/5Vk2c5VGf0i7kYGY4c5zLMDx+6m3vS1Ew6FlMYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGeyCRA9TVsSAnZWagAAU/MP/3uEfxVLoGjtEgAqeeDG\nb6y71WVjPyrqDssxmIQ3zoeeybOZ0rH4sYhHubYM5YL9mKfK2EhtRw+nCNf6\ntKvEdTeLUh7zwGRLbb8Vn8qPARxnDUwOwAtHs/8Q1LK8cU7iVmYn7Slapwih\n+h27kt60BDtZe1HpNzJMh6seVU1ymDq8ktvE1texKTKv8zTmfkyxXixJv5LH\nDtiua2Uh4R/mhzfEbENbR9lLY+XOSaYNi1HIpkvxygFTBFaxM2grQ52/ullr\nmlJfVGemcVH02XrHw/OSxT2jjF/dd1wfWzpQY+dd/N6qtuKiHyxXhWx72j92\nQK2TwiVmhXbBWL3/Dy84U5d63o0C4/ZieXmSiQkQZDrSFb4ANebsMubc142B\neYiBLHeG/te18ZHFVzXeXe8TJJvBLix9GFvk09Tlw3vVXVmqWrbiWCBr/Skb\npKS5J6WyVC7FzFN6NBUbOL4oNocklc5TG1iWVYSPqK1+mVgYJ1mgzdZrJFu9\nwYQNhl9SLej6OYG4Ky3F2y8EFGuAUsKZCONnUq+lerRLa5MrqbAhBfNwEs2d\nh6nJB0WcICw4h5ahAts+MpcAxgxA7gydSAVxE+TktZrWRTogX2brDsQcdi7R\nSEGQW4qBG2UivXILejrqUu0PG72d5vnIs7M3mBFoClmUmukWioqJaRBGZCkh\nJeUd\r\n=ong2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.93e2288b6.0","@material/base":"5.0.0-canary.93e2288b6.0","@material/theme":"5.0.0-canary.93e2288b6.0","@material/ripple":"5.0.0-canary.93e2288b6.0","@material/typography":"5.0.0-canary.93e2288b6.0","@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.93e2288b6.0_1580230578029_0.48270007858812103","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/form-field","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.34ef15f67.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f44cf5d9b3b16d55eef97b3792da3a639d54253f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.34ef15f67.0.tgz","fileCount":34,"integrity":"sha512-iJfUUG367LtCiYRuSFu5uYPGlfBO2BimtT4JIy8fDfgpZ9/QaBeZFcPh3FwxyP2uS0Ac74u2uT+Yemp3ENfGqw==","signatures":[{"sig":"MEYCIQCyFU4jPvgd0AwlRKwLmf1us7KLV8yJRvs0pRGy10kDcgIhANkNrqOJ/DyZywbBsjwKtzXEF+xF7GhJXwYCH4BXvc5q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG5OCRA9TVsSAnZWagAAboQP/1TSuAkM5iuSVbwZBKyc\ndovr42yc8uESqmcVTiq/LAUlGUhW7rBAl3C8RzxsqdWHjtuGJROeUrVJw2RO\nrjGskH15RcXEL0NMlqJozPrbeJ1VIOtAlPPUo2/BmEILeGEFurCivwZNRoty\ndxjrEf6GNszLcAxfP10YPLW4I/HJtzxPUHHERSjQjgtFCsB4rZEvIilDKKBz\nhVdsZBHLVPZ9tRg8kY0xZq8i/Rhr/oTtm5ACg81ai9cUWZ5cFUf4CiYBnduU\n/ioitIzVnnrp1L0d8vwxGNce6RFreHCctIqV6YvXxrvX6xq8/PTcLsVIkpyE\nlMve+7x7Lh84DjJHCnxDHHgLk2872Bswt/Ldu528HJDQdjVYTlRizOthQbuq\nwqrPxlE2ORg37FW1kEUSDuWRHnsWIcbDUmVmd9UrbnNDVkRtfj0SbzVsuEBD\nnk3IKuglo2wj3SWQ/Rks2MWfJCMgmJJjj/9RDjQvAp4FRrF+/kDjF7DSiV8o\nHtzofmvLdg/qg3sZdpO4i9sf8phn/UkwNoRewS95Y/mItjRk0fmpXaC+K+uW\no8gSqXwIgd/gPTyzTvGdexeIMGYWw7oE+7uc7kRd/WbcUQDjXZjmpkfmrLC9\nuVPELxWVj7kehO9/3seWzgA+x+SQ/8klQQUzVgIeeOC1ugV49q6EFZG8qYCu\nL6/+\r\n=7N1u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.34ef15f67.0","@material/base":"5.0.0-canary.34ef15f67.0","@material/theme":"5.0.0-canary.34ef15f67.0","@material/ripple":"5.0.0-canary.34ef15f67.0","@material/typography":"5.0.0-canary.34ef15f67.0","@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.34ef15f67.0_1580232269544_0.7838323194682952","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/form-field","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.d3d176ba5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89b36489bacbc66695814522a7adc75645472468","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.d3d176ba5.0.tgz","fileCount":34,"integrity":"sha512-D04kxTHn0cStb3HG9n1SAsxa5NFGlyqhldbvqOfocI4f/qlkJQ5QbF9Jr54BPRN9KsbCqTefG5fFSEPcjuoxWQ==","signatures":[{"sig":"MEUCIFWVH8tqF4E5S+YU50Owd3iIFK5p/Bzrid0VF85RL/ktAiEAyKZolHmvsUEebJ6xE8iLgQ10s1Zifr0DlJ5uE+qZKSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG+ECRA9TVsSAnZWagAAXHAP/28rqKNMIDIMc6mWbeQ5\nDB1+W3YzOOarwQLKyuOgflMUmZm0yHJ0SVxMpbjb+uqMshlXh24TrxGPTwMR\nIZ966jJwRZ2P6ajlj4TvemmSpcTBk+XBWleepUDPCntqm/HscsWiqXlDMIr6\nqBvAt98TXs05E538PWQYJSLGW5bQXMgedNOqxuONaJcKIRKANj3rU5GNXA5q\nQBu4HXM4/D6ssbT6sCYeibcPXJ65f6sI+GEyXGoVgNRCVZPoO//G9jvCOEkK\nfikv6an89+olkz0DztEPZUwZiXVUw0L28KoV6E7pVULWV42/1qOVAW0z/iJC\nTIHjkEFcRZbgdItKK1bPlBrojvKEgLEwCupadJ2rUsKP9sKlvCZj+FGUL5H6\np3Yf1NBeH/O2WIb7BnRSy7wbkkdgm1UVf7F3SgDVrjrJg8G4sEkRzkdc4UOF\njlJedvIZrDl/GBEpBXddW8uBLJG9u0cZSLYThT4Z4M4wAXRPYvn1jw7xjCg+\nLfoXM/O/zqXJrnPY2YsR6JkxBfQ0v1KkO6uOOeuMjoKuohcqO2l191T9paN7\nRxrF6jAHIqxnNx3+YYzJdiNu82lBV1s8Y9mvBTaEON0oFeEUZ915ZdIzYNhw\nAYGiWQvxpd9jusQDeuX7n7iKD0cv87Om8BXjJZXB15R+BuOELshC4lfd2r1l\nmFuV\r\n=su1c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d3d176ba5.0","@material/base":"5.0.0-canary.d3d176ba5.0","@material/theme":"5.0.0-canary.d3d176ba5.0","@material/ripple":"5.0.0-canary.d3d176ba5.0","@material/typography":"5.0.0-canary.d3d176ba5.0","@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.d3d176ba5.0_1580232580395_0.9228395937804283","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/form-field","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.32c1df133.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"981a948f8b1e0409433ca249ad38d1ebf640d2af","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.32c1df133.0.tgz","fileCount":34,"integrity":"sha512-9bApAPGQxuObuCjFNe7yvGFCpJ9FXlwMJ1rXDOF4rsBKpEHoLS+nL7QxFeWhhsU23KF6+iM3aC0YcW1bqATz5w==","signatures":[{"sig":"MEUCIQC6RaYBN7sEdeSxZ/uL8ckoeCF7HQX8ddkCbh8eGa+p9AIgPn8W6yRHd1IG8Subag7DAL3vEy9mUImB9Ru33ex+Ky0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI7rCRA9TVsSAnZWagAAZSIP/jIloMRA7uOF/pSCNFmY\nhq3rWHERxOI9tcoMlEf14uGqDJodt1QGAKNGPfeYxbCkEraDKLBepCnIYADk\nvAWVwXtcsbJ9BfNXXAaPP5aSBXvGZr0oKhX+Yo6UwvuO2Zve09BfscGx6ks+\nuGRzuMwL+UZM3EQSj5fUT8kBmIPSpup6e3OyyOHjkK3Vx9hE+EMdB71sp8Yg\nCIGzfN/KyDqTxPShebtE0VZIk4t3rdYlLgZ+84YqIFMb3Y2MMNZr8vUiW3UZ\nGWQVsotWeoDf2ugtMaTI+WNuN0UZ3j+KaDLZPR5aVN0p5Qyu6DlpKg7Y0h+o\nzlBbogQEbLUTu8uoYVaPmr736d/lQl8sO4sPLdFkFIaBt6lI/DhQMz8WdLRZ\nZexHpTZCtIe0BXxtDC6ZKDY70jpTGiNMCSOlZC1SgaA8g9Q6LiMGLvp8KQ0j\nIZDQCDRAyK0APZP3TENv5Exw95Gc9gCTG6udu56rNgJQHvRVNhZbecb+M5xB\nUTsJ/aj5EhC28ADX+JLZt8hjSR1xQdnw9uCky129N82RFgupQ+7CbbzPzw9f\nLdgjJvk++vpdgxZnoZ8GaC7azX3UJozLkXd+tkkYcbY7zvVxqyCE71XGnzcb\nMM2SJNlUNCcA7B45aAUIQ0YC4Z1scQZb8jG7r2Yd66YBQegdyU6pi/kzs4HB\nRhKG\r\n=iW4q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.32c1df133.0","@material/base":"5.0.0-canary.32c1df133.0","@material/theme":"5.0.0-canary.32c1df133.0","@material/ripple":"5.0.0-canary.32c1df133.0","@material/typography":"5.0.0-canary.32c1df133.0","@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.32c1df133.0_1580240618646_0.8517396984557302","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/form-field","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.f3adce86f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a13b6c530208aa99b31ccc61fddd4a9e34800de3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.f3adce86f.0.tgz","fileCount":34,"integrity":"sha512-VM/1GinBBbOCW9lGoRQmxnxL4aWTmK1QUBQZoOle1alxMkyyfjFw6ozF2yeRKi92eznAAUkKqieVjt5uO6b8+Q==","signatures":[{"sig":"MEUCIDXO1oVv/4Q+Wb/9YGiRaBW4EWhUQxzq/MImjsOSragdAiEAvkisKMX9VABbIDFlUR+oq6yE5JUuek0cWHBp4WNZp/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKxaCRA9TVsSAnZWagAA5TsP/2+I5xJ1PntPO3C9Qf8I\ngW5o89g919vD70HRBLQudh9Td/tNkJNpdttySlCaUL6JiFJaepKxpH5wapLk\nYYWJD1H+8b+IQ4Es5lwGQnH7o2+seCnhowGVVvCwyM4xWOyNi+sT4Dw/U0B3\n4P5hcXDFOjHHS31crLqGgxPqc/55+HVhj1kq5vSFtigDIEEYAmMYnSSBGKvJ\ngNHTjQWQGUX56uMbhT3Fj972rTV2+EIjQELRR0pHgnm/9vbym09pWWh5STLa\nz37wWWhluDDIOl4GKu8ntHK+SJSzo/SSa4oMfsALRG00Ayl3ULmR7R3MbmPc\n54Rqm1luCteiZSKnrmE2IvBMN7xAlcvIBbU5Lt3LsPFQnoFAlK/1VXr7pKkD\n03Nl5m1NOKZ9DG76+sq9n3eZLfuJ5Pu4eLhFr20Tn7lxsLbK5puQQrRQZLDY\nSk9d3AmitvtZ7srg3xraEhpLReqxa5v0KG5ga0ALicPXjhzRI0xaokn1uWvM\nwX4YrRGKi3Acf9VRbsR876Cy6L1rVYdLdULA6Nda7Sa4O1PyMBFOWq3IEAsR\njSQnVAQNfiLzHW4QnIs9rnD37d3O1V4RZhBhZqVaXyUbjg8tJyL1xs3qZaVX\nA7x5S8cszs1yivPYalw7obhb1d83mN2nz/Ufrs69ROHNvUm1dRW9U5IorG3v\nIVYS\r\n=mI4R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.f3adce86f.0","@material/base":"5.0.0-canary.f3adce86f.0","@material/theme":"5.0.0-canary.f3adce86f.0","@material/ripple":"5.0.0-canary.f3adce86f.0","@material/typography":"5.0.0-canary.f3adce86f.0","@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.f3adce86f.0_1580248153776_0.08851614990146905","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/form-field","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.a4423f890.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"911317ad59129729cfa1bf8c7fccbe9d5cd27d73","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.a4423f890.0.tgz","fileCount":34,"integrity":"sha512-4WU8P2Yrr85UZSMyCOWi2+sjjDZmiqcCpQblMvuqLxVR49CetbmJCQWCA+wE7ZQdZTjQq7wHrqySapTqYoCCrw==","signatures":[{"sig":"MEUCIQCr7y3cMhYl0W4Vpqxo64oUU1BM110Qi2ybnU1y7Dst4gIgKN0DnJarHzMzis1AndNxy0JOjPQi4XPwG2XVkVxQxdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfSiCRA9TVsSAnZWagAA7+MP/29gIxPwZiE2q+AXG9dJ\nBy70no5YkGxL5Fhu0DriQu3FNx7OLxwOuM7zSqBTel/OlamiqEJtWNvd0VNH\nbj5gUm9+AsE+ewejhOwPZIcP+Xl8+NHaA4XMPEtAMDr5QJ6TopkdDxqdCDQd\nG4d6PmEyguaC0FHtnRGqTLE+Fi0JAPwCjfAhazXq8tEz8LLzj54+kgc/COOq\n0w47YVd/7Q6r1T8ROYpZzdXscACDW1bCtmFk3kcNCFcsnbpJylIOgxOwY6xl\nu9oZg0X6lXB46Ll/wjSi9b5nfrLbO4D8AsF3YEN5oSD+VwbGMOgdaruBlMp4\nQTod/XDJyTyKhFjEoGs2PQ9M46tSWxVYGu9UIcXpOj10EuJyt9inHCUcoe7E\niJkhxZW7iNY/6+WAISygQVJ/F7jdZYXjRHPqvr2jqaxR2z6u/b0CHMRiIkGn\nAmCr5KUurJ3G/lBRAGupMdfzVRx6o8Ri2nitERMQc3y5AmsOgGP8F6BBlXvX\npQOFxndmZkC4hbscBfxgQLlmc9Xl0t+upjDF0UDBjQnX5vnU44MPVeVFWBYQ\nII9QnevGQruuXQSqQUVa2qeqsgWh3vuyMiPMIR7dEtHj7qQ1h0ypPXsJXDjq\npPi8R9UflTRysg6gL2AMSM4cawI5T1sbO09pfti8/jd6ZesTB/MXz123K0E9\nrZOS\r\n=yu8Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a4423f890.0","@material/base":"5.0.0-canary.a4423f890.0","@material/theme":"5.0.0-canary.a4423f890.0","@material/ripple":"5.0.0-canary.a4423f890.0","@material/typography":"5.0.0-canary.a4423f890.0","@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.a4423f890.0_1580332194470_0.29114410367210075","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/form-field","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.9351f167d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac0a1c10e05327a69ac7b63c4a30aba71db8cfc7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.9351f167d.0.tgz","fileCount":34,"integrity":"sha512-Xdy9SmVS9dk1qRT60F+v9wZoAyggKUY4SzmZJpwrUsPptNrDUn3TqSRb4oIB1YdsQRupCNofQ8Nf9vnBcBn/rw==","signatures":[{"sig":"MEYCIQCrmVnxHhYDvyOFThfAeXwTIM2zkfAV0R8NPCEJz/HPFAIhAMZzY9S0NOaAFeYUuVwuuj71TrXFrlboTgVuXOs14174","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf9xCRA9TVsSAnZWagAAw4cP/26fZ3XIGrI7h50Hw4wA\ncnsENb0+j2Iiv6VcQrmUC5e25mzd80GIbd9YoEFXyd6rvLKFDmUzxkP0usHU\nSavK2Itsyu+DCt1Hask/6MyOOtLJzOjjGY6zRSnX0MWmm6+e47dvzU8zfgXv\n8nleGharQpq9TXjwPukn5YUEM1TADoXTuFJrAu53NK43BFKaY+texsoTWd82\nmpl3ckUniMM6ybEheCVelFyWfMYPggLgzk5iKSOVKO9nH+TflpozbUNMCN7o\nl+MUf/PDW3LK5aJM+7FBkmehAF+wMi72W5Du4OJDFFqlVnDx+TZJAiGB1XnH\nioiXbm9DSVaJwMlLchLfxJqDtixruWJO1vD65/6eP/4ctZvVmWg9x/qcQyxu\nmVTQbBLklc0T9KgDKEHDbS9oq2vXO3UQyWkPKKv+m3cUW2LLcw+8Z7PP9B9f\n2aFXXGQrhPhmq6ra7oK1RKoPKE0vaaG/Nwup4GW000bHbxM71bHgLhLo31D8\n8P4e9QhQR1+NnkI17fqBHToluIXmwwZyz8knUjIJ3ZthFcCtcruO5fBDPARg\nGhuetRbnjcksQ1xOEm32UJFfeS8kdJHQpcFk4SC5CZwIS+j24fkyV4MtdLfD\n1xBqevxVAFZQGD0uNie9kxWfxEoBaFLxj5VJ5xQJhWqAhqa8Rz1BG4YJJ/vr\ncXHy\r\n=pCII\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.9351f167d.0","@material/base":"5.0.0-canary.9351f167d.0","@material/theme":"5.0.0-canary.9351f167d.0","@material/ripple":"5.0.0-canary.9351f167d.0","@material/typography":"5.0.0-canary.9351f167d.0","@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.9351f167d.0_1580334960722_0.6381168544895695","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/form-field","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.29b89dbc1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96d05dee3dd1af0036a1c871a371356f0bc6292c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.29b89dbc1.0.tgz","fileCount":34,"integrity":"sha512-737FWGZ6wKneQeU8rFwk1Ku6SvgQ17v88CWZ9PO86Arc0y9sF7sZOIyGKXUaypv7Kh5hider2nASEy2ZxOPWmg==","signatures":[{"sig":"MEUCIEDeB6FMBxoHQf4yCc1WSkblzecic2DNZlLyJXEiUUn4AiEAtJ048kNYNTfRpHEuAZHqQYyoBDd4rkQiR88zLzEmvxw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgRWCRA9TVsSAnZWagAAs+wP/RysRh/DKAV5+Xt1NEhf\nraTK305yQ0ognyTAEhdNe9mCei6KJqHy5XgZJeER4t40F0ZTPwfrqltLOATL\nbQg2Tt/1AHF8DlzjpyKJhJ+IAKOXQQ7MUZs6hqYhT41VyBmQZONHm3rXlmPz\nxvrCb/Ajv8xLBiSIc4lE9Ac3hxIQOJe/8Gy2vrGLUPUmcYznvMicP5SB8wiF\nL3qmAktGXhqP24Wa79/ZkO7/TCLsx40G5e7aTtXCfAnB3FNjS1s9qpeaJdrV\nWt5Qi6tzrK5JXznLJmxvUTXtxjPCGTCaN5Vhbjo+ZbXJi4N6a0RW/D+hT+2W\nQoBjAUlqUVFbgsHjcQMSoDSJWL3eJKo9WOWdlsprCVcaZbzFum+gbn1nOIAa\neJcx1f3AIVXsKkvqaFmbF9m6i6If2eMeUe/EfkXOLgyV/STCeQigOGZcx7j/\n4BxLPyXyRx/XlIHy2KK5PqwaHxkropQ2djSAzG1R/U9LP+YhvRVQJjI7ZRh3\nYM1eO6P+k6zag4V6pHYw+fwcdGZ0/rACmzlCRIonZBa9sPxg4KrJnkIXUocM\nCPkCbf8DCTBOfBzDfzS2npIpthK+90BJoLO8rLup61KYUA8j2Gyg0pLehJUF\nEaK7qvWRFlI37bWEATJgN31XXFrE4hUkyyNvcbAsrxLTFayOS7AH1B3r3Cv0\njTQ+\r\n=Y2d/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.29b89dbc1.0","@material/base":"5.0.0-canary.29b89dbc1.0","@material/theme":"5.0.0-canary.29b89dbc1.0","@material/ripple":"5.0.0-canary.29b89dbc1.0","@material/typography":"5.0.0-canary.29b89dbc1.0","@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.29b89dbc1.0_1580336213951_0.0477388142160462","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/form-field","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.45985457b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da79c3337219d6682c702cb96a39dc5bb873e96a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.45985457b.0.tgz","fileCount":34,"integrity":"sha512-Qo+8c44/+74318d5f2U/3P2BSdrp4JCypQD84t3L/UrJ9FUPiShlH4qJYRdTbAcHW0nJYrhHHXkSrryBf2MM4A==","signatures":[{"sig":"MEYCIQC2Rjyvh5bVZUgUfAMOs2lJHr0+Wmvwezx+dX6pyp+vegIhAK8VQ0n8OgGdJvmE/DsoFqi5TtD1a6S9s3hD8RkBl+ZF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhY8CRA9TVsSAnZWagAAYTUQAKKSjI0HT+f4QLadbkUK\nMRwuAQMJPBUo/ipDs3IwQOPKdlBTJ3p28N0eRZQafTLCPaQNDfKEJgkw+qa6\ny3WkTl5QNHw0cfUq29IkSakrC8VuIW0t3zpvMc59AsjjDdA4vjcQuE0g8Swg\n5tLSXIFMO1U48YoPQbAfDjjiAiV/AztPxZFVdvqqPLstk2CHZz3RH1OPNR/X\nUIhWMVQfgOpEWQOAyBZFgJmShr7AXdpRa/Ou/ymAtjHl8asiZpSc9aNbsrRh\nD2N5m+qD0XZzohxVltnUKSeZ/JiFNjMZZwHrhGJ5ANWj+H6mgza3EgqwZhk6\n3kl531yLkR4N9cKozCbc/8/nFjhTUJiLAQ5FdGdY78h+QKYA/bRknBUok/op\nom7BwqKuPWewM2u227hFEDuLf+LUYnjRmKcaysCpvrZBc3EBTh/xW1gpawf8\nl6kqPRRIpbYffsPJ9F1qlQE/Nv0vAhAVOR3LJfaE2mUypwuwehMJqJUV76DS\nmoYXSagXBC6nfVhaNjvq2tTwSRj3//Q8bF0BV9741xJR6EFABSftxRG6H7Jh\nj2BiOWOJv3B0TFeDnh1Teh/HHmrQprnwrCkcOEeac7FgpzWZw1ps8r3EV7ud\n9geCE32D9iMaA8hSHiU+D2TggYxzsZJN57+wDL2eAsinx0W/B2I0JfO17GEJ\nV090\r\n=HtQG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.45985457b.0","@material/base":"5.0.0-canary.45985457b.0","@material/theme":"5.0.0-canary.45985457b.0","@material/ripple":"5.0.0-canary.45985457b.0","@material/typography":"5.0.0-canary.45985457b.0","@material/feature-targeting":"5.0.0-canary.45985457b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.45985457b.0_1580340795888_0.4787115060249967","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/form-field","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.a1a0deb3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46badfe1daaa6142c49801fe2d9b8453c7e1103a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":34,"integrity":"sha512-MJtK9qj2RXBQFt1OrRczDof9FfmDm7Vv1DXn41tVFoBebWznk0HS1mH4eRmBCmRWsuvYVZTGOpKI31QBRCziWQ==","signatures":[{"sig":"MEYCIQDtGzB39MnF0ndo53S6nA8u4MpPoj/kKSq7xygmFZ0U7gIhAIsmkVEqf6+VjYzHc3afsIYNKz1VSL0avfRxeWdoL+/Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":143715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxRiCRA9TVsSAnZWagAAsBQP/jjJIWUt3n89kQ+mx2pR\nWobQX+F8m0FiUQMoaFPTsDN/u6CZmiELOxJw1z7xO017sFurjTxus5ytcL1u\n2FGYESlDGJTJ3eDEPONjtU5K8wYGZvixI/1qrB06u4q7xwOvUukRR2PauCST\ny+Ej2mVWXqzF4pkI58+Mu7zLkV83f1/1SXWZvqtJTxf6j3B6gOY50RHz+N1o\n5rM7H7FCQerFmwZ4epq0us9TF3xubsoRr9ftFQBr7fRoDR5XITo4Bj7TI3Ga\nsHbDupyvtMIoSu0FKG7ZvA6iMq7DddXSbKVurrU5ZIkztEIi0MZGA06+iBlX\nKY3wjKHrtEFC0mE2/t2rmRsVNfXOxWaxKKvm6IXNSIcGAQnkx2s7CXMCb/nE\ndJQpUH8xziNQWIXcL2apJ3xwpn1WK+/chIfvqrRox6RBXC4hEcalxdr2ATFC\n4ZjiMvVn7u1IuY5icArONQEDpS6oQSLoaVH/jDEi21wKQZXF2CVvXqXCjhEL\nnyomG5h3qvuHakul+q4rmMyh+/1xu914QvcMVqLkJYoPxwlsPD8jmGu3uYf7\nP4u7k1cqFrrgLxFJldLOgNuFk7dPFCY/9Ocdh2DWPoZDzaiTQuFoATqmBEV/\nfWXlRE0YCtuM3fWE1xxiZKnL5o+UaoOD6T5Mhzd/3YYc2XVc3Yr3FNSeIf6N\n8c6t\r\n=EOEl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.a1a0deb3e.0","@material/base":"5.0.0-canary.a1a0deb3e.0","@material/theme":"5.0.0-canary.a1a0deb3e.0","@material/ripple":"5.0.0-canary.a1a0deb3e.0","@material/typography":"5.0.0-canary.a1a0deb3e.0","@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.a1a0deb3e.0_1580405857781_0.028765225138078998","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/form-field","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.181486643.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b58fc54965d0b3f9e2f99ede91bfde0d04dcd9fd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.181486643.0.tgz","fileCount":35,"integrity":"sha512-9/oEw1YC3Bj2Kz1avCzNQdZ8q+2kypOkX0Z8QJZkNPNr0uYQyMTvLRDmF4ult8afDGDRm+tGAtMLXQYxUET/Gw==","signatures":[{"sig":"MEYCIQCC5yoSmwglEEpnQC8Q78rK24S6VZegZwwG1ERBlU+qmgIhAMAki+FlVnK9Lw8R1hAtLpkKx+gTSoBH0vt0OX2Jcgj6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0L9CRA9TVsSAnZWagAAZh4QAIvNNzuj+Me0XN054NV5\n6kn13AYH6ZcOyqbPubIE5ZzsFr5uEDF+rKHu1H/wRzgOWo2Xwej7mttFTS3Q\nFuURUDaPu5IIC4RVtplV9GQZvHvfMpWG3MRFkqZCeDPmeRrgNgmdP3/OtEdB\n3qfWmEFTsmuyWm8VsaYDpzU0NLYy+sE6yQNinvZuhqq/CcQhg32HeX45FNnc\n7bUhEhqwykGo8HC+CaZyjyoCJmX987v6UTKzNqpviAVro+9T4iyBGOn2GQ+e\nj0BmqDOaecr1Eq1zJECDN6ytHqyQUIqz0JC8oQwwc5XCu2+9WvH3GOS/p079\nRUYNnBppmfbqNIU/AuXy3jaTzMpLR38urJM8rocgmX0WwutcCD9FIAFJHmlS\ng4s7mLl5WyOSrBB8xVD1aqRMv9UA015xHxB21XI34Hdk6vSKr48IxBmamR0f\ncDZ1XZWJ3xPQdNC02YtzGJqGOgQrrE7Jo7jykk1x+ABl91/TsPZ9z0++Uu3D\nUPFWC4mZBx2bG5pDfEnnKXpqMKcyRzSYfe6MJ3WTMVwKKYPndQffRCVYgl6p\nRtHfpim0YQ9QBlqsyazQ5YN6L8hMfx55VE112fI46YfO683gXuwFssZusae3\nJtxU84bYyj+MB4c6TkNaHQwPCK0PNQ/+0nAqdv9n+IJOe3yVM2FP5yPUO8XW\nJt9+\r\n=qos0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.181486643.0","@material/base":"5.0.0-canary.181486643.0","@material/theme":"5.0.0-canary.181486643.0","@material/ripple":"5.0.0-canary.181486643.0","@material/typography":"5.0.0-canary.181486643.0","@material/feature-targeting":"5.0.0-canary.181486643.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.181486643.0_1580417788820_0.2062566767807832","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/form-field","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.3a85313ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"817597d0e994c6f84e84c3f278466baee5131bd3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.3a85313ac.0.tgz","fileCount":35,"integrity":"sha512-on/h2U3cfGNLhRDep48BbQCVBoCqAO4RujC2mbmkQgWKr0dKkPutMwO+Jfk71gTUZRthDtLZXEh0TW4VuzVPZQ==","signatures":[{"sig":"MEYCIQCAYjmqqZdJ54ov4RzqD1LGWUR2E6hp34k3Iu+YxknaogIhANBXIQQ5qtEqAhVnkvasej15R2sFpvzw/zS7A3YAizv7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFSBCRA9TVsSAnZWagAAWQYP/1PlT4jBAOnmhQo/fnko\nBy3+1RVxD48bJlJxcXaQ8C4kwMNKpTBC8BlyarzRxUxo2JlfWNNBX3EDBr8P\n80PuGgFwlTE9cSgrdAaoDKELdBC+MNqNayyl0qVgZSBWQHhCIF905Xg0WsDH\nrh4p/2D9F5ZkIBH30vNidkto6mALQY9dmRPioS/iprvk1hUcOUBsyklRys3I\n/w10/6oB+g5f3/B/JaH181ZQzsy68D1WkWLaVyITw5lwll/az9enADD7YGiC\neN2IVNIhxsoBGo6HXZ6FpjnMAxKDqY4wyOP+Dxv8aVwaNbrfpdHqXj+dwIuh\npSaF7izNjh5eF+Oxl1avibJu66KoUsNy8iNpXmCxEW7lC8t9izf8PeLqhLiA\n70rcjKLKEdnNeCERnheYFO/QSIX5x6rV50Y3co/Sc20NUZ/P1j5kB39dpvoZ\njPZvN68iM+wbn9787y+CZd8kcnG5KjJZKsoSlJH+zHkEz4e0XJuP9/UJ7cDi\n8BGDTUuspc1H+ghlFrz+DfJpCYvh/1/UTVSTMdSbezCRVZAQHOqZdgDAtO84\nlbzN3ZaaYx+WVRbXMx+sRm2EZO+loNq0urN7jv7fNqq23p0NIOXLsDvlT5xA\njNb3eWrdw4AcOPCQoO9e7YneDxSQRWHUvb4Ibapx2HLbqL8RySHF9/GRLAhr\niViR\r\n=0KEM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3a85313ac.0","@material/base":"5.0.0-canary.3a85313ac.0","@material/theme":"5.0.0-canary.3a85313ac.0","@material/ripple":"5.0.0-canary.3a85313ac.0","@material/typography":"5.0.0-canary.3a85313ac.0","@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.3a85313ac.0_1580487809381_0.11996973677855105","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/form-field","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.b6c7f624b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba555a87396b2d96e7d5c45f5c8ffb91d35648f0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.b6c7f624b.0.tgz","fileCount":35,"integrity":"sha512-Cbska3xHIO/GLIb6aQxz7cWbJU2e0fPD6n4xQqxGWgqHX9aW+V9blnuVHOGlBUuxleudA7tJzyaqA0AGYOWLOA==","signatures":[{"sig":"MEUCIGWZL+N2fhKNO8yEYEtOMR0fuQluDZIKcDAaR8ZG1gjpAiEAjqe79GZS7j2GceepVFprWTjODYedrddbRt9l3b6k33g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF3UCRA9TVsSAnZWagAAafkQAIh/1//EBJCQP570hqOw\nvUnaN0oXHjL5mBBPMMvirOHbVJv2KauVzmvInkGArtsMPpyKOwtPR9XU2dpp\nbV6/9V11gUke+ZSN2FtpieoX12qEOjS0DxMazzSmI9Z0uveluQCE+QAss4Jw\n/RecLu4RhoydLXV3iAeEnBPdGmqNn+1bRjBdxphsMVpOZIYCbvNjCmDvkVaO\nMft6hbSbfvtRQKqbQ0gx0JP0a7F8n/8E7XUQcJAzCPkGqjAI4OH3V6Jd4GbB\n/wpXeVQ/ynY+lr0PiaCVPgmUX4O16e/C0yLpl5oOO65BplQ1+heeMogFv8CF\nBifgDwIZTexb0wI+3Em6ucXHOF0G1SjsWXbOyLcnSMpLtv23M6xc9h7Uv0h4\n79mmAtFQL8SXGrOvoXeYDNXqkA+M04brskDCLLnOI3rd7WsV4c/38QLaD2/v\ngiO8rcJqvwSHbCamcoQBvlBm2tw8PfGFZ3Joe4YJVm5aBjylcI0KjtcxzQAN\nlYyUk+6GPchcQ/MJN+qEdYTyl/aEHsyBV+OhnnpFKg6BrWWez+/YicLu0GP5\nKMGFs+q1PKmF8cw7fXMgvmZYgJk/vzlRWap0wG3MuAAGAPH2xh19gWfAcUrZ\n7wqVXtE4RJCG6ib/E6EYto3y0ONjAw0w/CKmYwBaZLj/onrMNgCUn/FSbJ/7\nm+Tw\r\n=ZTYR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b6c7f624b.0","@material/base":"5.0.0-canary.b6c7f624b.0","@material/theme":"5.0.0-canary.b6c7f624b.0","@material/ripple":"5.0.0-canary.b6c7f624b.0","@material/typography":"5.0.0-canary.b6c7f624b.0","@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.b6c7f624b.0_1580490195751_0.3641516945628922","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/form-field","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.b3f70ebde.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ddf538bdaea96128e62f9ec5cac6db3c141b527","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.b3f70ebde.0.tgz","fileCount":35,"integrity":"sha512-xALSHVmoHx941xfe5UUmEQaOtJeG4bSEVcFBYaanGSVn6XwreywxEeFG/jnn20vdjNLvVajFejnR0NwPVkRWpg==","signatures":[{"sig":"MEUCIQCzNIHiz2zwsJQeeB8mlV0yjjE9UiiMDW1DPAGbyZ/aCwIgDv6xvAIgFpFOmhIVJxqIfBPzLyShb+OcCW8Rf1paivk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNIm3CRA9TVsSAnZWagAA96gQAJt05qq0/3koJZxl9M41\n3/Jz0MEcbPd6iz4ygw9907DU5RxQF3Ge6JahdPn6YBLA9q5G5kZNrnnK43FO\nZfvaHMu3UsVfUWW8dISKySgtGZLGF5F6n64CxnYqF7wPFld/puEVhfpbscaZ\naOYhYHa/4/694D2WuHogdDUe7ZMVQnbme4s/oo9EY49EKzPrQVkLLEnXoHZb\nSwvBWgdlPqZJ6aCzBj3saFwEwiZGET/0cf1/QxG3l4dY7LD4uZDu34QQTBSC\np5EGF5uHPY6Id2GM8iNET8O+qoEGHjv+pbP439uCnff9YKvvr544SqWLkpkV\nusr4r3DF1mIjiOYu7RDSHrIYkf8vT8GHzq/zvNvTNCO7uatKGkl+I8/zYdSj\noBTKR+16qITQJR8JSEU/TPLjSPpm72KGLUgeyRSNvKIvO5P5myGJIPsOcZD/\nXB286rqSdk02oENzVMPCKBpmGcRxpR5aSG1qcXqHDQOrr4jHjX9ixVmVbBK5\noWTtgPVat5smPL8H5lE/zubh0vgdpxO7hkhXCtaRjIhwiHm/HPKGRBbZA7Ri\nlildaHCK9yHy+Z5McBhksSiwatlqPqeWx6DV/kXZZSWFnXJ0ieImKVN5SDvO\nLSXdBscQioXwdYnARMAovbxwmzM0NjHpDAYkuyAzFJ70As8UPVlRZepndKOQ\n8vkx\r\n=xDie\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b3f70ebde.0","@material/base":"5.0.0-canary.b3f70ebde.0","@material/theme":"5.0.0-canary.b3f70ebde.0","@material/ripple":"5.0.0-canary.b3f70ebde.0","@material/typography":"5.0.0-canary.b3f70ebde.0","@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.b3f70ebde.0_1580501431305_0.8923837706009583","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/form-field","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.3e782d8f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c22372d0ac62e971c2838a255c50fdce2217daa","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.3e782d8f8.0.tgz","fileCount":35,"integrity":"sha512-gyHD3oG0WPKudMNVYq2LNZnuUh9D5Rj6gvIijRxRT/zdBqvDbOpXSU8dOts6pixYGkC9WExWq/uF1VqcG9efKQ==","signatures":[{"sig":"MEUCIQCIvmFM/FSOq1PtXGG8eKqru/OHcnSVuTiaib8kwu9rywIgY06tyX2sjN1qQwK8OR5ODOjRCWPbwbOa0D5PXtvvvKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiIWCRA9TVsSAnZWagAAovEP/2BnO5rTYzwsLPFA1mf8\nqi/vYbmZrWpgxdcTdIKZ31WLFA3ZAb+vekTjpgE8teDM7duAoYsWQI7vxqYE\na51+HSWHmSZbJoTUnq2urIEPigsYDNd9NpBbOTqTg4b/4kcMfZg6rNKl0lI2\nceGnsbwvyOH1fIV8oviQEaryuSBC+u0u1Om198Vcy4dzjg8EUDuriGm97UgW\nlIZ/SnwkCn2exDngRdLfiCr3Q7Ji1oXdyiOEW1c9XlYxvKgC/IIMcarMiVOE\nLzg6Rt3WDKDCq93polBWttJAfikQitz3w8uAZr0p6dQnI6fk4WIQHEuc2AzS\nhk4YNWsKZO1bmJyLhIH6ZGdjSMGA2jlIEl8/vcb85sjuqryUhMSzZkb5Eh6J\nxn9drlsy8atw6susHMFx5S+LB59BLFfeaYMLbCBsJmEivcXKjfWWineXAJvq\nUPayJIjbgNR1zuNSSf8Uny+nuYc8bSTdExZffws64zz3GrBjhtDmGMEJscMa\n/FT8Ga2SUFv96rMOUlW3fYnwzZi9DpGdW5oxB8gA27XXRNGofgDM8TV7RJ78\naILVjuZaIjaXKvimnSPpbsywNJMvcbq+raKGjPx5dgBo/sLYN++tqD19ZJae\nIzhMNaqJ6yNp3HqrBozJ2kV06FLdaQYqEG9y3uVr+VxNGdgNjHiu++idWLlf\nZhT9\r\n=ujNa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.3e782d8f8.0","@material/base":"5.0.0-canary.3e782d8f8.0","@material/theme":"5.0.0-canary.3e782d8f8.0","@material/ripple":"5.0.0-canary.3e782d8f8.0","@material/typography":"5.0.0-canary.3e782d8f8.0","@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.3e782d8f8.0_1580605974302_0.26870457389036795","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/form-field","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.535398572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6601173be668aa34367d2745dc61220ac2a9860","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.535398572.0.tgz","fileCount":35,"integrity":"sha512-brb9HRvWYBRKtYoPVQ0xoUqvTWabTgEAL3BQCvdeIDrADNIiqNH9Q+V2aGwQihLTW4rWaBFJaXxNxmHOdM6gqA==","signatures":[{"sig":"MEUCIQC6RTTr56smL0hYvnpChGkwwBqMx0FAUIUsl3ub+1eWZwIgZAa3HG/b8AKKp+uA9jvoNYXQrqfxWylv1JRjl+++WW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGJ7CRA9TVsSAnZWagAAmUAP/Aytn5U0EUYOQq1syJXH\nCcHXHUaRjOzxtdg6xkG5bybTXq+1YSKb17iC0Kg5uoxMiIy2oHAb5kp4u8aK\niYkoOQpP0K8dTbW86yFWDcKs0QNrlMNtsdP9FZmTqWt/MXQ+x7w/W2HAgV+e\npRJeDxPH0HxqiQc9589e6h5UxY80jFRApZrdLjJqHBdx8z6+cyYORNry4KTN\nAESn2OY0WPFF56oOcYhCVbuIOR/YBEIPFszfAqZ3wc8UPt7RRbu6ouVb0K2k\nf2YlZWfZYQ/ud7vbfeX9hgvlYMlzBQWzvKE8GgCYoFJFnI3DR/adZUAxH5ot\n0Fsp9Jfe/uHSF5tiUa4e+Oq8BNoUG8qlnPqQpAYe4eb719rX9g4GKpv4KNq5\nubhkABNcMmFzv1PNXof1SENK4xOlu13tZBSKoT1AteFmpemVT4h5HXiRr/vY\niF8dcyZuTupMgF6PMkJhZFKiqFrzvqhXUNCv2QWRm8Wt9wAJ60W6K3dGDJpg\nJMTcpAz4w+mnZOYLxgbWbdUVK83dStszzaS9x/1jVo3C50pRmYVyU17zQbvC\nKIC+t6/UNvQT4PZKYwC00aSg5jQwwoFn9UbReS47DYsHLdmgzGw2JqwsFnev\nR/frvPCYx88fQW58xfOFhJXM89jzuQvuXd0Srq0Mme34zyFbPDqrMLMWogZS\nZqge\r\n=E5z8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.535398572.0","@material/base":"5.0.0-canary.535398572.0","@material/theme":"5.0.0-canary.535398572.0","@material/ripple":"5.0.0-canary.535398572.0","@material/typography":"5.0.0-canary.535398572.0","@material/feature-targeting":"5.0.0-canary.535398572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.535398572.0_1580753530525_0.5340799729551","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/form-field","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.5ff33802c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67d7358c2209b7e94d9858acbc72b2d46c431bb4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.5ff33802c.0.tgz","fileCount":35,"integrity":"sha512-KfooV0dottnso+T1WDTgiI6kRetDWI0ECxXx2mWJCwwtCf1/tC4o6tcDcHjwr+jiFOnMoJl8tMvVQDQOePBfyw==","signatures":[{"sig":"MEUCIQCbR7mD/dW942kqg+NDr430cQF1WPWZiJLOaboiGEM+jgIgU8wspw1bIOk6f2bCtGvP5FkXKe4KlLgXfyiPPbptwcg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObISCRA9TVsSAnZWagAACkoP/RbHyOgLL0JFWveMLF4Y\nqfL8GUiUQmZJTrL0T8EA7pzzBEPlyoICEb5llj3k2TKJTzwem4qIHgLnQpGM\njPtAK08qLA3J1tZh+uVuOYS8SrxabQ6pr/aD96aWpDDkdkGX5/azr2gdOXwp\nhSRcTJ3NK59s+fAMSDmKAEaYzrYiZu8i7hvbBpCqf8L96F57jG5E6PRWW4zQ\nOTvxxQsuEIol/z0eFywLtmYdNuLLzTkLRrWkmsJa5+dG5m0OF+WAOf4X12y8\nCH+RcwH7YoizZYVLf143vUK8VOMzoo2DCb/hVXnyFbU2Bxm75nmAIwvJRI8a\nlfDkfRrz3MvxPB/waufn9Wu8Ui12E8+vdKbSLUcoND98/7bSljqOjNOa9PsJ\ndpuMs1Vo3eSeJYzx0cPR7R9UXeQofAERev3ygiqjWO2r1usNJMV+4j68vOlH\nrQtJfR+Z7dXL0lgt2sDsDmSXOiqhd94sf+fxA33PQqtfZFLVh6/B3lkJImCV\nD2NtpCg8VdLT18WppUHi303LoO0SpT8dKrlKSeNxagc842A5lS4YpXVed4rt\n5NCkd9YIq/s/Du093wKzxLPTytZVJI9yPU7OkyjCYU145Wf1S9xQGKA3qymr\n1wCCOZSrw8qsL1bqfjbqXVr3EDSgY2M03Uvi+v6af3ZF0sXrUc50z4ZfkZaM\noRUA\r\n=dwK4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.5ff33802c.0","@material/base":"5.0.0-canary.5ff33802c.0","@material/theme":"5.0.0-canary.5ff33802c.0","@material/ripple":"5.0.0-canary.5ff33802c.0","@material/typography":"5.0.0-canary.5ff33802c.0","@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.5ff33802c.0_1580839442092_0.9549384118269115","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/form-field","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.1eb29491c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b087e3a07b755d6e7b8e4bea3680c26573d77ea","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.1eb29491c.0.tgz","fileCount":35,"integrity":"sha512-qd+ur1mH0WLSJbK29N+zrwFLZrHMFus8g4tD6VVN7c52fc55fzpGHjfUkqS0E0npVU3vbVgDOFLg5eoR/QrL+A==","signatures":[{"sig":"MEYCIQDCHZgdldZ+u2VBRHdjsnCNonWsvRu3QJKC2i/U/+iZRgIhAIv7LKVDQKxvLrgCDl2V8gmsrsRk/g0U63FZpTckEKm0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOduJCRA9TVsSAnZWagAA/sgP/00fs8HJIcLcO+DDqwQF\nFhYsK/qZ1tokvAzBYnlV1pX/qcJ0cOKsr0RvegVb3CnbHW7rjTn33IwQK0TD\nQqOYrj6e4lrGoqk0qSkM7p4/L2ky8e79c3S2IvcUm5PcH2TUaO605N6d61vp\nH5zOqqkZTjnWA6fyh4RXgQjMPXwAVj8onriqlPynMXJrI9hzMngJy7ITAbjw\nx/kk90KdffyTYI561zfTGnI3guVIfUa5ujtZn290giKv8t2dnkPgp64UlKuJ\nOIVWUOtmt6FHdAdacd8ulpnSx6VzKSS27JlBKDIaqfh8z5wFgAwZYGAepzPa\nVCzgCrMYl1EBPDG7mf3BSifLgfQnDP0m3CGFpLeQPWylKbT5Mn6yiLaRMuq0\n38cpEIla024KrtmurIkC1fS3/CQd8CJ+fRQQ2apens2Sn18Jys2NRq8VYrPB\nt9H9eIFW0gWd7aKRY3O49MMu+eCb/wm20i3oc8p8jPglusKM8qQ70qqqjC3m\n2BiTIhDr9GsMNdCVS91zeYIaPXMWQmXC6leqSeyYVBByHdun3e3DLcOWiBzm\npXDS/vzWtUbwAnl4o7QkXVbfudHylcUzPVh5vEvcEOTdGs/Tm4EMnr0HOink\ngNTBiQtybutAp1aiVk3YIIycEX4hUFRwKZWZ/IGBCJorGtf9eyzxz1chK+CW\nFVEE\r\n=xukB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.1eb29491c.0","@material/base":"5.0.0-canary.1eb29491c.0","@material/theme":"5.0.0-canary.1eb29491c.0","@material/ripple":"5.0.0-canary.1eb29491c.0","@material/typography":"5.0.0-canary.1eb29491c.0","@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.1eb29491c.0_1580850057197_0.3807420082863986","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/form-field","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.4c7154b26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0bcce338f5724e5cff2545391879ae267298e85","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.4c7154b26.0.tgz","fileCount":35,"integrity":"sha512-fTa6aRyyUB4GzYGR1ualWWpyEQFNk+WqUGZH+9HS0xpzlZ9jVW5PAVRAEOi0Tz6+DZl+9DFXfRxAAoWuGzlUTA==","signatures":[{"sig":"MEYCIQDbTbGraEBpjQ2ggDTDY+C63aLsesi6V2rXR/hV/qiP8QIhAJY/2mL6DsT4Q2n1QgmTaqav2EvHOtxYuanUtMnKhfVc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOudpCRA9TVsSAnZWagAA/n0P/2g6IN057YbHQQ6haejU\nXrwOvjHerLCerrrprg9uzwmiOGnJ9M5S/ZyvnF5uBIWeYDglw7KTYVx65vvx\nYFI+wegcnx/YfVR/JShE/AD2mSdBuruIIh+U8na4HkXj5ovOvjsnpvP85tLW\nCx+HMeur/rfrtUWaMi2xidPJD8HH7NOWtLyJmBUrVn86/MCtaGIj8hfbmMJu\nY5W0JxsKRZol8Jsg0v91y2NHHBGH/3xjsv+W/oz9oZUmkX/AZWMd3xMIQmov\nFy3ucPPKKHysOQnQt5UMRcAwD2/b6n5ZI2Fzi4SbAGHK6b6pgZ3Ajgj/gioW\nPdGDMZLNR8yDCkHG7HfmqwtrqeSscaSYO0WGuNHfdLBAHM76PTiKYU6yqi4X\nOSpPMMyDrz9vO/5r9dAGWWwBVUG3zWQb3ThPzIpUTyKSClfS8X2kwpL9UL3K\n9BstO/rIMPB58Lkm49RS1jrWTedT+RcYaYqBDvv+PeEmxiPAhEWZstLSizSw\npX6voutxqxhn1B/TeX11mIVcg+u5o6lWKlXm1MxE6Yx4ud1L2jP5sLvROnRY\n6ky3jJ79Knb55G63cdtj8ep2IGQydE87inKAsSkc1KPI3cKC2hFPBEJJgwdd\nSZoed6DZeGzsmaMQNN/BSau/6uVky7myw6Da7FHKRbArCUdnIdLezdCkfrIw\nWMC2\r\n=5FaC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.4c7154b26.0","@material/base":"5.0.0-canary.4c7154b26.0","@material/theme":"5.0.0-canary.4c7154b26.0","@material/ripple":"5.0.0-canary.4c7154b26.0","@material/typography":"5.0.0-canary.4c7154b26.0","@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.4c7154b26.0_1580918632621_0.14104540622248174","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/form-field","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.ab5f49a2c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9260daedab4e2d3882da773aadfe23c69daf9609","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":35,"integrity":"sha512-Vw5q8FL2ibWNxAfTyz32ZmbpuzpSTtayxZnSBdv399tBuB5lqHd+TqwNIcYoNNBc3vmGtk1EfUwjXHhLPK3KqQ==","signatures":[{"sig":"MEQCIH5TJTlVk3MKSoU8PHuus6QtIgjW+eqSe4tqWiwY+RwHAiAlEVU3mxuQvXMD2rDk/O/HRu9UZizrZH65qygxZtqu8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1DTCRA9TVsSAnZWagAA0ZUP/2M0gaL+OJZrNny7D/rw\n6HCXXKrwAbCLuF4McaV0s9wkgLEv3KTAmd6B4LARGaoMM9JMau0swdNXz85y\n4L5K3CVb2HSbQ8VaFFCbEHErW0SzMGBaks39xu0V+z4J/sZNwgi2KzJVv+2R\nCZtW/xycHTImTP5t8bH1rcooFJmEJF9CLLTkMFN0hUrMy+vuZRWuhc0tqNaL\nt0saEYHSAZseQr8RUFErpoLwzOtxHDlUGso+qxnQ5MVKsDiFC2rqjIL2K4De\nU9lWlaz+VH5UmhC1jOE3Nl52b3w0+uyJXmjdmA08Iz4Av3GqaWXssbTVBq/D\njBWpXXAI2rG8A6m2ngekPb2UpHb+DZtU4aBve3rrao6GDtG6zUFVvYvEIROA\nLLUryjquf14q6n3X5jxKOhwHQgycGz9o5dTFzZJoIVpZJBuPwOKb/6znHrVI\nWT4E+eyfXRdDBvGaO3Dyfr5xHynb5Mud5coRUpNpRdN0EuJNS6r7Ru3pPwl3\nAd9I2U3zkRZCSwr4NjkspgA6eLQbJ5AEd9ffDFnrhG5IIgI4QRR6nvErXYK3\nv7CWOdSYh6pRooRy1X9UqG6D5zfrTDDKnSSRw3t89DL3qZoJYV2oEKbLhICu\nlEU//i0/nmZDymfNCgqwyQ+ULwE4UXMwWE7XP2kQJJkPDsNzR7oOdGSf4x7T\ndgbd\r\n=n833\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ab5f49a2c.0","@material/base":"5.0.0-canary.ab5f49a2c.0","@material/theme":"5.0.0-canary.ab5f49a2c.0","@material/ripple":"5.0.0-canary.ab5f49a2c.0","@material/typography":"5.0.0-canary.ab5f49a2c.0","@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.ab5f49a2c.0_1580945619063_0.4127805949390293","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/form-field","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.c541ebe15.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3750c4e4d41390c919f808fc9729532d12fb2428","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.c541ebe15.0.tgz","fileCount":35,"integrity":"sha512-DdBDVpioyP1hbIGTGf3e9X9dsoSBQ6Vr0oNtzAlSPBZSCnNrB9jQ9YyRIba8IsNwfI+9RpD3819HEjF6i3Rfqg==","signatures":[{"sig":"MEUCIQDWGKNvyxItZeLZBV7EhnBSo6UqlxXv4w51+rnFzZK11AIgWO5KyTn4uoTd3ULTWioWYz5Q/Yv67jWqgthmF7A2v3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJNwCRA9TVsSAnZWagAAUlgP/RNtWSGwckCpnV4sd2/L\ngfcFyhlkd96Sz3bkJRXboC+sH9OIO2G3eMADAwx8vVXI/lSU6n6pywnS2VbC\n7+VrmPOIHuRVHfSvoR3J+ibBAu0xlNqeCt/udh7tHYz2Ak2GlCwL5e7LQe+8\ncuSOFzY2H5/ebqlgSv/eOMEcU9gYA3sUVbmWmi/PjWcWqv45/JQI0ndcxr7I\nRchnGGgOiN6WQkv335JnfZN2MnqnwyeoW3dWydjRe2INZIQ3kt7GD207ibVK\n7ADgbfUdTrNC0Lev40eCvx/J2bEOSQH2tbtvhdNaHyifMQHoV8Ejsh9Dyc1I\nAepifbL+Wjcl9wMf/f9P0TirckA9wa6w5HEld3mm7Tq5A8O+PHXZ418GA4QM\nkclinRz7sHc9+/lAINHogs+gml/qRCiw4aXuCwYfs1VkgAzZBKQ2+853JC3f\nkU6Yvo/B/uJvbzW3hMJCB1s/E8kSBTQcP4eXqUXRqDB9yGUXnOyUR1xEYzyz\nJ0hefxKUaNWVQIfpxSxVL0+xi4L2s9d/kPHKedwzJoKdqLrsUG04MspcqfZM\n5qY5jR9a0wCbgAaU9jStfM74hViu9K1V4pKURH+SgEpiki8IajcEmU/8CNPN\nwfR9CbFqJXsYw1Was7fJXUSdiKnme76BezS748iUNarv3n2elsBRA0VGZBDD\nyO/k\r\n=6O+L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.c541ebe15.0","@material/base":"5.0.0-canary.c541ebe15.0","@material/theme":"5.0.0-canary.c541ebe15.0","@material/ripple":"5.0.0-canary.c541ebe15.0","@material/typography":"5.0.0-canary.c541ebe15.0","@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.c541ebe15.0_1581028207675_0.010855433444000084","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/form-field","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.98f7faa05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca85fe4c5bd8d6856469be7f56b38f2930cf655e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.98f7faa05.0.tgz","fileCount":35,"integrity":"sha512-r9A/+qAuoLTip+X4wazq7b2OH+SoLHxYh5YZJF90N/JA8d+HxMlGRgV5g2XzmwawalD32hDwG/ClM9tC0cwVnQ==","signatures":[{"sig":"MEQCIFa81gG03aUQVGYRxg2N+7YjjlTg1xR4kV0QxZtskjvXAiBCB9H8xf48V96rLAOwktBDPmHxc1X7l3uS0pIDEP4kLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbi5CRA9TVsSAnZWagAAAEwP/j35wuBTbNgpJrF/F2kK\nwAf0qK6yoFz7HGY4aPmLCiL2HlblxlECkmJGRaeUfJGCe4EaeEpyZ661hxYL\nrM8qT1ydYw2BKOTxIsBquT+zcGKZoHhKMHi1C54cwDZbnQU7FI/Q3qSegmnr\n/ytJet6lYN/RkD8AxwwDnknsuWqUrHsJiVrEnXH0hWopCOzrVqD1hMJpY52S\nfU3Q+/9rDP+b6x/B2TBCu0ozp5fy3r7DjcwSacKYywqs8CnrhNSXm3mQ73Vz\nStE4ZnqvmyoBY6gMvueJE5gfZmMiVdBU1TfjPOA4gDbg8YJq5yVLGO3wN/4x\nxQ3H6xBVtK6+b2Le12T7UkhgBi+SQZT8l7841w5scnZ+DKtC4W7ZtHkbzCQA\nc63LmownA8vXNOGMVTs3NWt6EIJxoveHvqkOnGedrzVrzVJ3u2SDe8jN2gBt\ncjZzMBqlyL71w3UMHOfBjI3z0miUez7sXvs3FAl++X7aod39/PuxzVZCcF5N\n0LcpK1jUCTekStkLEN5R2XpXzB0HHQc71i/Jd8MSadLauZYYBwsAA9GBW89+\nH5oj3Tqoy7hAdFxWAfeVtY8kByPJ9nj2didKmeu4bWMJ5gd9of7QEvJelFRR\n95UMdA5LE9offxFAp3iHfH6+bH02Nj/UUlAqncb1XvxJ7ICMgLO53oKtj08V\nedR/\r\n=TvOt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.98f7faa05.0","@material/base":"5.0.0-canary.98f7faa05.0","@material/theme":"5.0.0-canary.98f7faa05.0","@material/ripple":"5.0.0-canary.98f7faa05.0","@material/typography":"5.0.0-canary.98f7faa05.0","@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.98f7faa05.0_1581103289261_0.2823804761568329","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/form-field","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.b4727e43a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec847b39be80fc4cbf25d297a12d65097bd78890","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.b4727e43a.0.tgz","fileCount":35,"integrity":"sha512-aqGenx7m233J11v5oXNnb5cgtSMxu/xTtAc/VVDxOSSrALXbqkW5MSTNWzEpQdfh4CdQ8ApSx22GELe/4hIxXg==","signatures":[{"sig":"MEUCIBNJKclQXNDgGNmId4H0LzdPJUFERJ9Rk7QmOp+QhImtAiEAjjMzpUs84WeQ/tOrBE8u0G5yJG3igx6JMdZhunTgxWU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcC+CRA9TVsSAnZWagAAfjIP/AvqzlROtIy/95pn9Xby\ngQyf9jH0fEvbV8S7ZvvO7x4PDXGQdBB8zwkVhkRCRwxys2JIbJHeqlJUaoAq\nKnI8vkTgAABsZx2rdLs48TBWfZ40w+3G4dVgJMGZyETkbi73md9YuXR0jfIs\n9z2ZZ8+5hSpYTd0z2E8oEV7E1wXuPQNzp0HjmBXpwVfFFLphu/tnMWSQEyk+\nvIv0Mecwn3OUFEV/3IzrPlYqYb8FCafVz5icT/9g0WXyq+Z8eICpc79V9QjS\n3bD7jwGspsTh0zTN76j39idP/GSbniBC0kHLPu9qj5ZaCgZ01ehFkq+hxx3o\nY0lNdjwdoodvmAq4MTwIbMQbR0wvr//QJkILylnLxa/MHgTZb49VJHx3wki6\nAzyltKNjzPSv5FDq1fHe0/tXuXz1VNe4NzOIm2O2nNo4CjCuybRPGNY9Appm\n4snP5lVBZ1gJAUgUB9gnSoEFH8AMad97rzSA6sMn1nDzoFBNVouVRsR8mG2+\n/by5bbUltyRQ8+aino097CYDTnpv4Twfq55+TdX2CG3H1n55cudk+v6anFEC\nGSuDdCAeROCFxCOkgnK3U8mjZafT506uPBlntVeM2T5xsFNqZtDIPl+u8/s8\nrHEFRiWUdxnqIDj3qbxTX2NDOxKhqEBu4NlrQmLsLsgsqsAz9vRuzRTspofX\nvkZ5\r\n=qJBx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b4727e43a.0","@material/base":"5.0.0-canary.b4727e43a.0","@material/theme":"5.0.0-canary.b4727e43a.0","@material/ripple":"5.0.0-canary.b4727e43a.0","@material/typography":"5.0.0-canary.b4727e43a.0","@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.b4727e43a.0_1581105341681_0.00608021960201266","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/form-field","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.91d9d5a65.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d4ca48f73a86e43526516bd8e034c9f7b6d540a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.91d9d5a65.0.tgz","fileCount":35,"integrity":"sha512-ibXIF1AYBA8Y1cPhtQKDQE1Qu2RwTI0/Rp3zv3oE/bh7yG7hUvKllZ4ZRt7ksq1YLlv1LqQeG0p1mQ66xxEUug==","signatures":[{"sig":"MEQCIE0P9gDoZb9bBWcfXz4ch8QhbkQfgjkUMzpMNCNiuHj2AiAFm/oPXGezeqZIr2uT/i/wKZxmwVcodEwRfOmDdSrfvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePevcCRA9TVsSAnZWagAAOHMP/3AnDTRhg0gUzgzkoqb2\nFK9ZyhrfpVeaRyj7vyZrhwqCk+yIj2nqnMPEKBozCh05atR8AJzHiiAItN80\n4MAUeeNg7EpSGa4hWSwXE2UX8fJugwEp5f0BMi/V6fGPDhCpXkzq7Hz4knAg\nHaqxyXVoSJg0Zf67cBA5hSQ6iEI2zomDuZzCJKhMGdYUXRprTnslvoSzF73j\n2Rc0TXiawnWsDlafKANRnV3pBQDMtiyYDDBw7LMOX+zqe1Zjoo4hOjrfC/lA\nBl2VghstsD7EcxgLrP8SmuyGIg7ZAOHnfaqOR2nQs47gCGdTWFYh+rp5q1+3\nYVrvg0IKpnTg4qrZMSB5oRWNWh/hBTnJRJqrcbKxBlbSPABp2Yjp9k8kz8TQ\ntn5mqIlykrYOW3wPcifEpqFgtXGOwNwQwaSAlFtT+BCc6Apd2la1MYahb2JE\n8tGIgXgMyL70X5Wj+W49siiYm7FmBXrLCUyRhZmd6LYf0lhbA8b2XDQwuQfC\nNi3iY64lwcB0fsPGnvSjcpHG8Ys1XSQ83M0ozF1btDE8EB4M5y9vAR0q6gby\nVBqZ5yoxhiCMITF31NEJ8zNqYRmWGoTanGMChOQFPqhN9DjNATE3JYdID2aY\nZhhb206c/F5ucMLusKeoxyH8dfHjFzvpFZM6WVN7tTxk9zpEQcevTcR4bXup\n71Zx\r\n=PXHK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.91d9d5a65.0","@material/base":"5.0.0-canary.91d9d5a65.0","@material/theme":"5.0.0-canary.91d9d5a65.0","@material/ripple":"5.0.0-canary.91d9d5a65.0","@material/typography":"5.0.0-canary.91d9d5a65.0","@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.91d9d5a65.0_1581116380021_0.05820183520822453","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/form-field","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.d5c006ed1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41f57145928320f1952d6a3899dba63884bf5c2e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.d5c006ed1.0.tgz","fileCount":35,"integrity":"sha512-cWyaixr7Hqd936RwogPRlEc9pdabjSpRh9pX03xP3hhwaikZF1G4BnYHt83Wk+uQEi6g8IqfPod2NBE73mzGoA==","signatures":[{"sig":"MEUCIH64azF66uqfzJ3DSzKljOPDV7KG9eo4w2atveq6M6reAiEArJkBmMLzNC5ylwyiZo3Vt2XAtbz3VKyIJPmQkhDOMEc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYl6CRA9TVsSAnZWagAAfCkP/26WKak/lAdffAFIe+Pi\nS5/MEKE2IlOkWt1R28b3A5nRdACfHbZO89zsthwplpu/stRog8iwj4ePSUdG\nsL/Qa/6kj/F88mpDypF9gruYRml8kSGEHIbfKxXs1iSWqdVmyf9YA1Jo3f28\n2+JAEP1gzmcxJ/oeT8ACaMS86TqDb47sST5mKj+qiGlHQOQmwj7A93ms4xmY\ntzdSo2V5RzzQfb26oD14nSE5FPuknfIRGny80eBo0CLMfEKUFRnCNCeo0fx6\nKtMY2/eDanirQY+fiAI3eq/05HxSgAGClr8mGVSLKH4mjMGyz6pMgcXjPynY\n/W/DWq1/2UsDXG1TL2vuTCxc4nM0GnWU6dk8eJ7aC1GXUEiy+Pbbsk7TZBtd\n0vSu069UHAQokvkTBuA16k06wZUXNj4NBBrkYHSaDj+wRBGFBg1woqTaA7d9\nyHMmhk/dOwv3fy1QWlpiSh+zF4pem82nl/ANB/sSptqkwwjsqjSEatUvykv/\nJc8mnPHbscyCWcTKJci+qK0efAl/Z8Pj4GzMwaUpXthhU9AyE4UwpAV+y4CM\nds9KzmgUEcrr02eMXf9imfZaCLU/yjsWTWuh35ah8oQepsA5U41bCABnLuw0\n2ihfRLe5sMdHJzB1jhlycie8YVAT0KDmKoMGARrrG3xKQOlqA/YJT1PNlMmB\nlE48\r\n=BunM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.d5c006ed1.0","@material/base":"5.0.0-canary.d5c006ed1.0","@material/theme":"5.0.0-canary.d5c006ed1.0","@material/ripple":"5.0.0-canary.d5c006ed1.0","@material/typography":"5.0.0-canary.d5c006ed1.0","@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.d5c006ed1.0_1581353337661_0.984463371073065","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/form-field","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.559f1a570.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"879dc36e5622d2a0827d20727d891bd5183480cc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.559f1a570.0.tgz","fileCount":35,"integrity":"sha512-Sht64vBUVpzAygHtYJ9lW12y/gT+FrDJJVfdb0VgDhchThH+Yiq8/y1IbtwTK2Bj+6E+A9aSWUXDjc49q6Sosg==","signatures":[{"sig":"MEUCICuij8QZwMML6vlyEmoAPpMlU2JnXraobE5QNVrQhSqlAiEAuTzJIZDy7ycSNNAMprqwT9tNSnzohNWz+R3wuunWx8k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZH/CRA9TVsSAnZWagAA4lMP/0FO85D3J9bRShql+oId\nsHzRqArz1XxQXEumkeJk11EEUy+0Hod2rdRMILnDzwwNFAjHjtxbJ6SB1inq\n+X81ERwS2tlBzikr6dylXBhYn79xKp1r3tRBrfyl+G09yHOVpmstV0U+qEun\nw5uoQGVoMrgkQcBPicvpt+SZpv8kv1cXTQmMuTFwX7IJDckX/ThQlMrBqIIJ\nfSZmr0UgR+jeEYJ4TRiHddnq/xC7FkYoGoqVAovVX4j8h7VAfHw5TuE7omWo\n9L+DixvTB7l0a6aiYc0G/Ojtam1fAAftPAxUlXRcvMNpRT0sUOWbk207jOT7\nFuS9vpc6q3AJ7eTQRCsydLWj8zu1Rd6BViaJ02VftL/UoATMgW7a+9I+iTpR\no34PGAW2mBY8V3J4IETaNvVl+k2ZhFBg+p8YCTJnE4L/nu4I46U2lnCf/d0q\nIRoBfUD9hd3YbWm8C7uiIXRUJRJlXOab7cMOYtpc/p49duGoULkvaVWnw0ws\nBSw6uLv3FybBiDC4HKDIf+tOxd1S3Qo5fXx5AKrVcMW9zqQBY0KnxkLO45Qh\nvnJFiYnAh+L0bH8O+3x9pukI7RDcpc9G7/yzRQuE9LPOhNGHMSsBXpyDdXwu\nfsiqHYaET0NcZSJfcScli3ALcyhRz5QA199o23PvqILxWgOoxDUlJ04eC7vo\nyCQ1\r\n=rL2a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.559f1a570.0","@material/base":"5.0.0-canary.559f1a570.0","@material/theme":"5.0.0-canary.559f1a570.0","@material/ripple":"5.0.0-canary.559f1a570.0","@material/typography":"5.0.0-canary.559f1a570.0","@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.559f1a570.0_1581355519248_0.6429975260656242","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/form-field","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.ad3bbf782.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24bf044d0c192a89a8e301d345a3781dce398300","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.ad3bbf782.0.tgz","fileCount":35,"integrity":"sha512-seI3R0elhWu5xVjkEo2orsbMhaR4O1EctkWxQQiahczNZvhYvlvatc03aFcDft7+fQ6fFE/9szcXLy/N+883UA==","signatures":[{"sig":"MEYCIQD+gT630H+Y10ukR6zJMJHS/HvcKcHAAy5TjtO+qUI7KAIhAL9u9kgUSmQpm39mKVJvgvtzS6jIjvvIwIPYMEA4lx0x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQar2CRA9TVsSAnZWagAA+NoP/0cfLpz4kSFxkMLN3Tlf\nC+FqeeiIekt5iaBFmAa3J8OWPF8YrLBZRCKMdmDZg6J0AZsaHSoPh3cvXCnl\nwUtp0NY/+knmRWM0tL6zKcDJyLh16jYL+Uz0uKjjQhrzrGtOo8Xbe8+RTn08\n+6WMgSY6aK56M8qB4P/aaHIWm91v4HEzmQWTgT9iubqWB3XspSBft8PLX+yZ\n6Bs3LOSRT2ZmHXKdYxIyj/NWQVJs40Zy5chONECyzNvgsjGbBlzWLhZ/ZXNO\nrOow0cgvC5wY5G+8WLmYTMFLswhHVnXqStC7gip8hAdMgCQYWI/tBLIhOGvN\nS9NoTEXKbLeld1ImDAyxWqgYRlpTLUXPy2ZO/TBrJeYY7ItjUOiWO7z4UD6d\n7L9a3iuyCL9uWnjsI/ov6HWS08ccYkjsxZ1YcFgMz6myVkBb6Q/QErgcx3CY\ndh6ANzK9Uvx7v/MTUaI7DQfHl5p2nIJ0xYBlT5/m3NaOoJ9DLuo70TTyhoOs\n7xdSiW87oemt/xIyiaKdRX6PEAccXwBEozn/lb9NWOKHjX0bXuHFcRaU+HtL\n8qS394NcMSV+GvetBZwcCbhlP+AKAp/OrCENXeDXVRDtJeCovdf52xB+yq4t\nkK3fRQieO6vBV3xdYXJitFAZFF7g+FA5a5Q/Z+bbmlZDJ7dNmKlmxR6DYfih\neLfw\r\n=DIoR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.ad3bbf782.0","@material/base":"5.0.0-canary.ad3bbf782.0","@material/theme":"5.0.0-canary.ad3bbf782.0","@material/ripple":"5.0.0-canary.ad3bbf782.0","@material/typography":"5.0.0-canary.ad3bbf782.0","@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.ad3bbf782.0_1581361909986_0.7674083402739653","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/form-field","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.570d8e49c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4a16c8ec9acb3af8f7df32f51e6f45a437f1db5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.570d8e49c.0.tgz","fileCount":35,"integrity":"sha512-fJmTLtUgARVjiK9hsubnU5bHfmxH1h6O1g8QPFbyJ+hOizdkGUN2z9sdod3ub/52u6tMjuC0g3k6clZEQ/79AQ==","signatures":[{"sig":"MEYCIQChhw5kz4qEMal6lP5no1UWx0IouSl0WSuyFkUFS6fTTQIhAMwIZ3++NY37rsNUdrZ37adovtncHhgGNF4wzqdwAJNR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcB7CRA9TVsSAnZWagAAafYQAJf4Qk17VEtCcg7SXvTK\nsHgeXZZpJVoHxEiHP4cvfQKj6TzB54TWXiuHy6XtTFRyuyUJBNDMrafeO+vD\nnGnA8Sq666OjtnAtzKNZNx357O40UrVVtDq+roSG32lkZGiDUyHoAs9I/YuG\nSup4LKb2QKGmdV0IFNuimsIXJNg3khoBEVilgBFMR/K9G/W4Cje5qO5ludWB\noXf8lt6eh7kzZh7G3M8jJtbHDdMaombmiho7/9SDzZsGdeSyBvuLofboJo82\nK+FR/OjsdB6S6fjRKNlR0lAXB5MBZnpyQNGpL9JZObcTGpFcf4Fuh2jnMSBN\nnpojBfER3jjM/6lFk+LVDXrAIhyy4lLgyaBB2TTjrXqc6t1/t2AAiO9Tjvt1\nktj3rziIyshzQ5uBc9UDOx41b7mccZGmtuwbM+tMiUoCGjsg1O0+TQv4gxqI\nFW/R9rRcoEQlrV/2/mmNgWGQrJRsl11kppMwInP2NFh2vHKAjyrA2Fcj0GT4\nC/V7M/hSRu5DnLBCoN8ePQKCJIhCTQX0009UI//t6rYcvd/iX9ZFHGqaPy8N\nmikHqE6Pr3+sE2xA6VMAlS/XKrXqFuWSNt3rw66hWqvBjsW7kXgQz0URGft+\nhm3eR2tOUj6xoxflxGR5pFqcGqsDpXijqgdRbsN2dRYdCPUzdt6JBRrAMHBp\n41k6\r\n=0fJX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.570d8e49c.0","@material/base":"5.0.0-canary.570d8e49c.0","@material/theme":"5.0.0-canary.570d8e49c.0","@material/ripple":"5.0.0-canary.570d8e49c.0","@material/typography":"5.0.0-canary.570d8e49c.0","@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.570d8e49c.0_1581367419193_0.3271090244638266","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/form-field","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.48b06b89a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6b2de6c3f14cadbf15c356a766a0d8c1fb98299","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.48b06b89a.0.tgz","fileCount":35,"integrity":"sha512-EyvI4+jI7n4pmY7U6P8/PUNmhRAZz6Lku9IsR/UZiu4a2gRXUXSVMBGu8KtMsDZmOQJrH/HSyfPcK7LP9egG5Q==","signatures":[{"sig":"MEUCIQCcVr41qPr8z0ohY0wx+aSMi/Mc4GQFYL0o8iJvxPsmoQIgIHArDZ/xfu5VPwPUJ/Wj6HA6HLVMDlJ9vY4PzQSKZfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvXOCRA9TVsSAnZWagAAjPIP/37AWSf9ZD1yYT7dA+hz\nt6xs/NcMhBylbj9O1FRgY8nR4vHBYF7tJfiJDSYufCHttkR9W8Z+iBjGHtLy\nnDxYNYAjS5ykby9OlOIYpMOJ+pUcChAer3IB9e6wWWfkI01iM+3DOUZLEG6C\nSuVw4/GpVyZK/s3XjhwSxy1Sb3x/JGB90ktD6YHBq+NoMWX3QyBroKZxG8Hb\n/xt1z5MYOrsD7GjRl2N4dSlw0DZvshWNb3KMiBG3ftbnVZ4u4cCbsTZYUJKA\n/U5FHIk+WzH+xZ8c84I3kC7OXK9ewCAVCuJNJyTunIO/ZFzVEXp+LKs+I3eg\nfZoDcW5x4Po9BzXViQvniIm01oANv8C3X1EaPdjrsWYYUQToaecxFt+NVvr3\nlCNX1axVhSgZ5At18YuU0O+4vhgc7uATECFaoF7kEQn16LNYwhE/Z/l7hINS\nmz7/MeNuXKrJybn6u5gBx7Vkv/zzTco9yjhy6MDYinU9zROUj+mzSo7mPRpC\nsms7H7wFjxGDGA1JMpJND2OVjWBYWXF5Cc+UiKhO3PG3NmQg5xAhqH2d9kUm\nUDfJyXjP35KWoKumJRKIa2KKIArcA3OWLAjbqqrEbKU+DiZrA6QAVzzy1gEG\n7s63j0adKsuLRQ+zNsOB1fOcZSkDtlEuq/scqsQhpttWRHCvwgr5Wh9OhRrC\n2ZPv\r\n=bL2i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.48b06b89a.0","@material/base":"5.0.0-canary.48b06b89a.0","@material/theme":"5.0.0-canary.48b06b89a.0","@material/ripple":"5.0.0-canary.48b06b89a.0","@material/typography":"5.0.0-canary.48b06b89a.0","@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.48b06b89a.0_1581446605808_0.685241407251175","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/form-field","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.612443dfb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7812bc16aa49a99a0e7bf53228674dd5653f8d9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.612443dfb.0.tgz","fileCount":35,"integrity":"sha512-KhbGCVrQ3mIU9ePlqPxT/RspQ0jv8cgHrzPQ0RyUgbGcdo8FB0aaD7L9SgfhZv6GKh3GaEwxSDNxpMblla2A2Q==","signatures":[{"sig":"MEUCIQDOHcOUVzCGaUAEISGJeeRxwp1/Z9pN76vgo65mHwUhZgIgbQ3ORyIFkPSH8hCjkX8ixz3DEsH7mSpzDECi4JX3a7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwU+CRA9TVsSAnZWagAAGHIQAIlvEfkOIT3BRD6z4qA6\nnT//mInGxXm0E8r/xJqcshHbFaj4K3T2ab1k8uedLLror2cCdctAO4e0T9t7\nNSSnVD3ffLhc5XveRY9UjqhECAEsQjY/dshYBB02xfcVEgSWqTgT2eNSWMyx\nRKJJqOGtal4A5K8y7nnjCBJRzYg/PGcv8oiNAMH1ye+Ns3Gq+VR4yUG+PLKh\nt+o49OaLgWhSsRiMvX4aYlA5bdSVzBwpVLqOH4bTAUzeoE96bIz0tWfrpXkc\n3VkVz4wIWCEQtR/TeP25p4HoOYlb3gMrNAtKdB7U3/F6sV4/GM8xqfzBXNiz\nkuJLYI9kc6n9mLudU0IK0jlAFTfxx0YGIt9nxxXH6J0EFkm/PUIAeg3LftsZ\nP4SgWnhsECo7HgKpFH6XzYwAL1OfdOnnJ16JEAgDAxfwYVyKQZljaKNc1cgw\n3MBcEM4niklP8bdRoPTwRIktX8dc51LA0Nmyr2GWTp8IwGTHgADtthjd/bEs\naTXKOQkCuwaLx381THMWuf+SNTLwa/2A2lPiXtvI+kHjxwmlsJ4SVsHY6413\nM+gruepxcQItF/uKInpo/SKnpxMc4OJiKIa76tMJCvEUcQ17aXKswsFOz7XS\nzzkN3wICl5S8OAHlAwomTFTG3kpw1h+rqIvUVpc6508463xZCK5GAy9fdRuY\nlTsT\r\n=hbJu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.612443dfb.0","@material/base":"5.0.0-canary.612443dfb.0","@material/theme":"5.0.0-canary.612443dfb.0","@material/ripple":"5.0.0-canary.612443dfb.0","@material/typography":"5.0.0-canary.612443dfb.0","@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.612443dfb.0_1581450558428_0.605602611384843","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/form-field","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.8c11ea2a3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f263d7c6c52b597986798af290bd70330ad304d3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":35,"integrity":"sha512-nd37JLfob4JVhcwWwOBUk9xlPU2NjnON63Kyf7ipE17x67Rwpu6EDm8eFuhJ0SpwlMZJhxHlcmGI7DQL+LBkNQ==","signatures":[{"sig":"MEQCIHVfnbBMotDqO4SLfg5ClyAZOB+Kne/ex5nrjKrkIAo6AiBGsWyeisK1rADvVQ1ON0xzSaP2bduPkVgr5twDYpYjhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7yiCRA9TVsSAnZWagAAPqkQAIXW7hp1XqsNX2kf/TN/\n1nS0D2VqeWHFDpre2jmxPQoB+3Dkq0jfEgYfWoT246Az/6bh/+HOzbCwI17b\nERaz4Rj2bfdW/Wg1APZvtX5q4WlMF0wfqa2tG7jcY9DNWvWYilhtF41xhmHd\nE+UecyyHBnK4Xr9FOcTunXgjhxKBJa2EfwzFZNt43x75aK4hRI5z18lq1vfx\nJStONJXf7jwg21KI8phEUR1YtbwTQPWsbBukns1wdTB79gUwuQkA1FrIIjBL\ngYX8ZV3riapfnoRQz/97lfZoC7nn5ui8YW9ksz5AzCc3qAyYi+QQHM3B3n4O\njM5lwdDmD7q8DBlZR9EgXRqYlO2ATV7WyfUI32llP9635us0z0NmMQVshKWc\ni85ietGmCraeLzCbAZkWn/q8Tzy3aENh6+bR84OvzqNv7KrK7ENahPIQ2h49\nsTwhLcuFICcLUj2RI0x+xOJ6lkby3fczS0UUrKz4V5DqmDv2L+x1O/Z81eJO\ngmtj472yCxxZ2B5J2E6pGB43cQmcg0MHx0dRRRA1WW2zDNnQfgcTHEG2PW9s\nW8eZymUj7PIos596rZQWsQDc7TzWZGY8+h46lQP158abM6C9Fo60OnLqwjez\nVNTIZRtFFj9SDyxR6oAsi/FpUiX3fP/XW0Ka4cJj2s+O4d5VLxGpiJzEZCzL\ngEU0\r\n=w7S2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.8c11ea2a3.0","@material/base":"5.0.0-canary.8c11ea2a3.0","@material/theme":"5.0.0-canary.8c11ea2a3.0","@material/ripple":"5.0.0-canary.8c11ea2a3.0","@material/typography":"5.0.0-canary.8c11ea2a3.0","@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.8c11ea2a3.0_1581497506200_0.7112213716410163","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/form-field","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.b2f3d311e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"912f93b71efe692d819e130abd6fd1afe2066853","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.b2f3d311e.0.tgz","fileCount":34,"integrity":"sha512-vEMteXaVw6xogTVQJlUeh1YqFMkdmTBAaQNuPIPckcTQ5xKnt1LyzgSqUtJt6pFmDQyJ8J7Tsmb+N2c35T6mIg==","signatures":[{"sig":"MEUCIGTm8Pl9y1SyJmsiyigF4Md302XNShMzZ1iP0VsznH8vAiEA2kgQqDA8waH3cuOmL2eYPys/Scjdzwy3oRurOoGToU8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcMcCRA9TVsSAnZWagAAAC4P/0jiFO2Co2TtR9BtFqKZ\ndYef+hXe72+Tar+nKVPeD/6/L3kNqJ+WhYAQWSb3Y7pIO47bfgA3EA7a9rHA\nmSk4QEJEf9RZbv5WXrBkRNcxBQqDDbV5j9LTCurGTvczaIvLZGB39e3yq1zI\nm7hbbDK1irMK+oHLxmrBxN67v2dd5dVcTtUPFydWZaq/rwy/W7aC4p+4rsou\nWwjEoHfAUVY3lSUJbEHhNrhuQd6OR+chRcLER785UuJ+r6069dcVvyuNrBtn\npyOxaaWnsdCif46YxuZSw+1195MyGrx4zSpOsGGuQj7gNlcqj4eAbfc6d7aU\n2m+gFM9uFFfVflKTSqTV5p0SEJNN7ah/Ytl0g1Ky1emcWctxWP1GT6fCYqF6\nsAsJICJHC7wu0OTau/sNLbDauC72xrc75f7TME/6RJRY7+2X/0VWXxfwH68a\niukMWhOPtS6o2NXVzzIOH195LxEfP3NefqhCdhoY/GeHanXw+JjIdyxX9pAE\nIe9V3LQQ7hqPa2qtYrloXj5AsgbIQBKVJ5innvlgm1zYyvL8Dx1ZhASqWJUK\nNVRP7jy7d24SMTy/bhTneJ5gNpUYhY2elBlIEfXjPg/gq+8Z5JboqkRIHgra\nrHT5tL7l1h43s6V++oBNPUNlT2YZpDY2i0NA1d5YUINky/mR1SpdC2HFEmK/\nURdW\r\n=QqY5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.b2f3d311e.0","@material/base":"5.0.0-canary.b2f3d311e.0","@material/theme":"5.0.0-canary.b2f3d311e.0","@material/ripple":"5.0.0-canary.b2f3d311e.0","@material/typography":"5.0.0-canary.b2f3d311e.0","@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.b2f3d311e.0_1581630235682_0.4180863899905285","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/form-field","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0-canary.4f488d0ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"146d3f860d82442c3798d729aaea53595d065397","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0-canary.4f488d0ee.0.tgz","fileCount":34,"integrity":"sha512-pw7mHawSR9xC9k7n3PC6/L4cYPy3KEULv6xbXWRZOA6w1gt1oXkpeO4voYw3JuqHcmien8UHCnnM3sqwmkEO3Q==","signatures":[{"sig":"MEQCIC9OmbeTOpfquxmOgO33aRvylz8uRfH/xoAMbHz1nMj/AiAZy7ka+s/1qnEw49I1McmgHWR42JepThUwQH/FVmLfaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdZ0CRA9TVsSAnZWagAALUgP/1tmL0vQG58/mtlcBcdG\n0+EVQLbQOPhGrvEkY8nNao3Pf5VcokW1SYsYDV0T74dyrvaYccA3fg7wZYE2\neiT0F86IIfHcYNLwO+yVplMOxIhAJ/93TLaAe/1n8yHhBdyPSi13wXiiodZZ\nU+b/QuwBy0YdUUfny1XkKzlZs2zA8vY3FtIHqn1p1QcZcM+lnMqyJRW6L3eb\nLGThf9A5ghYef+W3woWC2VSWOG0KoJ1Xh9iumSHOwdnhLLJhOinixPwdS0M/\nMhCnHXagl1iIeHCUa70wZQb6anRwpMU957VzmdhRungg7tWJtIIiKSxQ/hRt\nqDL/TCIVVPpyK0KVdVfMZ6Q2l7xm3uzaESHDkjLbPDOxOHX3aV5EEl6fi6Zx\nRgAv56C0//f8DrlHs0cabSdnvDHaacwj8jIpuuY8mznScrKHWAVPZBpUTLUm\n0LpcBq/LuNC7HShooMIHmTfRHm7w4tAQcGuVa/petIb2Oh8yZiGkt15N2RLi\n5F7dGMgrgxyMYJpn4pAum0K53y/1ztGkKkoZlYIf1IAAQCuvmYthsSdVIuU4\nq1DvgQHn9SfAkEAqT2Aakl7VmxgHJBsRYhG32u+M+SC7FxESCMQe4B9kB2el\n+QCgxXc4ta5kf5A114z5bipYxuk+vBO9UShb66cAtmBVQHLDwxkaXIm8h1Ww\nw6Jm\r\n=TZLk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"5.0.0-canary.4f488d0ee.0","@material/base":"5.0.0-canary.4f488d0ee.0","@material/theme":"5.0.0-canary.4f488d0ee.0","@material/ripple":"5.0.0-canary.4f488d0ee.0","@material/typography":"5.0.0-canary.4f488d0ee.0","@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0-canary.4f488d0ee.0_1581635188229_0.018379466711897274","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/form-field","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.fe79de07d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33ce54918dd6340d11897f0d2a31d73e8ff59028","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.fe79de07d.0.tgz","fileCount":34,"integrity":"sha512-ZvPMQW1MoTcEHPyH6r5HDSCV70ypvvTIR6snq/OdIfOzhasJl2rUHr/xhx0YUtDKnyUzyuHisbaGtAb82JOzKg==","signatures":[{"sig":"MEUCIDlU1h341MO9bcI+/bnG8WSxRpiw7Ubc818eGjJ307QgAiEAnBoMgLmoooV+snA0VWoe3fawW3FpVcjaVu4YddK3M38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":149249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdqICRA9TVsSAnZWagAA2A0P/2tjksaFTEKLVDFu9bF1\nCq4ZyX/vqB8M7XfBkNOA0oIKX6bcM3Qq2eboKoRizg+DZlBqs5QXf4dYQCMv\nFNby9NDQhbCbxnfkrg8MOGXtYwFdjPL/Lp/o6UTabZqgVF97wmJKct8Asevl\n7aKQWGXeZsF1/xBGAcf/s027/UO8C9s5NLAxxGPo8KkJWFI0Pp5DMpCbSbbV\nqf/Qw6Powseg+C+vwlJfrBKMcjVx+B1l8yWCicBCeb36PqDFEEUfqVS3delx\nQFrSyRtShwa/Y+FbD0tmSy3jTnzD1Af7uMWqCMdZG9LfeIFqfIe0iKlJiHHy\nntdBIFJkXFqfII1rbepC/omZaQJVRv/N6CgQAvTqOj/wJ+/Nraa54ZL1vJ83\n9uIlMsxaewXoyB3oYRVu8TD0tmyuDfT9qL+XnaC00oXD95wMiKN9UBVnjpxr\nrPEai5oDVtdaR1F0WbHGrtFZAOkHMYKNdoCn0ZfxjQVvxPcuiIKlFmQj24X0\ntNeTnjI9nOo/fXOpracI4Ym9Vr0xzYeXuF8Z/D37mYGBWJYMBm3H00fOw7es\n3zJKsld4OvvvQwld5nXdFsOXylLN4M/NHZH5KQoB8x/0k2QG/gLhQ0ja1gJS\nHD26q6168pN41YrdcyEn+PoBpmToOGAzZnh4xSMuz3JvFTn2iJaKm2a0lPRM\njWwW\r\n=oTt8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e2b4b3810f62a16846d719ee7439bcbbac266d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.fe79de07d.0","@material/base":"6.0.0-canary.fe79de07d.0","@material/theme":"6.0.0-canary.fe79de07d.0","@material/ripple":"6.0.0-canary.fe79de07d.0","@material/typography":"6.0.0-canary.fe79de07d.0","@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.fe79de07d.0_1581636231765_0.43605243184930864","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/form-field","version":"5.0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2686739a459985aebc7816d29356c5e8595b6327","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.0.0.tgz","fileCount":33,"integrity":"sha512-m6cR6KB46sBo33/Da7iBAmFGUaByiZcrpes80v1cSw72iyL0pKkA8VoqHbv4R/3J2CugHbT/3ojGMSd+ZHioOw==","signatures":[{"sig":"MEYCIQDoIsR2lMW/67IVI7oxcvLjsVKSShAjcyvNwrYc+pWb4wIhAJhdtS4jiuuLlQwqm3DUVZFjk4vrZcw4rTX2PlGyvCBB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":148102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReUjCRA9TVsSAnZWagAAKKgQAIwZui2+VbctqqvAOkUP\nk2CfpxPC2jwpUchds2YL0pJLtztqYCUVIohPn8ox4/FTWXSn6MAzttvqxSrn\n6enKvaLxNvGSydg6w7YiuKco+W6b/ikVUMHslLSZFr/Z3VZhQ6nj2hRTwHdd\nBxygM/+zLsqFCzyd/yqzFhoufu9hMtgfL2UcFSE3+FwZ9raG3mB4rwFWpLcD\nCcvVrjIjYH2dZ5x3flmQGz7eYNuAreCzzBZRKtvpSOwDXKuntUUcuNkGxJ0P\n/I0Rjxm6SHigAd47nlOX84IO480snuYnedfFRHjStBXzgG5TjCV9Czu7d/2r\nurEZNoRlHihkNBKeXws+N/o/kixoLdcwfClNqahBl53ueqrqF/pUTUXLz17K\nNMhR/FzT8eO2m1VoEaDMQegfA4DTBBqQCr1l2L+fnsgAfSEMv/CqMbgD3WSF\nDaIU6VLfkZWIyuV6T/OnEYDYHQS2rr2M19wm4JwtQnDX4vAzG6dPSKhzYnGp\nzdRSGIQ6YH8EWZAYtO0h4LD5aYxGQUcyVU01qPKlutwRZ6ec3T8X0n29QoO7\nk6QeQS+WUSvVq7g1MDRAd2zndwDFYlqNylq1L390zKoBpLtD7dfNmF2RutfW\nu/ElgpoKXnZmOB6kQN69oajy/5DpIwvFpbyJUxRExg4rdjD0sWamLWkl1sbw\nmK/a\r\n=8Q8t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^5.0.0","@material/base":"^5.0.0","@material/theme":"^5.0.0","@material/ripple":"^5.0.0","@material/typography":"^5.0.0","@material/feature-targeting":"^5.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_5.0.0_1581638946691_0.08411243125107992","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/form-field","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.5e313b1f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a13715e34546433a2c66895d1e692731ef81c2e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.5e313b1f2.0.tgz","fileCount":34,"integrity":"sha512-Magt6slqWuHqzJnvP9yJVlCTcH6Lb9PG/4cGWn9t1I8cOpDeserYYsx6SiIWKX+xSgkpDvGupkZ1NAzy+nS/EQ==","signatures":[{"sig":"MEUCIBNwxDauo8aI+XUkMCDVaWG318AuxYCGHDY7za5vZdewAiEAl5rDP8MzgUmvmpM+qy4iD9h/NXbdfzv9mLIa3Xk+iiM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":148607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzHKCRA9TVsSAnZWagAAo7cQAIT6oyllvZm2iT/kqL4i\nxYwNZzmtgIIRkfJ4MoqgFvKY1Gov0i8zMq1rOPj5cpbOZJzz18szkPzytg7T\nPTLi3e+XKcxqAa9typpPrhp0ZWNHxHytUvqDFzobxVst2P6Wq4lsU6LgtoGq\nwQOxNVy3Pl6N5lG9EkGKorx/EWXOwfukhiRbhXB80EWgOJD736jpI1TOGcnv\nu9BP//8o4gK6lXe7csg3/VQmY1tJQDGiTB/jlBgPE4UWM/bYK7P/MVkB0heh\nC13Qq+WeTIxbbNAh0/V4W6ZXfqd9csBLWTuQx6OtvTrM74Zl1FJDz9ZiLJ+2\nxILyaUR6QKEj4xpF5HL3qDwdHBN29Om4kyMkn1MDAcerz8lBoY5jnI58fwsg\nmca/pNSbY8ir5I+Sjd5R1ZLSMjHW+XZZ0zyotvvfenMcPZi+52Opvd57T3vm\nctnVyJJmJpjTLKatK5T+wxXk/qZWV1vVzyl3FCGlS7kYgWJTPWRaVpyq+wk1\nO2QmPH+6lmgmm8ySJu3sY0gDXs8CMGolQSY7UidWyssHaRbP5JebzcgTZd0v\nufBqUqQ1KQ8NccN97bnnUGfEYVP+NE+zrDSKs1ZHFwxSK4hiEk1Yjsum2G+Z\n3vtTYQFiankZS4Lpu3qzAzWDiZ6QXut5uUD7I0IpyZpaKpJrZR3nk3ba9cio\ncyxK\r\n=q8sw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.5e313b1f2.0","@material/base":"6.0.0-canary.5e313b1f2.0","@material/theme":"6.0.0-canary.5e313b1f2.0","@material/ripple":"6.0.0-canary.5e313b1f2.0","@material/typography":"6.0.0-canary.5e313b1f2.0","@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.5e313b1f2.0_1581724105638_0.047806149742598336","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/form-field","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.6a56f387c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e88a17b96d31bf5b59a36a27b3757a40cec877ab","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.6a56f387c.0.tgz","fileCount":34,"integrity":"sha512-qLlhcu0DErj2Au96icxANsYbS1jcdJ1PBV8vq4sT8MPg3i8qmDOGDT9o5kN10RMisT87x3Q/MClUeiHvUd8svQ==","signatures":[{"sig":"MEQCIDN+L8MrslQ6hx5yxFl6rxXomGpJEDKK1XPKbboYZcL8AiBx9yJ2D1G1gkx38/JfIxle2b/TQgSfJ5p3UJaTsvYrnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":152457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD6ACRA9TVsSAnZWagAAbqAP+gLd4SBgcZ7OAAkULaVm\nZ9YPWRKC9N6BJpCcPtkp8YmvfCcc0IJARrAasE1UsfMijcdbQWUYvlHh+EEs\nLCmTf+BMspOlmvOLPfO8JfFFwqiB7LWgG06uQx1pmMaax5K757o6G6SlC9g2\ncC9/LR6C1UDIyrWhs1xs9qfFj4zVMtFJNBYAO6c5es52ZCOufaKS8nicp+qV\nIQ7dcs8Gq1jMVfl7ntkv8OlF1inHgAOpEj8NKcrIFbzF9zRgsGZctwTbb5WY\nbbm4yFsDWJRIDDCxXI5g/OMp56/htjk9IvNa60WAhaea3qx8+BOOwUEIswYb\nmelfSzhsVTyq7OtSjcpg4DGJG5WD6YSimBHGbzZvo5mdGkHOdXPN8ax0x9FW\nroDEc8/2sTiv3BV1uuUGsW2EtTNSDJt+tQ2rZy3lnRaaziC5I+BA3ZhiF+2Y\ndp83+vhEYJOUM84hk3YkH3FqyPNJ+QWdCc1PK4IpVGN3o+rWRVOiTJoxVKST\n4VcmBkhisbKnfb/CAwuickWV85ju+T9fv+jeejiEOOUDwMu/nYHmYiKdV0t+\nirKacKwe/3VwLquZdL7YvJksFpg+5e1oNDthKmzar+/zxYbBE/hxa7+pUl85\nq7GslSm0hWL4amIHhi9EZb/2RBVYqmdZzAQQ/NR3zocxbf5lOAVRvHhcOnqr\n8Aww\r\n=TAvC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6a56f387c.0","@material/base":"6.0.0-canary.6a56f387c.0","@material/theme":"6.0.0-canary.6a56f387c.0","@material/ripple":"6.0.0-canary.6a56f387c.0","@material/typography":"6.0.0-canary.6a56f387c.0","@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.6a56f387c.0_1582055039283_0.5453060820988926","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/form-field","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.bdfd52632.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82987716fe43dc20815cf6afbc45d74e940d5e9c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.bdfd52632.0.tgz","fileCount":34,"integrity":"sha512-IQc2RXWlc0Oe82kLJxi79m31iycmaGLSUxUR8156OgPkdzeFymALufHpQs5vYsveI5krUT7ySi9CTktAYFDlYw==","signatures":[{"sig":"MEUCIQCePsLkO00UGvuBT5C98IxNpufAuQodbJB4jPoJf2qbYwIgb3rp8pFgrpPUufOcqoCOJ5SoXB9T4KEWfNslFW/4+3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":152457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZkZCRA9TVsSAnZWagAA3T8P/07lZAh5iXyh+NKcn6PD\nz0nHi5kSzn5Yjh5PoSqR9bwhdyhcGIcomF1kRAnezam8Qo4juSplM4Wvy3EU\nnML1J7js1q5QQxhTke3JzJUCB3qiWPBOe6YgSLWAW3Lt5BDk2iawN42qx134\n0BwEltdbI/GKJSc3Sp70cYbGHwelvGxuceGifqg4gNlG0phASIAiIa3XapMW\nlewo82WQ3243BzMseucUfI9A/15b5+/LymmOMqNKPBcrIVmKCEKuHQ6Pcj7y\n688rapV505VbXuG0FcDSyxz0F9jcFL/YdQ71cY4o1c7TPaGY+vTv/w7WTKdu\ngFBZP0NMs14a0IPL6OaZZJOuHcqDB5BpaEKdepQ7BNPS/1XgcD0kQQh/q1lS\nQiOBD04YFxwoHad+ylyF31EnP+2O+fEaoclzJ/pDW+kvdFmbLiVSoQKRIb4W\nHtlA6tr8130uR7dpX6izy6UDrzCT/GrJrnmILuxt5umqXkFGkAIdCE49Rwoa\noRVvCWkZ3hm2uo7bnM7nMTQtYxM7bRePDjfX4FQB8H2PMBk3lEAow/pW8AJO\nCrR5VFa3ISfiY0eWDTTjRmsWXxzzoM8oyymER3yv3d6dec3DZSfvAGWnMbMz\n3mXZsSMGb/ChtUCH4dUBT3cGCnJtrNqATiWQ0ODCuTqmOHpnQ3EQ3pjLGitY\nVsyL\r\n=XNTW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.bdfd52632.0","@material/base":"6.0.0-canary.bdfd52632.0","@material/theme":"6.0.0-canary.bdfd52632.0","@material/ripple":"6.0.0-canary.bdfd52632.0","@material/typography":"6.0.0-canary.bdfd52632.0","@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.bdfd52632.0_1582143768786_0.7542774194485216","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/form-field","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.ad2e4376a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1237e1e0735125df7d2d0c92a7fc44e6347a7fbd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.ad2e4376a.0.tgz","fileCount":34,"integrity":"sha512-8Y7lli54X3iIcE6SUmSv+dQM6UlZ9UiMY/RpZX4LMG/udmg/BrbgkMOZZIu9yjBg1C5Ad0Xd9yQ9lBsLKa6iJQ==","signatures":[{"sig":"MEUCIEZy7pdnkvJi2YWt3yUa8SLfBnpKQwcvd1zmc7O6LpH3AiEApmBFEYm2SOdR5S4IvvQq133bE5bkZLTDmp9gQjmiC5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxNJCRA9TVsSAnZWagAAEXQP/iwnSlC/POt+fwqO4LA7\nF+PHBFsxY+fYUyuz99av+BGnCHXdPPDP7SNEPLEwf1I9H7VKkoSmknS8FsqL\nQqpFGaj28nRP2OeC0obIR/puQMWwK25+KIClHY51f2OcParrKakOeHjq2RA0\nLIblAl63MSvg/Wt2ygOO+c2TCzjBhJCb7GK3K2q+YVjfRAcyAP4xE+/2D5j0\nXw5UbLJMrd5KyfzVZ+O5JuZxPh0BzlqDCW4WCHwlJHLKjIBpFxBD1DJvuO+B\nweeoIyFLL/jCpXUP+4ZQDYdGiWg0c3q4A3SukmlTJ61OKuvKtYNyv4T4kN0g\nBrqw0aDC131vKAg7URcjdxGAUvVm7qmJ/E8bI6lVGrDO2qaLS2yZ+dMgL8Ds\n9mbph9zzHl7F1f9OKhu5xvTuYUSgfVplxIKBbFJX8rVoq/Jgs5+ZDeba4Ro6\n1ctRMlkQm610aWHMOe6B2OjxNczaVWXzDRRBZnV3p6fAlYqsOrsm1W25TR/K\nWSUzsU6pJ5AQw6OzIxBNy+Tull7HBGckRlYxSD5JOe+IofwzecXtah9PqfEz\nYQtPITAaOrd3NzS6j2tM/3allRVk1QrcBEjhV3r/DZbrxszOL1mj27fWdTBL\nfGhyIm/6wTJqWyuAyuN18C3Yb74Q+5w6CXzD91rU3UAp0MY7lFNfDw3d9i5D\nwVy4\r\n=tZqz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.ad2e4376a.0","@material/base":"6.0.0-canary.ad2e4376a.0","@material/theme":"6.0.0-canary.ad2e4376a.0","@material/ripple":"6.0.0-canary.ad2e4376a.0","@material/typography":"6.0.0-canary.ad2e4376a.0","@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.ad2e4376a.0_1582240584563_0.19305720985249963","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/form-field","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.765caef18.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9a320903a710305e84812e8c6dbf9e4c6a44c53","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.765caef18.0.tgz","fileCount":34,"integrity":"sha512-7R8UN0mHzOPXeI8LrNa2D2WcWMUrgG8dqHe2v7tF79U81jhhbjvz5Xl3C8lEOj1DDsMWRfZL97mlXjuOJbWuNQ==","signatures":[{"sig":"MEUCIEzIylVzMKokhrFjwY9/4iNexgFfSow9J79szBMedqrbAiEAuvlwAPIDDdN3W4SqPYrrWmfFcKMoW8HRGiEIIW3dLVU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBRVCRA9TVsSAnZWagAAY/wQAJWRPF7+W0YQ7/keU/QJ\n6tQfUPrxC6ocejKhkWZkBxFHHaWzsmRZsgcBg9CeZqt+Nf4Y5K/idsZ0W8vD\nsKRiNcyhjOsYZbgmWFje38330+f2emxLk/+OJWAtyQBL+ICX7/BdfAA+ip7p\n3VOxQ6QuUobulBRvlm8rE8rAtqBKWaJXCB9b1ZFopFc63fCf1E0ke6X4SI54\nVvqe3Hzu5huUn1DWQOpl6ppuQGPmAql/OmJ+wkwGMGcba0iap5l7MXHQLt5P\ned4ArsrLMXiO15poYdHCQ8MVsxqMwdzjJS7d5V6esVdwgFvlNWoyjT1Vg+h5\ni5Q+kNjaLCUkBgX2dfx1ieCkDO6sVb8wnroB/b6M1z5mgLHx3RcBPSUurl1R\nEtO+t55Z4+vgRghUfvZehgMlaMQxnLtT+pt1l7Sp5oDpEcs9Smz7QE2sNIN1\nMcCLN0xURQBPjfm+XfSfhGqmKB0xEfZxHdalQqIVG+saxmjPHb0iSgd3H6iF\nRu39q/lL9VC07bAO3I2pxEKXL8Ug6y3u9SvzykRxiKhyaklwjt885Y6/0quW\n2mcbts0/B/+d9jW7eEQ1Tas3mTneTWpVC3+72vwNj6x/uy8XwLSXbA5GkgRX\nkYpmuVCOlILIabMIA3W11yXnmEIxUMmzT0LLuq3N8Pek8AESWfCEjzKAdcGb\nq23t\r\n=mjAY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.765caef18.0","@material/base":"6.0.0-canary.765caef18.0","@material/theme":"6.0.0-canary.765caef18.0","@material/ripple":"6.0.0-canary.765caef18.0","@material/typography":"6.0.0-canary.765caef18.0","@material/feature-targeting":"6.0.0-canary.765caef18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.765caef18.0_1582306389058_0.2801829195370036","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/form-field","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.949562303.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"012b0a4d99193fc3b6d59489366509dc6679e48a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.949562303.0.tgz","fileCount":34,"integrity":"sha512-Guet9tqCezTwyohDBXdahtBAz8MXwJ6z3DlDY4uWOJ9oX8yfENjp6lj5+Jw3ZJ9wDQhnJguKHbUk/yOTrTp+GA==","signatures":[{"sig":"MEQCIFd2bF0OmlnpzZz8A+4c1j0kEzHwteemY2Uoak6jz+cAAiBpgTf3Ug9aL3Rk0jOCUU+0mrim6gSi7DnZcVTkmY8N/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD+pCRA9TVsSAnZWagAAA7cP+QAcpyU1fuuMbrda1VOv\nc5Xcra3QAe/iel7RDlHabv5UhYKi+ZNlXuQkvWpvagLJ4fCgNREZ9wQdGnWO\nEXw8QhFhJqHskH1k/YD4tL0TTUBSX9ckLCkifnjsJvIJqeJ4j6xFy8ODwlNX\nhw0vvudG/nMnVfdynzJFjWbo+ksfaJcqs2x6i/LE4q5yze1FpoHMX0G+s+HJ\nsrjh7im5stQLMBkEqZ/8Dd6c8QBqbv7dmQDIySAXUTcrPkm/rI0NurMrmqVb\nHnjbGluIsj2/KlO5ulhFfIKMOYK/m7/DPLWb4MZjeHIQqw0JnWdsDtOpX9Su\nMxLg8e+k56h9F9v5yCJk1Gj20gj9atZ+mc2J4VbUHayycOSjTqd3X4tDkT1B\ny91GkVjio0X8PDEN5cX/ixvhUs/OSxSQfkeNvj8e8MGysJRtBSTloE35HwQl\nVx/JVSQgfvwMrU2ZzYfeA06oppD+hfwYRUbagYJoAIHoGuZE7s1ckQmAcL/S\nHfuSz/i9TKBi7mVLhkvXIG0QMTNNPf1JQDmx2WuBRlrVP6r6OuTMo+2ulMpD\nyvtJWglvmTfJCuXg/S8awahgRIPmeCEEYFYyBlmJlNYLp6E8RSMWclF8XXM6\n3xHWn7ryRcx04sArK/owrjNvmTcT0V2JegaZ0pXngyVVil2Ili/nkerbfpdj\nFmDI\r\n=Nhnv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.949562303.0","@material/base":"6.0.0-canary.949562303.0","@material/theme":"6.0.0-canary.949562303.0","@material/ripple":"6.0.0-canary.949562303.0","@material/typography":"6.0.0-canary.949562303.0","@material/feature-targeting":"6.0.0-canary.949562303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.949562303.0_1582317481376_0.2689423200142642","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/form-field","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.7ec96974e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fb947e3ca5cbe15b7f094b3b4978bc3982339c6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.7ec96974e.0.tgz","fileCount":34,"integrity":"sha512-FL0ChOUeIlqZNAsYVzqJb7p6QY751Dt9082FsoayjGlq7ihJ6j4i03pLemzpNx4gav80dsDFop3rX/ErKda3nA==","signatures":[{"sig":"MEYCIQDbbpBQ49PxjpdqJlYtf0jPQqPESzYb59ntvy7n5NMXtwIhALgAbiExJEIjzd2OjlEVS2mzkISs8ZAQbw8PG8sC1E8P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBzKCRA9TVsSAnZWagAAAsEQAIXWAxO77V0X7CJsRKhi\n88/8UdmO0rj0mSDgu70uG0u4mhRcEh8ebPiorSpmPjAcGU+JnbPMfGKp3w/e\nJX3NfDbS0PCRRFD/G+yDfJW6eMDIWkV83yaomokJ2SAIGInCMGtb5xOwyLMO\n+y5YnQPchXl4wzS2yu6Wc1BoD4wPH/EiMqsxDPQH51NzGXzmi6C00bp6YCPv\npoesXgOreOzdfiik8LEUm7NshKhrKAA9I0d2MP1wcrZLedTVZBXo/bhQgmyj\nhaAHywRq5spZcPRAqL9b6RxCjboWr8FN/74fY9xlyeiZxKe9PifkDws9pSIF\nx5liClvbnVq/i9jJc1x5yCFrLEWr5FN041rjxbnTjs34kwYP1+UjLCrsf6KT\nhhQ7Ll0T3OIb7eTj9JUJWQoeaxscR8BSS65qgmbgT/ezVaOn8FwWI0Cl4eYw\nsyPkYi+jDNPog/GEG1kGUX7f6RBYRR22hFXw1vBuu0P5NjZtHaadMP0gdHYi\n1qkGmrX6l4poU/LWVlS5mWv13+Q4ooiElV91uC/G9xquM3PDL9Dxkdc5ZJYd\nDiE9qFbelNu/U9JvOfdEKjAHjmgbjRVqs/RdWos2snVhFcPln0snW4iKd3SH\nhK9LsmbIbOMovN786jYyf3lrp6B3Tn+FJ7IDmJL0APTiNrUCiJbVdqyBT7W6\nadAz\r\n=NT7A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.7ec96974e.0","@material/base":"6.0.0-canary.7ec96974e.0","@material/theme":"6.0.0-canary.7ec96974e.0","@material/ripple":"6.0.0-canary.7ec96974e.0","@material/typography":"6.0.0-canary.7ec96974e.0","@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.7ec96974e.0_1582570698397_0.7171724407754398","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/form-field","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.265ecbad5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8f7259c52d352b120a52ec1d26be727c8c656c9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.265ecbad5.0.tgz","fileCount":34,"integrity":"sha512-2Uz7Sc7C9t/CleimdjiSu/km4FF9mL+2LJY6890SIbPh25kGma+lxvxjnViicM1hFzzjcxZ95HMEJqgXK+hwEg==","signatures":[{"sig":"MEUCIQCmWw1k+hUEOTsdHuGeNkNONA1u5tQNCmYfmrm+r3RqXAIgCxQM8b4u7Sk7GYbQ1JM5p+pKvrKoeOenHyGDv0/M6Rs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYsMCRA9TVsSAnZWagAAUDIP/jNK2+LhK0k20haotIJV\nthnI8l8X+RI/bbXy5WUD1QoDvL74u//PnU5kP8/lhHwqw0NGjnnMZmMUuxy6\nSM5mAXyECMYnjrRXHz3u2SICY197uM5If/mXQvmDFI+WRoO3UCfiCwkmqSdk\nIeTg0q3y8DNoYVpZovwB9VYWltUKifU4oypL7uUoTlVdWYM8K7wfgz+GPxAT\n7s0/uA2/cz7EgG+uIegNSFRcYTCR8igbzugY2rVL8cwi350sw0DHgzlB3yPY\ntZnZq4lvwMEtByq9tlis7udiutI4k3JIPIwEDfS+wHBPKhq3hW/CC53f2svm\ncjv5NJFb7LYSx2oxj02ObFT9JmNF/WfWMU46Ca0IxREsRmUJbrVBIN8XdYgG\nxih5YHRMXowrxIYV09OF5O2QHo84k3sOGr74aYNA6pPtEabnZQQ+Re2+l9BQ\nos6DcMwUT8MsL96G91JUVDvq4LyteehTnjGepRKdnaRl8FWRIiY0RKqaXJvZ\nv3DNp9kj7j1WjjkBu28xd1dDycTtm8M7Z+jsMiEjw+t68v5v/3q1WBUj9bnd\nY+LL2YljlTmumlg+pG/s/uHOsWCKHqW92UJniy91H42Yrk5LqO4t8YfL+sN3\nUwme1q4dyP0sWEXuIbZXTVLw2qgK9vPnPTN49v2Scx41xpEO/KYvKBZOTze2\n6ox5\r\n=GU6g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.265ecbad5.0","@material/base":"6.0.0-canary.265ecbad5.0","@material/theme":"6.0.0-canary.265ecbad5.0","@material/ripple":"6.0.0-canary.265ecbad5.0","@material/typography":"6.0.0-canary.265ecbad5.0","@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.265ecbad5.0_1582664460117_0.11200068796425344","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/form-field","version":"5.1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@5.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91bf81cb4647d655b7459df0aa19060189f55564","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-5.1.0.tgz","fileCount":33,"integrity":"sha512-gF2YoeCd41fIM7U1v3psEqiUdwbylbzb6BuvmcKmH0OQBP6lnRbLSbgKWldcHx2VyKTdqusu/bv6/NAe/98QiQ==","signatures":[{"sig":"MEYCIQDNZKQAzbTRY4DwYkgHXVkH+5Vr5GlJL1HUo61g9sTQDAIhAJulKhNIm1TjRcFX9Uf/xUfgtx+STmIosKu9r7pcdV6K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":152586,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPPCRA9TVsSAnZWagAA8y8P/itXfFjiHi+GeFMoG/jK\ncLjoPIqgIYUgbxnKcQ++esbEdaMuEs7uqDE9+4QlFx0GdmBzm96ZW8g58zU/\nM1dYUT+ZTTeNI0XCGYPfBcXSUJ7xBfy84m5Gl0o/Wt11QGqZQAFJCCBTDI1j\niR+W8MoWxwfNsjlFaB2Xfpu8ILipQnZ7jAUZHis3M8awemBh3cqyF+HFKrwg\njuAkF7NHpmsd3YNt2EU4DdYQ7D4GO+vGIX9njN+Z8JVQxO9i3rSTwVoiiSds\n+ZoC0X+cu777WyOMTmKROfGEm2j1CLPnkeZV+Er4VXJSdLIp/5LtVIXUsjbH\nI7y69QpEDP2u9lhgKIa/JcRjtNkjBXTwKCazMMLV2DolwjVXmu0fVAK+riTg\nuzIdqbus5pQ/XipIoyyuZ49zEIJ5dzARfdnba0OdvNMyVK56Bt9oyiCa1zKs\npOoPwF/nEmGVTHuS6E65AfDaCddSKK6ExzKmv08zGroDa/lCjV2TXzjA1HYR\ntyT3EemUledw5ZvyzgNXYp8DbYVbw5L6KxUDtXjjYDEeOuOHY9SoPiXsclsZ\nqJDekgYICh0mn544bB38EpzvAEUbCozrSuqOBn3uL23FAtPthKMFmUEtFk20\nT5gHjHSgw3xvaquphbMd8N377Y9a93elM3Sod5LYtnep4sujI15dKqDnTefj\nLNYw\r\n=CDUQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^5.1.0","@material/base":"^5.1.0","@material/theme":"^5.1.0","@material/ripple":"^5.1.0","@material/typography":"^5.1.0","@material/feature-targeting":"^5.1.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_5.1.0_1582666703202_0.34529062867948346","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/form-field","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.2cf87456f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17ee3025dba9a6194322af1041f8acfa8db18a6d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.2cf87456f.0.tgz","fileCount":34,"integrity":"sha512-fRhImCKgZntiwHXA16qycxDLMmu2pXACwK4DAADefVHwOj26+WixJgkRyY19xTt94Pfy3NfV/Ew5BQeNyZjXIw==","signatures":[{"sig":"MEUCIQCLiPKjq5DWd5t2/lbQsGs24tjp1BPxHrE7BmH/zOmAbAIgRfpj1kMKmigK8CqwtFbiyqCfwoO9oREnAXBh3w4Cxic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZP3CRA9TVsSAnZWagAAd34QAJkzI+MH7r6a/62GNPN3\nVhIAsFfMezmJCxssszSkXzVxitdWHVr+t5s2V/LJt79YciPjX1hhqYRGHkZs\nkjoYeqS6WxkrmZuBR59cJ4PO4DhOwyaBtCDb5oAE9Ox1dT5S439P7W7mR43t\nvgRTlFStdxn0yAHkEVmc66gl26Fb2L5rqad9zC/7k6PrIMr99bhZnP9VM/i6\nzkN35l8Oq3P1R4AUzFdyZXLYnG9cAENstB74hQwtHlRlo+VI3pRcxd+N8KPC\nQRCktnoUCBeQOeNzamJtYZPtr+Mdq/ZXPKrXNwaMGEUYhKypMGwvBv+5APqG\nUf2SEs0J6cRgRGjYUOihs/S7PBq8CINwaNMDLc8XhL6ySn0fCMoiRNRps5LF\nRzSBhDcNNQZYPL3UvjTXAOMUlOaDzNwDOUlCo1rwitXg3z8LriMjB/D4rQN4\n7SPYm3CLCaQZ6qIt3XTfl6Ckli0QPjWu+ZUf/tYQSlS/wHLa38p6Zz+iMpaT\nS6wr++1c+sXKDGayAi/+xBwacsDjwSpen+NpHuTx8Ui6l5yCuj4nCNMIkP/0\ndiZAR8j/OvLpoDnD712wWjm8jbeDocS9PQQZsy3s+feUuFdMfCEiEzUxrcZV\n0Rqef9YK/9/mZ0dVS8qSz5TUZHQ8lNIHromaS/2lN+bkpnB2QgKUwk7p3Wnl\nGF2a\r\n=Dmzj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.2cf87456f.0","@material/base":"6.0.0-canary.2cf87456f.0","@material/theme":"6.0.0-canary.2cf87456f.0","@material/ripple":"6.0.0-canary.2cf87456f.0","@material/typography":"6.0.0-canary.2cf87456f.0","@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.2cf87456f.0_1582666743065_0.12897383233737392","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/form-field","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.781434a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"726222e42a86ac2c86b005076b73a9687caeae40","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.781434a92.0.tgz","fileCount":34,"integrity":"sha512-ozaGT7dogwoDpmuX5NsEHwcgiHKnihvvYJ7VOaWQmkdtxonlRfnx+BAQVR9R9C+gqvjkBdmiv6L6EOVd2me10Q==","signatures":[{"sig":"MEUCIQCPh+s+amXBlHZkLPDaZj7xSTq47bCFF49xoL5srx593QIgZHxE7BU8o866tlVm1d91PbCC2wh1YPXDFczbVeULk0A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa2OCRA9TVsSAnZWagAARlkP/j1obdx05ofxz4hgdPp/\npMx8Vw2m+MGbIGGZ7gsdrvJTawNHWtm2GdeAx8aUxJnS5CfjIXvZ0iZRiZVH\nIP+U5HehuqGcKlU+eeiQ/uaQzfXn5IBZzQqEHCvYqd06OlZC2njiCTaPxC5o\nbZwRhHOBwxMBkLarPIKMguDIqBLbcBUYCWpqXEqZed47/mZf9On+73umV09i\nRxzqFxgIEVXOl4HFQ+NROjmV+oZmlE3e7Dw7C3lh4ZJawfj8iLGJ0lA58D21\n5FSeQb6gx8ftPWkeFwEjRfWMqOHb358OrIeaMSCtmuCYAIa+wLCIFKIE32zg\nl7rbLPxxm6zh4eflovAOndX49PdJwQNZP3WIvg3+LAnzB/Rq4JhrsGcXzFej\npnwsxScxxU1w4PY4i8LKlb1zB/9SVkyvyrZTShgY3Tn2x4brH9QeWH1/Oiik\n9yrflKdXfmxpoXU3FlPogjBzXw5YuYU1nxRp7AsxfknqlbzWS/bG3LPBdNic\ntbdQbq5TWHRr927BMYFfUufD+2/p7s8qTrhwFc5efC5X+d0JuYC3901YA5sX\npntutvOFD3VhNuBhzArlMjq79tPXTBCMZG0xyd/LwJLTShisUX1ZAsesCrvF\nly7jyoMOdirwQq40+t2/escSUJTUGqT1eeKh3XZpMmBhqSK/addd9R1KYQq+\nW0te\r\n=hAz4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.781434a92.0","@material/base":"6.0.0-canary.781434a92.0","@material/theme":"6.0.0-canary.781434a92.0","@material/ripple":"6.0.0-canary.781434a92.0","@material/typography":"6.0.0-canary.781434a92.0","@material/feature-targeting":"6.0.0-canary.781434a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.781434a92.0_1582673294418_0.4383072009784048","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/form-field","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.d6f60c98b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3feb1d169e377253eb4eb017b6e952b50d8f9704","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.d6f60c98b.0.tgz","fileCount":34,"integrity":"sha512-gPg4zp+LJcK+apGS46R1veK1iwXupf9VK3ENZ4beapQOAPUbZLruAcmXtVGlRLLFEiuIwNykVLpu4piz5X/2Tw==","signatures":[{"sig":"MEUCIQDRhAufEe0I+oxvQyvSdFgTPVRcWkE+S3LHgDIJRxDIzwIgKqdllmIEeJsuF2iOR2vaPwcyEIoRzOXHrJ+sSu0s2Yc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":153091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY5DCRA9TVsSAnZWagAA+RUP/0sNXTd3g8iIx9IrsseU\nSDBlwzFdg+nENGbJYBdzexfgdd8c0YUl51TRFATCp74am4VMcS0Vw/JISV2c\n7DsD8ilwD0vbxhDi0Vm+7HJHu1W4QaIoD7QQ+gxrwHqyoMRMfjvIrITdi2v1\nxl2TMZnHwI82dhS7vs2J1bsEvT1N07tb4+xXDjsJm2o0ShTSwehm4OaHArMe\nrqLT57fSg/u3XobeCz/brc79Dn/4CWFROYwopRML+lq0ZDiZoeF6ijLzNIs0\nAM/HfgF7gLHXnEMhthLD/04kCVYKkjFHRbAGEzo8NJ2DKc5MGji38rroK7tP\nWiTQYZj8zM0Xj/UnjPuDORUTc4Jg8wfwNU24XWOaOkrMs30rNTexrVkqWvVa\nUeVNEl13uXNK0pz/bTYF1xMDhy1xLaT2RxoOuMWn+a9LN5r7tkvWs0W/YyM8\nGU9aGB++TuT6nSkwmisCMhxpSGo7ZPAIF5rXKd0MaRwokfhO7ZCv4wF2RWay\nvLDHMVA+F5B3vQ/pIEXIKds8HERHultqoU/c0p+/d7fnXjOLaBOsAiwxEhE1\njMsVBoYMfOZw+yNEAOktSWX/nm4MobXDrhj6hM7rTX3gjtcnrYw0R2107MU6\n9QfIZFNpPZXXynqQ7MKsMxHMI7uMqn25w5aYWNuSWcnK6xB9vVV1hosxZIh5\nF7g8\r\n=Cf7+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.d6f60c98b.0","@material/base":"6.0.0-canary.d6f60c98b.0","@material/theme":"6.0.0-canary.d6f60c98b.0","@material/ripple":"6.0.0-canary.d6f60c98b.0","@material/typography":"6.0.0-canary.d6f60c98b.0","@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.d6f60c98b.0_1582927426891_0.23207380746536277","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/form-field","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.69edc6e28.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fadecb504fc84c5a5718efcf409fd9e39c163745","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.69edc6e28.0.tgz","fileCount":34,"integrity":"sha512-9wfe7obzJBr6ZBTA5SZB6qVj7Za/HvaNeadsg0XM9xQOWHq5Yxyqs8lQApbpfkP9H31apoSZV4UzpWU1dX4F4g==","signatures":[{"sig":"MEQCICRYBvHI4wg4RIrDK+yOEnhy4jRUqM5vk+BoBfgsIJPgAiBpyLf4B5ZW1CeqYRnL7jGH0KmvF0r7ZoYkYMX3vaNyjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZBICRA9TVsSAnZWagAAyFAP/08GLESzg0ZYSgbm18J7\nimuhKadDUbPGRXA/a1vlcFE7OJZ1eQsnj+PbVp30FmaL2j/ZmNmZpYbXmAxE\naBxAVoEkQcg9dQcso9RrR4kb0Ti0eUMbOfqv2QNiWFrfO11vAN5BF6zQ6jMY\nmr2O+4sGwxBHm1Hn4gqb6k6qMmarR4zwBNhrj8k39RYomOjNZz5PJSxjdRFr\nX60Zvr2c66qo0QiDoKmsjdJjf7Dnh9eGxWgy253ujkbKuIekhCLHnk9b7O9N\ndoYbqbqY45TZGueo4tydk4q/oxwFwrYEJArw2iuF56MEkSzCdjy9cfZGyA7B\nXztKhuOstmLcBepU6wXgY88X05viut7+9S/33TSy5/2R3Br9MD8hslzpYaec\nawVP9Om8OXxWuVwTdUO9URXY2vQOnSIDLTGAgxbAl6PQ/SXY1LOhPzJTmxmX\npghJKfDJqsUOkBGExAbh+HtOlEHOhZVudVNYjxSAY28mpSd8nh/CX6A6a+Sg\nKthpJHgpOdh3ME0+e/uZLv7Viff+vlZfTry2nSGsTnSvPHs9XYDAkHgNRty9\njFzEdEg45tL3qhKI9yN5v4yX8BxWONwbRvNj71TSuUIzKK8qR3AKIT90gBrv\nEuBlCT7N+Q7yTLGMjreeDyPgSFq3NhJPd0Xqu8wZS1hXurTgf3ePKRAHRgiG\ny5Cy\r\n=AJiE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.69edc6e28.0","@material/base":"6.0.0-canary.69edc6e28.0","@material/theme":"6.0.0-canary.69edc6e28.0","@material/ripple":"6.0.0-canary.69edc6e28.0","@material/typography":"6.0.0-canary.69edc6e28.0","@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.69edc6e28.0_1582927944426_0.2902416422603191","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/form-field","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.9372e4939.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efbffb3224d163c0cf193cb44b3fa8be19dcc558","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.9372e4939.0.tgz","fileCount":34,"integrity":"sha512-d3M7X61ALOWVgrUkEpQU20CD/UD3FUyedvyJRrHaif2Dkbq6sbmLYh4rtMyJ+dkeymC5fDF84j2Subs2ZcIrJA==","signatures":[{"sig":"MEUCIQDw0LQT0L+nR0KRr4qtzCY0Fr+U2Ufs0Rg+gYpb2kcU1QIgBKpy1ZV9oToW2HprJGpIBYfkU60yZAFUUVHm4B/zKWU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqu5CRA9TVsSAnZWagAA/lsP/2LWH//6lZ22orUmjcTS\n2rqJKMM6z0vPcGSyDUHLypDnOM508wtVO0x7TCbOrdS0iDnqoGtCj9lAtmbS\nIVwtUSeoyTjId02aPR+5blzWIX99TSYv609Wsdto35o+K9HpOZXhUhzUF5u2\nm5d5xDn6IZ5ddIkonNkDGQ4z81nq/L/H7SB0SfbZ33L0z8uNEDYE8OfUYx07\nruw7KsZLQKTYzO2YI3N4ke2BXACeo12RIDQDeZoS5W1hoqrtmMZ32gTH7J3b\n9kOE2E1U9cThbIa6s8ChC6xLFmhe/Uzh28aCnmxsLQDVSUt1/GPwP+XwOFit\nZ21rjCHerjahbu7uUP35i/DOUiNq6TLzTWpT6mFW6qwXlupmFHqvDSvZ9J9S\nKdHZc+VCEXy/mf13JtRUeso1Otx0Nmprx2cly33m2n5iikHxXiEZ1zNIAw5+\njXd3/T2h4tQpo4/iSV/ucAyN06Y9r2r6zt8CmFIMdvpKwdGCAeBNMOhGdIxy\niGqnEjNy7KS3RuoO9z4Z4eDYQ5ikzumJGHZP+MTe98L3zqbkItAatr08NwMm\nR/tqEZtd8KhA/MJrsFvZ3mcF0zwPTS6JUXyMomKuatYRoDIOwRAmSKAebCdG\nU1GGG0uzt0P9MEfzzLctUMHSv2W3BEcPofeKw+d8cFZ643gzpvsQ3hlfQq4B\noTn2\r\n=6eNR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.9372e4939.0","@material/base":"6.0.0-canary.9372e4939.0","@material/theme":"6.0.0-canary.9372e4939.0","@material/ripple":"6.0.0-canary.9372e4939.0","@material/typography":"6.0.0-canary.9372e4939.0","@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.9372e4939.0_1583262649237_0.6280316639336656","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/form-field","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.9cf5e9842.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53fd10584328402d93c79e34037b9ee3b3dc55f1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.9cf5e9842.0.tgz","fileCount":34,"integrity":"sha512-B/f3Ttwyqwb0hK6sPDwraewoJ/N8VTCKdsuOsjA9sBvwawFVxasW8YQsX5QB39TITJIb+UKHuH3s/u5oIyt6pg==","signatures":[{"sig":"MEUCIQDaSRfcx4YvlN0juJmd5EtabkriuxmKCz4JM2QW7/wwagIgARyU57UgJn/0js8oeUEBuEOqKd2ZubvMJtvuSsXj8gA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXueICRA9TVsSAnZWagAAxzkP/3YqWUDYSE0CT+BKUeUM\n+TGIF5JDZWPx7QaEEOBxryr6MDKnWhrvOLME/xTe67PrWwwwe7vWdKWop7/S\nKq7hLk6T+kKI8EIuo6msSZSRHO+zBWnfDdisMTYTfXS07zltGKs/5xSzYexM\nPwMIo38CXcnjr6vmK+lNO670AqSziWbOottML7hFERtBRApmHkGUhBQvu9VX\nbPwANW9q+WyS1d50bzuTinhLXdrwKIGOHm2e+9wHSAABjlxn/0zYD6mReLqJ\niD+rl0+DvNXjmIoAez6SJaWiM10BJf1UHyBrunE07Yrus6/Ms9h+VBPCBBVi\nuzQ+SUWpiajlnyZMtz+t5liz9VfjeUWdBPPG5KALHht5WrtnFm6e5qw21dU+\nbfC3tjS6X1X8oH51VklvxT0dmbmNtzTtR2jUfSb+DCAsPP6yKq6U0Ob2vjVx\n/8eELYrqPfILMND97YG4dO9A+5omF1iv0U+9YbdqvXHt94iIXguJn2rz6lJu\nIhh5N1sfmH0czSpC3vd/hJMf8JiHU/Z0VMNQ62KF5Qnu/b8LAmFB+c1mOmOS\n5nft7Wq4S2kc5vJV1j9X4s6+bG/xWXeNNMXxkQ17GpM6QIus9ayNTXgfuvP5\n1QsU4t7VdlQ2w6wAplPM8pKiJ/DzvxWalBmJHrO2R6bCKIJ5/BMTp7yVZUH4\nySRu\r\n=I5Mf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.9cf5e9842.0","@material/base":"6.0.0-canary.9cf5e9842.0","@material/theme":"6.0.0-canary.9cf5e9842.0","@material/ripple":"6.0.0-canary.9cf5e9842.0","@material/typography":"6.0.0-canary.9cf5e9842.0","@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.9cf5e9842.0_1583277960415_0.5423050559537115","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/form-field","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.3657f8863.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5db5aa8ee64d80ca9a419ad7bd07ff1974164115","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.3657f8863.0.tgz","fileCount":34,"integrity":"sha512-JWeGFF1Ma6ju8P8bmnK27Vv2rMdpV3cdTSDBDvXVvYDawaxUVTca8avGv+AHF5vgAfnLQXQ7Ehnn+BJ+pgS9qA==","signatures":[{"sig":"MEUCIQDrdfxF7aM0mIXvcjo3MJi7DExRDsXp+8k7UmWPlTNdtwIgeTuXF3J1nlUZQhWzy79uD5hEH6m71PfI5wW/NPd6deY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+j3CRA9TVsSAnZWagAA/dMP/0iWJzicH1aC1sAWe+oy\npzcdym0OnjaTG8WrMERONlbm338QbZOFaMiq7YCh1xI0kYlW+TQHFSzwQ1sg\nC33INtfm/2DIzre3QVbwbjHkV6XsaWP9fxKU7Kpmkp2PQ0Au+7Dxy0yMrsUx\n7MCjZ7SUMk8naCg3OFEj5ZP3WmLU8EaYwnTyaaoRrS9pERzkevA1dOcBb8Ub\n+HYnKi8cHnlt3BSA7jx5pZTB3cn8Y8r80Zogp95FDtF0dkoGatBrXuE4ERql\nAkZRGyg2uV8LP2oBwPCk6TU9F4NS6qUX1A5g9Egr6EUeqhtkvAZj4ZIw5qoN\nHVXQX936PmZNVo12Q0QNRj4fdb5ad+jpo6NODLANuXq3hq1PjDhLxWr60g+g\ny2d6ez2QZllrlIMlC7+2bVTy2yE1sKRQ7QXhMKm3EJAQePKDmjLYFRmG5r6V\ny4H/unSPHkhywVksI4Ls+aCnNQ4Zm7LZ8OdWwvj3vEZHGSrqx2Bg6VKjgN8n\neuA7LbiKRLF90dHE+eES51iHz1H4Uc+NPVHtFXoG6UWS9gre1Bfv8nLIYuEE\nv4mrfjhIt2VA2oF71R4p/OGM41mO1ltk+2ZGd0xc8bMDNV6BnKlaDOT7Ul8G\ncaiiQRPhngGbgQ6SGcVppRK0bTbc5jG4J2fPPgkhXyhObWK6CaBncDUr+Mno\nN/1n\r\n=fnaI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.3657f8863.0","@material/base":"6.0.0-canary.3657f8863.0","@material/theme":"6.0.0-canary.3657f8863.0","@material/ripple":"6.0.0-canary.3657f8863.0","@material/typography":"6.0.0-canary.3657f8863.0","@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.3657f8863.0_1583343862978_0.9762312983936348","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/form-field","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.98b843417.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79fd717523652ae24cf56cc2e41f552d16d2894f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.98b843417.0.tgz","fileCount":34,"integrity":"sha512-ir5d49cuUEY1xqUIyfChk52WyCdEpTGaWvg61ZNSjvrIoYJmWWPynY+vzpmD3tIdE9TLoYufvLsHrpE/v12/xg==","signatures":[{"sig":"MEUCIQDlZwqUuET4jf57P1IWFDX+vLZlJsyeC6lIS8AWv35u4AIgBNj6HZ+AgXIuu4YjS20ARcS5nFeDT3SNzbWeusMogKs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUV1CRA9TVsSAnZWagAA5zgQAKBWfpXG2x/6pQEMBQCX\nWw/nPI1fTQiHGVxILtQQqOstyOzNUxlknc1zW6F+KmHYyhdhE+lpJWCPdhpf\n2MeRU3fbxdrDfHqxpTAJ6fjBar4Vhch/x8rVSEZRroJXk5AAdeZt/ndeE8XP\n4drWzNCkN34qYLFAROQev2UwCIgvbnSF8d6Pn00ckJKXA8AJaGY6vDY65ybE\n8fDmdEai1lfDyGilWNmGfXMnGz4t1GSQKJRnuOvFpXXaii1g5cBVCdFEolHD\n6MZOR9bqjPExEVTdbPeFcqldrppR94w3Wcij1wcPPpRPObedpDMnSimM/JZG\nBIJpBJqMLrlt6As9LTRVsnAn1LVnV+ebSwn3vpOwMEv5FvfbgV1vZy0Is2gW\nFtKOh6wycRmFfEcvLRcLoRoKhuNW/g5NFmdURQ5kskPLuFvt1QRY04CbhktC\nR3AN627bK5EEgAPvc/RCmMgIV2ZrPtvdg+01W5LG+xi6mxuDezOBxb63pOpq\nWsVwBoqcY5eAQvPQhMT6J8dJNzj1vHhglzujX4NzU0qdlS5RJGfTqiFL69EI\nuwb4BlPliXwltzYPnrMtySYUefv9nk/TEvpoKOpJx44IYbqY8sNixlz5jZJu\nzE6A9yZwZjTA2sR6lAp/M+xALyBKSR77PZHFWs0wy9WvvAJ1L7MBnOLkW+4s\nZdtV\r\n=9IPc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.98b843417.0","@material/base":"6.0.0-canary.98b843417.0","@material/theme":"6.0.0-canary.98b843417.0","@material/ripple":"6.0.0-canary.98b843417.0","@material/typography":"6.0.0-canary.98b843417.0","@material/feature-targeting":"6.0.0-canary.98b843417.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.98b843417.0_1583433077088_0.9594684867966787","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/form-field","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.17b9699c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2ed3bf4c44d1a581115097eef44e8ede05c3003","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.17b9699c4.0.tgz","fileCount":34,"integrity":"sha512-sISLjtV6sJgMOFngzMP+gGUBhbg2UoV98qflvCqqX3opyKpDdy6wxuVDhZlfODK8ZSHHGlRe7NFjyLVqVuY6jQ==","signatures":[{"sig":"MEYCIQCawHEjTkOZD3C4Dt/RVfRnAQDp4GyZ6Z3PxGcL74Pk7AIhAJ0jU+Q7wY9aZWPrcWQvzzKoz+0VTbSX7PT01N6S3Lvb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVF4CRA9TVsSAnZWagAAvYsP/1DbNvPadkwDiisG3MH5\np1BD4iClL6Fr2q8pfY2kZPQnDpyzJ9wWkMRXbVGYXGARS7LLwLzLbeGwOQ+D\nMwTR2UHnyzqtTfxIBS6Rme6boz8tsTYWO9wroS8r3G3Fw4CkGKT7RGUQmC9v\nNfvUWc2ktctJighPGlR5l7JKNyXQNLGRmpZBh4m1aL8ts+z7v8fSAv2cun47\nsukZn57hIiLWFboHTLgv0o2KCjQ526mnGNjxeE/wQ11n9tQ6AsLmo32yp72x\nqewsrVPp0yg0zUbMoWH7K11Pf7VdAUBoBuRt7IjE62nrbIFYYlAB6J6NYYT3\nz9VPfaFSonQGYeMUK+GMQRzc0xhnaq1BkhPwNsjkpr907gWgIHCt2atCwcRl\nFNx3m3hb7z62xxZTJTMYkOno5XaePIp3flqjqpSgKarEJZPu6wWlzmi9vjH+\nAdfj9LKV/zZ5/NgweQw6okRZrs5Kr6LuAZF4jnkZbw1vgifYdqbrUNCo+upl\nXqkF0xB1O88WQLYqw7/tDPBw6AULRZYxWrp8gugRoUYbit/+NYsQGo8bTEOq\n1uzEDEytdI5L+H+Snt4m/inKFuAiis06FRqWmvXWskl3DBDrzGKb5xcMVgLn\nZUfdVYKKMv2BYLNCFXzunsd3LwEmPaSr5HGeH+R3UdBNhiUepxzYsk8WIWTR\nEYjx\r\n=x5E/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.17b9699c4.0","@material/base":"6.0.0-canary.17b9699c4.0","@material/theme":"6.0.0-canary.17b9699c4.0","@material/ripple":"6.0.0-canary.17b9699c4.0","@material/typography":"6.0.0-canary.17b9699c4.0","@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.17b9699c4.0_1583436151470_0.10571286459968166","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/form-field","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.6ee035572.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f637545ff36e3567e069718a762d85dd6f09a374","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.6ee035572.0.tgz","fileCount":34,"integrity":"sha512-d9GKFiVfI9zeHjweByZC7w3gKki8q7j7qlVpF63moIsMK3OnysvnH1paOFh16eO0kAkKvhLVwDEn7aQE4ucipg==","signatures":[{"sig":"MEUCIQDhbA81YPEjVdmhCywReLPaGTgbSxEbSIHO08rQnO++wwIgZMw+ck15r4V+zh3d10aL0OnYNpziJxUR43cJrRMPPPo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnMPCRA9TVsSAnZWagAAtrsP/00PuTvkSFGlTJyvArbQ\nR11P/r0eUgdoc4wd4rp5TtR4Ec6aKglEw+rsy7xJts2IUdS4qlnKlEUwVdDI\nLHHTfTUAys6VUIi+krZhxR2quvl6tLqu5pXzIwnsYIHTt2wZMn2y9hP3MwzV\nivWGnTGzzoVRrTyukoXdECXWnuXfq3enRKn7OFWFdsR3mmasnJ+PJz2P7Qkq\naoiUtW+R9kTo5jefZx9kOOOAhHEo2JY5+QJklAKqRXNAxXIdWdVm/HbQDEra\nUspAi+FXkDNasBCxfExyyTeaR/P1SSAKXI8TuuC+pCJynZNOlA3eUfiM6GCi\ntSFy06aEVE9ptvhnIwJZpR6Wah27jyv9kb5ylmL8UBioYKUk+Wg0ro46pPTn\njWqXWGGQIPprWppjA1urf6zLLKUgImd1f688uxADUDxl7a85E5nkKBndjtst\nrwJe4quriEsU0+WbyBSCeGpBoaKSEyl9pFQx/xAor3rH6EqhvJsN3v9gi/nZ\nXZmHPxgsv4/lc8gpYonvTExEdHJiAjXKSHmvoTXF75BCL+2ypTHMz2+XUVrt\n4Goli88zx1N9Jo2qAQYbTzmok2+QqkOSYIeD0zpQfnjKpPqmgE9InxEzFXqv\nDkiW4QoJIc3DL6+G7eBCdStvge0AR3PdoBXd5ukwB0Bcipl2nelVini7RPXI\no1QX\r\n=bZF4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6ee035572.0","@material/base":"6.0.0-canary.6ee035572.0","@material/theme":"6.0.0-canary.6ee035572.0","@material/ripple":"6.0.0-canary.6ee035572.0","@material/typography":"6.0.0-canary.6ee035572.0","@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.6ee035572.0_1583772429958_0.3620881354505008","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/form-field","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.bd33cb56b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1cde4065f74c9363cf3e2d89cb4d260f8b833361","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.bd33cb56b.0.tgz","fileCount":34,"integrity":"sha512-YK3bd1Z6r2GLnRvyB4eIqP2/Jybg9NGtoqo/LcHmO0Lgwyfrj4ZC6Bg8ryadueKbFmL5oAk8S6dfmKj7Fe84aA==","signatures":[{"sig":"MEYCIQC8D2TjdcqShT51DBXSUyFbs/A6i5Fa/wUX9O5HBAD9FQIhAOrOzkxYSLvZnNIS8/VD/dB6m8yXjoQ1s5OUQrQr2A9d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZntTCRA9TVsSAnZWagAABvUP/A6GR5bcsMXh8c/jA4DJ\nzY8p0uSyX3bU2wN14D6BfLdbjVH6POLNG8Dy+XfuvERh9SKYlplCoi+j/E9R\nUSKuUJ2YxSKHLLZ2wEOJZTUDoL7N6VMrVLKqLdIIQmMnwQ0SfiQFRls1uzXJ\njgQRykYuYRYo67sNXHCtwQdf2I09byxdPDe1lLNTKzImDjmdsf8AnbxO2ZXN\nUxcItcUvfX5aB7GAburJx5w4owNP+nE29oIffRvdJqdsY6lKtFEedzMt7fZV\nByLcyWmqHaHyB0TNkzFPRS3v+e4aei1pvoSX0MXKNhNnbeh3UYRvIK/ssEXa\nLsdJK9PpFBZ63sDaH6q8fOzoyvCJzyW89x9r1yDf1PTq/LqXMnjOpps60OY1\ndIWivy40Cr7Tizzf6WU20rrpbTHb5uPLvYdptD9v8x/acpbhs1y5gdAAdwni\nCcLkHRCTDvck+caQcqpD8rfckO5XCosi3FCAa8uUdro2zOKWfbGhgZKrt1TB\nafcV4e2mgJpNEKFgmjOPuVX69GnMR9yYz8tEMK/ndyfde56a3K/FZDmWZV/H\n1gM9RFI+ZrOaCcCoUCr1XsRi2erZhHZn7TO5LZCne5d99GTc8rpLvqykJdRV\ni2subzysU9mmTW1BpgO2cw61EH9qaXxRf7eG9O+cE5t5/nXB7XtFo55xvObZ\nQpW5\r\n=LjKC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.bd33cb56b.0","@material/base":"6.0.0-canary.bd33cb56b.0","@material/theme":"6.0.0-canary.bd33cb56b.0","@material/ripple":"6.0.0-canary.bd33cb56b.0","@material/typography":"6.0.0-canary.bd33cb56b.0","@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.bd33cb56b.0_1583774547335_0.6200466562114744","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/form-field","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.26c049afa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c1dcf98a57a0f05bbc0c86e6427370734db0467","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.26c049afa.0.tgz","fileCount":34,"integrity":"sha512-Jb1N0Sq0CZFA4k+SkQ0gl8MDWRRo97HL+Mt/rP0ktC5ELVlWn1TzzHW2Y+ZDe3GMabnvllG98VBAY7wuFi906Q==","signatures":[{"sig":"MEQCIBisfmxbOqpvZQewwYA+zbKubKJx7CVSoMaw1Y1usHW5AiB7CDEforWjIYWGzKK2oNhflcj/LyKYH4A16/bBkCeuoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8gxCRA9TVsSAnZWagAArSQP/jAB+S3LKWDE72cRWHg3\ngJ/CxM1Eg359wKEL2E/H2zKY21YJM8mda7DZS++y2r6FpzJq2/FRYT5daVu6\n7ooXnL1HJHdY13wdepxnn/sFiBlY0nUQ3UotfUskHQXb8l8YuwyxUpa5g2In\nUoos71NjkG4B15XdXK1Z4DD0UJDgEZVNx9lUgiRUlLe5rmDb18wAM/MJUmWy\n7u3j4HGnBtMJbBDFHYNcF0xgNad26HbSReP4cEZQoiNCVx40ZtuggrspLbos\n3OOOOQG9N+ZTDRa+qDeNSZjl172wZG4fTT75U3004x0cFYMys1F1khtl5gOa\nxMNHMUmfye4CzcRjFuYH9uADRZZK8TcRosn2fuopqj1PKkznjaWC2DOT6TDL\nu/A8VEPEMLI632lPicceu7l+EtKg4rxPWKde5RMeJZBsnpFP9d/OdFsRyZ3R\nckgSX2F6vnienLESWUVOQGazG6OtiyJ2aF+ZftfhXYnP6J/i/3pppCdgiBl6\nENIrSDAP8PuGpJ5xIQtRBAYMy7LXNc51Ix8dj7Xfr9NmMFtSqP40xB50p+uy\nvCXUo/Pyt0LjTNDBsaXkPApM8k4gnwsWWdbRRHxSgsb6Sk9trMki7CGpxbeg\nQFIccIb1KqBhQ2DM3KMCSL7ppz4F/a1QtDf5G5+kI09WazM6h9n0GqtmapdX\nUuUQ\r\n=ejxE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.26c049afa.0","@material/base":"6.0.0-canary.26c049afa.0","@material/theme":"6.0.0-canary.26c049afa.0","@material/ripple":"6.0.0-canary.26c049afa.0","@material/typography":"6.0.0-canary.26c049afa.0","@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.26c049afa.0_1583859760905_0.22363197083081499","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/form-field","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.1db5c9fc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b3cf5009ac7b27a82d984d2bec5d779f0c4b7c0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":34,"integrity":"sha512-UjlY05MQsweUBqdsKxVwnjF4SWuxHepvF8yykuUb+wQ3VdhQF14SmD5L7XT0ypHcTU/Xm03TM89eoXEYcCHzCw==","signatures":[{"sig":"MEYCIQC7vq3qUZbQSjt0Bvb9+H+EVbZPwgwiOc9P/+wuj/he0wIhAO0brt17Rxv6Exsj8/viVp6UGopnrs2Jbsrxlw9LMM+k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/qFCRA9TVsSAnZWagAAp/gP/12VNuYuKFNYU1s6Beup\nPM0y/m2ov9m5pIlS+VqIirTJg/0J0qJZAjhCGQRSfN3FaWHKzKfq1HzhB3Dg\nlMeAi6EuhS0rvuA9eXy/KUbiif9Vpm0URXnNnCZPbSGCfNceDvQsYiS5FPn9\nRhftdJkm+H6TSjhGof20ONqNvBocobQzzwGNy65DMpT0y18cmYGNDMNwwk9m\n+CDqa4BWcQxDicy7PBEAxgsttBnNpBzpIgA1gSj87nDLmo0ds0ADISRsBQEX\np3P15XMtvWo8B4GHYd+EAGWBYHhsyiDZD8h3Eaiu7/2AV+C6yNptmMkVbJon\nCKEp5Vi9Pa/Dj8Ys79wun5WIFl/us/qeTWVaqWCNm1cmibKRoOMMWaQWHXft\n6TVRFFJxwRyGRF/fq3Bc9RuWKReWMzj6eGKSIQ2lTMyF2KDqMNi0JoRevyIH\neF4t7eovA9kDlVUMJn61RG1pbKt/OkS1toVV/XXciSiMNJk9Tg2MgZq4DFU/\n63CJDS0Ydk+3Qxwq3Pr70TJSrruvlSLRgOI68D7CWZbqd69vOf1giPTBv7lm\nlEU6bF4APxMcoTSV54kYUf3RBeihtzdoQtWXVHP8DsqI8CUyTKOiJVxUR2Rw\ngwJsLyRW9FrGmf7v50iZRkBU1l6aY48U9LX8xZT2MInibnLlosyXtxt4Kv20\nLtXL\r\n=JT8t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.1db5c9fc8.0","@material/base":"6.0.0-canary.1db5c9fc8.0","@material/theme":"6.0.0-canary.1db5c9fc8.0","@material/ripple":"6.0.0-canary.1db5c9fc8.0","@material/typography":"6.0.0-canary.1db5c9fc8.0","@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.1db5c9fc8.0_1583872645165_0.8687041443190082","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/form-field","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.4971637f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d1490863c92309f4d03f31c9f3065cb66d0668c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.4971637f4.0.tgz","fileCount":34,"integrity":"sha512-wh0N01rSg9kDD8Na4hM+IIq+VseKlpgCnDbwytzMnErHDItq6qYJdpkEScIcFtdpQ9Jg+zb8rk69pPuwZPUo6w==","signatures":[{"sig":"MEYCIQDoGCI2s9uw81DV+JOqZQaf4gJ0nnLsEzVqz3fRwVKm1wIhAJnV9eWxduiVP1FSSIfHkxv7xLe06sARMoRB6JCIKNaZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBunCRA9TVsSAnZWagAAusgP/0ecZWWNQbyTG0wpoTsN\nywPe9oiSmFatdcdnyAMnm6BTNZr+QWKQm/hPk1a4QhEQBWRCwfuRUcOgut4b\nS4PUanyQEJ6o5FJCT95iJZanLN0neOD7pU10N6n4ypN3bS/u6cBADPOpf5QL\nQDt/8bc9bMjGsrnOjDp1y7iJPipmGNnPDsku8LjLc4L39OPRuHdAAJJjtHDX\n3+/yDGjhw2cYfu6QlMOiGrUqtzJw5kNcOrzSQHQE3wEXe8Ad+8clvQHeH6pB\n2jePa2MD90oF16moxcH0EV1rJPFTbq/CDAmOUpLPKARqkSvmuz1rMywJLy1q\niGDqv9zo7hm83VuAqgzUZ8Y0aFOu39Bf64V0jIbtLL3uuGkAY/nCdNFwMBU4\njpaxuFyJCndc5QOEHLf1E/g2HWJiFDiI9cZc2gWy5xSXHMKnx35UprVduBVi\n54yR7PXPNZttilqacDu3aLM5upTfmiwZCvoiyeakiuVg9NR1sb9MUAgX3M/w\nDv+/P/7Rhql18pKHnNnGMKO5fq3sGMAByN/+S5eWoLgA5xkAi/mFhyh4LsSS\nXkBC1FpDfRJ1annEbq88hsn6qS7/zKSI/PakrSHStqvJHIx43qjfh7a0lHsH\nV0XT59Yny2RWHyGXxQ8cysE9z3nZLV2rbVhup3JodwfJ6gbZs1U9mbyhcYDO\ncbJO\r\n=yDWw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.4971637f4.0","@material/base":"6.0.0-canary.4971637f4.0","@material/theme":"6.0.0-canary.4971637f4.0","@material/ripple":"6.0.0-canary.4971637f4.0","@material/typography":"6.0.0-canary.4971637f4.0","@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.4971637f4.0_1583881127208_0.7270588138865905","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/form-field","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.1ae8130ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff411daba947d003b2a595b71bea9a154e522dab","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.1ae8130ce.0.tgz","fileCount":34,"integrity":"sha512-uFn/zSvsW3+uueCTdR05VuX9HrYZPUJBaazipyHMnNCU9MZo9xKnswYVzbcUpP4ZT9qYpjNECK3Nd+wQtUnAhw==","signatures":[{"sig":"MEQCIEWzGcx54pKnTMpDleCYVNFYt+LjS+8RqA6XhQ409LjFAiB2kKXigx/Hq2NyAH5l+F/Gwsj+GP5H4tTILSO2vSNdeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB1GCRA9TVsSAnZWagAAHqQP/0ECvDlJ3yaWKd2Sekb8\njCJubUG2z5EIgacTpgcpKdryIBMCzkE9WX0x1jBddwNyixlqKRa5MxrjJXtS\nwMZbyZGjti+v/u/qqPx6k3jwmnLpg2EtWqs+wCeqzgI3ZfBZd1dUsqR6b7rV\nqXHlIcHE6oVhj87py9NIqz2jkEFjbcWBJpaT8H+7F+3wA+7sWLjwDFZvoTi1\nzxfEVIIsVhzemJGKQqh91vcq9kDJgWIsIQMeqrUCQINQLDKe132yEwRLo6+P\nbhXVaZIAZ7spqzucG5WxoEJnHlIpGN9r9eGqWw+dfIA82ctUZArBmxQbUnxk\nFR4XcztXNufV4SSYDOOPypmF2kyloNHb8x8LuvgouOz4OwhxbGXiqsRzSg9D\n3+kRFhFN+fIB5dr7u4xyquw6dbO9IlcjczPPQ1sowDaZOfWcnLWv1YmZkOWv\neewzt8931rc4j7jXk4A1b3beiHIR5ljr1cbAKAnnNxZFBf4Ali5LKh5SXr5u\n4uv3sFLJ3XK6wSqLLAHW/9y/53zAyEEGDW5nGnD8yCBcd/tKwYKKGSaqfIzm\nQgpE/eXelQLoSnBmA3diu4I+oNDwySYGiApfWablz4zDi/Qe273Qv/gmB4yE\nsBD/FtTbyz+/eEe3dd/VW4xM7GyvhUVgyMl5DYx3DEmTX893JH9kskgYM2JA\noJrZ\r\n=yzgb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.1ae8130ce.0","@material/base":"6.0.0-canary.1ae8130ce.0","@material/theme":"6.0.0-canary.1ae8130ce.0","@material/ripple":"6.0.0-canary.1ae8130ce.0","@material/typography":"6.0.0-canary.1ae8130ce.0","@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.1ae8130ce.0_1583881542171_0.9439030824153292","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/form-field","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.8639c2690.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18467bc728299d3b66a517bdf67d2edb9f9adc19","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.8639c2690.0.tgz","fileCount":34,"integrity":"sha512-NqDsGoDULEU374UYvTk2turxha8Fa7z16uPvw0qV9IlNSzpUOwaWvV85KBEvVusT8beCT0kSnCj6rzs8YCG5UA==","signatures":[{"sig":"MEYCIQCI+5aMmMLTSjT8CHJgMeHDdQXq8CCuyJzvN2Ws9o4q8QIhAIQU8RDU/z8YFJlRNy4U98+F07f0VAWB1IjpJ5t7Maiu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIY9CRA9TVsSAnZWagAA3TEQAI9s6Fr1lz9oKLo1JhH+\ncFSU9txS21ZXSIyG+McrxcreSc712HlkU7u3erIZuHt4YezBqCWH/gzKdu2i\nLxJIU8nEfEqVw9gJ0WzVrWWGoMCsFL6WHuSxsAHLg/H8uO2Wn2Y1sfdaFvOI\nVy2ggn4Um5SEw/RSLtI6PsHmDp3hVZOW6Ad0gt+rAaRx/Y/SSFfesijQPOBe\nALUtS8XicyAXsJUyRzTPNjPCHRZCmyrTvQhYg0EmJ5reLUSDXX48qfF2ZkxS\nn1xjwJT5lBvNGBskt6+I2pxFN7S7psjIEIpt9O4S3WbzZZtCyn0iCHeLSxc5\nKybfAYbEhkk5smB3+Ek6p/ZTaqKg3DRFZBCa0yzLiwRoZd5PNJidHIuQ8oah\n0COxzJFR8uM2xwiYEPItUeffCx9Cj4f49f0KykG8MymS5W+6OYQQz3KYkE0d\nnAj4kHGONfNPhxnBNzsmns+VJA3znZbccwT2vMgBgWfS3UkTBNxRM08VEZvy\nH9iUWGHNVjxSGlZn/w4kef/ro6na645/9J8h/kPScFqLc+Yz8azzdMz/xo+P\n9tAOr+oaavAGHw9zXcibVEY+Ml1lRQ4zcImws7Xh7whh1ljki5xlM2BYqcVm\n6Fz13u04IKNqg+2xW8qQQTtJBumK7r0mevn7/M05gtNmJkkdr8NfgScMuXst\n9M4p\r\n=UpFi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.8639c2690.0","@material/base":"6.0.0-canary.8639c2690.0","@material/theme":"6.0.0-canary.8639c2690.0","@material/ripple":"6.0.0-canary.8639c2690.0","@material/typography":"6.0.0-canary.8639c2690.0","@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.8639c2690.0_1583908413130_0.0880082189674849","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/form-field","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.d5808057f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e76b9fa886f193e79033b3008fcbb2987dcfc14","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.d5808057f.0.tgz","fileCount":34,"integrity":"sha512-fHsdM2YNNM3PenA3hg16J5RTQIgWStUm36GZWSqchoFe1+RY0rKdt5dYwwev6GiLjlfzqe/qGmwOSlEle427lQ==","signatures":[{"sig":"MEQCIEGnv5jUIf7DNsy1tg+0hE7GDnL0fOTNCUkKNbtLaPq/AiAWGFifmsjnLOCcEGQOFYB3jEEmcncyg5Gc/pWuct+Y5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaREKCRA9TVsSAnZWagAA6vIP/iqe0msUPX2zRMyD0ok6\nanOS7Gt2/OyT/ke8Q6ixC0yF6Lolm5WsO2mck59m29iHAJ788eSGDhQzksIj\nAwdn0aZ/THqcoBp8fyxhuCf08OwmXDMRJBv7TECC+1Eejh/y9dBELDqz/mI0\nW2alLerXVN9wuDSp4uC4WuFKxNcTnmSL4Gl60F1gKoMvW0yJSK07U4VZP80c\niAF2f2Wc0SRqzhbR9kWlvxfwN06FOyyan6oXWovNpQDyEtCIT/+ljL/Yh8ii\nlvXVeaQiWdsJbaMqOcww9UF2sh3O0M8r7+U/fjcNRoedZYoM8Qpy8kLAvTn5\ndIVnEVA9Wq0bnO/zeX6pkq9nkJh4G5xHkBsN8gF2cy00oWhGQSkJ16aqhlJg\niAQyeUshxxO5XFEaemMvoFyZIsWR/pPBWtjSKBOjCh/yvGfad8f4iFUvn2zM\n2C3xMwBmKAVaYhP5hnpV7cEi13bIutCcl8M7wPWsm6MfoHfMgDN5dAaCzurv\nnUvsZFYbBD830/oHPD7lZTBNuh/H7wODREB7i8sdwicKoAxASSN75GhgnL63\n8K+tZei8qehHKhNXUly7iES/nEsqvNSRNcHgdk/+G5Unbt5K636e7uu+bkne\nlWdp0uTLYYQf6X8Bjia4LaN3c/XPFcmaqeXvakADVjHASgGUgzTq+lw0Igv5\nigwK\r\n=wAJE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.d5808057f.0","@material/base":"6.0.0-canary.d5808057f.0","@material/theme":"6.0.0-canary.d5808057f.0","@material/ripple":"6.0.0-canary.d5808057f.0","@material/typography":"6.0.0-canary.d5808057f.0","@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.d5808057f.0_1583943945953_0.23534191789070746","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/form-field","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.b3f58203d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e53033308dd1ce7314f4089cf791b7c8dd4f55eb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.b3f58203d.0.tgz","fileCount":34,"integrity":"sha512-ACa6fRfe+w2pJGkERVFke+xAz+kfqFPZ75YRrtV/xfFLt3Z04V/Fbi2Y9tkM7J7BdOz1mNjA97NIb2A74sBpbg==","signatures":[{"sig":"MEUCIFetxrRGn+6sk23xar5To7yztmPsIRp83xJcbnIMYu93AiEArXIZERdjbUmWsjy9enbddIRZ2ZUCqXbyhZ2M6XVduQE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT4rCRA9TVsSAnZWagAAGXgP+wVmmerZRwq5z5VuNcmv\nd/40RKVCLnz++qOU5dp5lkLwz7kURwuO221tQYZgcdJz9rUZHqhaNvFGz+hS\nkwUYjJ6HCOkC7AlZuyYBE6fLFs+9PmTzaXSi4vEsF6OdVgQd1EwMVaMpun66\nxLJ4/eRUzPtQ3DlNTUyVP6wUhL+9SpXUb3DTAxRyMioneDXm++TzfS4trSqj\n/DQHG7oqY6mqTzBsXKxQy3/GxG+H6xgZ9snqr12QLiTQyS6eqguActKJGKHa\n/5igRoPQHCIaQRYAS8mVoH9lIVEfEVw9+5RtSjXMYVkeCVbIAtuCrZKhGFcc\nX4hkSzMZECtvYRnplgpWHRjk2YYXpAW27ElMoNjadyKdx//J7ajAXQIuHqJX\nfiPdBBmhiwoPpex4qkLbVBSwJg8hN61dXDKcZ++tRWcSy8QM7Q5HHWayCSPy\nAiVWExR1KW2dvid9VKS74vwX1DzexYVSAsfhS6x303G9XSw78MnbOnS9Yfsr\nXLFlJZNuikOT3/Ylo2ahHgOv3SOxuLe5W1WqCQ1XYIuS03sHEKk9tvvoQIFl\n93bHj8GbW6/wJUCuAQ77UNyuk85dTeYO1pOjsJisIauMRiO6iI9PAuHZjJBh\nf/FYuxuXOaVhWRGza813Lftp62A+OK67z4GohCMma8RoKrgM0ZDyRLYYPPp/\npyc5\r\n=2yoS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.b3f58203d.0","@material/base":"6.0.0-canary.b3f58203d.0","@material/theme":"6.0.0-canary.b3f58203d.0","@material/ripple":"6.0.0-canary.b3f58203d.0","@material/typography":"6.0.0-canary.b3f58203d.0","@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.b3f58203d.0_1583955499166_0.036386231410026504","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/form-field","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.bec065920.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56063b199bb0db153ca9a8d64bda059994f1989c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.bec065920.0.tgz","fileCount":34,"integrity":"sha512-ZKUnFrA/zmQyETYBFe2R+fbdfE256S0kXjmvuKEhwRkhNiUnm8zKuijfMTMRvnzVPF/fMDeD/UQNdhepmyDEcQ==","signatures":[{"sig":"MEUCIE9lI7qHTISAjjabm21I8zVrkV/RKwLJwUYy/1LNTcfeAiEA6/FsvbLqcjr7Ks2P64hl+B/YBaibL2g/vx6yuouLlGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapmKCRA9TVsSAnZWagAANDMP+wVyFaUacAqnQlRSfF9J\ne8WF/F7WqNTusI/zA2y+xf4Vx/mIA6RRlnGdypa10Npe/slCxpfFXZp1hSm6\nhuEyINwMjALQZG444Iy39AmP2CFw4PkcHykf55UI9BSMsn9A1IQeLiH6onTT\nHWs7c0hsa4KS7PfhjxnX0D8yRgP1Y2Vp6yrYet+vCpPRBG0NSuF33KJXq0hB\n/lsQGupafuAzeaA7pME+ZFC2gPEux12GYEWwOwkR/jCU3JuHPP7EUa7X9Wdr\neRALSUNeu/V8y28I2uVSPK+lfAnGE/fiT+4f2fJLytDtbpLszXNggRh2AHFx\nV15DpUgtSZS+m6zDDeoydxFo4NfK87aV7xpbKAziZcqKuVMrw0SFORAMUw3a\nCD6mC/cXPHqfjqz5k0BqhuKQlatNtw7QveRTP+/Jt/0BM0xsLcs+Ys0RPcEH\nBNyBPihevCdXpCMcZ3JPFV8XOi0PYaU6Z7tQQ1/zweiyZ5j6PDOH2r4Y7szC\n4MyqgEBzddVdrzL8yOnUkew+veYjIBPF1xmcoAZH5pkj/xoep/ZG1uWg2xDz\ntnRffacTCrYxFRO/mYppK9iuhL8D4ZtT62pdYXgtvtvRaAn93VQgqOqEgLn9\njWjkvHm5g0/0Qhu3gqz0irP8A+DL00jbWT828irG5z3C8ZcsYEEMjzRtIk8y\n9uls\r\n=jusd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.bec065920.0","@material/base":"6.0.0-canary.bec065920.0","@material/theme":"6.0.0-canary.bec065920.0","@material/ripple":"6.0.0-canary.bec065920.0","@material/typography":"6.0.0-canary.bec065920.0","@material/feature-targeting":"6.0.0-canary.bec065920.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.bec065920.0_1584044426387_0.32285783033488924","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/form-field","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.776291ef0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"142e54ded9f064afec9524e51d622a56adde046d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.776291ef0.0.tgz","fileCount":34,"integrity":"sha512-BV7xoanWpOPB1F7npup3Cd014p3JGu0dDREOg4gufUeSHNnhZfpGBWefXHS3QuvAl/LLJZcIuEaxd0n9SUyduw==","signatures":[{"sig":"MEYCIQD1OaUGzQ1+bvNXB0ps6ac7/BEodo+p1hGte3GyKUWnjQIhAJ1XoBEDjIgrBFvc/PXfuXa4n5ZDt95KoqscmC5dUG70","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSMgCRA9TVsSAnZWagAAu60QAKQAK2L5bS5JJBYTqDpg\n7stNylIzdcJlRP/kxXPNYazRMY0kp1ScRM8XDNM2IOf9HknfDnnQc798rgzC\nh4exgckar1NVDXS46wyZ0BPGjQ2XZEDI53S2ktYU/xpVaxnta262OCMpbgcv\n9UiunKbHrdqK+vQNqMxM+NKahLiVsI28TCFnXlZsmo/odxJH4WRJWM8/zTSr\nSzdM7RCTyfo80o/rX5Kp0JPQNteQYnx9Ycgt37aDXyAYURTbHHbJcgdq9gTw\nBO7hV3k8WqxA79fF7lVANIeKPpinrfI1KEJaHh5WuS6YD5h3vQLZkFf/ky9Y\nzoO5+ugzf//3NLnVD3DPbFVKXs5G4XOG8fTqQ7RbSgOCuoyQO8KKNFsmhsjv\nF1zdGgB4z6CgOaBnqtkc0QvJN8YaxAyowNgMbzZHkyxgTtC8JWMK0AUxwWCX\nMZy+xx3TCH97bbEhMBYd6/kZ+4JIRRR7WsWwWBhIcQgY4tRaZyxSWBUDnsOL\nEK9JMRnaupsGghk4SlBQ+COPyxPeCenEmaZW/Bprq7G24RcSCF51KmeUIf5W\nx7jYT41iCwBRrdnUiktM9HAjDaHI5X5/Ouxx5ktMKRj+7TfUoTfJpdwBdRqM\ntonHcY9wSY9TenYNt9rHeOfozYVs3BCxXBhQH1vIyaEDC3swcnGGbQcw9gTX\nPqoe\r\n=PLlL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.776291ef0.0","@material/base":"6.0.0-canary.776291ef0.0","@material/theme":"6.0.0-canary.776291ef0.0","@material/ripple":"6.0.0-canary.776291ef0.0","@material/typography":"6.0.0-canary.776291ef0.0","@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.776291ef0.0_1584472863608_0.14588630318746665","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/form-field","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.ece19f3dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"946a41ef9ac382ce83f5bd1b65e908f3a93ec8f2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.ece19f3dd.0.tgz","fileCount":34,"integrity":"sha512-KS3gBU+1Fz53IKSLSnyyjr3mm1mE6BXwj9XusImywZ+9oiDwnyIAtls5bdCWjdgXTdzCKC5nenyFV4Pr0KO8ig==","signatures":[{"sig":"MEUCIQCSYf2YOtKM8/B2UDVyfHcyMLlOQf/yZreEaXgSkKXONQIgcfNLAp1i8WF2s3cKCSPfm22tdRBttg803kYYUKlo0BY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUi5CRA9TVsSAnZWagAAoQYP/3fY3b/9NaELWA1yywAl\n43QMxIksljU10seR5mDFcx6lc2YZMZTaMqRngrIMB/QPz+iRt9azFeWdDEIr\n1tKk7ldEgLoTlsSEh/2OfauLwGnOyY0c/3D/n4MVS3k/tk7DB4MPGP4RAeL9\nioQA4PXX/L0aOk/hCWhh++McO+zNRpmSgqT9AsfWkp/PN0aWtIEeF6zapd+q\n9M+hZyCEveM406k/6z8VRVg7KGakMZ9A6WMl2nvNMXASkfganaU+BAZ/ss7q\nZDhHbuR/uQl9ecBV5igQqzGGkV5WjTloKYmcU7Gj9lfK9Rxys/6mrj7psyN7\nZHajK/uL4au3EqE9WTG3MZ0Krk9R68KxhJqkyd9OKAWGrZ3Lw6p4MqxsbB3x\njGpCRXt9FjS2xDNC34kvAQ9zFLWLhuaPPOTBoDMujjz73I/N7XqunPEhiP9n\nq2CXOCWjqphzeL2awo/CxmHtZL0fsvioSdgwbwxOXy2LTh4JVspnqqJsLzLc\ngqgodaGVwSNiRDIkfkhs4h8s8BmsFxzXHMDhuve0+oXSyRhMCOIeCvfEEPJ4\n92ZaTG+0z4Hv7OC2imKdkVz6XOTuKxfkLvULjJVtxskdsf6p0ufaTO7Q+sxy\nRPIOUOXAL0v9/4a7SQyqy0h5L0w+YEOjh9CzG3LJDF5aCzrGBPhNJmU6fwC8\no7/h\r\n=EMNH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.ece19f3dd.0","@material/base":"6.0.0-canary.ece19f3dd.0","@material/theme":"6.0.0-canary.ece19f3dd.0","@material/ripple":"6.0.0-canary.ece19f3dd.0","@material/typography":"6.0.0-canary.ece19f3dd.0","@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.ece19f3dd.0_1584482489203_0.03293157077846409","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/form-field","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.4dc45af6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10741675d8b4d8aacc9b370d30b2e2b7b88ea34d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.4dc45af6c.0.tgz","fileCount":34,"integrity":"sha512-e4lwFgziN0ZnKb6OuX0lKTYmY/5XP0uQ7qaFpZgmdaEbyaQ55mInYEYlq9ZeeULdxKml4KVXaHB4o7Xq/4QsAg==","signatures":[{"sig":"MEUCIQCp11oj2IgFjWF/Fdwd+FMYm81MK8XE41Z/b0XWP0bWDwIgTWRu+YANpurpdMcnPCQDCP0XcvY/8rdRA5AUUgAvLTQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX3dCRA9TVsSAnZWagAA1c0QAI+s4UCsBHJuF8kx4Za9\ncH8JRwph6dZXKYpVaEVywlKDBgM13CtJGc4qUdl9Gv4NjMinb81zX0BNGjKU\nryr3Y8jRtL6PtLyJpdDKn5BuIO+r5+xitS3q3+Qb3YSa1NHlH96C9LAqga5q\nTAoeBPtwFH6xawv6BVYaP902KR5A/PyWiQIB+oufhZAh9fLJ8GK+YJT6xhNZ\nn8F0xO+d4qWbRH3BZb+Cw5bRvVWZ5YS+BlrMAeVbZ0yBmxoB7d/ANiAl92aE\n/V5GdmT754+KKP9Ghs6I26HhVMqWQ/t8X86sTeBt+p388eD+l6qf4YL8wf54\n/0P2bua2VuHdPwqTA/ID5vlFbzHr9Fi6t9MCxcn79PHDg/9q1zRRlY0oMbo8\nVSF9oaUBZKapF+JQuWJi5Vd/3Z0RAIATZh6ogmpy4ZMn8p75xumziSyHF5i+\naNXMRAHBzPdKBGtl/VEnTZaleC3MBj5BJLbfLcIdrS4gddazbn92j+VlIIfF\nZ+0eQL8g2uWy3xSedhRQpls6dK0TMMhehuvDZFg9Kf6Wx+Lpd+mskDk14Bud\nnejTS1u7zng7qPxm7X2xaEDSBuYW+YJTwtmtIzvZ4EHZoL3C6Awll1Wj0c4r\ne2fNWx9+KkeR7m8wu6oaQPzbWXkkfbskJZL1KTqlo4G9Xhaa8OAx2sYOKmf2\n3QVF\r\n=xJJ/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.4dc45af6c.0","@material/base":"6.0.0-canary.4dc45af6c.0","@material/theme":"6.0.0-canary.4dc45af6c.0","@material/ripple":"6.0.0-canary.4dc45af6c.0","@material/typography":"6.0.0-canary.4dc45af6c.0","@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.4dc45af6c.0_1584496092822_0.5976096504567152","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/form-field","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.6b48781bf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02a833aa920a262cefc7ca08727b63995ebad524","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.6b48781bf.0.tgz","fileCount":34,"integrity":"sha512-+TTcJ0IrqatIfVauBZLwG+D4MW0roDmADdwv8OkU6zw8H0GjhyeHfmg5rv8M8UDrj166Pob8bXJa3MnaPNcrKQ==","signatures":[{"sig":"MEYCIQDp0ppq3kQEZ54vrhIb3pvq81uFEutUzS47ywdlasOBIAIhANzQIqSG6LMOH69YNiF1lUsNt+cY9MKIctLuARsLeB8T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj+nCRA9TVsSAnZWagAAIjwP/j5BE7qiteiG6+hLrv4T\nwscHcUg/xUBy+oRtj0iZ9zhXfZ8y5pbBit4ihmOpOOWvxYDdQ+gJyUCVmZHq\nfDF4JO7B6XTIaBYKExiaCaQb5T3lSkCq9y5Qlq2f69JQLJf7Sz+9wjuS5tkt\nEYU4wddZplVMflXcx7IqGdEROg1+lB/gjgpFkbEY+JXc0sG4ESrXPinEWQwX\nd0U0y+yDeHgmUOWFyfbznKkSXXDbMCpLVD0lIrNx09jDXFMSCswNk0uzJ3+U\nm58gPcBA0EKYb86iQv+mQiANHPu6H/8ygWbAduNeemKZ9yClRI7xCt7GImoB\nMnSb2gPrtJSHUuqi9+7Y3hsqQ8uFamZOXJmger1U+8B1je6Vg1cHaYyplVQe\nkEQlARH8TRX5iABN27QfNiRPaf3z60Mds0HAuHGLm/UqkXOYG8L4w6sTlfkX\netKl6fcsgIt5PL8k2qvGQvf+D7Wgb+yZEVtApIZOD1AqCnwAnv4oc5LG1Bxh\nGvjTLVYdxFUa52JwfpZoiWMOS6lVP4eehHtp2vlaAhbs1uW2S6GNiIvoWE1Y\nxUnnBVlyziAO+xVI93ypIChRNxaJZKG5ALHQMAWgaiG/P2UuWn+sPnE/2ht6\nWW3ii7QiFlXTardeaE8JhhoRMDtcmhcACtNWPDd3e94WuTOLv4gSYSP6jAyI\n1SlF\r\n=sf0U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6b48781bf.0","@material/base":"6.0.0-canary.6b48781bf.0","@material/theme":"6.0.0-canary.6b48781bf.0","@material/ripple":"6.0.0-canary.6b48781bf.0","@material/typography":"6.0.0-canary.6b48781bf.0","@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.6b48781bf.0_1584545703427_0.2740090008475058","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/form-field","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.a88c8e4dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"611b764fa02cbe22da0c37fd9f8286f6c4afb742","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":34,"integrity":"sha512-Y/n4WT1XT9/7acrHoUlGZNMgQsECzXmABSaMQCRl+UX/pxU1vcZh81iFSjufexXDY7iwtGUHX+/s49qh52SULg==","signatures":[{"sig":"MEYCIQC0X0xigUzF9PgBNP9TQQwkOhKTJx/L5Yr5gTJShjTdeAIhANS1YPJCPyHmkZv1JGuRLjqn70aNU6gBtrrSP6nXFLrM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec62JCRA9TVsSAnZWagAAQLMP/iB8COKBK8eC9ni8icdL\neEvBS6nR+/xHnbK7e26g9qOjzjoBfJFjOOCa3twKttKFmJvplwAlwhLIdowY\nwBl7KIOtM1I0bltwrHDyK5V9UJBsMZpJv/xW0vff5+wmZeE22OeFEEjaJI8a\nRA3Kxz+fPO1mjFjmqPyVeK31TW7CHGAJ9RzAhpMlt3dX6oGNYzp6oHzjPcOa\no1zpoMPZOUFE0YeGD6dWSuwgbYT720c7wMvAG56A/+1dd8kcZ2tfvReOeABN\nzj9Yobw1oZOOO8+llbxLI4q/XwfpxZE7+YPeL5s1uYEvKV1qzJzm7oA9agNg\nXg+dAtNuhGdMFRH114az0UqryObSfra1m7818ZJiuTICIibI2mNaOOg0TKUD\n7Iv8MeDKsXgBYdF/R8V/so5djpUdmBkXsLgnzM5tue+zU1ZLIpOT04aMr3xf\n35YBW3ilbUST7O2glWqMyPUiCig/ttLnQbjP3ylge2tIrjl5Q6RKxga1uZkJ\n1esk6+ouN0ubIobzMWlqMcEC5wkPfKbtC/6vDbXjpoBU+T4aWP1jMiFSAXze\nuUyXLIaOzcuflviefijYSMKLuZyQhypTJN6AB23XLVL8LOEi8q4QUP3c6PJm\n2JO4NzMHlal8PXuKAafUi1eqY6ZYTTUgnWjBVQpqv35ZtNo1itTDyhccIq5m\nQ0xH\r\n=FZ1h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.a88c8e4dc.0","@material/base":"6.0.0-canary.a88c8e4dc.0","@material/theme":"6.0.0-canary.a88c8e4dc.0","@material/ripple":"6.0.0-canary.a88c8e4dc.0","@material/typography":"6.0.0-canary.a88c8e4dc.0","@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.a88c8e4dc.0_1584639368549_0.4454795739270958","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/form-field","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.cafe18860.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a19d0e7b646128c5a15e18e6f341b25559019be8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.cafe18860.0.tgz","fileCount":34,"integrity":"sha512-1YQQjtPCjXdHNWA9S36YDJDTIqI3fApdOlU7N18/cRZlVFJWHWe4+a/WGXzKO/R7CIkXvgckgIXM+Zb/HBnGVw==","signatures":[{"sig":"MEUCIQCYQ7BUEU+jCDnlcO3CiVl5cUZSOaRhxuwFaab82I57UQIgaenVufNfaPYJBaBAQjHAGxyTPa0O61bcSBs6iPUDOl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNj5CRA9TVsSAnZWagAA+BgP+gNuds3/gyGne3tDbWiL\nxUXrrocdbOYRmbbU42ZZ2OwCU6H8JLQ/QM6ZRt/BAw9RXH9xS+MdCjOd/qdb\nxvWNGSczafmR0HGp/c/kmzkG0++MSwJTHzOtL2ShWPCYEI5xsRB5vvKq9RnL\nFpclrTHK5czxor8WDWMYx9sEqOKhY0KuUDq4JGF91qt6FgSU6oEEiul/cZ3p\n6W8JYSg//0fUSjk2AQiNU3JUxXzQz8mI1zL2geWEJ1e1waHy+nPCrrN+Sg5S\nAcw2iWxErsyQNg2GtbnDji8ceXnZeoY7Qh1mhFRIphtXhxGwW9Y0qwxwD1Fe\nAwS6Bp0CA+63VTlbJq7G0adXk2b2mWYFl4jyhcsNX1Bm+RXsJ6BwUHS2nbwh\nxiuo9cgYXvWJ494oSwbtbkAnQ8twyG8vbXxDR9ZJVJtQF0b/DKUjOFie6jFD\naSgrCNlAIbviMiNEfex8ImqqbfuboaITXGQLUrde2+o78DK4N7Ng51g5veSi\n70IRhPLUdioAEXFqo5C21R993rWe35FQd3DbJH2LCkO/JvpnW6ODUgaxonQN\nkmMeJFXNcyL7dA/CPyDHhabCUcdOOafVMiIlyBF0+s4JDItdh88W8fx06zzx\nQMsFZLI8ydJEUhxAATT4Kf7n/Jx9+O+F4FVrmsy2pbwC9rz3GhMCkBI19+Iw\nQLzY\r\n=Au5n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.cafe18860.0","@material/base":"6.0.0-canary.cafe18860.0","@material/theme":"6.0.0-canary.cafe18860.0","@material/ripple":"6.0.0-canary.cafe18860.0","@material/typography":"6.0.0-canary.cafe18860.0","@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.cafe18860.0_1584716025028_0.07264931944261122","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/form-field","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.35a32aaea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03374522d3ba7d8956461ded1d3e7666b2fcc23c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.35a32aaea.0.tgz","fileCount":34,"integrity":"sha512-+LkE4JTKvSG1YfA6HRCBloD/Ai41d3Uw7qfWtAnoisduCRslPDkP2RXaNQ+ll3sHGOOE/cAUqTYZdAoFnN9lZA==","signatures":[{"sig":"MEUCIQDhBVjXC9IzjDjsXs5r7WmXoM8gn6FO6JccIg2GXTjNSwIgWAmrgyIe/J+6yUzImzxt9zJVZxiy+njBjR9fMNo/lXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSCgCRA9TVsSAnZWagAA840QAJQfyDwojsReGWOnKRAO\njDFYLOwiLJzgx/ur7Rj3WEUJN+vjhPzdNC1v1rLyHhkgofCisPbT5EalCjtP\nX2iDhp7xtgjC5c7IG10EVZMSTatKHgD4ERGz9eAHhKOWo5wO0avqjC80RVx/\nYijo469DH9n68t/alXKWR/nKz8n7y965UacvHZvYKRrsCIMDP2IYNc4gjNjI\nT9rCgFOze7Mk1HSZ1VRSf7iZceoLcGIkWU7nt+4ExGMf6M6H4/8Vj5OnJ46i\nrCdl5zVZ9KO3UCTyqoCPvveKY2tK0d3eoEB7n5901hBGKa0pcuBuppTWa2sU\nICkDBYS96Tdi5KfO/z12PsmBYJoqSf5o3ZCFXfCozVt2faHCBAWhgVQzgJz+\nU7FFkx7K/JomaCLz/nhMcWSe3LpMHANbX3AvXm8ZunPmltiSboGugMoOxSL0\n6MwQ9PQZTfSMF9XLfw460nnQqjM4k6kWUgfa92T09hBj6ZUUb9GEhgGJP4lf\nzLYhFolFco33oroggjdJ76tmHsswQV5IynadI729IcnlN3bmmSCOKs91+4Dc\ndohHdZgwjHdgP1hnV49YSpIB3VghtrpK6ucQ8yoNMPqnVCKr5AOshzzOelxk\nK1/mYQlLvUsAqVaZ82nBliPStJ4kOc/RjxnPW8cDII/lASjax90+EEG9VOxt\n3HtL\r\n=suKC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.35a32aaea.0","@material/base":"6.0.0-canary.35a32aaea.0","@material/theme":"6.0.0-canary.35a32aaea.0","@material/ripple":"6.0.0-canary.35a32aaea.0","@material/typography":"6.0.0-canary.35a32aaea.0","@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.35a32aaea.0_1584734368338_0.7780013840905011","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/form-field","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.e75deb854.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfb62d9097fdc67b78fa74e16f6e231f3d41ada1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.e75deb854.0.tgz","fileCount":34,"integrity":"sha512-dT9oEEF4/oNEbX1UVHchhRWwJwTGDLOpRJCU7EaNlDu4tIVOFGpgwnZ1qlQYY4NLxprjEaOXqJOWMu7S+ivvIw==","signatures":[{"sig":"MEQCIDKrk4ARFeDuV+/UERLSG8DA98rqkgqYIx5iIpEEg4ClAiBQDJ9E6CredQeGpOEZnURD7poI/4XYha2axmTIVbOhlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUCECRA9TVsSAnZWagAAhJwP/3x+VBejqOS0VpkLVh5M\nq6AHUY6nqkmq6V5R+VnXQUAY41WGnxLO/Ciw48ZiwinMeR4RDVdQeVpKlIg2\nb9miVA+Q+eDrihFi2StSQf00qt39mhH9e8suVy7/cinY4dPoudc7f7UHGKI6\nhHItA7BM7qYNngC/1sLEh8eCpNmD69hp7LmWu1CYvRlhX4JOma1eWqCzk/Et\ns90nPCGpoTTWQIqsztaeugpjAcrULpP9kaNNfFTJJVMTRMEObrDthoyuh+hO\nZZBTHvJHfK5prY6wKSJ1x5myx5QF4ZIgsoiMLMsAHXitwhgaNv/yY8f1vgud\nMjzUIPi1Z2K5P5mRiSWikzGUygNp+FuXmnfVfz4Kxe+RXjan4UUHjnfTSrSQ\nHSrDULz4mPt9M9cIX3tkkA6XIfzrhpZlnDItoEgx3OWxST2oZ71M7mo5AN3A\nA5Epdz4mw9BLMaKblmvUZnegG1rLehAIo3D9hUjQ/KvZLs9AHc34Hox0dJSc\ngq55qYh83nYJu+xBslJqsvjgL1lfLP/uCYzQWYcIBJ8MdohcKptXhI2pYgxF\nmNcTO7m8NoK5/XbCJJ7eEcyHGEKxQhOR4EZoptOO1NM11NdAV9QhIfMDR9x0\nrNJoJuqaFMC/BWpIcKj8M8pQYYVnzaHZEK6+CnXJNf/+2foh9Nyf2Ir2ijLv\n5Imn\r\n=OOG6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.e75deb854.0","@material/base":"6.0.0-canary.e75deb854.0","@material/theme":"6.0.0-canary.e75deb854.0","@material/ripple":"6.0.0-canary.e75deb854.0","@material/typography":"6.0.0-canary.e75deb854.0","@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.e75deb854.0_1584742532067_0.5625220740864427","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/form-field","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.2cc6966f6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a680c5ee2a9888d6472cc11adbd3279b0ad752d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.2cc6966f6.0.tgz","fileCount":34,"integrity":"sha512-dgL8PPzlGIQgZYFdOe6tTcecLKrO1L1HoczkP5KUhf9luisCg8yjTfw43ZLcQ2JKypr1/oJC34Eq4mBlTKgYQA==","signatures":[{"sig":"MEUCIQCpZzBUfDU8+yorVNIjamBo8Ar/1GVcL6RLOiGgVIIYVQIgVCoPjZ6wd+AOMunkCE+6tHBeZh29WrfLTfdIGGVKFos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelTmCRA9TVsSAnZWagAAy4cP/RJ7uDTHfEtbDsBDp7Ps\n+dRs7T853EmECR7eABwwMn/bSCP2iose7Hieo0DPm9nDf90zYp/MpTkmvSfw\nUjKRR4X09KdImZL/MBPscYAgy712/74KO+POQGpnIOw053Vmj4zv6iQfKJwQ\nIiCbuuIUE/6s0VqJx6KNvI3McanpsmasNlb8BpcKGdInIQKNxup4iaYoM3UG\nUITUMpzFiA3z+g7Z9bF/9XmnvBhEVdqdA59gxjA4nlnXyuraxAURUFb0EgSz\npbQs7sIlFTj08kIQwr3GHyB4iGXeA4TSUxAfB3Q3q8/Y1vfhxiPXImgimA8i\npTnsZxOCbW1bbHHSE+vxnxci1wH4F3aJ2bP3N0oW3KA/jrkNQIWsBPvs7oDE\ndsjH1qXZJnj2N00pHTyiinYSUHgB+LCH2vpaJnRg4xYYAjL+TEABxbw4LrjF\nri7oDxukIt8d4vEn8oIoYegB2lubXUG6+pxKJnE8RwwzjiKwSKzGJQmnDsEj\nvvCtit1jp7kpGxGAvo1PB9VkwJLRp719QMNln8S2rdUIHD6+TOe0p4UeJWen\nGBPDFT1epYrABzMp5e+yb/zk/nfjiu5oO+ZUAz2Yj9g1r3xbmIirqe2i8Z/q\n1Cysp73PMFF0XVrE8AMoMePE7mGA5fKO+pVpLBV+CLvgNw2UkiS/bMqytg3W\nSJ1Y\r\n=TPWa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.2cc6966f6.0","@material/base":"6.0.0-canary.2cc6966f6.0","@material/theme":"6.0.0-canary.2cc6966f6.0","@material/ripple":"6.0.0-canary.2cc6966f6.0","@material/typography":"6.0.0-canary.2cc6966f6.0","@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.2cc6966f6.0_1585075429511_0.3978406618320631","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/form-field","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.8707953b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73c4cfa6e169755728a0a0906ad2a3c71cafaa0b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.8707953b6.0.tgz","fileCount":34,"integrity":"sha512-LazUCO+wpq4+HjV7NkMFfQjxXNEkU3wnXR0jNi4DIu+P1eS+PJX4jIEEuggNQQg5zpQ4iNo3GnaXsyRl4uP8QQ==","signatures":[{"sig":"MEQCIESAcsob8+Q8O8nLkaNWni+VS8Qzgiqo4/BcM9PwXCHJAiBaUw01FdiLQKHwc31AtWweTZVL3NHEicwGKKcQ7fpGOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelXACRA9TVsSAnZWagAAw7cQAJRYYNfFjJchXQZ12luz\nj9vqcG06alaoTma7Wq490KrtBml19K+gSZ6RXjfZjC99rViwHZ8zhEGCnubv\nbUyO/XNga4dOljkBMRDx/vXNZjYA7fpq4x18xcp0kKwQWEtEAW3On4DcT2zT\nqHRnDDVxI8rxI8xULt4ylyjTWSZbNI3xh6soKZ+leotZvMjby8jqesQKyjq4\ndsr6lg5T53tV7Ds+ZxUkqq92q+VV0B1ldhhAWbprv9SVge89wlQLvaFRfW1Z\nYIO/M5MrqY8x7oqTuU15RA0TnnRIT8axCA+B9Pe62nbwos7fJE74e35HUW1K\neX11TSA223N7kahz0vfuzMuBW20xkUU1xqcKP/nO7e7X/GIiMEF4aYYilRCy\nep/n4ovrqgSfcczlrvyJ+JWbF9SBA7KjLmKheD2LzOcXRn0hhvi4R0VHHnUk\niAGCq7JMci9DN/iFNA8bPnXgxkx57On0oNR0c2FNCc6F/dTEaxuqdfeaQkxg\n8aBQdYROWIX4EfJ/MNVaPG/PTVU7xP5Yo5GSqRNhb8C+v55qI5FdI1M8d3Ad\n4mfcIWvEX/gZoQIqftno8ga5Q1tVULvcDwil8bmOX3YTuUT6KhHDoln+hAWb\nWcEpquw79haiPE1a4FpK3IBBIgwoxfbz65ITsXFdkV1P+ytZwPQZjiVxm2iy\nhvHA\r\n=UGw9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.8707953b6.0","@material/base":"6.0.0-canary.8707953b6.0","@material/theme":"6.0.0-canary.8707953b6.0","@material/ripple":"6.0.0-canary.8707953b6.0","@material/typography":"6.0.0-canary.8707953b6.0","@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.8707953b6.0_1585075648118_0.854113966874231","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/form-field","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.10af6cf39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b0ea8782c3b31c0d4807821ddab43a69c5b8b8c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.10af6cf39.0.tgz","fileCount":34,"integrity":"sha512-hZ0IjGsdD2Hxi6P5dvPvi/CZ1Z3LXsn1K/ShH2j46/ryYypcQDZxcBTrhUoad3sWdPsSC8Gngd6NVP9Z5d2ZIw==","signatures":[{"sig":"MEYCIQDx5tQYpAebLC0iBMGOdjJBoGEb1BqUEjl8LRJNMIyNjAIhANdkdQd15BM6i6OezWB7WUFEf1EP0/vzh++shFF/WGXJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6B+CRA9TVsSAnZWagAADowQAJw4KkOMvoE/ZzcM3RSp\nbyvYdg2tBCkN4atZmSxb7CCiC4fVN4XPByPibBuP7dsHknZmz4ehYRrKVxj1\nODsfcP9B1vd7/nYLO/4gEEopF6rmfvknp//85SZCpZOaO3TMDIPda5koZeeb\nCNQejnynTvTqCs7TIqTu90RFcTYZBdRG30kr6s/YCvm+PJwuBMkfOTcuMTpg\nI5wrUkTPhgCXn7U7tRLIa1d9eLOMV5b2iTCA22tBJmzakkoFio9JjM27ek/8\nL9VZupYC0dSmOOfzKyqJ04Ls6qq9+lo2G1+j2+g3Be2YRtMrry71ojqCEuMX\nQZDEsA8Vji4x69GA/Bmw6a8im8l+DBVN4NRTNKHE333+kueGr11X2HyXVfdQ\nN9BTM5Y4Bpse2TVib6RYlVqqA3Cw+J3aK6I+TQmSp6il+pvObTKyMYqRnjog\nmsqkGwYMqyiCPnGSZ9GzlTdJslAdiHUQFcdmvreCgr1IhTCgjR18P2CVpWd2\nIEvxTI3XXhtoBP27t+1rZRmOwermX9GOaA/IiHyPQzPqY+1ME+P4dxHpNJjA\nU+Ocp+kkx6W5lMD1yjhOaKekJ2YTk/AjPaaYTYGNv7+exuqORvipPg6Y9lQO\n5nARtLCq5VjeQFFiERiNzSx4NYO7RHcidROlNI9wF2jYCGiLkvcYyo09oPUO\nfswi\r\n=Ih4+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.10af6cf39.0","@material/base":"6.0.0-canary.10af6cf39.0","@material/theme":"6.0.0-canary.10af6cf39.0","@material/ripple":"6.0.0-canary.10af6cf39.0","@material/typography":"6.0.0-canary.10af6cf39.0","@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.10af6cf39.0_1585160318188_0.1978410263875856","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/form-field","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.7d8f9c8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48e0582c9062d8794cfd3a21d6f89868467c789e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":34,"integrity":"sha512-+vW9LWfJZDOtLNQPLrDlseQDNASDDmPJoHADVYzWreWsK/yWlf5QDtJqRGuxfmCJRXsf1uH7g+l66Ehx3a/nKg==","signatures":[{"sig":"MEYCIQCyxrTWG/4Z1/iKvARVD68+jhh21+ZE2J7in+Dv/30inAIhAMMDg6p5uylqwlxv6xU8oAozwUTfSGSRsDySNiIbQLE4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkBbCRA9TVsSAnZWagAAkigP/A/Bnh/JTDiXqOltZmHb\nMaabUWDpa5qIywAkUmNSZxOoSf1jkuy5jUnX5HesxH5pi6uYz5UKqEwMUs9k\nsAxZu1B+J6l9O7n/4W49ZOA5adbf2cDTEvpIrb70cZr9f0TPION/YMJ2jbp7\nhpk2Qz30Y2gWYvgTZG61mAUIwjzcLGikAS4DEmeKZXolAvzaYFXXCYtGwZcV\nuj02GQcQM25ymsqil37k4KyPSv15VJ2tCOSwWQV5wj3A4IE2nlUSsDQ5Kqzz\nZmgNrsXbDdSLQXiYZ6m0oPesLvsQJ5pUm2wxkdWS9dupqs3AOEJkApVWzFuP\nwfcOgUMO8e9NS1514WQ0anSCiqiO8qA46GkXzX3DN6xvFagQCmbRGJpxE0hA\nAMUjB2b0B5UII0NyHrUVdqn7R92kgItCeSgnKguuor0Nw4sUoF9PAFHxe9WE\njR5IuYg6TBcL/o7hCzco9SpNta1+BhLXvKs3agUiFphhM44lzae/bBxFmL5K\neNCJmi1EbB2GBuqiPDRv3USwgAdjxoRrNHkpDY/E8mpabMrBdjuq2SWGBto3\nAnAXfqkvWRFYqF1ziVDKjPoBLugs+NUP8m0HmZvPCHzil53fj/YpbykKKOMa\n5tfjJtuWaEeNXLISy2ewx9kk32bmZ4dKJkZzH7gObrgThUJ4b5Fzup+5FXJO\n3PKb\r\n=5aEX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.7d8f9c8d7.0","@material/base":"6.0.0-canary.7d8f9c8d7.0","@material/theme":"6.0.0-canary.7d8f9c8d7.0","@material/ripple":"6.0.0-canary.7d8f9c8d7.0","@material/typography":"6.0.0-canary.7d8f9c8d7.0","@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.7d8f9c8d7.0_1585332315355_0.5420369207646085","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/form-field","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.d6315efe2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fdeeb6daaac4431ed3573853ea14ba508896390","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.d6315efe2.0.tgz","fileCount":34,"integrity":"sha512-Y8rMKBusObfEwx9axlunsGyuAUTfQPMD34S7yEXwnis8ub52RIfijCZGzUZn2yZpmdyJz3F6y+TjD6WQvNe7lA==","signatures":[{"sig":"MEUCIQDif2UWuMCV8BLc5Bze2XyZjjwf6Fy1MSsp8hVTf4sYIAIgNLzFPtBmHmnlOI5KdgFj6ZsuuSdwlzPrEY3TSyBH+6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflp9CRA9TVsSAnZWagAAQcQQAIzO8G7Qt6t2p/Pt/tLN\n+ueiuSZ8mx0JZmhC03XOJq/ZhPuKmDcU7j37Ovfvok+jQ/kM8GMP95CREDp3\nGJLKqhWMSaGTld25fNhFAvXVi95zimKfn500U5NjSWmdi6NfEjI0yAjzK1Hw\n67aQlzZXxJSUUBidKrxtQNNMdeiDjEk0Wmuss0rYi5r8sjFXlYYi4VYRnevd\nwmRMTZLmB6QzGxG+lopSR4ehcXnVE5KSv6NSF2ihU5ExVGsfccgLpqkX2e7I\nbHYeFNKRPLeJww1aMZk4ZKC96w+EYoA/uMGiRFOpLOPYqUZCkO1MRu0yr8Sx\nHnjRGftWCwCdsM7lqif4Pww5KX3nWRYLFiCCdMRlOryNAnbyzomiSbETygy9\nojl2xtwU895qy+jF+7jNtfdEmdGk1kKn6EtINBaroX89zwo2yRbUMcXTdTOj\nvFwmRc0YWAa64YT8iC3sJD13G9bYZ2cfKi1qs9eu/34BkVCV8KMd2nWgQfpX\nrlRDEO1QcCYAEnFaAN+kIjfaxd+iCESYb6tUzyieI0JOD0dBgidCD8+bc3jx\nDUMRUIh8U0+PTfadjyBOvFMEk6rI+U2Ea53T3bTeYcy+U4DCfTpvyAyTZss9\nNMjpSoljJw3LnMwNpSlZ0xRRKgI/SyzVsDnVIpOD4Vd3Q+qZrMUiYcx5hjo7\nFrJJ\r\n=p/VN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.d6315efe2.0","@material/base":"6.0.0-canary.d6315efe2.0","@material/theme":"6.0.0-canary.d6315efe2.0","@material/ripple":"6.0.0-canary.d6315efe2.0","@material/typography":"6.0.0-canary.d6315efe2.0","@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.d6315efe2.0_1585339004915_0.8245301650520906","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/form-field","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.a3016368d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a22f09864ed2be7d63abcafdda622798894dcb3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.a3016368d.0.tgz","fileCount":34,"integrity":"sha512-W9bto8C7GRplVZpRH1mCBNyNxoU5dudncpil7H0EGuGJI2/2Gs3N75eNexepuoSbvgtVlIVCFvL1fyQtUb2JBA==","signatures":[{"sig":"MEQCIET/ds5FZrAbvx00OiM4Y3I3M2aYjIhVLs7ri2En05uFAiAJX5iGlswCqSIj8IEMeZwDhbpr72s5stnYwiq3cnTXnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm32CRA9TVsSAnZWagAAaZoP/00t6WiYsLqMDqcvfKnV\nfRU0jnj7VE8BQ9zOCBucO3FkkqtisJKWMYm+pxZjU0f9MQCH3Fgd3syKX10W\ns//oO8uXGXSs3L4TGzE3jiowNkWlaUc74g+LIBKimFeKmcPtlnNUdEfo7Qmv\n4w2hyqwydERuynbuL8mUl5QqthHSbAvhPa6dK/UBOsl4Pa8vo85trw6uEKnk\nDZi7jlX81n93rQSQ9as3L1szjkiP2j54jQKf+59jeB4sK5eOoPqfxKPCOWsr\nIzkz1nftY6n2ltX2u8uHYbeyakjJPU0FcJzYqoQ/X/+s3Ae6GefVnXSaeo7u\nZ0OfZRn1Uw66K3jBPn8/CFm0JD5/soIpbf+79UTjqhR/sVA5ce17YaIIu1Ow\nl4l5u0GYGuztp1P1MZHlsfyYwZuVdO5oKYRbznOvqEzfTzMdPLfTGnjO+1Lm\nhNy0r1kCne5QpwTPlvqwBzmtY84MCAdj5/G/4OJqXUl02KduQzDsHLY6TA0E\nkigqN6lWaLzVCWJapmzMnupEeSzhZQRUun0tvlcz2RKI/lKV4ahZtZFs1VGq\n/QihW7o3JZgbcgoHEo6qegZemH3FVvYIIbVfnItuRHyxLJFKMk/dVmYRuG+z\nrU5Dp9Nvtfdc+jx2Z61LZmL36jVvKqnrovUHDw+Y5LVcgzWOAejjVNRsavww\n0Avm\r\n=g86H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.a3016368d.0","@material/base":"6.0.0-canary.a3016368d.0","@material/theme":"6.0.0-canary.a3016368d.0","@material/ripple":"6.0.0-canary.a3016368d.0","@material/typography":"6.0.0-canary.a3016368d.0","@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.a3016368d.0_1585343989884_0.3916805843271025","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/form-field","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.4b45b6620.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"625318d9ff183236a62981f29fcc0f425e5fce42","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.4b45b6620.0.tgz","fileCount":34,"integrity":"sha512-uYau4qu6k2Ohs1s3pLhjvv2kdVMdHP5P6o22+B8KAJPW6rGNBVmxorM/TYyD/06Yr9OSN3dFgD158bpAHamy5A==","signatures":[{"sig":"MEUCIDtztYaTCDQWQ1QmJMLAw3d6ccC0UwPZymDGGF/dmBAjAiEAlJlwoDc91qwlxgt7P+x0u+r3k+sP1w4b7AZcj/gslJw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2g0CRA9TVsSAnZWagAA1KcP/1m+C6uZOj6yw0/NljYr\nlCdFWVwmE4KwT1tW/LLdQUlwtKLD6ANs2hiDXiAlcSDAinpsodFsClJ9EwZu\niPfdI+WO9Gihlwbaa3zWy59oFXRV4GsKJmz5r/LGWZnRQK52fqOqJesbbEF7\nEYrx75o5rTJdC1ZaFEda2uQPI+On0eLbxTNFubAGu/mDeC4izOuVGlyr+weV\n75x8N/oVIwffljD39my/x9EU4eopThK/GcYxseHpU7zsTnW764d6jZhSS1jO\nX29L/czJIHOPULDT8pXjj26opWfMwIMpwbLQqNW1JUZb7UMH07eFP/VvIeXP\n0wlWoIzy9Z2B6pqAP+qTG5db9vneAL1bzoaKGEDW63UFkon5LWnZRZuoip+C\nuJMj7mVZPAF3y/PMxImvsPy6vDZecLqyeJ597dBH/LXazZCBZZXlnFrehtG9\nYN8FFNPdR9aTYkLMchBEUyRbbr+S/i/CP80wCXwlCZoVF5yYnIeT2lPJB9c+\nyGjZYixlTpp5AkYU0vJKU7NnXzbAI6Jkr+EUPPrAQlAf1Qw1lSu5ftJRQBxO\nlnS8GKWzplQVQ0wJnB21QENQAnulqXlaNflctTQtDE1VJWi6M6UaJZRPxEW0\nN6gKYgFBmoAuOaemjQ1Ifp01T8XOvtsp8k5YHmBfMq0QbVwbRlRmLZOz9Rji\nv3Nq\r\n=Tl98\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.4b45b6620.0","@material/base":"6.0.0-canary.4b45b6620.0","@material/theme":"6.0.0-canary.4b45b6620.0","@material/ripple":"6.0.0-canary.4b45b6620.0","@material/typography":"6.0.0-canary.4b45b6620.0","@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.4b45b6620.0_1585670196142_0.6825860232822161","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/form-field","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.e84b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87c98b519f78c491bd1e09253924332677629ba2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.e84b9c8.0.tgz","fileCount":34,"integrity":"sha512-2/McPSxRR3bnIntk/yYF1wS5ov+tovPqF4Aa4ziZRRLO2XK/NRX1IWjmubsbSQwORcobNawsmJpUZW/y0wwHdw==","signatures":[{"sig":"MEUCIQCFVasabwdJ8vR3+n9IdcvhO9/WbQYxHg9I2hExmSRoaAIgSjml1GnPGZ0eAzaj9wG5PbqCqhi/S4TKHGWlrZBnejc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161446,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMeuCRA9TVsSAnZWagAAuw8P/2ghU6cb+smSjPw5wcVr\nnrG1LmDe2JC+DIayhPTTiwobXmhXJdnFLmhqQ69cMoAeF+9K2LTAO93mlcc0\nUf/wn9w6RPiX46mY0g1+KxT3aM73I2iUoHqxFM7IrfZp2+EFqHTJVHlwX89V\nFpjCgQQiKmyBAjEjHD2EeKjGwiSI+cnja2u7mu75r8JAQMsAmOZqfkjLuu3Q\nuOEIwCUiyYeT5BBpZ3Mu+y/ogE3KamtqGg2Zpf+BYrZi8VN5LNzqn1KwFHYN\nCBiykS3VlorL5fisZGhK0eQ5IIqMPB8TYO8HUgvfrqRjhuxkwunAY0YDfDmA\n6rTnF2bd+xN9XJFAADtKqlOKiWwZOr14AjfROzKDPhpcZfWFVVPHMuPWGrQb\nG1oVdEi/XCgQ2t/EeH56nW+gzM2CzB/EtZu/Dq28/F1jvte+fMK2+Q08I3ry\n25ATcx7qUPbwobx+7MBuSXdDkkvJAa6CCkEyf6ddTLab5bfnHXiXEcFFblsM\nGPYrD22YNIyjh2yQiNbQ7Do27eOKacjOnI9vFD373JzYhqV+/E+kwe/vHHyO\n1lSRQ7cBM4eeiEkbGPg+DjE6hdK201XIJ94V3IwdkKcOaAGiaJ1+3XodlQ/f\nNzrB55FXG8qSRAMi1tBbEVX32+kz1yPyd965uot5QhYM2Xvr+aAW5egDu3iO\nw+Pw\r\n=/LO5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.e84b9c8.0","@material/base":"6.0.0-canary.e84b9c8.0","@material/theme":"6.0.0-canary.e84b9c8.0","@material/ripple":"6.0.0-canary.e84b9c8.0","@material/typography":"6.0.0-canary.e84b9c8.0","@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.e84b9c8.0_1585760174039_0.24503979930491449","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/form-field","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.e33c49e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb8f6b4652f43cfe00edbd320d9f0ca6bd9a3d0e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.e33c49e.0.tgz","fileCount":34,"integrity":"sha512-vm+NjGrFgvkIKYb2W/oDI+pYfNxCG118uOx6fo91dcRDCSuesrZdQNpfACP7t5qhfO4rDkK2t83JABezOq5TvQ==","signatures":[{"sig":"MEUCIQCdapNs9gkoAMyHND5yQ/EHgMAWlSRpPwMG5eYLeruq1wIgO4s+ha/1agE5K3Ha+YZqHxy01mzHYrL6nzKLbK2UzLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS1OCRA9TVsSAnZWagAAoacP/2wDYGJYoSxy09zIEqxJ\nxxRvLnbZdVFIhuJqDEyo8MMYE1Xdyiz800t+DCyqLLHGw3wU4tAPfDV+iW6W\nCj+6B6+QlK1yBORZk+ffEMMVcjYW3tNpVqkDpoxTy0OV2h0wAsHN2UvITKWX\nKm50zbgGM9w/Dvsq2Mwfihf213iJrNenBbK8iS93+YiVvQndrOqvSUvS1ETn\n8xwobJHBnt180bKvD5K0ybvDQmUmikOJZ6JY/LakmgvABJbEBGH8QZAgeLMR\ncC/v4nuNslPUwCG+vhnQl9atY2Ly8kbkWrmI5s4P6tlCCzRSR37MrgvgQVfj\n7vxa73A7bIxiE2L4PES91owrAFiSC0QxxlOdRmRF+3ERqwk9HEOQB0fycU3+\n7LVw5VcH47uF3BVaHAFLVUxdXPDOTzybnQyp4LHxQ0u8QRjJRFCoZZoTapaV\nuZ8D1lgDFTcERaXJr40aU8ph/OMDrGDuhweaZQd+qreB9a3F9q4HAd8/LPCc\niV021US9lS/2XHReaxK5G5nXcZ1AK6/UcVe+bp2xVh+TQEP0Il8A0024GFXe\n23PL2DeAbEFbQhB8b4BlemIICpDlSiP+SDtaCnTQXRgH1rbRYYEGCUZwv8+/\nrN3wPlJfsYvXCsJ1rnQLefRyqGE8MISwFVSNUD9fbiiw3o0Tn2iQhSpI4Wsp\ns9Xt\r\n=F70m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.e33c49e.0","@material/base":"6.0.0-canary.e33c49e.0","@material/theme":"6.0.0-canary.e33c49e.0","@material/ripple":"6.0.0-canary.e33c49e.0","@material/typography":"6.0.0-canary.e33c49e.0","@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.e33c49e.0_1585786190471_0.8855074274511565","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/form-field","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.f1f8e60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf862d68459b91a7667b50f6f738642b10568c33","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.f1f8e60.0.tgz","fileCount":34,"integrity":"sha512-U1DcVGt7KfLmhNBA8O5o74unk1Xu02z5A80v8fm9zdk4FsyavC+UKICiLmFXOSt5DdBYKV5GSv+lgbufyJIfsA==","signatures":[{"sig":"MEUCIQCwBfIH2fpyKjEEKFAe6YeEPPOkv3IVHlZSqVo8wj2jzAIgEDQdSSiI0P7KOgJuv6SLK02zLIvH5+go8m0OjFI6h8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161228,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjmJCRA9TVsSAnZWagAAkv0P/igVHyF1RaXxjbGbJ/hK\nd3nbCrO0nbHmfbnWUzJUj1757+PuogKjAgOrb9UwMmoH7mFYVnXwc0Q9qWtQ\nv4pE1N224gPWkrWzmzQ9kW56wgc41568bvH8sUG0I8rbZXawQ1m95/FIbOSp\nW9lMtSWKCltmLA5ZwXAkE4HtxNzfB8slsUysiuWqlCNb5+vJRyndMlyWE1eC\n/ScJlL9feSc6dhkloARBe64aQoT6U2XPHjG1sUy63gYqcxXmKiOnRASXcWB5\nvWcrHvO/VTAOnmPkxqSeFgOD7/KOleSF+1+AyA8ft3BN1wyKqzhJ0rYPumhK\n6FWQXJrd1ohHCuPLI8C+esrJ2A5dTnI3zI0CJ1QSnd9vnY7LUwF6aLJzyEy5\nO62Z0FhM7jxztz1uCiYtLLRwZQ3MuteDLgDuMGrJ8wXEDZOYS780YDc+xyd+\neUgC198xpMQJogXDrzDhvS8UFCTKUYgNGQnMwQdJ10yxq8L/AvyWVKrPmrf3\nj/LEJuXzAbUMgZVJxaLYvYDb01ufX6J+DQAFLdfz7KieHom6RV24R6lkeDh6\nwxyTNjBGGNz42+MOdq+8UB12AM+gnyWuc2TITRpSpLnGUrtTllbpYNsEAJSZ\nQkAtc0iY2E9GzGvQDA4wkh0erpSxPEy573R9QqJI6L+OJQ+R015Zg+hgfP4z\nbsvS\r\n=TXNL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.f1f8e60.0","@material/base":"6.0.0-canary.f1f8e60.0","@material/theme":"6.0.0-canary.f1f8e60.0","@material/ripple":"6.0.0-canary.f1f8e60.0","@material/typography":"6.0.0-canary.f1f8e60.0","@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.f1f8e60.0_1585854856985_0.6705556139083273","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/form-field","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.1e17c49b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a01b5fd16ceda1ca977fd89decf25084c8910251","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.1e17c49b3.0.tgz","fileCount":34,"integrity":"sha512-74x8Re9MB5gsFsKHUPNEyXnlOKpi/Pnlf7+luMhDS04k9pUbxlZ1vii5KY63DWMoKcri89OrebQKH6C1MA07NA==","signatures":[{"sig":"MEUCIQCiHVDB45WfKIAnhNpFRzt7S+oSFInP+e4O9Uo2nJhoVQIgDYgI9O2iRkJn0MzCFmrcBY7dwPqj7NXFkR4QsF7HMKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3qpCRA9TVsSAnZWagAACh4P/isxItFSn0zc7s4CQfYG\nNN1etDEJzfhBybJIs4IUZ8zeB3JFq1ZjFBUww9vGcn7IdkGiZN46Atuy92dq\nfMgWNPFUiCAcr0yP7J4bBFuMZt8QUBoUL9N8+kSCI4ac81ANS782gryjvD/b\nDXZVA2AfXiTM5C72ms/+nGtDNrCE/3SYUQSCb1LVIKWHRW5PsofX9xxV48UZ\nUTUxEH9U/z+U9Tmq69S/hn15ZN+LmnpJdy1+uK6WF/h9bNH5TloIc7tJWaHX\n+wyJZ7vMnaL9a9suz5E/jmE87mkGHOTmIz8dpAy0vY76eeQnLJk/Mg1+jvC+\nlSX1rzuqgi7DzyJ3dOtnvIHR5L0Eaq+JbE3KSRrOzm07I5zLsKd6KJamKX/U\niFEWpd1LATiBnsmBO3ufwmo1sWPzwrW+NFS6I7BKY5uLeO0ukElRLVqMrBYx\nU8mPO5BROamKcHYL0yrSFBmP1zkF0Ocs3WOkG29Au0SEgUDqRhzS9mNY48Q9\nLBY8tMbsm2tokvJsBXgNR5wPo9uoheHTLilqhApbWnoKFCTIV5F4A6hHxuhc\n7lAfYhwogv+AjuUY932KP6j79ZMRhqtmtgB4S/GBepB1fSyVX7mgJ88PAMQV\nivMEV50VX9YHSZm54mkEW4d2eeOk5Zy2vXPjAYAmoLu38OAgokI++KS8mzpp\n6yr2\r\n=r+UE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.1e17c49b3.0","@material/base":"6.0.0-canary.1e17c49b3.0","@material/theme":"6.0.0-canary.1e17c49b3.0","@material/ripple":"6.0.0-canary.1e17c49b3.0","@material/typography":"6.0.0-canary.1e17c49b3.0","@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.1e17c49b3.0_1585937064740_0.16347988626597365","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/form-field","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.6a40ef217.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"689c084fbac0e63c9ef9e34de7d8a0ba125b2f63","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.6a40ef217.0.tgz","fileCount":34,"integrity":"sha512-IHfKJq+OA55Bi+Q5q1Y7gtf4B6e1OKIeH61d9LF6HBm2XyHpEBqVCrsjLBOyXgxqPBjWLBZyNRtiywHm/WD/cw==","signatures":[{"sig":"MEUCIQCf2qOAbYx5hg5KngkA0VKXFITAQ27qcKW9AQ6fblxIuwIgEMgAJhDcfckPSve0Auk1TMG9h1PnHrNN2PZRASMTDZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh42NCRA9TVsSAnZWagAAZ9QP/3CnWB8bVvJ1ZhGTpfzz\no/wQqj1dN1AN3dpE2SDWRN6uiv2fen3Z8IGfpBy20vV0xa/ClfBjYAVKbahz\nDMH34MwXtfhrHd9PATSzVjdxlDkZtSN21FPW91GQb0tfvF1rpBIVjfI9v/ic\nJA+ilp4aWbB43SN1NhypjR4IRy7O5ZsCyLBY/rQqWLoq3ieVMYuhyxIpuK1U\njqTG/ki7V4ItbdibnWrjNkAuBzgJn8w+TahY06Bik2+qey0Wzeef2NMB6Sh7\nrGSlZs/p75PT/Ih+k18BxfDsDIAZf2OAQJDrwQDLfZHKCuMEZGJVbKWh1C5d\n09dzVtrI6Qw05G5HeJu3cXHD8/31IS8/A+vuiCSL1dx6dAaej3yV2SOKr+4l\n2HdzBOhYWwgOsCMDQXfF+Ic0UgBzMqUXHwaptzC9OHRxi7dqlm6ro4nrHdZc\n3jFYpp874o0uKdAvJiTPyBSpzImlqPN9fxbjVKToJhJ6CP/3LA67Bhx1wEwD\noR6D2cP6gqj8lTeLk6hTWu033GqFhgtCHEeB4RQCGwBVrQw5IDesmjCIRvdM\ntHzeys183cDvSV1g1oBabfJiDM3Yi04d0KQRizk0v4oXnJo8bvx0mCvEjYKx\n+CQ5Cgl0LOKKh136utgFNza1LUb/S2YWzc9S7It5EpI6YrSvL8cI6dxQcCIo\nd+WZ\r\n=0DZd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6a40ef217.0","@material/base":"6.0.0-canary.6a40ef217.0","@material/theme":"6.0.0-canary.6a40ef217.0","@material/ripple":"6.0.0-canary.6a40ef217.0","@material/typography":"6.0.0-canary.6a40ef217.0","@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.6a40ef217.0_1585941901191_0.7043866669007683","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/form-field","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.5f24faacb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f9f8327c9292866734b984cd869c88db7653fbe","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.5f24faacb.0.tgz","fileCount":34,"integrity":"sha512-YHxznCqEOL5smMjQ2W45Sokw0lRSjCC+9tsnxXd12rzaoGwkF/D10JORCMoAs+wDiBMeXfQ1pxl4G1jJOz3rYQ==","signatures":[{"sig":"MEQCICtfU47AcXgOSzk/U9wmJwMIg3+kTJ7N1pHkljm8uESdAiBBsH8cMYvKcTY8QH1pmyhCrS3l05Wr9lZPLDF0DoQZsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje+ZCRA9TVsSAnZWagAA8SoP/A2AfyPiZeBlNTVoF48z\nNupK/zoOw+QnV+zdGnvSn7H2zhVbtfkFusVVAp/ZICMdhLYblVAssMm9ZewJ\nX5HQ0hwZuSarLBSx8fzQpDmx7YXhTXtke1HBPVqoMwcrtVlq5wtm+4HCHpX1\nMLuLm21rDyo0Xuw7AKOQVDBuMs4tRmkguXOX+fUQxuPS0Szf4yrzzbwQvJMI\n6TTFwHI0g109pPErlpPX2GETTrHOm9L/+7altIp/LVDx5N3EgdwQCIAy477W\nGA6WOeuQig9+Zz1kAmL1MQ1YgRKTf2rmLjVVMZehPBnMHxyQwqN166++I7bk\naSjrmg0GI/GLDINXtINxjLBHSHXqX4xsw3UwLwC5utUU3PacVplxgKB4Zxi1\nFNyP9mkgLxrtP+AnXXQvaaXIIFsQVADv74dGtuGRuFszJsompInCTpUDKXs9\nKhRDETgL+08RsgajSdaDDOAAXuDASDwu7gHnWJNgEF/xC/2Sx/AaHPRTKSV8\nPhJiQTkzRFqgccfak2kts2mynSZuxsvLm2mW2jruX/lv551l5OeWMxAVRcDZ\n6s5amclsJDQH+gJCmCPBvqkj2TBMV2/xvMV6rzEVnHezvaA4aJr+2XnlMf4R\nHGYxrwgkqUZAegJW756Nv7nP92KjYTTEJ++Oyx6toYyDAhouemowLo1UFCQW\nKC9m\r\n=3Jjs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.5f24faacb.0","@material/base":"6.0.0-canary.5f24faacb.0","@material/theme":"6.0.0-canary.5f24faacb.0","@material/ripple":"6.0.0-canary.5f24faacb.0","@material/typography":"6.0.0-canary.5f24faacb.0","@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.5f24faacb.0_1586360216128_0.3091669304413185","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/form-field","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.82fa986b9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"151108bc95a770126e49a5bfa401bc943ca700c2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.82fa986b9.0.tgz","fileCount":34,"integrity":"sha512-2DJxQXGMVfDje+m+DPkZM/hx1vtME5vlAl3NNj37gbofkCu2UdPe0thIA2Fhhc1DN2RAh6NgrnClVc53888T0Q==","signatures":[{"sig":"MEYCIQCEgLOhZVb0QqMASg0rGeyB21eaXBSFxcZjkUBJ+VGxqwIhAPC/NUplWtxyMQs9Gvdwn4oE1zjrgqNbWFLA7TI9CwT0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfDKCRA9TVsSAnZWagAAavMP/AygU06GGnqEPiv3y4i/\nv/xb1IFt5LNoZGzcwuzVbpDgbOb9k+ubK4oPGVue+2pQ+2wtPIsAYEa8i4k7\nS7JqgeAQx+XOHuRq5/er8BWKXbq6nUhyIyc7+ekvSypjzWelXq5520/IOx3c\n+2gwvE06fjhN/wPQDZ+6A7etIQTwOZMlRG+0xgs/ZhlKsI9YJHYxspKGSnsb\n7Mi4E6Sqkm/g61JWC2ybXwx0XO6lFJjBxqlC1ZWoK3pfwi3G66WqwsJfAxck\nK4/dc+91ChcVRNS0rK6AkUZHMhCwEOc0VVI9tXZ5n0EeAUNM0C6WmplDmtAj\nEdZYw/7qodK6kelBAngx1/mLmL4XfHYe0GDuYB5nG6X96fUOun9zaMbwLcwl\ntk8+kj8UKFa/UD6R3NawdSjNaXOy1pv0BMFZAgbae1rP4H1+ssqY/15Z2IoJ\nQan4rIoFHl3kQGcp4CxwGo7pfhZPxv4JhXP8fYr0KJY2uZ56slfhu0ShuD8z\nxE3UaYkxPtsQavIcGU60sL6oap005JziJj8T7GPIbsAgEriI1l4sjrhwjOtR\n6o7HSKkmSE+nAWaAaeUBy28n1Jj5ECwmiKU+nVS62yrdRDJDIctcVO20bf7M\nXyFAWIrDaekViEqlv87jFmpyUBetvaWiG83ul+XaNn8IKnJ6XdaJ8y10AJjt\nYfNS\r\n=Kc9R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.82fa986b9.0","@material/base":"6.0.0-canary.82fa986b9.0","@material/theme":"6.0.0-canary.82fa986b9.0","@material/ripple":"6.0.0-canary.82fa986b9.0","@material/typography":"6.0.0-canary.82fa986b9.0","@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.82fa986b9.0_1586360521810_0.5536623225250237","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/form-field","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.9930d9cc5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b62673fc870e03e1eda478ea5384a2e3ab2d09a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.9930d9cc5.0.tgz","fileCount":34,"integrity":"sha512-mxN6TTzlQdgXw2Wh/wAh6VYL7kbkNl1sEYvTLBbsTo2qnEtqS5Hap/UQDVubu06HkKSvAKk4LuVsRJIXfCBQ1A==","signatures":[{"sig":"MEUCIQC79YLsRTtUutaaYxsIwWkCiYrDlQW+NQi5xCWAJlVGnQIgKD8C/P0n4J3DnxX9TKcgp+bzz7PoPYNYKQvcBsodurY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejibhCRA9TVsSAnZWagAAbpIP/igWAisxNwe1VbJdFZP7\n4ACVd0KmNjZlbg94Uv7qezcR628pO3670LSNiJaQe0cXajZ2HaYanEj9UKbT\nHvVU58E0Fg9uSijVM2FITXntVG+OJ1QGQHG13rpUM1qiq4K2qZ1DrEKcfTKw\nKUGKKCI+fABL2oEXU1wLcvLoIGjoHpajazQ1VVTtIsb9qgZ9RkgHmeWS+D1H\nFrSiq7vEqSprdwJ21zyzhz4135FB2yUkEbjcNmcg8NFIV1z8cdWWZUBl9XyC\n7Z5DL6N80Cv+2Bp9oRSt1EPxCxqoMpT/mqd0WQrcGAgzLFNcnxnu+51lnHNK\nmhuTnSOfKhcKzHd+RXjNsrxiamqxFY2lXjxiD+FXzcHmAvjEsvBv3WUE7plX\nA+lY8TrMXChWAmjBCSSbwafFn6mdOQPddK5+XmkL7gCXerFis5nlrAiXFkMV\nXzXTAuXFItW4mmX7XIiQlQ4ljX0cQVtrN9G5nnlUHwNvHztRxyD/oXeDGYD0\nHqEqvjaQB36bw1yjYUXtYrGpKrg3vMNHBBMud7xhPOYOmIrdpyG48Tk2tbHx\nmoagwteR9lYbW0z6uBdQBLBcdxBb453GMYZOLcJOMIrjWR+s7mwsog2lI5b4\nazgWBmqJy6PZut7hOit2avGAB46kebGPvAjmjf9OUeDyUDRR9BGRK0bzEGsl\nkqos\r\n=mkTR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.9930d9cc5.0","@material/base":"6.0.0-canary.9930d9cc5.0","@material/theme":"6.0.0-canary.9930d9cc5.0","@material/ripple":"6.0.0-canary.9930d9cc5.0","@material/typography":"6.0.0-canary.9930d9cc5.0","@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.9930d9cc5.0_1586374368798_0.6648670386633462","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/form-field","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.6601d24af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e9b68941a713442593022b38793508576010988","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.6601d24af.0.tgz","fileCount":34,"integrity":"sha512-wEfoFC+I9o3psjfY4b+K10du6rUd5/rSTvu4CCsTnDLjPE4XI6aP3Ql7cu8ZqN5b1EDQy6vY63gYFAf+baxnpQ==","signatures":[{"sig":"MEUCIDxc85vYzOHERXqD1eap8ikHxgP4vfigl3qWohaywebFAiEAvvwANsrdKOTCRv/hWpyP+Ut+CyYcweEWV+CFnRX3duw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmyVCRA9TVsSAnZWagAAj7AQAJTScq2zCk3UaRoaJOEl\nx9+7qcf/QbSaoxRsF5pxitEeYgwU8kQYv1xDNvm/GQ0N0eNHj+qzetO+msP8\ncTgfhWmt/XnSptIGb7dS1PNTPPiv+Q7HvBbXGE0Xn0W6nSJzBtp4pIw1K/W2\na+TP/RqN/frYKASyVLrJn01LBpQGgEUZfgNqtVftSOKL4BRNpSpA7bLqSaHj\ncdLNCEGJm+ryN6J09PQF+70qiJdYxvgre6umbDHwX71fd875Lh+iJL1QjyjJ\nksv53WdY/Xomszvzc0QTqPQ848CrsUBySthuMcNcPT8gjFhMnZFhb0sHuAV1\nC6q7zQZ2jPC874xSNoRcV2Cxg4K1nbqjvY4qRD8aFyCRK/xkdnGZZEnjlX5w\ntynU1jraunba6dBxzdgb6XuQZ2kCEdKoTP8d3ZBRb2smNE6e4F+hF/qi/8V4\ncWZZDfUz3fdqXPcIfA7iSltyK1go6wtpjKb9ix9a1bK9ap4x4mKl+eY6Kxec\nWiIQMV0E1a9H7nxHdyLxY6Pf9/g85QqFyRghBGDGjpdFRBNUUe4Re1ONYIuw\nOKKD9Kh2pVVlu48vPLJDyRmbwIz7GJfDQvSEAo/9w3Lw0xxjTyae8cymemWc\nRMnp7JTwcxvxIdbOeTarsI3xnwrpJ/wrFpW+MFsoq8wyI6gMnEiDzLfJWvaF\nkG3j\r\n=ryim\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6601d24af.0","@material/base":"6.0.0-canary.6601d24af.0","@material/theme":"6.0.0-canary.6601d24af.0","@material/ripple":"6.0.0-canary.6601d24af.0","@material/typography":"6.0.0-canary.6601d24af.0","@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.6601d24af.0_1586392213111_0.9391604672170759","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/form-field","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.05f5e1583.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4898393cac1a63528f95bf0148f798cb72f9bcc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.05f5e1583.0.tgz","fileCount":34,"integrity":"sha512-vWbXVQK7QDHyDz/2WRPcMJS9oLb1jsXfbEybEc2V1SB1PZxaISlwVJPhUT7F6xfD9bjpOwk4TFCdeP5eFoTQYg==","signatures":[{"sig":"MEYCIQC4LErOrLBfbEYp0r4E0jL+uVHg8bi9Nk0ulWhbFbSlIwIhAI5q14+NuFxLnDB/ZYoaRX1FRR8k4Ii6FRkRTzCmtGAQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnCqCRA9TVsSAnZWagAAhggP/3rDfqkbjyXYdhyZXfse\ndjlhsjF+MQzBN66rVwpUnYWvc697xk+eV/utkXeiXAxZWj9/D2gBgd9MuqVr\n64R3muED2lv3t0wGxTUd3biyG30bNndOsZt+0G559rb141HWK71taoVmHG1/\npTZ6AF2WGmLbqqhsQL9JDd8oeY6yq5oruHOXn0l5GhWYT1duJD5Lz/1Sjq66\neLfDrvHKurOR5MFKrSbHIGmntGYOTdPIynDnKdItLu11W0WaRuysScapJKLr\nScHa3BUTSKk31euYJ2FeTWRZIJfzya/wXqedC73oKI6ztbvZC/Lmy5uYt02C\nSG3gbAHMwYyyCxp9mTZOO6WOeD/EPnj+eAyFzrw3n2qP/FCkeOyJVpwnfpSv\ncChOtZfMbe0exultyiPh5IhZP0o62c4D1nfsqDCVS4wuJUTkfIBgfzrwPx50\naTvCEyAfivDCThYsPa1VTWFl/1heAT6f1vF3uvtOuhovkYJkUp24WMw7dAqc\nyN1rcwExhpN0NsvKO/sPfDPaT4RrIpx4/NwDzoFq+53FoABNf8Gg5yZgGI1L\nQSQcxA0Tw97SmUfEsdeWTaV9C410IuFGiarQ2YolbhT043861jeJlhvL6qdO\nsxqR85dvKiskPRAEkZkQobcefh+eAA8nol5IAowQ5M3vOu2ZwfVMFGGF+V50\ncb4c\r\n=ZD2R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.05f5e1583.0","@material/base":"6.0.0-canary.05f5e1583.0","@material/theme":"6.0.0-canary.05f5e1583.0","@material/ripple":"6.0.0-canary.05f5e1583.0","@material/typography":"6.0.0-canary.05f5e1583.0","@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.05f5e1583.0_1586393258199_0.963250311660192","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/form-field","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.bce00e186.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"519abf2f4dc9dce00742a6bc35df58585ce68dab","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.bce00e186.0.tgz","fileCount":34,"integrity":"sha512-xK+fgFG4+QS9UcqQ184/hx/ltR/DSHPLtZcriBzKUswtSjFTbhVZ3wOGuegxSC5KObYLJ9ZlC4qalxYlt6bWlw==","signatures":[{"sig":"MEQCIBoKELOY8Un4L/eyzPr8c9+8DVQui0ZgY4TNvHW1cvVRAiBZMp+r2h1nr7Nzq3daebB1Kxwqon6bRBNrAvs7VXIDYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz3sCRA9TVsSAnZWagAAujUP/imF42PWhYCfgKeA9vN0\n8tM4J+zFs1YkfD5j5ooEqEDwobGBZVGAB6fUAgVZDsdseU7oOYUaCf7FYxMF\nTEAFNpLV8rO4pFXoWmdeadpCyt0VkyZFdiQteMFFxjgYVHNWqeBWEGkNtnRD\nV3Rq49UdPs0wO0MxjhO8EapUmq60jBI0j8eKoCNdhcMR3pWUCzGP5gwmn2Jc\n8DdVzDFb+4BYXxVBHW4jbwfhrF0Se6qmOS3M140AFKXZJoqYztztB1jfgUKF\n/hIRcwL2qp8Ptj95nCUjk5ZE/Get2awH3NoQUGQQVVKStpHh1ajhR3Qf153G\n5EJtvcvzue11SiyLQ922N2lwMa6XdIaYvjPGny/IGB+JHrEIXvjsNsrIdgr0\nImxNGC9qAIZX3/mBfSF65zPl5QKkIRmju/vN2xDly8zDCzwWVY1oJnO/GABB\nebSO9CisO27A5utCWLUNpiNX4JeUzkET6DXPl7tTIkpX/2BdKbm8TVTx8jga\npkk9saxclDx2yx6Q163eyCT975OndLFqvvXlykxyUTnYmrixST8uS2cvKL52\nESkl3pEMuCeE0UtT/fsNHra2l48KVhALzxorQl3ykJuzNVQ27x1pZSO86PLb\nwDGhZ/DeaTx6/FP5uWK2uh7FYtAM2kdQ5YArnanKJpfnxrWj1O8p8HUbUyA3\ngSoQ\r\n=CVIv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.bce00e186.0","@material/base":"6.0.0-canary.bce00e186.0","@material/theme":"6.0.0-canary.bce00e186.0","@material/ripple":"6.0.0-canary.bce00e186.0","@material/typography":"6.0.0-canary.bce00e186.0","@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.bce00e186.0_1586445803450_0.5052123562489068","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/form-field","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.927fa902c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0960f22534343243d5d787047dceae381bfe7f9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.927fa902c.0.tgz","fileCount":34,"integrity":"sha512-h7j6D2tRAzyymFdB3La0sHMtBTKTlmodZdhmqAKxYeDyp25IYV94vvJ6QHtnMmOjQNKE+PjrAeiElIi/R52QhQ==","signatures":[{"sig":"MEUCIQDLDSUmdPvtJyRyX97tFYxiqSvylMLJZSqN3Dnz3kxHYgIgRl7YEmVlI8re0y8qEQZ3kn4DWnsYfdv+LIFerxkpDzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej22YCRA9TVsSAnZWagAA8mUP/0rHiyzG7xWPsExEMXS2\ntVrED5XURBSm39WvV36lkTx1YPx+1JmHfLtD66456koapn2m+DbYyLPd4GbP\nH0lHFKQaeEZxHWuTqJ0qzDl75FOvnSu0ctjHfscL5w2in4T7DRb4G4gzsSpu\nBooATyiasAdGTO86LjoMyvcY2xdvrO5Sxa6psv9M6UcF9Iyk4Ch5y9kCr6n7\nT4IIDUtK62a/xv5y5V2gOExhrOsx4eEzO4kWyk/lknFcrZh1jJXiCSt3mITN\nXFnsAGK7T5Osd/8fRUBRD8HDfhcfSor4raQ0K9uVah+WL3kqX1PorYFar6rp\novbqNWZWvAqa7aUCa9S1dj7apRXZy2IdEP8+INc5+qmYR9Ec6oQWWK75pHiC\npQkSnCi5ftSQtd8HnjSuxymgoEhHAT3SW1k01On++YZeHqZk41OCMx/B6L6w\n/rwJsYuITWq1EgripRojBg0vg17cbwReZ/p1vGdnwQT5IMD4O/XiFKc/yfgR\nAEWh5I8zqPbzjTRAL5U53/3Y66Ew8hFyFIz/VY1o+tVwRtcxhC1fOQLKq6Wt\nAkxe12AvvSdCrfSGPJbpNz/lo2iUXTBEiMcvDHJYRtlfMbvObuhtHQtCFN2t\nCJDewb4ePd9XfHB6WPU8y1YVwhvoFgqZdYXJbF4Q+jv6FE+3KLrjkmOmySxq\nsi4y\r\n=mfqY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.927fa902c.0","@material/base":"6.0.0-canary.927fa902c.0","@material/theme":"6.0.0-canary.927fa902c.0","@material/ripple":"6.0.0-canary.927fa902c.0","@material/typography":"6.0.0-canary.927fa902c.0","@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.927fa902c.0_1586458008146_0.5808039056084564","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/form-field","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.eb28b6ecc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4893a209b5b0a8721b948b7f464a13923c5ac32","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":34,"integrity":"sha512-xll/UcRZtQ1mAmB9mcgtS83uNnVRXZcVFgEq9x2wEl94NIpaNUJQbm90oL6z8dMCTrSccxQzjbgZx4Ik/Itpdg==","signatures":[{"sig":"MEUCIGHir5QWo2QlUrttTmaOfbR85kM/Rq6Fs7HWpHqky8n9AiEAlz88dfJ4OrROJcBQQ7nH/m7cmx1/4gLszPWj5YNBZEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMmQCRA9TVsSAnZWagAAQ88QAJADQpmWzOSbhuyN2aJq\nOXgzitNN696dqsRIQwjMBF+v/MU+q6RY5PDx7SsrdBNmCas8TGSmzFPSQ5Lf\nJWR2cOw5VksrV8HQBAHzG09R7RC/ZZBbHjXlOAs3OPeBYRRr7Adxo6mxvtnA\nYGC0hSbaRU0d/H4iquTXEuaqKh477CDNLIcRl1C1bGKq8iDmOnn/0riXOECI\nczDEtB29/Cz8Xw/JwmOgSjGAqxYRvZvIcZx7wp4nGOeiO9stwsUXKxE2qrnE\nndPl4bRl2488MqnPvvjvce81z9bNL7IEdA6DzEIiR9ylTZx9NvybwX7ne1Da\nvWOu9usRRqSLqh3V5L/Sl/Dx4EmFlPz4o95l4TU2C8wLBTUDgPF76tB4PKsM\ncy9JKySQPY26Ayq5qIhRbOYgk+kHIJJ3AIPMdqNLBMBRDjthyoawVp2tdGuE\nhPdd6dNJ0dh2fZb9gIV3KbG6p9XsvS8ZXRSYqMPZSu7/94DOfVgPB7n8FIDz\nRYlw59g5htkT4TTMNUDbzHokAmCtjdAJqcuuOgSl08Fdv46GYdY8wYUOm6EU\nZMbn497w87OwdGmgPPSxLTi3ue+EieFjiMwy/YZgZ8/osFOXalS0gAcfxvAU\nWoENQZgTFeKbCuGsI/HFtskeBOPG6miua94/eG8X9XMDTcTZXqeIoLXjwx/s\n/XYb\r\n=HPvr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.eb28b6ecc.0","@material/base":"6.0.0-canary.eb28b6ecc.0","@material/theme":"6.0.0-canary.eb28b6ecc.0","@material/ripple":"6.0.0-canary.eb28b6ecc.0","@material/typography":"6.0.0-canary.eb28b6ecc.0","@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.eb28b6ecc.0_1586547087479_0.5189113256721332","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/form-field","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.816a43b42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b39fbf1582247ca115bd7b15b1e63b0784d3b41","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.816a43b42.0.tgz","fileCount":34,"integrity":"sha512-ZJaZOpMaGGlgCgGO1UXKnhi6xYP8IfGoBtssJYqn1ImLCGBdc2/u0ETe+nCubwFDm9xUw4xzp2E/k9FxRG+C7Q==","signatures":[{"sig":"MEYCIQCBojNPvF2TBuaAsE/o0RYfJlzmwcM4juXOeZPIWxLlbwIhAKq5FtxOqLhw6BLKVeFiAIJrY5f9raMZirzE58ItDfIS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNyvCRA9TVsSAnZWagAAQ2oQAKGbpiRAuumssROZ01nW\nbfUMMg98DVMCnsgGM4PjaSV57xW7z6wVLaUduCCv0kL5W7kcRv+oEJR9vtLE\n0E0BohHmd9crtWr0VxdQEnYHBppFfmngpYZRAuf6hMErf7w3jM6iVstCmS5a\n3DXtlJME3ezIWs8nb4vmauzPP+TnRogC/GvY3YJY7LqWFkZQo/E5KmlYkvaW\nvQirQMCI5mWj22UPm1qa6NNinwaLwYAjON6eMjrd88TSQnUlwhnloxfO4KWo\n/VU1LnsiqFoa+c0tAOiskNuZ1tEQ/VjRYDxIUjWdgkMR7Q6Gw47LcUSeNfMl\nR9/6G2qt4zT5GOQaOhUp2dfNujZu5Q8plXAzj2dEZUdCt1l4RKd0R9oqGBki\nR4UeayZqP3lZKHVzZD7seFYt5OcZMwnkirhuXJN1AU/z2+3MGg4ZsKHiyKOM\n+nnQ14gKjUlyUy7O0gbegW7p4k2qCziSRINwNGtebbDLE3Lpp1JZE3Bkiaaj\nwedPoTPaDE92Dt8LKcZFUTshSJM+A0hq7WQlzaeQIsYLPEliQVFnOGgXw/nk\ndMzyRbcPnYIL0RYMVGRveMnXOaRaQbsRFVWMhlqI7HtgxISW2noxPSV3vT0G\nStdBtKqkbeCkQikzHgE1g2ZAon3jsWeQ5lVnVbaiaGG9flq0qknnbqXxg+De\n0og9\r\n=4FTX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.816a43b42.0","@material/base":"6.0.0-canary.816a43b42.0","@material/theme":"6.0.0-canary.816a43b42.0","@material/ripple":"6.0.0-canary.816a43b42.0","@material/typography":"6.0.0-canary.816a43b42.0","@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.816a43b42.0_1586551982765_0.049213569356926445","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/form-field","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.008c4d319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"722cd640e860cd7bd3d13429b456bc01fb23fcfc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.008c4d319.0.tgz","fileCount":34,"integrity":"sha512-N9Fb4r1/tBLqjg01qSAd6SgFx3lLFtL4wtp1hwsXsdc0OGXH4wwhTKyNP/je7qr2ID1qX5D1cGHRw/oKyJcY2Q==","signatures":[{"sig":"MEUCICfmM82ZntWWcZgXDO0lUaKkP8EwyzCvd6VfccZ2rca1AiEA3Qw6kTNZ3qQvl7ckgfK5QzABSmGMEqPMCPyIkDpkO7k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJSMCRA9TVsSAnZWagAAWsQQAIIu84WHMinCcvm771D3\nEdBaCPn9/9dxeenyeObF6XOnZYVX4mF7PCr80jDUmvUQ915vm57PHe8DvAA2\nB/o1K4tkDPTb0+kPA1NLlooCOa8ca5EKMHK8vcV7sz0+dA7TaZhV2eofCfkZ\nkgfzQbziAAkPu76KdgZHng75/0Eyc1Pv4kUS1SXkbrEScyqsbJRsfRbl8GR2\nR9DUw57lM+2on4OLs6UhrqKKF01nc4EUuKEQvNhh4/cKz2eyokBK5fYkyUYf\ngFV0YWbNiBpRAwwwYA6slbiSrRcT1/AKpR7CwbcjGP5ZNoSBOtK2wL58JBNT\nbJic+pAjlTtjBemcf3Ht7FSB/t0C+6Sa0IEPvhfIsifosXbaaZO6ipF1wl9h\nZUDh9bS0eo6uHyeC5LgZ8AH/3Dvf144fzksAmK4v70iKJJ/pW+mXagJ1mnSF\nkZQh+jOecIZZFTXq+RCMhqcKou2ylPJz6UYfr9nWuSW9BuprPZfkf3AF6Spt\n9abhN2lmEY4GlhwJdWKHf4OCPH0RQi+40v3+TVSLlwLk6gI2QalKOahndPE7\nOB1r2hJhSkGnc+3dkEied53m8FmkrlFrwXSwSs0Gvx9c9uQSBcDzDMmQdZfI\nsb8lwWQgwNQVv1f1Gc6uRomLdOIKFmcPpH5v7uemT8Y6rpM84kEIyYl1Q9pU\ngpbV\r\n=pomF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.008c4d319.0","@material/base":"6.0.0-canary.008c4d319.0","@material/theme":"6.0.0-canary.008c4d319.0","@material/ripple":"6.0.0-canary.008c4d319.0","@material/typography":"6.0.0-canary.008c4d319.0","@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.008c4d319.0_1586795659533_0.48266011721836466","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/form-field","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.cbb3f28ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"854fd367dc9818283fd8147bea1efaf4116a4bab","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":34,"integrity":"sha512-4ChzzMWSuM0xXq+xLtCj/RwWZljz+0gm1C8CIoOEQgAFdC5KjILglJXZslwqf5R4gIvRR3jilazXhJ04OmfsCA==","signatures":[{"sig":"MEMCIBVE58x+RlL2JGZKRKzpFpEt1dGLeKx2UIa1I81srm03Ah9OxmaYGsnXG1rozbf0MwkUmvIPDrKEY4m7I86D7aM4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUTMCRA9TVsSAnZWagAAwRwP/3Di0835qm47r9iYFUcq\n8IeHV8coUUbACY5itC7GkYNdiIUGdLyqK+2Vfe1Dc+EGTPHt3WoVOXzXAI6d\njTY2kdwF6GdXHqKu8gyMyizl+kDfQTOO8LTWR/CtiOP5zNlFrZIY7K6gWPdO\nTjZc4TjdVZmOG3fzB9h/BFuDaSlj9RC3l8V/mXhiZ0X6QWHvYcgc5eju5tnN\nlDcOmI2W5I9ADO27zZnv7oAkY7NeRZzb4Lz3f+N/PisqVUTf/zXo9AEb+P2C\n7VmCUdTBVG7L3aP2BOA+V2hBPzsR5y/3yGjqM1i8/TrI9aTfa3J+nTmb2Rq+\naXvSnwIlfYkoapXHfCtek3XaabrX/UWNH8V15yAdHt3flJPF49xEjJ1ywlpt\nwdFpCCslUSN7Qiu8aIkPYXdLsrm08tOz5sCIZumnwDyu1fYO0p4k05bL3OdJ\n6dEfAHf38FsZrzVOlP9zP4ZLOgtnMn4gMO7mYxXiR5ZUwlYURdholCHbhDJs\nuYZ1iEypl3SeWFXLzEPGp3b6jHeOwar/63HS7213M6VwHAxRiA8D/wUiBEDe\nXmQZhCnn7x6g/LW7Q3Gv4Gzqs0FKOdWPTJeotX39PGJr7HZAajoWqZnQ70mO\naTLI4CmOOcex/8psZfVX0l6EGJ62hH5PsTHwwLBvu1n6Al1BLTV8BRaGuChl\nUYx/\r\n=UIrM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.cbb3f28ca.0","@material/base":"6.0.0-canary.cbb3f28ca.0","@material/theme":"6.0.0-canary.cbb3f28ca.0","@material/ripple":"6.0.0-canary.cbb3f28ca.0","@material/typography":"6.0.0-canary.cbb3f28ca.0","@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.cbb3f28ca.0_1586840780026_0.9030157300111059","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/form-field","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.f172b0f90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"788e5deea35b3ae739dff861aab9a8eae13d17fd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.f172b0f90.0.tgz","fileCount":34,"integrity":"sha512-rm9q4ksd2xzqxgCx2JcpvDW22hFn7IUiKntWfEfzJz70draFMOSiv7rGVCpqn5xvtXjT7T5JSiQ81L9AW9wnpw==","signatures":[{"sig":"MEQCIG+L4RueKaNM2LXow5zQy5CnIzeUY7ItrmDTLrXMTHArAiBA87uT5kct5SAQI14DZHxaGwy+jpIqTTOT64lgwGqf1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkLyCRA9TVsSAnZWagAAFhoP/0By/BDXeK1snpJgcAVP\nSAGv4TG3mjEvS3pZLvwtkk7bsI2TRp1eKybaeLG73VHI4StZCsTIrnLP2rUZ\nu+qrHWMjjMKhs+fKYxwTtUstzT0oe8ToE9bi4yfioYe5VXXkZmSpvdc40HXy\noY4xJkJ9iZwrtsmkpRIzH/BNU9aipbumhVhB71TSGp3dGmEmKMBwZj+RLSti\ndVyFsN9lz9OTZhbbLCs+oB+DfLRIIgpDvF4v4gWnxhpak4EWUGOuGEjY9IhY\nh2hGO4MyrQiszpbOnla05QXLnOkk3BAlce/RgK6zu9ZOfj6MKD7l04qVzS4I\n1pPaFwuXgbeRrUeio/Te/wuWcaQ6HWXqXqmtB/t/LdTI9gXuT02eu4J8h2mz\n6r0vJeQRQKdAk2H5kkt/169cBHNO521LtXMu90LjllM5gnmKxExBBOx3YjeN\nRXsS6AfNBfOdn+NUftyTNzQNdgXyEhyFXV8eK0AByUvQ2xsmC3htnbmYN+5w\nvOImu++HkB2cCJBSFNje1vWJ0td8hAMs4vUbTWfag8VIIVHTVpsArnFo+2oC\nP7OqfriDIl5ospcGbmdR944B+3Ra3lLc3nAbQOFrAZsfjZ9GU4Ed8mWrnZ6+\nsFC3CZE1mZczUU/tt00SJ7UNA0g3r017iNp8yJNYuCib/3XvIrRhLT7+rBvd\nrewI\r\n=V10o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.f172b0f90.0","@material/base":"6.0.0-canary.f172b0f90.0","@material/theme":"6.0.0-canary.f172b0f90.0","@material/ripple":"6.0.0-canary.f172b0f90.0","@material/typography":"6.0.0-canary.f172b0f90.0","@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.f172b0f90.0_1586905841902_0.8304116455420778","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/form-field","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.c02642273.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d17d90bdaa60752ab1c736e1078b086eb25db044","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.c02642273.0.tgz","fileCount":34,"integrity":"sha512-he+AWIJkhp1FszcX4ok913V3DNssU9+YwpugwwHTcVvayq+xTwWBIBqplt0lwJdoDElyEbwykCJIY97puKbxvw==","signatures":[{"sig":"MEUCIQD6u4Yjqo0cc33aZ8DxBSdeTW4ADAX5sAMBdgUbmwAzpgIgcxh4XLqUxWP7DQ5hch94S6jiNmw5z7p8J1X7F2GjqRc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzOsCRA9TVsSAnZWagAApXgQAJApQMpE1u0xqpeaMIST\nC9fnYygj3gs0AT9CLl7Cq54e8zc+A8LTWA2c24Mz7GwZZCcWgJlAngnWxlK3\nraEqJf9i2eUNUyRGzNlltI7zTP41PEc5wYFj6Vcj7PAUm/XRgRlQpnzQVKqb\n2uOWHEjY4olBir6b//i93ks7jCRhVUPD1EXP+44DJbRSIxeU3Y+PddPUvkcO\naSzsWXtvU+JuqCahdHRXGHlt4aiUD1/DtAfXfjKVkYI6vTY4KE68VItDrwFA\n3eS8oarOzIq5qEkE9aYl8kJWZlx5a8O5zduSW9EO0aDMQLdX15OWD3l76lZg\n5R8nsh6VhgwrTxqbFNya8W7cp0Me7IlYxSjFm+f4VKtFJoEwncYpTKxvRBl9\ntygC6v4yY4Y+UbKMZ8pqa/g5Wn1JVao+rLgLPua1FADiAe/K3b75H+Lg16c2\n2YimnC+eyJSp5AtwCG5XqEUHNuWo78p5SyXmvpPkclww5BcyzT//oV2c/Dgt\ncS0fvEh5dmDDHAOKmCkqoxrCYQcyXRdNsKzBT/sTKmygOagfVWGqBMSDOdno\nNmtkBGb1pqfmN96JqvuwmlAN/up9w4fCUIIQxsTQXArURrbaUL3aZTw0tWGS\nNwdJObO/594bRLbWZthDxIA5xxBfm+HFeCDasmPkjD9roIaGnoYk6QiUToLU\nBBVN\r\n=+sx1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.c02642273.0","@material/base":"6.0.0-canary.c02642273.0","@material/theme":"6.0.0-canary.c02642273.0","@material/ripple":"6.0.0-canary.c02642273.0","@material/typography":"6.0.0-canary.c02642273.0","@material/feature-targeting":"6.0.0-canary.c02642273.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.c02642273.0_1586967468363_0.20358488333022673","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/form-field","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.8a299b568.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa8b23ebece89a68f35d1ed401ac8ef1501cce0f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.8a299b568.0.tgz","fileCount":34,"integrity":"sha512-sedyvAv3/buwFjSgko2fASTB2YPCo8cUtIpSKwDhEBeuA1mjwlnGePK9VEkjcBKJCgLkueyBoZ0Qj/LV1Gf0Vg==","signatures":[{"sig":"MEUCIGT49LvyY3eQFIZOjpdmg8DxpUcc+jxkA3Ma/pceZUpBAiEAr+lcVatPRKhxvPvmRKakE/3bRKtkM2UEGTVZ6yIVxuU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel44aCRA9TVsSAnZWagAA/pcP/3M5e/E45XgDLegK7Uqo\n/31cN8WtJ+Fd94hyVrYogVBYXdRGgIZw3yhcJk+AI2lxTbsnjGEFIAoswU1E\n5WvshofVCXvP0FZuVz9b+QvSy0QdY1q3bkb1TOoNembKxYfNhvXc/CFmculw\nsC+d32W0g6YDFFDHwzUvlix4DsDIYn5rmjHZbhvU/H0WlwPW5ZemfzSbXJXy\nnvN+5v09Ey1DReRc59mzzA+Ex+3uIuyt4oPEJ25AYHE9xC3BboazJMVkkNAB\nyNMgkBF2sP7EWGTN8COl01TZlGQMT9Mr84SiRTFOEbhH200hEdOrRrULCVvo\nG5p+gN0e3HMddE6zGAWo4mpZ/fRX1GENe3sAWGIlYBVO90PsYeA0ZRRrtQWh\n1j1blLcLcfGcYMptB398DAvtWK5uGedTDSojD/SmepF66aJcB1Pt1K9vdDUm\nY431O7WIxt+zULkOZt3NwFHY9nvNF2HMKiqlDumIiqHc++OXJ0Zw3JUB1H2/\n/tDMmgmHcrdKBpMj1W8lFZYxNqK9ZFpWVYOPyxcgULtKUMuJPwepYJEcf3i5\n2Kw8k5OrT+ufaTzOADsAFBdM0EmHPelRXEC2pfhXRdG/HOC+wVAfsoQ0K0iG\nsf8+bfs/V/drJ/zuHFBYZ1GJjXIPuW2saZiTqp5imut8gdJyr+v3JLnllyxi\n3nq+\r\n=ato2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.8a299b568.0","@material/base":"6.0.0-canary.8a299b568.0","@material/theme":"6.0.0-canary.8a299b568.0","@material/ripple":"6.0.0-canary.8a299b568.0","@material/typography":"6.0.0-canary.8a299b568.0","@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.8a299b568.0_1586990618480_0.2854593048338625","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/form-field","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.490fbdc09.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45d23a726bc5ac68e44120f78a4266aa84ec0884","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.490fbdc09.0.tgz","fileCount":34,"integrity":"sha512-n01aeN3xcdra8enLqlGJ6JPE/CWF8y4FNJ0bhIKJoN2RZ8y1ypEPMZGHYaPIV+nnDCmM0rN5U+ZaiXTKeFYILw==","signatures":[{"sig":"MEUCIDM+7AEcudzgXjDtL4+Hrj2XWnSXxDuSwes3OQXTHrU4AiEApnbpqvcCsFqyXtW4n50L0d/EWabbwUjDxHGk94TW520=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/RlCRA9TVsSAnZWagAA14QP/ipWcjEV1V1ySWdnX8ls\n6/E2Q//fm5dIXCt0KKC3xFO6n0Usfj7H+s6QKke7UyiTQUxPlrQdOzRV5L2A\nCRyEnu7JWhzaL9dnsVxQMC/9SrOVV2FDptyyXTeIiwB++zwDJydAnCn1w+sz\nJw8zGf6xzAZwagsX2O3lDln3tTC/hThckIrKTA7EqIACS/90tV57TFolIhat\nGR456lgn3jTlsxm04XeozB2HI0gIR3kOrY3Pa2FM2YoKs1wqo+YYYXg6t9eM\nkmB54Py71JQadcveiQfQdhG13S+ZDrIATBkmzXAHqam6XZ9B979MIsZ+DA39\n2NvlZOLddyf8K5aaOAXWfXBUfeX+rPhyjCcXbnp4Uigf1YJrIpi5urtqHPMF\ntdpuB0gRImAYVZScRBXMfhJYoKjeMEqK9HOv54/PsTpkwx2OPETHakyGaRjB\nU9dMC1SgSKPIozj8BX3ufrGBbfylV7hQaJ56kHfP4E6OuqqK2UfzwY1tGUHQ\nQTpsEiUA4wmAcBlmeGD1ptiF9jI33+1Up1PhyHiZJXuhWRakahVIJessL9i8\nOZDwfQKjpvr+6H3J+9lIPnuuoo7gcQfsGy9WCTbH4eWhp4z972kXdkmI/6WM\nna2SCW4LfbqmEQ7V6/Sn4dkCoEp/Fr5Z76cpCb7wz5rptD9sLRvHQ0NUJp3/\nBD+S\r\n=otv6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"20bba7dcc3290528bf225184ac976a3b486ccc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.490fbdc09.0","@material/base":"6.0.0-canary.490fbdc09.0","@material/theme":"6.0.0-canary.490fbdc09.0","@material/ripple":"6.0.0-canary.490fbdc09.0","@material/typography":"6.0.0-canary.490fbdc09.0","@material/feature-targeting":"6.0.0-canary.490fbdc09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.490fbdc09.0_1587016804829_0.9429201760121393","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/form-field","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.f838c6e55.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4546155dbc9da9db4e8973a47ede47c996be04e4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.f838c6e55.0.tgz","fileCount":34,"integrity":"sha512-QQdMyCEnXp1A17yoUpB8VU8KuBzq0jjyzv3MXzAc6xasZgnn73bxArBv0UscPn7Dy0spYNpy1SZuVXoys53ESA==","signatures":[{"sig":"MEQCIDo03VJEW36Z/DCIcOqlxk8aOeKAsdPAWLtBI72ZWnp/AiBDzLtwnRrMwOMvaQoMhgGcqz0+D33rHptqEO8YuhE4VQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGs6CRA9TVsSAnZWagAAwB8P/Rlmd7q3JD27BG37I5d9\n3QPNfSajahB4XkbCHdbsKhfaHzKP8jEc6bHD07pCZP/gp0p27/gd53Tl/lhU\nmo2aIeACTY4O1aYPEe3p8gLKd9p05szkqkvQx1rLkAco43+rNhma3HwuRLsj\nALzv/TEEiR38pUk3zWkxth7tF1miAe1L+1qIpRuixpk/DCRmEqctyDJnG3tq\n4+kayOmDihKrmptO0bc7ZrZMz9NtCn8KlKSyWZDQ/jRfrKnqY0/1LQ22A5Co\nB3RuqrdntvmtgW8Mu6PCj+o63itSbjatswRLJkr150tChVzAHFQOq4dlhEBH\nERhyjmMbqeZ3YxkS0pCaDcdWd+27Nt/VN/u9Qlao0XfPnRfWCM51r/D8mgrf\nXU6QAxglBgDxaW5CIrwmz6pjjT974qzacrONNuFbmAZTIFTBcauhRilVgfZ7\nnF8fNa2dNjITdSBhiVUYpkPxO+280dFz5rwZwUqNu+0Zv2+vJfXrhMUOmGEC\n1AYTaDHxvMvJ082HMciNw40nnVq+6H+i4e3TUrZygI8+nG3hnAZ7Q+fUUFa1\nxGK6xA1Kym02HdGzmET+FHsy64HamD434ElJrUHEVzXJQC6ccnrCOr29g8wT\nKccG0a72eY2EIg2TCjuStutZnnlVd57avgPm3w84XskmTYgZ5nbk92cmCGVO\nrJPr\r\n=Vt44\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4088837a2a2d0b4af544090557a8266202e13a8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.f838c6e55.0","@material/base":"6.0.0-canary.f838c6e55.0","@material/theme":"6.0.0-canary.f838c6e55.0","@material/ripple":"6.0.0-canary.f838c6e55.0","@material/typography":"6.0.0-canary.f838c6e55.0","@material/feature-targeting":"6.0.0-canary.f838c6e55.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.f838c6e55.0_1587047225578_0.285889236180362","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/form-field","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.ce6cb7024.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10148510481b99740e5ac94c3d0518c1e9406408","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.ce6cb7024.0.tgz","fileCount":34,"integrity":"sha512-6j//UJKelEmTOYltXDQHYY42ybBlfZuFFAAqrfrCiLq+sIIE7X9eQ3mrQWHmra5s5fgiFgImiC20uRSHSGbW2Q==","signatures":[{"sig":"MEQCIC0nvjjOHWSnE9u9DkZzV8mkAIF9n+MchFRKFtWWH9CtAiA+IDwW4uZtL8mQYOtKXn8gA9/lwJJ7xDh0Sx/FPtBbwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJOlCRA9TVsSAnZWagAAgc0P/2iL0Fd3VokO/iFoVIsc\ncB2PBuEuVxWg0z4B0/QQdvwip8dqdrfc0TfDZps/DulW9JWELZb/nSCK9Gka\nyNn6oikrNruNCaAxpq/KAdCwJAhs5qcVVx5P6hecz7kLN1xaGYlk/jRytyrY\nPW4LYr7lG5h+lHLm/e2QWDwRTJvDdXP4LixfRI6arLUBjuyip9eScLJAQn7W\nHWP1abgGH7wdlnkksarKU5m04JJ6EvbavQ+KD+FS+TlUCwgYCWsEjZKIRkFd\ntsgDUhRulQHMUTwpTsoWJ2LIiXeh4gAxP2oov/GirsVM/Fc4/Oczx7rIkT1P\nAI8v9WTqR2ZIQksxDoJ52jG8kirOpeK333tUFSiQ2MzMfJfmAQ7q/8liWt2V\nlVxVHFhcNEuidjv0nhwCh2ypQBC/98i9BEA8NhhrZwsyM9ko2veJBSdYElN6\nUxbpgbOjsFsHcPyo7UeWWdBcCP19jfhFykzASjOUAkGcs/498QaN7TupfJ18\nGOe91FoBemdMqPjTa3M/ef3LVhm7Fa+So+BZ9BsTxtuAn1u4AcfBLX+uWJp5\n+EeIaNY09ehuCltOqw5LN63u/pFCCLLW/a1IXFaO2TjGLD+PrCAYa7JZM9ik\n+ZkOKMmu7Y7tfUDYdCeX3bXmBkfE4DuetAHq1nkUNyfHOwVFCgmTJvj39V2c\nHMN9\r\n=EFlr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"50c11d42dccdf93592bf97e9211f34d95983996a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.ce6cb7024.0","@material/base":"6.0.0-canary.ce6cb7024.0","@material/theme":"6.0.0-canary.ce6cb7024.0","@material/ripple":"6.0.0-canary.ce6cb7024.0","@material/typography":"6.0.0-canary.ce6cb7024.0","@material/feature-targeting":"6.0.0-canary.ce6cb7024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.ce6cb7024.0_1587057572380_0.6802458101651749","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/form-field","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.0ab62a65b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"982271a729bf0b3865208f06edb37ac59653efa6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.0ab62a65b.0.tgz","fileCount":34,"integrity":"sha512-rKqL3vZHR5iWQ+hT61FLTYOJW0l6BTGRwoGyWG1gQ9VRIE1b5BdSt06OS3DuqYEB6htVKQKVB7VWwlWM301VAQ==","signatures":[{"sig":"MEYCIQDokd1Mbie74BhQYEiY1PKgsnmfoqJZtP/3Ll7fbo0TlwIhAKCtc9gEQ2XhC4H2wdjkjbL/0Ec4uUJQFhXzjHaFcTIX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKn6CRA9TVsSAnZWagAACSkP/2r10h0Azhq9KaT49jxE\nw5+1ehxxTB17kimh0yzGCE7MAcAGsa9EibKjKtgq3vttzQER8lfnRv1Ntt5q\n0iIJfpn/VK5TzGLRZIxsVJt8VomwHhWTWSiq56sLCSWEj6DTonJX+BFSo05P\nqeyRLL8bWfCWVmVljRygyt5EyaP30/ACkYWplGuPl4aPU6v6S147Tl+8rNTt\n3oDNuHTxntH1XCpL7ZmgH/qQEt6/KD3hGZaM9++I3z+zDJrwdeQgf/twYK7V\n/3J6Z+AkC/7fqH+xHxgiz5YkD9I50PR/boo0bO0/WUIDrFbNbruE06EemyW6\ngr5drx+xrDyilIHhKqsBd3ZOW7BjZ43kRYTXIYLx+cSP+1P2RWpknAOpI5Sf\nyS6ACKctLk83pyi3wUFF45AGyfeQ71Vpw+Sq13AttVebir90gRBt3lApyDpc\nCd5eBhjCWTS85aANvp0a8LuauaYTLRVh968Pk4hLM+BlZ35mcyZOcWmzqNER\n4bnZebbuZWeg+fc0C4RYYKGzIBW1EX/Gx47p6QegiZu1vQ1odvNOWGwY3eQE\nQJxuZlbA3/UvyqNIZMubOa+kb79P8yRZtVZLQdKa5jziAsjJMxxOn6g0G68O\nGq7fhbD3aDqNd/sD4xbymUJwdJom+cTFJvWoFwF5vhFm4Xczqgi6HmCcZIvT\nBTp+\r\n=0eMu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f8890ca1119e1fc3b197f172b8273c05b5fba35d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.0ab62a65b.0","@material/base":"6.0.0-canary.0ab62a65b.0","@material/theme":"6.0.0-canary.0ab62a65b.0","@material/ripple":"6.0.0-canary.0ab62a65b.0","@material/typography":"6.0.0-canary.0ab62a65b.0","@material/feature-targeting":"6.0.0-canary.0ab62a65b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.0ab62a65b.0_1587063289881_0.8830451700091515","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/form-field","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.ca61b656f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34ac27abe2572d136bc03f4dcf5d82c23bcfc5e9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.ca61b656f.0.tgz","fileCount":34,"integrity":"sha512-c6aEySxEg1acuLojefH3SN+xpsrCkAVs/PTGrgBS+AR+O7YEkW7NuWbFF2ZqV/Mkxbm39Lm6pZh5Ojew49WyLA==","signatures":[{"sig":"MEYCIQDTu5DmlhHt4p+NTu2dGPGbYbrSZmtIOucBMe7+1LoZKwIhAIn3EUUxk8+ZHt2tbv8zj/maWUME5zt4Pf1Cb30Djf5g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLlXCRA9TVsSAnZWagAAfPsP+gM43/sqLxrKnWRyaiiG\nCIdrakai2RyyToB/PBuqxlI3TNPUQQnYp54BXPTJtTD2M15xwwD+qHEih7TI\nqOS18hbHX4BYvS75g2zXFY5y6HpbObkzIMs/sQ0O5mo2kkzaQMyfm2ReXVLn\nj22ud3eDF83byi3iXOETm1Xdmzk+wGbJ3cKiV5TWSXR8dcFzsegfF09qPI2o\nqfC0yx5SvwA/Jq+YABUW0R0eeunQ3ZWAdwMs6HDgn/+4JU5mdA86OJn+EsfC\nEJS+2SyOTtWtBBd2+23719hBallLf8Ql/VRNUXsMtOmHlDdnRb/xhE3Q6pRH\nM/KOns632pEi3LR72eCkeFa+vzyF6DavvWNq5t8RYEm+zmBUNKi54hWVJXQ5\nQU0fuXAzIifX4bRRtPEaY12A5euNBZoCftcdB33lzEsoJ/9ERTyEKgLYlbSQ\nJh8isAzyE/cZ2/JnGt5sxbPTNrIt/n09tx2tRnSIvlitF6x0oOrj5CO+3UxN\nl6pmGUNnQNt1H7R+bDo575E19wz5hXo9xjxgGPhBJBz6bpAOMkR+DJ3PGPUP\nOQ4PxTg8k+xnUWZysDvQHs0RXikSmvrhdVoVDVbFovnNXwW7U3kijckmcua/\nEJXMV4UFML+Vi0mJkR2wjZ18OXoB4nNIwukA/6lCmGuJwLW+01N6/uBBUVg3\nK2UC\r\n=z80K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"967c93bd4843f43b3821bebc6113ab9c73533ac0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.ca61b656f.0","@material/base":"6.0.0-canary.ca61b656f.0","@material/theme":"6.0.0-canary.ca61b656f.0","@material/ripple":"6.0.0-canary.ca61b656f.0","@material/typography":"6.0.0-canary.ca61b656f.0","@material/feature-targeting":"6.0.0-canary.ca61b656f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.ca61b656f.0_1587067222994_0.6350183495327837","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/form-field","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.45a6615e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69f01fee7cb4363ddf95203cffdd558169559640","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.45a6615e3.0.tgz","fileCount":34,"integrity":"sha512-NQK0W7+UTnzP0lPAXeyZ6c7P/7ilq192dGchA3DH3Du7rmYgraG/aAjdw7+xmnC30/YYHFZhGTz2xEL/ksI27Q==","signatures":[{"sig":"MEQCIFzFa/EISdk24nunpCVDA28/AMerWNdWqvntiTF4NlBnAiAaepni2EZZWAIFIf2TwGxhgj35XkEF5lt4j5CUJkN0hg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMEMCRA9TVsSAnZWagAAL+AP/0Yw9keIp+mPAveTrLyK\nEcla62gFb/hrxHj0DMBaAwU0rDCtqjfuPJEgg4ebjej77GEu4k4h+8JV15/D\nDwXR3IGMLKeaNyv2tQwx2FfXrGWdOL8UemNZXDQLnJbUXXar/QPubj071NQW\nt5Qhn2XAuA6/38T/fOuLZHQfDcsK9+yDFRqd1Kvxq5yy3y+2JgytwtM/r6XJ\ndbXsLtkogV7wXwwoXdVrRU+6Eglxmi7dmYX3tUXH7kNoYjxdctIT5daeDyVj\n1UoZA6HabpHEv6lIdVErlxblQ8nu416x/l6Yk4IQEKhNtriAICq/oOIzst+P\nzvN4YkNrWO5Qqt9Oxq70U+xLWrKAoCh8zXUrK+WdI0y6TUOS+0pQn1olBTKk\nQu9Rvm1iv/LZv2mCdk3fW5NKIRQgdfooG80D69Sutq5oWMIRUvJ3M9K7Vjz/\nFhU+WBIOjNq79xbo8r+ESqLH3fha03EFUW32mbx7laorZ5J8J1X3O7P06BV8\ntRlEVFz4yzjcX9YbwNtEiV73OKD4JTRS1U277YGHwgjWs3HGXOfisAaWD8ep\nvMZyA1T+VXtEb9phKA5zat3of4unNFD0F4O+dqJf4qELVIuc+g1ZDSXvk5k+\n9G7iaVbMt1bAmOYBjIXAnVFwgZUGJKn1QygGVlPKhMu2tfVJzzmX1BX/eWTl\nVCGx\r\n=mGiq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0ad3ae693731b43b2c055b2fd649a42e03abd2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.45a6615e3.0","@material/base":"6.0.0-canary.45a6615e3.0","@material/theme":"6.0.0-canary.45a6615e3.0","@material/ripple":"6.0.0-canary.45a6615e3.0","@material/typography":"6.0.0-canary.45a6615e3.0","@material/feature-targeting":"6.0.0-canary.45a6615e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.45a6615e3.0_1587069195869_0.8108439081603447","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/form-field","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.4b04cdb0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49ed02a3fbd8f2a43db1dc63009ff466fc8a1d64","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":34,"integrity":"sha512-shw5qBOTt4gh+8oKpf5Gwa66O9pm64CfddyJUxRWpNwFxpp34Zi4zz7Q3beUoqGI0bLXJSVp1tOz9DPnGlNkCA==","signatures":[{"sig":"MEUCIQD3mqs7OXHayirANQs2VKVBPhoJKWfWdS28WNC30o6jkwIgLHwkBPgpxnFqGaJ0gyz5WbNWiEojaGB6Sd5e1DCu9oI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemepNCRA9TVsSAnZWagAAhJEP/2P0/8xc5NoLiMviykgv\n+3zMeJokD+sF0bITCnSbEpUJC5x3GSTOwPt7CKSMM/ZBANFqQgDsVNMBxtKu\n+C24+H9wdgEVc7uZQLTl7uamceAHNcntz6h20za/OQb5Anvf3/t5fVedvq71\ntdKCsVE0WlC+BYRlNL2mJ90mNEMoEScUEKApc+lAXi/JkNipQnSllOyipgg6\nskovN4krM9P4FCQYUVHRJ5JuCzbmJ+Y908UWCmUMOriTU+FyYNkpM9FtkZHM\nBOKlY7eyNIJKP+cd7Jr2GLOleX/2FN+ohvK7IMYfc9KryrFbFLTeuuMqTdv/\nFdNisPNwQXrjeApITaIh9oCmQl5mUCYHoRlfwwXzgkIlQW2G3hu13XSsupkt\nAAOl1NnfMVM+QQ55oKI6cvxMiGK+Y3C+h/DnTQQXJvKRrZ2MrKrnX7bI9PJ4\nlK0OFHvSpe0pNPFPONwLLoiX8mUKT/R2up/xGN8atDlokRhmIsUKkS42Qwq4\nW6s6uHU8rH1nF0AXuiLqp0cCpjAguQrsjFlf/OfGiJTDpmJ1hAd3HTmEQcq0\nHzYH0C6AJcYmQPVq/6FEZQkvKisAtNtg/ugDhvScx9qJHjcz0xEAiUCcv3P1\n7ze3yDXpBr+Ro4YA5Lkdmf7DbSbeub8z6MV6zW5gJ53WIBzOu+OLNsALOZWi\nUdEB\r\n=rAa4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bedcd48d2eb94c37211fc93847852f5261655559","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.4b04cdb0f.0","@material/base":"6.0.0-canary.4b04cdb0f.0","@material/theme":"6.0.0-canary.4b04cdb0f.0","@material/ripple":"6.0.0-canary.4b04cdb0f.0","@material/typography":"6.0.0-canary.4b04cdb0f.0","@material/feature-targeting":"6.0.0-canary.4b04cdb0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.4b04cdb0f.0_1587145292907_0.0025299100517088835","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/form-field","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.b273afa93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a257834cc70d6468e3599908f343ee3ff3638f00","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.b273afa93.0.tgz","fileCount":34,"integrity":"sha512-mSLG4/AfT5osytSse81k7eooK3VNvQ3mvS1bjnP5Y/mqkfIfb3+EWegIu+bJ0JbBymYw1wUqmx7iIvu3buARcQ==","signatures":[{"sig":"MEUCIQCtAeBCjwXKImZWeKJUMszWHLO9EGT41COcGQlGxSB7+gIgHjX0KB6JvLEF33sr/i/iJcGrEPsz0fcioxIJvcChvV0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjW1CRA9TVsSAnZWagAADdYP/1aCB9+L94w/qqfg3ZgJ\n/GdfPt9ejKLCQrAUKVocsK4o4BKlRjcC+hVuB41pRFNHICuHvUmMvZI0Tr7c\n/uK0tL4bJ32T2JRcZzp5LcPhjjscMl9PxEiS5HazlJ2U1yDsI1HnVHBNsXLH\nhgKT6lciT7KuLiBQ4fHVkvpxT+dXWAhqEsZD9fY6p7+Jo268POkmZm/DckCj\nnoh+QLay7TcJHMSzIhajFimb+BueYPUVVTeSgFP5wBAyZ/Dn2DbLYvB6mJiY\ncEQcysmqlLeBsVGUIH35mL+SuIifFnOjI+mf/cCl46TWzpmfaWU3rgYE/MS+\ngtdx+G7t6NyQiyRirEIdRHnw3Mnzsrn1dnxz8foCLU3hvktWQTCaDYKpRISu\n/e8dkO1DciNv/4yHEussQT32eJo/S49Gg6GXsTvraqNJrCgHTYDS+3gZrzLp\nYwo/S47EKCGPtltdMnyqjAnEfI9sMKaJkWKwapjBza1HXp5amds1Av37d12Q\nJTRppowEQYqEPC+R7auQoXTWtPl4LMgsFoxxit28s2H+2U/usi/tSlzez+8U\n7Nf+TgaCxcXZTy8UM2Zwlkufbov5oMiRFYpuFWzC1d6CNBT2LPM7tLHOfc04\nojtIRIzrd2O3Ridkmvwdyo3YZ8BpWCvDNYF7G7ZIdYhOptlWa8jvndmQxz92\n6eKP\r\n=b0xS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"446d7bb0e65fdc3259b7b9025c6c058731ff02c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.b273afa93.0","@material/base":"6.0.0-canary.b273afa93.0","@material/theme":"6.0.0-canary.b273afa93.0","@material/ripple":"6.0.0-canary.b273afa93.0","@material/typography":"6.0.0-canary.b273afa93.0","@material/feature-targeting":"6.0.0-canary.b273afa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.b273afa93.0_1587164596951_0.10560306445495549","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/form-field","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.b70bc601e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f363083520ed552efa60f663ad9d7e1decf7022f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.b70bc601e.0.tgz","fileCount":34,"integrity":"sha512-Zt+nTM8kYWrsYYmhQu23rxP6tu6gcXOWVLBYvXGuGoC5WYFputZLv4n4uCwZnk5UPNc2X91aFzGghe4g4XpYuQ==","signatures":[{"sig":"MEQCIEGABt69EzeVqkXyxvakYdc3UqiycA0SS0DKlLBrCfE3AiAqIM12EXBkUBG2TgSTRH06PpYzSucL7j1Wfe72Ne1mTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":162539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjoPCRA9TVsSAnZWagAANsoQAJLQ6FHN28z0S/k36ioW\nPDe7EfkDdjxTsGAsjrMbxliK9rIyEV93CLQiyNJEvaNrW0RiS1vE/mMcJ+5X\n4Y7owEDXNdnDolX6S97qq9dwE0jFSFxkaX2nthj5rAlCPBDHxm+qQJk4mcp5\npQy3VbGQamYSBxguVoBmQocP5ZG5SKRh7WqnhPe1qc/bPVxe4xpcoHktTIEL\nHthRlwPCVqpFpxJ3OFmIpsD86F7Yz2lp9fs/06Bvzpxu0UAMTkhccNivmxUG\n5jWSmdBf6XwBWXFzDq97g8pgygpHv/94eKI4UCwQ9pP+BcKQrUkc4FzjgCt9\nZdyt2KOI4IQwHGgN5dyTYPpFp434yojAyl4JnNW7A7ywoG9gqQ36lzAByT0T\nteHxJFgXF2EyTlojb2pwt5yWMV18nFJ2SVL3Ip2RSi8tKMzKx2oAqmwt2Pni\n8hSxID7A8ekODzadpjWBR6Y5NN1gcDcEs8Hjdm71WjajWb4J8JhalR9zn6Cz\nGzGFhNRQaU7zMKucaXcZzWefSdkNuJ5PGNaGG06nSsWXyrFCUFOik1TKP0ed\nOgOkz9jv0f/B8V8yyZPndGzec7OrEJzGOxHLmyNPE/K3qux+1kNHKfC/fPUN\nmInbq/cq5uXvQduM2qUs/Gxcu7QOkz0r9wcER+pLXeJVt+sdOV96sucKKJ/h\nh5rU\r\n=4mlN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"90c3468e59a65aab424bb59d4e91a4d522fca3d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.b70bc601e.0","@material/base":"6.0.0-canary.b70bc601e.0","@material/theme":"6.0.0-canary.b70bc601e.0","@material/ripple":"6.0.0-canary.b70bc601e.0","@material/typography":"6.0.0-canary.b70bc601e.0","@material/feature-targeting":"6.0.0-canary.b70bc601e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.b70bc601e.0_1587165710904_0.9382406606421292","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/form-field","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.c4b4bba96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8e74af80d6a5743e1e3436f59dfa44bac64dabe","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.c4b4bba96.0.tgz","fileCount":34,"integrity":"sha512-q5KZHuYoAMV5j10ND9cI+qF2E+ii70ekOQQ+v3ySAgmC4aU4fkhbrRGHdpvE/f+FQZLH40wDsWYrrNzBjHStQg==","signatures":[{"sig":"MEQCIAnjCSGb50b0njSvoCKEm8WyJI469XIRIV4hvZGhUyrvAiAQhHdoPA4AR7Z9eqKisNbO80v26SU3zN1YRXW/nkPjFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkdMCRA9TVsSAnZWagAACzgP/22DNQJwhRpJOp4eLYZK\ngVK212kNOwX+4YTX7eCAqlz5SlxdZgbaX/WLlYFid5hXMJgCqIvAcYNB16aa\nwRnRbLlvv3Pbp8+bc48yTn9/hLAQ/FdpLkr+J7CTrTXyIW+59hY+Co3SYVZz\nNXEYvSZ/79r2kxLo6jsVMPgrA+LGBgfjSBXZR5XtfiSwPnFfyVnOJFndISwG\nteMlzyxQgRpRrYJWBIz7fVol0Ty9sBj35kOXLI+IzsxWHdQ5Jft6FblmFB7n\ng8pFoPqEmcwvoy/SMYH+cxDAsF374NaDBOvcvjrozDe+PFto8RzlrsFrh4c6\np9Z+KgDXotJqC4MsgBsPTFlEaQaH/Q2DtJODLWSeCWSRnvzEn/HhS3DcDcmI\nM+cKUnt5yy+NjZLF+cbgL82E0whNGZuLbXJeZlOy5dhM0XyWToSOiHGJpKnw\nJll+lyL4eiuBNt6NGNFgHeEQNozn4s0a94dKVApuxPQiWummBiEtMUL0lLsr\nevo8ICrhyn4yZupf4expIxrqAdHWM7T4O1yBiNG2sOyPcUVip/OX3LLvYiTT\n9dmrvMWyrM11FnAuZXEryw0lOShhk6W8oI8C3W4p9M5HGyVcVE6AZtUcXbJN\nARx1mW06pCo5DWl/EWxKFn1gry6G05E8MK3SO1itZL3hi3v8JkcM4skYYBv+\nWPrn\r\n=0bNS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ee02a718dbd2e86f9ea056b6199c1664c5abe70c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.c4b4bba96.0","@material/base":"6.0.0-canary.c4b4bba96.0","@material/theme":"6.0.0-canary.c4b4bba96.0","@material/ripple":"6.0.0-canary.c4b4bba96.0","@material/typography":"6.0.0-canary.c4b4bba96.0","@material/feature-targeting":"6.0.0-canary.c4b4bba96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.c4b4bba96.0_1587169099183_0.3086842903924376","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/form-field","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.6c1ebc721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c169be735b43220bf00359cd12a0ba5ce917edb4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.6c1ebc721.0.tgz","fileCount":34,"integrity":"sha512-FByv6QawzkC3bGWFArQce7JCxciigGKxB16NRvImfC97YebXUvDL3hg++if5eJlNSGdNWePObIVxsC9aLdomKw==","signatures":[{"sig":"MEUCIBT/uf19rQLS1mk/lFJDTtC5rREZtIzIUmUfFfCmFek/AiEA9eH64uuHnZvzyptbfWn1HokYLSWzp0lUB3aLkh4nn4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf72CRA9TVsSAnZWagAAPXcP/27t4Ko71DcrHS2jxwhL\nejSTDrtgYvSy3glE8X6KU9Djvvh2x34QnOx5CaeQpfg+FgE/cPYzGXZYP8Zo\nFDT0SUpquztRUahBWtzn5XWJhki9Uzi6ukeus8qsTAvp+Eher+1+tLfUP4tX\nbiueq6MyzJWY8agtj5nloLO9nqcBkyDgT0F5e2Kf+ZVI5a44o5bJiI1fAqGy\nuhGmN7SQe4Yonk+tHFbPctk/1CFYsMqzk8SOjCWn6yxM5yFo7JY9EtPi5gzc\nd0s/iGziFiV5gHKthVTIfdLKxH237DXEg2tfEOfPwmAXVjLWHwONvJwuqELj\nudjXhQhWKdy1OYdRsUuSgvOynLEn1/eQwaY72Fy7JmNmq8wi4Yvi3RH2+ouV\nbLhSwztmak9P5HbqhFDgs2TPOtGzNRkfR6LC5wRPZbSu7ysmJCCPxIh5NLQR\nct3Yf3dq/d1jZf1TSNJEzr5iL0r5WtKHjuyIR3jCkf/1dmM4S10H25mDmoqC\nrElrkJ26XPc47zXhrAKgnNmsuxCQPTM8w0BkG6QHJcTWuSR0zObLJJ5lx/9Z\nX+Np89DgHFoeREyORfZG3JCtqTE7GquU+nnRTBNLpN9ZW2Do+c0N1ZHshJrT\nqt9QioaCGyBMeCW2A3OWlpqQM9ZVzmXAHcst/PvqmG9z2BS0BsOl5VH1DGWG\nYtgk\r\n=mrVK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b1a71b1e525edb460d6fa48e392b09267db9d2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.6c1ebc721.0","@material/base":"6.0.0-canary.6c1ebc721.0","@material/theme":"6.0.0-canary.6c1ebc721.0","@material/ripple":"6.0.0-canary.6c1ebc721.0","@material/typography":"6.0.0-canary.6c1ebc721.0","@material/feature-targeting":"6.0.0-canary.6c1ebc721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.6c1ebc721.0_1587412725900_0.19334618883589672","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/form-field","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.9cff4318f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6656665e7b5185664fab6b0d8e36f3f00a104b9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.9cff4318f.0.tgz","fileCount":34,"integrity":"sha512-cq87PUPwWiy+SE91AeCm8pKuxJNx3pFLPP9PVZAbpZEadpLgJhY8AGfWH4RVQZyQfsNDSNhJrEgOW4f59jNULg==","signatures":[{"sig":"MEQCICW/HVCtDpTzFn1bVg7CGTqKelwm4tMp2W/c8zWJQ+muAiBLOQ+u3Md7uSzEQNgqec0iqQOgmA0NHj2U001dHJxbHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengx7CRA9TVsSAnZWagAALsMP/jXaw0F5+5XR7G8Scnqh\n+hmnQR8oN3pGCh4Kxc85vb0aKKQbzh1EUE4a8adrdQPVErpAlbH1E6bSxvrC\nZQNgkFDFl9gTNpZvnMKspnFQQC9xwcDIzOIa3ug9L0EZFCXtfO5IuF5OY0wF\n6DmJQ3MjhKfF2TxxV1SKg7FShWSuL6O+l2/NcoLt5QjWE4C+8KjTH2fbZvv3\n7RZNpt0QblNoN5dpcKYVgbXy/ix/5/s9/9fmHtCPIKb3d66bnLhIkQ4xdqiW\n+Lme9aqZ+UanxszqCiXVlwgMbpOVqQUvocUHHgFvlcmAabbpGQ5SE10HkzWA\n3RbdMeewyUkEZvjYStPrmaCbBHDvi1rnVc+e2V98lwoLttiZyTzQ2ott1Blr\nMf7bcThJufO2wUIZClV43Ro4z2iBFRrfbD/awaeQexf8Zp8/uDAWa9NUYlxJ\n5dfFFhZ/cmyHTct75ge48JFzCcmMwCQMtzqho/kY8yemOGcJx2kcsbSBX4Gp\nkKQZJsOjibzhfewr4VBpoLaCYIUmnqpgRmrkU/X8gLtrozASIatxQFAhQ3P8\nqJMpv6LXJhJ1LmCCCxX8mMXudrZQt/8i78VZDzs7S/TuyoILG9Oel4CHsQq+\notafpls1fg5mXzdZIwSGgSvloApMQbMFhRbeDimb6+rY0NkKcywf7m2iQj8v\ntFkH\r\n=h/QC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0ff1f177754c259b5b0021494616e96f7b6e0d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.9cff4318f.0","@material/base":"6.0.0-canary.9cff4318f.0","@material/theme":"6.0.0-canary.9cff4318f.0","@material/ripple":"6.0.0-canary.9cff4318f.0","@material/typography":"6.0.0-canary.9cff4318f.0","@material/feature-targeting":"6.0.0-canary.9cff4318f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.9cff4318f.0_1587416186511_0.13174301416580336","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/form-field","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.7b4482402.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"659a8d55e831a15d45ed5a900ac83a6a3e1a6ba2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.7b4482402.0.tgz","fileCount":34,"integrity":"sha512-Q+uvS1gNCSRkyR5t4xrnJxVaCmFm4/fDnwHcg7bfYnYiaoQIA+tv9V1hrVvCoHAJ4CZeXc/yKay8YdhqJH5t+Q==","signatures":[{"sig":"MEQCICT8IJd/5y/Z8oYVAAxVsoLr0Zn3YUT+/leTIkwoG5V+AiAZwdkHLbKKtde3Rq8kpmhYWIpQ65lTM0TocuZVlZjGjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniA6CRA9TVsSAnZWagAAHagP/jD2oU1UnOD3o+HRaOF6\nTierXVO+NvkRHg8q8WcypJY12Bq+RqmAnxXSjiXpfYl1cnxAVqx626x3Ch3Q\nLPUtJZpNhq+FbcWkhwW9V+ZUoPoYBs9A09tyQqljn/LuUjtwhSuTyg2OrT5s\nDBc2WaGTe/uOibmxguHlZ/kSP1aILyOrnMEsDulVUF4WTr2HRy6JBVORoMVL\nZ231YdP/1Vob03qfu+Iup/ZArlDJyA6TnZNXBSzwhQqL8Fza9/CXTrdQrgC9\nEixMHQg3H5nQ+hankjDGOqBWSt6aiuPix6koLoNWEs17/hDYOXSPvWDqqJ/4\njOHa9AM8Pig1Tzz0eL+B1+sd07dFD0huPDFN0ccHpCK+NW1BDKm0aG3Y1Tbf\nS++l9lJVc3VRTLRJQc1fdkRY5G3ofyJpSJoflbd6VttPP+MKhUyLqAAo9HCz\nemsXD5Bx6wt4MiIhk54ZVXxSCdr/HXjzxZW9qzDvIVeCaPywFSHKC+qznRbT\nhnjdDKkP3GBXVIfH4UKwTFI8P5aAmRkLUbGvJ5CgNyiQn27A0Dz7T+W+uUtu\nMVY9DlnygR7tm4y1ILBdKoA1h/2K+QHyGdvlfeS7ObbPUHb1sjxu2QJ7T2bZ\nZOk/vwc3RxLbLGtM4fVajPqIsUMzQkcp0gZvliX4yU8XSWCP9diY9uoOnRiy\n95df\r\n=OLwm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c25f7586d29e2c5a6d3c289197d47b826d499cdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.7b4482402.0","@material/base":"6.0.0-canary.7b4482402.0","@material/theme":"6.0.0-canary.7b4482402.0","@material/ripple":"6.0.0-canary.7b4482402.0","@material/typography":"6.0.0-canary.7b4482402.0","@material/feature-targeting":"6.0.0-canary.7b4482402.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.7b4482402.0_1587421241979_0.07339311130715687","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/form-field","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.deda86d8c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18cfd655be72f4450df993261d50e6d559890310","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.deda86d8c.0.tgz","fileCount":34,"integrity":"sha512-230TD6RRt7zL7gY5Lm6RsIInxJdsZAabBV4woksL9QLJULV9Vqmuc5i3ZsftGXyfTT2AN46lWb4UgSL/kzIvyQ==","signatures":[{"sig":"MEUCIFObyWKLJysIzjmni2e+5HvYWpeH582cE+2lMGIGT4nfAiEAkfjSHXNMwniCC1sUqb1nvel6+LvEV8tRxZ+5eeiwNyw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkkkCRA9TVsSAnZWagAA7O4QAIYSTs21hy5vL6IVonJ6\ncH1v2penVm0PX7CANC/kjtF6DdUCvm7WqP0IC9S0McqrJWYAnNzdm5sdwTMa\nFk84wutO+asuib+1lq8x9Izc3az/bm+bmpik9ep5guBTLJjPZlv4FTpZvzUc\nM2+Puqqnw4SWqtjhlO4bAxAjR7kKgRtybJvZ4CroAodJlFGVBne57Mt732pY\nRsQndCJAYYNgu8IdG0TFBVUgYv4+ovuPlgKkPpVG8oUzd7QBXqkFAkaxOMjM\nLXsNHgao615klSvCB3SdFTc7VipUjaWwUDbTpG3GwdFzWkpHvPA1eKi/vqqK\ncpqqFlXZVy+slQIq22AZsw9naJuyYUetVx1zPelPMqHHT3x0p/gdC6Q6NUER\n8EUKSo9fNmodQ+OD0fWcAZEdabQmGHb0hc/pBS56mhX3SzEMVWY+SZZyPvPx\nZKWiAcafzGrShTmg4Qsaij8E+WtGxjBfRNISxYYsWld5DMmFDz/soa99vUlI\nWiZp5I0LFDykSIRFLrEwR94MwToU6oi4AiYXy7Se5A95OzQYZorxhttTEi0F\ndeWfj+yG23IwfUQ9LHv3fZj37LTi6G7DPUs3nSrIyJn/PV445Yl3TfHwQbGP\nAGWVj7tseBeOVzXYoMYpF4lCkbdkGPxQXAWT9nNZT3poRzOIgp1dG7t6Z5NZ\nyqm8\r\n=PEaq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7bea6ac56136246274e77c281cf8c66e2ef3e6ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.deda86d8c.0","@material/base":"6.0.0-canary.deda86d8c.0","@material/theme":"6.0.0-canary.deda86d8c.0","@material/ripple":"6.0.0-canary.deda86d8c.0","@material/typography":"6.0.0-canary.deda86d8c.0","@material/feature-targeting":"6.0.0-canary.deda86d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.deda86d8c.0_1587431716222_0.7160279433502748","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/form-field","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.d10412cb2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce9a260b8efeb371ce872d1a116768ad53991773","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.d10412cb2.0.tgz","fileCount":34,"integrity":"sha512-fCNy3lZ2kpHCaFo4M5wBQKBBwz0stAom6LHTvozJ3dVNGc3bB1NhapnEPElvcKUwyY1vABtfm4jXpC/4W/LQfg==","signatures":[{"sig":"MEUCIQDIKH5xJSA6Jm1BJrUfPp4hbwBrfdjzcHdEdEdWT9/ffAIgOWvEyV38MDW7zTehEIIE079wd+8U3LYzAb/PxXJuSNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzkJCRA9TVsSAnZWagAASXwP/1hJUsfFQ8ywfKCH1+cf\ndXTiOOydsJnZZBNKhVC/se6ZKNfu+lT6Z4NjlJmaQDoPHb8K/oj/SCUPtxFK\njCNDxdXYNECphlyzIRo6g83z+TFqg10ziXG3WMR7IdND78g5IDDYLW1oVI/n\nabCtDhMVtzdtNyvW6KrBoNWimbbN4ZeWlW19l85wBklD5S1MMTiv4aKRU0ss\njkC4k4Ft3aSmoeJdnnIix5uSCBhcJ6FXcHdma3HPIDOd+Rte+8YjVGdNq0cr\n8Hcm+bLC36fPnDls+wZE+XSjhWzTcp1tUvaMnEzKWZJQQ90i1R7jBzi8PztS\n2yeNI7BhyR13kUtZ7o3j9yaCMiydi3iFsiPJkXCZlI/jtvOdgBeL0uUCLNh9\nHm/pr8ZqVXKCmB/Ra62Dovdg53IZILCijyn8ZcpboA4xFVY94p44J9stLVN6\nJvv2E/F6fkWsUe+Snk1cqxAwNz06CoPEW/zJNsZtvOfeFFIJMq+DN7WR7pGD\nb4NULKZrxOf/ybnKi+Q2+N/TE6rk0QGbApVKtTvJW61vlUG7WHgbKV20Q4pw\nr2QR5s0fCbn3cCY6DnvhKtnH5vkhTIK6bPMFS7CEk8kenzEEoPUMOTbmr/D/\nJjjZGh3lrWQQe/3wcnNR+eO6u9RAXuVqxw2d7JvaAUrWK1h8KmN/sgLfxIgt\nPHZk\r\n=comY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a2946b5762e597bce2d8e4e72f321bf4934e4543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.d10412cb2.0","@material/base":"6.0.0-canary.d10412cb2.0","@material/theme":"6.0.0-canary.d10412cb2.0","@material/ripple":"6.0.0-canary.d10412cb2.0","@material/typography":"6.0.0-canary.d10412cb2.0","@material/feature-targeting":"6.0.0-canary.d10412cb2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.d10412cb2.0_1587493129318_0.9480034274295175","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/form-field","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.c141801d5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"159599eedc422c741101117f4dd2c0d144b796c6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.c141801d5.0.tgz","fileCount":34,"integrity":"sha512-ObQ1OUlJezaNBm7ux2SVWvGlu8HcObMIp5GeGR0NWrkvC/by7+AhNsEGqCHVjSn0KMWdMOtF2m4vS3D/DgerKg==","signatures":[{"sig":"MEYCIQC9MRAZ7Snuw8qck+c9kbw6pOAjweZQ62kas+YzpFAPNQIhAOOe2ReM9ribfpZKDBLYLO1zEC51XBGQC0BPnQsy45c6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0ydCRA9TVsSAnZWagAAU/4P/1PbPhKLdMinqftvyjof\nYzka6iUeFOcXfHqqs7isNEK3mFnAdLtzjSljZH+Qe96f9UHm6trFA+cbyzgu\n6VTt80FRo/GZLKMhPQWRmWLUDUp+lEUjizeyUDZ4jZ9iy8H6ZkA7EtAPZA53\n5hD8fVhmsE1z/YIkIESnD6wfDfmSpyQYvZ2OHCoNUyT5XYIAWb5tRTPBxHQ/\n43npi7ZjEp+PZfJaa/CdGU2s+dU/9qJWm5IpPPsVdkMWvY51muVntx+e0Dh3\niVCL8G+8pcUiBFxnJGc1ZOE+BU1d7aniC1idDDdkHs246pR9Pp6Zb8P2l/OK\nluKfDF0tsPi3D0UspeVLMb5X/rAtwOFZA0icKgWV46phnXd7Ua+SXUa8Am6x\nqyna3SHHC6rOf8/keI1ZlebRJW79h/Q8ZpqFrVgBskxDekJ3OQSuBUsgjsay\nqv6fh+UaQxFngSIFqUQlKx4MU+cjQfDXH6IhpLoNXBYUYY3AF86thScb3OQx\nQPu+tjdEAnOcfr/ej4T/VwNHQYHxA5OasckRiKapMwGoQt1DnQmxyjf01xdo\noK3zL3tjGulR0JMVIYDEPvcbLg3Kc4YAoJN9kw5+dtJqrkKMjy43GSSmGycX\nl0fa35/B6jjeVgbFzswvRK1MV/SCXgMLqDeGpWrbFpvwne3Ys92j4C5fPtc8\nQE3j\r\n=M004\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d026173e9bf7440b69f1e3e7e4c1bd60dc5ce6b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.c141801d5.0","@material/base":"6.0.0-canary.c141801d5.0","@material/theme":"6.0.0-canary.c141801d5.0","@material/ripple":"6.0.0-canary.c141801d5.0","@material/typography":"6.0.0-canary.c141801d5.0","@material/feature-targeting":"6.0.0-canary.c141801d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.c141801d5.0_1587498141448_0.36787985452896477","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/form-field","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0-canary.28d10a96e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b454910190c4745d912e70470809f642a3e7637","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0-canary.28d10a96e.0.tgz","fileCount":34,"integrity":"sha512-dDGOdtkfDkymywItc11QvkZJPe3QD4GpyYgvFXPZKV8eiPoF0pS/Is6vjqH6+0WrXOQPlzQlR6I5jd/BrJ0csw==","signatures":[{"sig":"MEUCIQCVtVHmHS2+1ljxfntWcS+wu0B1X6OFWdMTY9cJCHAkegIgfX6rpBBYeDzbqkmMzQnHk43Jmkb/vV0VnqIGEVWD4SM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMAtCRA9TVsSAnZWagAAFREP/0uOD9D85/7BDa4kuyqy\nJ/H5vlq7NBp+IWrnmhHz7GSRndzpdS0FUONhpMHUCM5TXgLFHlBq8eqzEu0Q\n1xHvsQTaVYBLmmQINYWk4U4Q8KuNqyr0aaeK5KmPN6x89wTV3C6KEAdZZps7\nCRgaPdMWqykpHwo6rnBfDBE5bG4UC/W5oWJEiPb6tLLieYJNZAR0QRshLz/Q\npglzBBkqk7tFfBcaysehuVpIpF7C/cI28esUgsrpOxZj+eOyu/8Q2Hmwrddw\nvbMMfV19e9qGh1TRNrnbAEjyquBsQwAqzav3LsbrLM1u1V+hCKEptnOcQDMF\nOmBrVJAMlSfTCG/14neNde0/Yu0/QFWYn7/Aj0/h7SGk7dLNmUl7z/AZu0/i\nfFrsJhhN1N1dZ9Z1ryj/XFQw8S7HYbjnv5z269kgUAUeGgcC6tAfj6VgkH5w\nlUo39BXIz/clzxrsX5YNztpffl0oAxZfkvQNASRHlWF0inwv64s4QOgM86Xe\nNtbEE43vnxpfOIpiM1NEvfC++n9wmRyf/CFKfqJEWzT7kmvgb7dVXgD/Xs8h\nXie8rUQdXcQ4YxfayskN+0rwjQqDYqkHu/Y9Mt0+RPMFLMLTpDC9El5bpFcC\nZdjlWtLksO7VFXPA0p7uoZN/RSNKXslMwTd/vBtu/cP8ZdkSU3LBhCkRTb8e\n3CyM\r\n=FMnx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"20feb77e4dc8d7c73f3549e0dfea4b381106b061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"6.0.0-canary.28d10a96e.0","@material/base":"6.0.0-canary.28d10a96e.0","@material/theme":"6.0.0-canary.28d10a96e.0","@material/ripple":"6.0.0-canary.28d10a96e.0","@material/typography":"6.0.0-canary.28d10a96e.0","@material/feature-targeting":"6.0.0-canary.28d10a96e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0-canary.28d10a96e.0_1587593261084_0.5520617771925211","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/form-field","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.8540808be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdfb44b16750c2ed505af56b76df2a2e813016cb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.8540808be.0.tgz","fileCount":34,"integrity":"sha512-7FjsF6bMiRxKXpeHMQ9vEns1no0LibkOC86Ct6hnumjxtIpSJ5bhKP8Pw+PZbiK9L7zNg8cTtDkjiRt0F3gA9g==","signatures":[{"sig":"MEUCIGwh9E6nCTD4Za+ElEbz2VPqfz09kLYOJO1bEuFLCpDlAiEA31WRDBUEEll/9YZ1+yiWUekp+nr1zBHXcKnYb1Zvkmo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/BCRA9TVsSAnZWagAASfAP/3aCpKo7zMFT8NN6FI5S\n0lOHZdACP8wnHTp8A46e6zVNyFUof3+rTdJ6FQZLAVG4nx4cg0+Br0MOH0vn\ndrnoPnhQc9MFf3cIm/O8n1rF+uWOl7Uumqml8Si4q0vkxEAlxD9Q+KfnbmJ6\nwXK0eO8CTeA+khAn5VYU0o4ljKrhUeZyJjfbr9nOHnWjt1jlqZnlPi7APlgO\niFdMxdi/xqae0815JH5UxKpWJbh2xYCwkywou3tPV6eu63/XYCPEov4aHupn\n1BEbevaI/SYli8uj2D+J5n7d6ojwZz1GlnWWtP+Z41URw9ry/Jx0CFkPIHmy\nmlH0AgqA1RRwUzZga7vTxCcpH1TnqQ9niWmHFX1UZ503NViVI53aYzWwbVEY\nv69PrxEJG74/1usqVHR3ZDmGOaU9GnF2a+KHyNiHB8kdqUxmXY+z0u8LiM8o\niDWsb0cu7Yh1Le+fCFkIjMNImg2LexE2f7yQ8nKalXHJGHRR9DnusVqdOUF8\nam9nJodJIP0FAOrVSJRWYZtJFvCWUdblprbf9e6ZVKOoQCyN3pIygd/C2+Ka\ntjDHBGTYeGZvW+dcHictFfz1EEQ2n6d13XkyqwNXTmCcWX0GlZJSwEswkmJo\n2DvRFul3GEns76/NOrCVXf5byJSCq08xGXz+ChVfwaNFqeSqYx7YC5I4Tynd\n3jcD\r\n=IYka\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a99320a8e5b4b718dbbcaeee1ec4fc8feb72b592","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8540808be.0","@material/base":"7.0.0-canary.8540808be.0","@material/theme":"7.0.0-canary.8540808be.0","@material/ripple":"7.0.0-canary.8540808be.0","@material/typography":"7.0.0-canary.8540808be.0","@material/feature-targeting":"7.0.0-canary.8540808be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.8540808be.0_1587662784643_0.36607902703738393","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/form-field","version":"6.0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@6.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a94687cf8e2b014c6a131e704bbd73a201aa058b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-6.0.0.tgz","fileCount":33,"integrity":"sha512-i8AFoZt3OATKfY0ACqJqqYnNvJBahTjj/j6uYkFp6emUkR+Xfg5mScK1BAZRdP+IJT5nAdFex4C1sSRTssGZ5Q==","signatures":[{"sig":"MEQCIBjJgQ1wy7Ct6P5Mx8vQFlAQg1BwsNuOe0u/FHVTGzwuAiAjiNadRcQASt9I3Pds2pUmSwFDc3fExkYJsytzBO/kCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/lCRA9TVsSAnZWagAADnQQAIk8cRjx/oUfcuq9hA2q\nDOjIZhhN/iijWL2VdE75IsEslxRJZApO51dGQCZZoLl+D7RAl/h/V1ng4qFd\nYP9ItfAGyGl4qCt4vdSZXw6NsxvdCrR+/WFbGyxi+twKA8xwNcuI+6TLcQxJ\nerBbv17a//L5m23//LhiR6A+5u/1v+3PT4dmkIRuMvqY6GFRvAOOt6TAWqTF\nkPobNDEy1dp1aRwQanFUejSb3SmUEwZnnzHwP63FXOfR9PddCNnN4HxJHau0\n3vK3rS3c/cBRBwwA3bpqEXG5aTTRFiOqtSJyQ9/PcqYHEW5RAMg+sgEk9itw\nK0ngWXVfrm/nZneBW6VDgIofxE0MqnqSgQv3oCc/zVuG7jsP2JAiOUW0+uV4\n1jSsLwuodbXRZ7wpP6wRkVajhORxcRkwSTJ817hj25VJyB8l6cqrcjxDyWav\nRQfm8TsQ4bPePIe/jE1FcjY319ecxIoR4BewEQQ5AfxOwaho0hSgTbTI8lJd\nBI5fRfpEQJ5xz9AQo11+hvyhioQKLE+Om1OZFkGNocCv3eHbV8lomwi9sfpT\nB+iaTg3g1kD6j73sgbIJxEY4BY/W2i8fX8mnGoD8Mur84TckB9OIhzcRnX7I\nLfq18/kUlQjqYlDyWuZObIICPkIRi0bMYfnKimOxtzP/rpgxbM9yMlNeS0ya\nlJHc\r\n=bBLw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","gitHead":"8540808be4296e60f1c1d3a637413e433ca7efaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"^6.0.0","@material/base":"^6.0.0","@material/theme":"^6.0.0","@material/ripple":"^6.0.0","@material/typography":"^6.0.0","@material/feature-targeting":"^6.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_6.0.0_1587662820885_0.5297610275895877","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/form-field","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.2673adb74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4732e0927433da98f282a6391c28680f0737ed28","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.2673adb74.0.tgz","fileCount":34,"integrity":"sha512-xP6mKnOHdCKsAckwc3Q4tNvpdwAQe6Rq7Z/wDPtnlIXf4v//10P34FEcSi4o/ShzT6RsS2WEIk5JgpT2nh6Jzg==","signatures":[{"sig":"MEUCIEk6UAHLQ6n7YLscce898GLMr/sq/0s8+Hk/AmBKpBUjAiEAqfBnRPoW3kQy4BMRTr8j0c5JBRT/1dG4t3TqwiKBcIM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohqtCRA9TVsSAnZWagAAhRQP/39xdCuXsFICBcksnBod\njm4lW1FdwOxDSeFbuvhFVLG5jxTasgh54S3Pr+kwQc5U7e0+mo2yIQqfXVuU\nvX5T9Rg5E1/Z8KBOyHnhHnD40eZGVit/1FkpudvNs4W2KTHhb8SWe4RdqZ+F\nPwUomISrN4daEYkuZ8OnVtkaTGv7dvHtA50BfAMiogTgrYb2aj7y4n/4Ug3N\nGsleDrqCC/KSqEl7cWKkEAUOrDpbuO1wfbQ98iS98D2mvEHsUc1qY9JvVKZb\n7/urMy8COXA4PJcN8KgBr+fpdMaCtfDuXYv21wDvx0MShgZFDDT+cNRqzXBH\nvs3+ExBTg3vo0D9+V9uuvX7JsqaHXcHxV6IHeGTpcwrs3MraEeYxHHAlz9l8\ndmPXXw3AminCPJ6d/18qcEoXtkdhf+FmWe9BoMwFDZO2T0Y78HYMwkOdyz3e\nF119xrXxgO4vcJfshrDZw1wGSggzasN/v3xoN0k3AFunKh+o9l5uUdATcseo\nTcPBU7L9l2lUIP9H0+QH/YjmjlY/GxyFnS6KkIh1kj9VnBOneyKfwBVFJUyX\n5YJQ0Gj+E9TkY7ci32t9QAs3XZRpP6irlWBOgu4WvBWC5CKgawg0FtqyyhVP\nMJbgmroBRTspHv7e8R0oTvdWlmPadDGxrpCCm4z70yH5uIufLoxbmnkraA/5\nE5Vh\r\n=dbmK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9cedd1d83d1c7d125a3ed38281072b6e50b57e9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2673adb74.0","@material/base":"7.0.0-canary.2673adb74.0","@material/theme":"7.0.0-canary.2673adb74.0","@material/ripple":"7.0.0-canary.2673adb74.0","@material/typography":"7.0.0-canary.2673adb74.0","@material/feature-targeting":"7.0.0-canary.2673adb74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.2673adb74.0_1587681965313_0.28335006295760135","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/form-field","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.b10d0d7f1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30b58d12702bc81f0e7f88c88ed380ec941ef77f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":34,"integrity":"sha512-ThaIVNqh01aKXE6fcj7L5jZWYcK7Tr6j/i6MpsBUWHgEj/vNOuUuhnnoY7hoY1VfFCkJ0u5sG/TeEwmqK1fFjA==","signatures":[{"sig":"MEQCICXBiFUlsl1TX/LNivKyHjMR0MqOVqhQIzHNAMK5g+BPAiBg0mII+u+DsfMUQ9DLyauXLSIzVYO2ALm+B2BO/CDrKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojEMCRA9TVsSAnZWagAAzqEP/jImyRyUtDBRT5NLXEyG\nChwPjkZP5bqJnDSJy1NCHiDgG1MWzcs9fevIDP0EopFoi4HoIt6uNXXVfuwT\nnJxICZy2/REcyBFf3gRmd4FcL0dkKvIfBghkmmmwXNUNme1IQiRkhe12rD3K\n8YoFKTWcblQVCjNSeQXdJ/VmfdYXrvi/p7AemxYx4f0Dl/ZvGVTnGwykOqFx\nC8EIrAlG6WC1/NebqWx/txWQOaJyFFri8IcIEw5NiaIu/F6ENGf9CdLn8KiM\n0ofdjvBqkftIZVZqyjqeGz2Q5PRA3w3JKwryJ1ICoDRNhZL8vweeO4lBoOBb\nDemeaZFd3VEWX3v3UzYdYE96PKM4HeokJfxZ54HUf1PW1A3gmU3C0NlDUhma\ny3JcPnqWYOFydM3aZBqMrinw0nviWIYUnRWuz8+1jxVUE/03kZpcrK/TzPiZ\nYGnnKRd8zmebMDgPyDCzY/jV2Jh7jIkeNSWY/1ncYij8oMUkhUuItgXS5Ovj\nkGUZNAh+QCAf1BnQvKrIL5Qqcre5I7p7nJVenbsyL6ppzx/lWXObhAQEMOh3\nt2C6gtQ0vzvm/kgLiDVsd5CfQJqRx0WHKBmdmWTzxjG/OPbtQo/jDmRPDXqM\n7PEr6mtWxORgF+QiqregJarQ8Rd1mR7SEU1ypatUf7GJ3oiVXLNPyaW04bee\nToXV\r\n=hm23\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"83fc566b3c065e01bf601ac65cd6d17b634b7872","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b10d0d7f1.0","@material/base":"7.0.0-canary.b10d0d7f1.0","@material/theme":"7.0.0-canary.b10d0d7f1.0","@material/ripple":"7.0.0-canary.b10d0d7f1.0","@material/typography":"7.0.0-canary.b10d0d7f1.0","@material/feature-targeting":"7.0.0-canary.b10d0d7f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.b10d0d7f1.0_1587687692083_0.567654225173515","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/form-field","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.3bd8c1bac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"282f38427185154d995d2eea8172f79c47bc13d2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":34,"integrity":"sha512-Ukb5OdixERbtPvzZV708ovzkXQoZ8k5vQPcOIAAZffI0Y75IwS8g1wM39BEzvNcflfjV8n6M/4+//i7ZzPic0g==","signatures":[{"sig":"MEUCIBxsMZRPUQsgxGNr3jDD+oxo4BEEYZ6JSa4fQIQRs1i5AiEAueEQwCn3FL5C0+vG3M/dQ9jOpNET9p0Zp+PiM93WJM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1TQCRA9TVsSAnZWagAA1BUQAIkapDXvlWfr/wMPS7G3\nhK/vo43MeUsUY2ufS/tbljV0jb6aww3d8yldQHA25vEioWeZFHmbUlq1IWH8\ndDi1+amHQhZkH+PFL3epFRjGMQD6mdhB4a+LPdadfnPBqz8l1t2S8LDz8BQM\nnMaIutO56x0T0C02+oxh1DVPXe/ILMMdBX3yFiHNH8E8pJx+AqMl0Ezi4rki\n0OZG/ll9n8aFAfa13yi25GXpDIQhk6GViuNw8VDMzDL3x5Zbur2s/0/BQNd6\nOqBrJPAav2wBiGLCHb/SFOUXVkyRcf+6WDU4U7p+SGjRudPJ2a3CfcIJawax\nGNv7uP3tTle26NqHkh7SxSBl+OuFuaBlGcigLOSDQfDdudx1itjFIi7k3iaq\nSZL5XIfMlNCvhHPQ3o3I5iVw2QLhlQKIik+jOkYOi8HsPCSMurlKh55yVatw\n+HIAvU17BzskBH2o6mkmDMUC/9X+v2gAbQfNspbEW2bbc9zQ7swEJ2V7nvSZ\nL+R1jF6qNSDhI8U7IjolQA354tFm7G4rm3ho1vInbevbs/qeIge4AUPWYB8f\nzILDKE2RjZ4+53BLk4m/02+J8di6Zo/ibSeNVThqnpQq1ugNn/g7mRKaNtLT\noSwbYzlzUBlYQSNidn3eitf1rhZ5gNCtaYExIYv1vdb1C+wnGu1FN43EnFAN\n1EI1\r\n=RT+z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c6f324d1b107431694d9112a3e94b90e82718ccb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3bd8c1bac.0","@material/base":"7.0.0-canary.3bd8c1bac.0","@material/theme":"7.0.0-canary.3bd8c1bac.0","@material/ripple":"7.0.0-canary.3bd8c1bac.0","@material/typography":"7.0.0-canary.3bd8c1bac.0","@material/feature-targeting":"7.0.0-canary.3bd8c1bac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.3bd8c1bac.0_1587762383660_0.04530170927007604","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/form-field","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.b83c8dc22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e549260dd4418fc4417493a382c0ca388c6588d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.b83c8dc22.0.tgz","fileCount":34,"integrity":"sha512-IySKvH03EveCTw3qY5VzTo8a8jR7E8YgRaTqmBHPGDYWpYGduL1abaaa0S2lHRBxtW2XgB4ulmUlH3vitaSvBQ==","signatures":[{"sig":"MEUCIDvSI4A04Uf1WL/oMXt+dXdv+H0/iOzbJm/4LNE9YX4hAiEAhXNU2i08kMYbit1nggTTBvn9u4TJ6+RsuGkwhlNf+DA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1fPCRA9TVsSAnZWagAAeuAQAJsJdeWXaik5112LNW2I\nfYWArFLRfiMos68tnMc3BJ9t1WVWjz+f5CDwOA78ntNWJyto7joFOpcJJxwE\nRrRvaEzBRufPtAUx/EYbOTzvzakhDx3UPALWp+2lQUeAozHUv7pOd3rxdw/h\nvA7l8YApy9XyBkpYfFA3D8dFUcpx2FM/hpxEhjOVdmUlEpQlGgxttr+4NeCL\nyzlHmTO7vmve1Px34EqUj/Fx5EBFKMfy0S42ppreaU1a5rTGgyOiyvX+KfKJ\n4Ohr9rwNfSM+RmwUPrFqFb7ERFy0LUiqhllksaXnsBOqft6pN1g4UtpdJUeo\nJDRuTVaHe04zMfzwFv8byBQeGdGu/Hf/GLmEIDbxxqT19WIsLsXcl0o16zwT\nPa/8JsttpC64c4r+tJFUVYCdnonXSDI+muHwD6Re8r2gO5MKAGf9o/t/w8NU\nUhL3jeKTbWymDNxeLf7PDeS/Q65798E/o4tMzJwsrKFFIfpDP61s0E49iGk9\nluobrZL98VCW0EPF4Pz7FW5ZXLLKkLjC0NJ1mTjstVMSiErn//jXu2GvRs2r\n+CAmD5CMUQKM0iaOBTgYQV5+JECqGiV5C9MudhIj86NDs1QAdaDvE8/jVxvD\nrV/8tGl3GJtuhKXAG8Ji4URrVv4aeqfw/FqDlu+LdqHJVmAwZxsgOrkxAG9D\nUBiY\r\n=+EBX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"92cfe3e927d76c82fa2d8a864bb852b8d19f30e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b83c8dc22.0","@material/base":"7.0.0-canary.b83c8dc22.0","@material/theme":"7.0.0-canary.b83c8dc22.0","@material/ripple":"7.0.0-canary.b83c8dc22.0","@material/typography":"7.0.0-canary.b83c8dc22.0","@material/feature-targeting":"7.0.0-canary.b83c8dc22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.b83c8dc22.0_1587763151290_0.39902906368676705","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/form-field","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.1b3dd846d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afe4a89d14d2a8e356d29219479b5aafb5216d07","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.1b3dd846d.0.tgz","fileCount":34,"integrity":"sha512-wVmkALdj/8hcYMJcfRSZSlAB+xvfHIRYOUCGAuPPNwZA+IT+28JQV5c88y88bCvqxPcTy8zQTC3Pa+i87QfblQ==","signatures":[{"sig":"MEYCIQCLrgQ8CBk+Kx1qD64Iep06/QaTe52KxBAz8KMaGPjYmQIhAKYkjMzGyPxtbAjI37687RpnzmB1XIX/FSuLExZaWadU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4fiCRA9TVsSAnZWagAAp/kP/A0Y1q8/+GenV/FNlLPY\nMJUPKNNRtx/MwZLNyPxXy3x+O4H2BUiNS/6nYyULDcCUEpLiA64xJ9gFlFYG\njoN4hA6CVOb41X0AAfEzS+5OV3WXlX/2tWM0q4eMiW+/4jyY8AJhcMXQlHdx\nA5V6qe5ugWvg1YRQkMITIEmgzCcq9mLKYqSkeFWsEELZ8vqdvu9Scvu/8gVT\nL2VQW/Fxh7PtPjzweXb2DX8nasBR5VgDR4+Sh7wRHQoao4NyCw4gJcxodxoH\nLCbc08PGp4aqoN6KRMNVxAi0ZawUnBEXPyrg9kQzLaK9uuDsPm4BghyHO7l2\nOOoHBAlqFj7RUbCQ4MGtwMQaDfTF+N7u4bo7E4UH0mMcRyJHVpbXQdk1H3rn\ndTtl0FDOc2Eb/GHQgShhVs53G3cLPHibwwYeXLPvaByTOpqXRWJZ3S5XNFhe\nctK6o2s3z3UP+HeqZ/x65ErqPsP/LJvGUbFhiEWKM/PAcb/JFXLkkdqv6F1s\nP5X5TGTn5li6T8iDqp+HwABvATCmsPESvaKvnoRyOTt85L+/WMpmd2NdcFjR\ni0Nz4Kgl1KK8mjvX7np/A+PzEutdR8ApLOTkmSreRcI3gFrT6n9R5o1w1KgR\n778o10XzkKbhvdjdrI7QR6o0Fu5s6+7QedD7OXeOJ/ZEtZeai9qBgKWGbeh+\nhliS\r\n=u2Yx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"370fec5aeb98791d923dc357e46611e61cf6eb0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.1b3dd846d.0","@material/base":"7.0.0-canary.1b3dd846d.0","@material/theme":"7.0.0-canary.1b3dd846d.0","@material/ripple":"7.0.0-canary.1b3dd846d.0","@material/typography":"7.0.0-canary.1b3dd846d.0","@material/feature-targeting":"7.0.0-canary.1b3dd846d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.1b3dd846d.0_1587775457637_0.0601187569934869","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/form-field","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.29debfea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b5e588b838d2b710cb4e37882231c4c6ffadbf4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.29debfea7.0.tgz","fileCount":34,"integrity":"sha512-qakwNcIqeWlCHAJrlKVs9cbmgoIfPitGNPOWAbr1iQSzu5zzppJT/IjEC2P0E12yeY/VIEP4ZpLLGGhdSjbErg==","signatures":[{"sig":"MEUCIQCJGLmXXpCIZTP77v7O67Z46R9YJ+4JaZzSf0RTJelvGgIgfbuLfJV09YpeRgL+S+k23JE0pFNJfzJIRFHEQuroyYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptDpCRA9TVsSAnZWagAArMgQAKDdVJOAxJ3TBWBK1Wf0\nH4UkRr0ih86y6ADV7VuxeRRN5TIEcusZ64ALDXmzr30ySUbdLAVvlmZz2oeK\n62QV8cSRswj+QHpipoUdnGVNtcuVj0eKzmMLL9MUuvZHWu3mvSBqZsCAN8Rr\nBHdMCcfX1rNZP9ackGwcJeKzAUuV1BfUXUfCHwlC+XIvB+By8esUMX+LBKNy\n3gO1R8Aa6rt9ymrr/nQQDXc/MSw/fAY3+z9O+uy7BpcCbnX81Ay+Jt69Efjv\nS5BmmFL698TnUEBTGJuwM5HX584ERaJhQMzXJygTJ5wPaoV13tlK8BI9FIb8\n9Bqw6VGShaKXlwkytS+Zm2ha9Jxk/7ZjRgCRGid3zQEuA0xVC2E4bO9b6Dca\nzgrT6ZoVqaTg1vKKu4nyC7oyBwfhP9TViyxK45WCURqYBlo3wS5Pnm3Q104r\nJtG4DG97eO7d2ee4kt/kSjKNQUFI5p++Hw8XQ1suWpBAErWeQA29KQxvdTxs\ng0m3Ubbh/dB/8cL1lLjxiWrQEa0jBgCqkhUiBA8I8ckWtUZIGoJKHUSbS2mN\nYFxG1akcNCqrk+AcHpyDZQEIwd1/kTUMgnvF1TDuplnvTpREzx+T2h4y0dSg\nRk4kXtvHg9gd3V4W6bwQeLKnjTFfM7hhVm7ZNSwseIjfMJ28519ER74Far2h\ngCiZ\r\n=LkdJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f121c350e2a52fc59191d5e843358aa3e3926ca2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.29debfea7.0","@material/base":"7.0.0-canary.29debfea7.0","@material/theme":"7.0.0-canary.29debfea7.0","@material/ripple":"7.0.0-canary.29debfea7.0","@material/typography":"7.0.0-canary.29debfea7.0","@material/feature-targeting":"7.0.0-canary.29debfea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.29debfea7.0_1587990761241_0.08204232047313331","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/form-field","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.28d32f8e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb216cdb0c22a81689887309b9761100c71884f6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.28d32f8e0.0.tgz","fileCount":34,"integrity":"sha512-o3rK/otH1KCHD6VbALkChdOsHs5I3aNpKpuCgNB2lC0SjTWLCTQiwX1PKXldIUBLF42wDA32I6D3wHzMagGUSQ==","signatures":[{"sig":"MEUCIQCVXT1eIH25TRYffpMtvG8Q8+YJrs7F4jMpccg73DnzRwIgTF6IX7mhR5a6O1HSVSbqL0ESDCrQkZHkJQoY9Nc9sr8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepucmCRA9TVsSAnZWagAASWcQAJiLlMfWRtexKJX3hW0T\nz8V5f8g8KfnzQcVGEZv/co2YVNjvoQoa6w2lL2CDz7r53ALCLZS0Iqv7MYlt\nol+sUJLUwpfHB2bOdo3E/8+g9qI+9+9dYgKM7dEwru6yRG1udHLmUMudC5UQ\nnIi2kXIfCWgXOgsU6/3z/EdhH8mUSBwstQ70BUSxymMqFVyDZwb1UuQvypvH\nG3bT1bpp1fgdjfwwSytAqT4GB9TUMD31pWP1dUUcn5BYcgk7etwXYdn6MSfY\nCeku1UYr+pqer2cfDCdmAtIOv8RjtUf3IEmBwLSspQt/qHTPFobxakmVC/n5\n66ZZ9T4Cx3XGz0wGaOJ8oxuAg/HcB3qMUQD/CAYGj6XIxmgEMXhLjNfICWVS\n3EDzaZE+9TLH6WCSuFqLXCCXmDMWgtFmmV+0yrUu1+zUrPhXg/zAe/yt3YIW\nQ1Jh2O+8MuLp8ar6SkCIRqAlAZeHIYZnTPgaruOcJMYJdaWhTjznttx9FkPr\naRRlVz2swyxGVFi9OyOCR+v/YgVcsJCrZ9pY9PPiZslgO8xgWDN0y//GWnU2\ngAnI04XwOnL61E0Zhl2LGO/VwoRi73VJwmuaq209iv8DOBCQ4d1DQ2wh4QnS\nPI0qQ7pnqBY45C4ogrRWrquwHfPNxA8hWWzH3h7iiLQhK3W3KraNKeYTxR4m\n8PCF\r\n=C9yO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5e2a5c88bb5127200d9f70d65964a419ffe2b123","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.28d32f8e0.0","@material/base":"7.0.0-canary.28d32f8e0.0","@material/theme":"7.0.0-canary.28d32f8e0.0","@material/ripple":"7.0.0-canary.28d32f8e0.0","@material/typography":"7.0.0-canary.28d32f8e0.0","@material/feature-targeting":"7.0.0-canary.28d32f8e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.28d32f8e0.0_1587996453561_0.7706107390656252","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/form-field","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.af71cfdd6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3173fdf51f5f96221e390150ea4693cec779d33","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.af71cfdd6.0.tgz","fileCount":34,"integrity":"sha512-ZwzEPAipO97u8L+C5WuygWig+P+WFum/YzOaPMckXjzz646B4oCYORRESm8XV4UpPH6/BSD/J6KTFSxkTshhnQ==","signatures":[{"sig":"MEQCIG1yfPo4UdbOlzEi91UfjOEuCw17KY/fAa4fikSK0HouAiB3XY2CxKtLhLM0Wm0rDHWvSNwOV7Ub69GO9sEBk4VtzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLmcCRA9TVsSAnZWagAAQCIP/0Be/QenLZnZ36DD8/eX\nHDZ/37mieTjA0qfd28QRD+Qp7O6TCXp+bP0+Sj0VDsD8cCAuN+1xPTbiZp7I\nPZxWRN+28rKN1t2xDLImd2qKOeSuLPvlP0lGH2xEvBnQOmO1El8r6DZEqW7D\nr6Ylc9dS5GbGZ4XkvJZMNEJH2AoI52mAzaWX+/qUZ6pbGvir5tATp2AJ8FMt\nHNUEh/j9dBBtRdSiXKas68wnwJEiYQ0F3Xv7fP2shCgb4NTq1Bz6ZKVfkWQu\npSFmywu4box+nbm+OqkUe3kkXK7vE7JAH5CwH/C9ACgHm0hscRPSojXyzffM\nLUyg12N90f76OOyaoOb/JeWGX4jAElAU4eiI+Q5XbnTrSWjdK4e729op7BFn\nG7IlH0wUnriy2VrwpkQ5lmq/VRuu6Dw1idHoAlycqXxw1BTjcA01dHqZrZVA\nfPUvyiAagkmBqCJtv13kDLGbXeic2Xh7DNNPCbekV2KiUJJdOTr7v0bZZRUT\nh7JyyK4y7wqOeTDAKOvUeS8jEr6a/MPGxHWxGi3N28/j5QvPDdrzNMLRp3Wa\nQGZNRqGBjXSuc8X6++30qb/GGaT/rc5nQZ+dCEtbOr9Pgg05XdIZiTK9p6Y4\n/tHTL32CayMHkvgG+iEeyc26+dxAZ3kpy/0q5/gzKxm6mWLSQUIzQC2h8QBT\n57nd\r\n=juFx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8ab654dfd65440046211cfc73468f20a57d7fb4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.af71cfdd6.0","@material/base":"7.0.0-canary.af71cfdd6.0","@material/theme":"7.0.0-canary.af71cfdd6.0","@material/ripple":"7.0.0-canary.af71cfdd6.0","@material/typography":"7.0.0-canary.af71cfdd6.0","@material/feature-targeting":"7.0.0-canary.af71cfdd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.af71cfdd6.0_1588115867938_0.32799524977741745","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/form-field","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.99d2fc961.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42f6a3c9c738fbd237016ef8d02e785347a5c5a5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.99d2fc961.0.tgz","fileCount":34,"integrity":"sha512-yVkQ7kzN9cVHO0DeV5VKSKXO72KTOZzpEHzykmJwAeDsJGm2eAgcz2d/44XDCH8fbQLAtAykYBTwfakXYje0nQ==","signatures":[{"sig":"MEUCIQCnKF2qJHsdCu4KevlX8mSQg8GNK9rBtqPYtSdIFdHziwIgV2wTRQLYP1aKP3OgC2IycjtkXUSQIj3b/ZqI/tpeq00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVqJCRA9TVsSAnZWagAAR1gP/3Vcs2JK5CVZzQehW4XL\nGXICKKnV9HxiIk6NPaZEqoALLLpTyNZN8Pp7GdJVrqgJSC6pUVvIpBXrjhmK\nG2l58z0dypPO49asH8f0dNGGqSYWnuRrtAdJ/nQbYM+vqfkLIbMQRyTX6vDY\n1bsPHa52vaIWRJ0f4mWrh5aUx8kIh6bM7I4REBIXMoI+wVkOS7AHCgZE9627\noUO1W/G0WiLOBF1njowQYeHCXKYF0EEuXDM8KYKeVLghCN3FpXJC5l6Ll8fL\nKjIJCBUIcLaJLm+hs855Q2+HsX+j/WRRnXyajFMDoMCRyDStUUf8YcBC1MTN\nB9ORUqgwORnVvBi6Gy5xZOabn5WofbJaEeZU9LiCNhFCsJ17t22z1JhN8GG/\nZ2BT9onnXOlFYQ4QwRgepi3zp1BIeoIyMbiiTCfnClyPfsKRQVvH+FHwkUyy\nmXbfUVB3Yjqltw/qqFahxCeAJlXAkBzehjMAC4nOPhJIlFYLqp85II+XSb2e\nCzhxjSxMzVG6Y3R0BO7TCWabaAK/kjO65bR8G7casCc2koo55/25ChfYnNy4\n6+mQIh5Bp+MAW0HvwxIhvhJWv+5L+D7B+KDUBelwa4tjENDPzb5ameLY0SmF\nneyKk7QVyRHkhrVQS/DjaD8bEhDpOUDAbImTNgytAvA1CHk40L/W4Rt3x/sM\nrp9t\r\n=VeMR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9b1ef36f20c436f96aa47dc90c983832edc5985c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.99d2fc961.0","@material/base":"7.0.0-canary.99d2fc961.0","@material/theme":"7.0.0-canary.99d2fc961.0","@material/ripple":"7.0.0-canary.99d2fc961.0","@material/typography":"7.0.0-canary.99d2fc961.0","@material/feature-targeting":"7.0.0-canary.99d2fc961.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.99d2fc961.0_1588157065145_0.32233897236065534","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/form-field","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.0e052b24f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1a4250aa077a339bc925f65f99734240a0ccaa6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.0e052b24f.0.tgz","fileCount":34,"integrity":"sha512-pfQknwRVW2gBNp4gssTcRouvLnrLQsWY4p9n9NPyVYSlNtqtqTk167NLYWL6tUpz4KFZ+h24EhLjePznzqfheg==","signatures":[{"sig":"MEQCIGunyZdaR4u3EboCFFyNsHIbP95Ph2ilw26aR2OuPrExAiA4LepmtRAYE+24Td0On3wEERHAn8AlXhT/a6rwdhRh8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqioYCRA9TVsSAnZWagAAaawP/3UCMGp3T2sjyQc44ift\nT33ZfTfWyJMzeu9+Nkmm542XhEXZMZdZ3RJinLaBXxoyo2cgu9D5AUhBBrOY\nCWQOL3G8l2YCovymIFn9gt03iRLTajalx2b5khxmt2c4y65NvWQ8dQWrIHik\n8SCT3eoU9vmT9xVx0UbUWfttj7LiR5VGUsUf/GPihlZESSICHQvYMwOIAkFL\nv7AHOICJDCQqmuHEWCzHJigTs7Eyyj9S5FSFc/iwfl++yLcSUI/Z8gcpHEtS\nKPwWn2Dkz614sI61mf3o8U9fqKBnG+QwTuqe6r1Izy8Xc1bpKOGOEIeH23fM\nbE/k5vmmTNypKaFHThy5NwbzLNfTQ2KXH3lU5fNnApFTMFs9rzZJUzn8WrGP\nqBrsP/P3frOBh3cQKlPgfYMBVvxmXUIP+JM+yy4WdpEIgTloudgynqi8QiGj\na/7CTEVjNVtL5Nek1d54ZN0z7DXndtp4rF4yhn9t6XjnXEg5mFMbQ0IDZS6n\nCEroJfyMYJxo3ISf9SX887pCBkp4yCj+ivtkJ09t7Iz3R9gt6j2A3s61k/ck\n5eRwI78uYxxCQB4g0jnGFXzJ+kRfw2+L+1wsFTFH8hC47cMZdMrkH7kpr4iO\nXvoEwaHFqyVar1B9uwRQLZV6bIXKsjHUUkE7MzNDOSqIae7g2jPtvlScyiBo\n5JbW\r\n=Dota\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"69929564b970323734d16e9588636ff8a645f2ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0e052b24f.0","@material/base":"7.0.0-canary.0e052b24f.0","@material/theme":"7.0.0-canary.0e052b24f.0","@material/ripple":"7.0.0-canary.0e052b24f.0","@material/typography":"7.0.0-canary.0e052b24f.0","@material/feature-targeting":"7.0.0-canary.0e052b24f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.0e052b24f.0_1588210200453_0.27090507202292535","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/form-field","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.ff4bc632a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b97b7ab63c3c4209a7a41a25d1554029cef9a1a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.ff4bc632a.0.tgz","fileCount":34,"integrity":"sha512-uHOPOAXts166tnkwDtCqxmu4P9GDQl+GXw2VYhhn0lMtdws9kbIZUp2b98qIIin/l0cKCxPVq+hvwZ+JSoyFkQ==","signatures":[{"sig":"MEQCIFEr6ROHka4h3gnwkGFZY8VAw9+LHTKP5jNuEXTChyuEAiAENrPgfqxajFUuifX0Sj76+i86W8gW9cEYUMmTxV34HQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqowfCRA9TVsSAnZWagAA9ggP/0jS5k9icXEGy6h2QloZ\nYKIAgx7ndOy8J94U6RnVUczFdvq4osJ6ssGO+X17gMhEl/vB5emRJddzqgOq\nm8KWNpDarInElYkz2SJwe4VdDzzkrMLjPwmrrQTWb0ravYbRs7vak/F2UYEq\nayIQnY11CJU1dvhuQvekh/TGkbuocQY0I5Q7nLJRyC7Jvi15sMP19CbHGq+p\nrAglQNqsySfPjtcgV7LovJBQIAUFd6nJJMcbI9FljsZnaKQxLjTr4xSJDU5z\nDBoDA8CZPO3FcMquoLjydOqGZ4/bDzOSx6cnhx6EyoszAuRkxrfXjRhdYOXK\nSvT/5KhcRvSsY1HvHQvi+sYoq5y5A9JX/eQnN8igECa8EiKCS3zwfUflroqI\n0wuLUfjL4OLk/ZJ22jAKxGckHHc8FybGhDxYgnHu8Mj7foLAJhWlsqMHFqTq\nJJkV+kUznt2yUa7Pr9huFJjLHIQr5blUv9kLyaizFERa4h59yK+A/cWIGfhC\nP5mg/Gvocai10BYkMM9bdZi+nNcIwYmg/7Y15/MONOFUEJ2670EGpS3sK8q2\nHc6NqK808ngzxqfJH0hOA2leitXkepBJIpItTtEQyLi3qnOkP6cqfR1nX/um\nIVymNS6p90YuXH1fW/AVgbdqhrs68Rt1m2WlL3fLyFQGYSJVaGxezGU2Y3gf\nYGix\r\n=8BDD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bf4456b9aa6b24c3dd166ee7bbf96a700054183e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ff4bc632a.0","@material/base":"7.0.0-canary.ff4bc632a.0","@material/theme":"7.0.0-canary.ff4bc632a.0","@material/ripple":"7.0.0-canary.ff4bc632a.0","@material/typography":"7.0.0-canary.ff4bc632a.0","@material/feature-targeting":"7.0.0-canary.ff4bc632a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.ff4bc632a.0_1588235294889_0.8610528481510151","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/form-field","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.b0f83d2fd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"232ec2edac367e1a98e1fb105f771d6fa000faba","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":34,"integrity":"sha512-qNIs641+4REbWNqUDuuI7T19K3VgbHsHaGEcCRphjaNJWDERr2VsMsI619x9PpCI+/HqUu+p5NEB9sHPcC+VHA==","signatures":[{"sig":"MEQCIGHttRucI31uJRKKon+LepUa9D8U2LsAUq1fJgJdu1iwAiB4IAnwq2LexJUFfBTwoEHg8tSZGi3Ez/O1rKaaujcGtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequGmCRA9TVsSAnZWagAAW2MP/ixXL3n19fzVpyXd2pEX\ninhVI9M/7ma2S419jBMIxO6UOQ/egcRfVxHsFy2w6RlZVAOTc0L4AlaLCcZ7\nnIjHXktA/kPTl+A1b6Oa6IT1Dl4DmzqhCVLaV1dI9DbC/MVYWWioJWAYI4aa\n3DcuhHg+M8NALNlmMk8nGL/NYS6nSEHVCKRBD99QqiGv50TchEUoGne80D+P\nthEOULdRs/Tt+Ph3mniXf8hTimnWR49kpP0MX5z9KdG1SLovrVRLIOdd1M9D\nBcqPnrdbbstDwRF0b2+lr6CaBKDeIr5Mg+VDGWRAqNKp7G9GudYCuC987ZCR\nxDoE0s5jo/AmVlBChMMvrFwimSudrew0foGxU9VSCaENQqLD0657uFq9DdH+\n1ZOfPPfr0uSRQLg0/gfHa7g3zPOw3F1cJYXBhGcKhciw92CsHROZ4XQla7If\nD+WLUepMG3VqCa1O2u0joH1PDQxVz81H8MMLuogJT2wUcxFe6Y91DFHar7O4\ndDStVsJzlZ7lwnZulQ4PR6diDXeraG7HMg57hJ+kenq0gs6GPJC0EdReMwNk\nScqZcsfiw5kpfEDoH/jkTvDFE7aovOu5818+lnljU0KyeagS7p0lTxElf/5g\nmXM8nMijQxY6/E623nYzTKbBdQuB6rRazRPTrRdDhrRFHwQUvVMAxC2e45oE\nguz1\r\n=gpuX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a1500073e25d06ecb6fe752169f836de2cc6ba13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b0f83d2fd.0","@material/base":"7.0.0-canary.b0f83d2fd.0","@material/theme":"7.0.0-canary.b0f83d2fd.0","@material/ripple":"7.0.0-canary.b0f83d2fd.0","@material/typography":"7.0.0-canary.b0f83d2fd.0","@material/feature-targeting":"7.0.0-canary.b0f83d2fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.b0f83d2fd.0_1588257189587_0.8261924172354789","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/form-field","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.e59906a57.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"509fc60a6dc9d228d29cca8e6a1167be0225ea14","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.e59906a57.0.tgz","fileCount":34,"integrity":"sha512-Nrj1iBjzLqzY11ioXKpqR8sbAw3Vvsf+gL/MXv42b7EW7lQNyBSFAReTBNE6WS8NI05LPwUSRk4PhBwaXy5oNQ==","signatures":[{"sig":"MEQCIHK6YpCNDMWLT4yS1zDiuQtKSZisnAiYo4u30KsQneU4AiBKeGbcPxEqpM2iJeIn1tw1g6yE9sbDOXoANskVtOf+DA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerENzCRA9TVsSAnZWagAA/OcP/jroGNubkHUndKsEnY83\nZtEk40HJEdRlCq1BypRPIShUP72ZXEiCVn0vP0+jmaT9PJQUrDikoLo9sBR+\nRSsruTcdNo+ugJmEgspKFQlxfuL0pCD+Wy9ehIqdHnGJSgKnHQyT2aLy8EYo\n6e8j2BunANo8OT1XFQU46dUTDHVIOSPvdzJKewvjsf6UhZpGIky023idhNvJ\nP06rcVDfaollpe5Kh6YHCDnU2tBpCZwhmoXhH1u2jTVabYcsCi4jP61Gxw9g\n3TFMxuHrwp9fxcYM7Nmm1tmODIWfmpIhyaPitZovi0nLk98idVd5l6lUyE7a\n/t4L58QWsWV30aIr+VZXAYjYH8oXiQFyHLp9yiBFdL99kiH5Uqyd/ikhDyjy\nVdDlsYj7766o7wfZVDvb9G0jc37+MfHREV/J1ZAyR7PsAEmG8NXE7dAfpeXd\n6AAEZShXD9YJcHQ5jrMab4z3LweUB6xtdq7uzq8FkJBNlCy4WvZJG80qndJb\nbHkspDb3HA00mk4O2R3oR26boRpKcBZd1sRVSjzOpKR5SPApphUe10Dv33+B\nN+joI27+0kRipWka4UoxvQN/hH/PF0Csoq2usOl7NGKdiIMdTyQTfIfkHkVQ\nsmR6cX47qBCFjPMgFKZEduX6MnHR/qgIhTVNzd4GswekICa1es/xgGMwrBys\nv/jB\r\n=ii8e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fc7a5c94d345c5fcd76d4957427c551ed759a1f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.e59906a57.0","@material/base":"7.0.0-canary.e59906a57.0","@material/theme":"7.0.0-canary.e59906a57.0","@material/ripple":"7.0.0-canary.e59906a57.0","@material/typography":"7.0.0-canary.e59906a57.0","@material/feature-targeting":"7.0.0-canary.e59906a57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.e59906a57.0_1588347763180_0.9341930766187205","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/form-field","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.c02712b59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa0e80287bf83c2cd9f5f1f2398fe86c93a481ee","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.c02712b59.0.tgz","fileCount":34,"integrity":"sha512-/eYsWDCqlZXt2jrtkKKs6Z8RSrCV9v8kTvo4auGx/gRi/Ga817Xg0IC4sIpXn1MMgIOeerIeLxyivQfZQCd9YQ==","signatures":[{"sig":"MEUCICbpC3PD3ck9plpV6XCt+8cGLrFyCLZqpjIGKNuJZnFLAiEA+A6XYez43BD09NCXENuexJV8cq03GehJco8v1V8av2E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGnDCRA9TVsSAnZWagAApCIP/3K/Fn1hct5ERUH1cdpa\nuXdq1moRlU+E3rNmwXz7/Fgk/SVC5lf/uff2iY1AToccXsKO+y7mW3ub9gTZ\n9KI5ub8vCk0V82W7qstO8J1WG83J5DE65ILSPtVWRBvqTxUzWFApu4OklQtq\ntWSc9G999Vo0jhE6Rh7/eC0C54QKy5Da+BNLhoyzxUmV7Tfis5C9f+p9jLjR\n42eSlG6d9r10+pmFxbVOHekIbZTOjEoHa/cg1NkPJQHergEAebjTtGFuPNyx\nQEOjQRj7VHP1BovJty7a5YPJOEj9FABMv5vziCUhxagrR4cHmi/ETcTaDPB1\nk508vOyjwVBUikqkigG05XAPMPzrBCv4NpNSTlQwGT0km43EzPKYvRpUhkgX\nzRiXkSy3REUxCWoQNWAloNV7Zv3f4dfqUMbj/CuCONtNWGgB3OaIC8HNXwAa\njw09dHL/eZXWNSsSfd1VCP8guSwo7v/qVWw8ZeG5kO4lLQqKz5b0MceoFfDQ\nfpK0av+Pf5G3J2Rg5SEUyxMpo/0BPaYhBjyBA0Zkn2asR94HM1sNexNcMVOq\nzP5hL+hTg53Oh6NGTfTc8IYJ05gleUUNr3h/eu66JeDbZngAcXAH2mKrsC9k\nDhkJibdN/6IIFrL44kvXdb7d8PapiUioSt6JdC8pGmcG05FR97JGNhy0ma3u\nQyq2\r\n=j+CS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ed5da0cff8ae5197cbaf84af0bc924c207d3998f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c02712b59.0","@material/base":"7.0.0-canary.c02712b59.0","@material/theme":"7.0.0-canary.c02712b59.0","@material/ripple":"7.0.0-canary.c02712b59.0","@material/typography":"7.0.0-canary.c02712b59.0","@material/feature-targeting":"7.0.0-canary.c02712b59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.c02712b59.0_1588357570863_0.666214460471056","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/form-field","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.15d65448e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"694f303d567fab9c3edabb9528dadfb4d6cf9cad","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.15d65448e.0.tgz","fileCount":34,"integrity":"sha512-26yE7H9N8/Jp0hZj1IEJX5Ql3OI5J9POeEbNeLH/Amd/M33tMU6INHyZa+rzUs+gH1ol+S1oBWvOJCDx4Mtsvw==","signatures":[{"sig":"MEYCIQCkXMl8Yb+bHzQDidrcIwZEIaX5+ilWSI2loMDWs2GdGQIhAPzQ9EZgbYh54QwTFTPHEOZQh5Af6xg6/cjGkM1DiZ31","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHcWCRA9TVsSAnZWagAATsQP/3t4Ovy0OstScaGWAKG9\n8nkl8V6QWR/jdtizX23pCZh3VjO+cu0/I0tVHB8rdyUZ5o2m9qWFdVWwCtOO\n+hHpS3F8wrYH38mBH1O3nHqcfw3IFjZTNcym1fHDx7Jnwth6gHc66HqmhoqP\nzZ1uEKjcMgrbUihq3gfN1MQgt4bctYoE5oAIFsYX/9NjuvHJVHOTXA/nhZv3\nolT0UOyWEsvrGIuGWQdkFTt0MVLmY4aeqY179MesYE8Y8shOeZSVZ/UN4y8M\ntWumCtvbGBjJ/SvM6D3xwvs/Wz7WYqEIGKAeX+wHBIy1Dd5iin3Yq6B7DvNH\nLg3kqZx1VeNdMd0xBvsWjSstbC30IW0cV5bGf8LM4Uz1uv5XvvE5HTygdI9f\nmIoiYYx18yDlApTNcb7rquw6S9tWxa7HhBU/FosZJUzaQCNXatfu2Gpn1g2w\nkKt7T0uDFftIuqICI676R3uWlvpVF798M2l1mvKQg7t+fGu52+SaTg5ygwMl\n/u1sdOLBaP7CSNU+Z1vX3dV35Qc0d00GXI/2f1rPpE1FjgNcJ8BCJ7sIg4pR\nzbwNm5Q5E3hhCfBLJZPCZ0rI5+p/UekS/MvlAZNSr8rrcJzH61FVNgrz+cNc\n7luTonWmtWB6KJrFSs1q8sd8vTek8XF3PsFaYOEislnYIjW8pezjTIgDvW2z\nGu4c\r\n=pt3E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b2e16d6a45e857fdec3838c3c09ee0a1c61d1858","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.15d65448e.0","@material/base":"7.0.0-canary.15d65448e.0","@material/theme":"7.0.0-canary.15d65448e.0","@material/ripple":"7.0.0-canary.15d65448e.0","@material/typography":"7.0.0-canary.15d65448e.0","@material/feature-targeting":"7.0.0-canary.15d65448e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.15d65448e.0_1588360982321_0.5298937490589954","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/form-field","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.142b1549e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3b803e2a23a14b44aaf2564db935178fe0616ee","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.142b1549e.0.tgz","fileCount":34,"integrity":"sha512-l3ENRFxwaKTtyWBoSZbkYsMROmrD0iyqGXhu/hGFlRVUYQtIJhyu7mKmTxlW4U5p7RJWPFIj5hD5KbFEbXUbLg==","signatures":[{"sig":"MEUCIFk5lWX5Xyi8g0Y9HYnoWb0b7jMV5r0xbR+NyaMS5RJDAiEA9r3Haaijb7Mi/AQphrl0tywMrxoDVAO0qty+LdR70A4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKRcCRA9TVsSAnZWagAAjnQP/27Od2jDPb18ziMlduWE\n7qhzmelSrxQPB1e+7NXYir5w6ATlPYQJV7eLM0HZtmWMcwCcuEXK2JJ3EzrQ\n+SV+NfekVUI5R211fOs7A4hA4R49czWjBkdtOSnBqzqdRDOUx7DoSJmI0Ikc\nce4ZdItgLO23loWHd0reHTfLld0c7okqrNXPLVBLzNTEbStno+qWp6+Jo+Dl\nu/JExV8j8AKk6cLOmr410kFdPMAgVnoVXCXeVafk6v+VBoJoMCO+oW/jtYis\nam7kQbBhAvkZIxV5oK3vqkxPmKHPF/PQTJKQXwcH9OA/N10HKGgZ5PcvNtUj\nh7U7dr07QWmRU+gK8ipx2AmfR1DP4nE8LwE9X+Dvaffx160r4ctU866LQ7Lt\nQAQ2U8J1UwASDrI1kX5M7imDXHajmCEFXS5mtv1R4ifRFlm8Amb5WaO3yhua\nAfxG6Qsw2wfzby/39VNVe64clFSZtst7QOlfjVPydqDzaCHh/PZs7cJ8rS0u\n9cOBP3bgn6pY7dqhygZZ2/65XW7z1yerFbyXL3VUPeStxQvr7z+Jnezj0xdK\nuorzkKvl9lEzXqNE2UEr/n0Vt7sGfCgUrC/u6sbiJJ+UTOik7wWsjmNqC8LT\nP9BhnJJlJp1JKZusoaGd6XWmEJAfby2doLvYmSORflyrMY0S0nkn7QNMq/zN\n9Kuw\r\n=yMr1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c43c6e2e74a4352aad7225952aeb9e7154d35751","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.142b1549e.0","@material/base":"7.0.0-canary.142b1549e.0","@material/theme":"7.0.0-canary.142b1549e.0","@material/ripple":"7.0.0-canary.142b1549e.0","@material/typography":"7.0.0-canary.142b1549e.0","@material/feature-targeting":"7.0.0-canary.142b1549e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.142b1549e.0_1588372571863_0.45067793575193504","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/form-field","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.524b7b812.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7fd3f2203a6cf95757f848e754c9f0029ccc693d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.524b7b812.0.tgz","fileCount":34,"integrity":"sha512-Nvs42TzUfIHkzSJ3yJH2XtPjz54dDuSeWRDCx2jy+n2clY7lPZt/7+cKdBfR2pcZB9x0qMMbYGQbNKtT3AQcmA==","signatures":[{"sig":"MEQCIH2ZsmE6rRN/DBA1hN2zxCAnR9keBQq12asq5hvwusM8AiBRuBcPU+0cGtvMjwIKlJu1AcFOvo6ef4/yei2rN/DFxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery36CRA9TVsSAnZWagAA7ugP/RfKgjiIAQgo3Ufh4lzQ\nvgR6uFPt7+umoffC6dT1Zd28HxT1maqSvjVjqJIYmVLk5Z2ieFThJ9fklwow\ncb4/kEV7EK9GAbinh2Y+p7PnJq9xK1ynN3MrUb7A0M3DYf37CKJe4jdGSnq4\ni7TEoGukxLZW47fwB+TYrisOFMF8BKjo1h5VXakV+vh+BpP3z2e5CcINimEA\nxnXC3DQG7REbIRk2VLXgfrl2I7iEgl+aYpGnhz3Sb4IKUaJfPIVjw2Z1/iqI\nuuh9F5d4c2NLKdGWwmrgIoCC1NSKDwgp0U8gE/VLCRAxV+B9ULQn3OtAM+vg\nSNc8nfesP9QW9n6VoEkbWPcwO9MltvPtUc857PFBHbFg2s/YsJyjl69Rwc5l\ncmMQ/Z1O8NG8t0bvG/RdISdpElJ0rsvU0h75AXlyGWfnGueBu4ht9ontAToq\ngW3MSWYu80HUqWW2SCkpzn9chwrtbpG/UE4Ae+rwZmlnLopILv4OiCNyQjHd\nfpbyR2K9sacGxyWIMb3WXQBz1hLfLDglZlxZlV8k9bOV3kvsWYVp/XIPgRRz\nUGA+ii8brA+9hF63kQUo3BsqNHEPSgMFLuju2fuGo/NWsCCw0DaubYgxBZq2\nBMh0IJ+ayv0NBZaeYtLPzDK3q431gtOom8kwaeELGsYEPzfBo7RDj4rnQt66\ncSX6\r\n=vEbn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"82ab8bbdd2373b285c315177e7054a727b38f4a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.524b7b812.0","@material/base":"7.0.0-canary.524b7b812.0","@material/theme":"7.0.0-canary.524b7b812.0","@material/ripple":"7.0.0-canary.524b7b812.0","@material/typography":"7.0.0-canary.524b7b812.0","@material/feature-targeting":"7.0.0-canary.524b7b812.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.524b7b812.0_1588538873868_0.5279373106384204","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/form-field","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.bd8ca9678.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab3f6b274bdc08e060273cb783c61298cdf9ce6f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.bd8ca9678.0.tgz","fileCount":34,"integrity":"sha512-SzUCbOxId+iB07giqUhcQIewQ//H2kGCODXdoAQDr4w9LxfdvW4GaPxgALoyBgyqIlFWc6vEPETSGq4wWozHbA==","signatures":[{"sig":"MEQCIEgQ1Ik0aJ83A/0AzQ7AQQ0hqg+rYTVAlbgO7XY0wWecAiA4zu+LR6aG68q4Rd8vpmbUPC8VPjgArbUTVL5yT0MN5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE6fCRA9TVsSAnZWagAAzhQQAI1FyfOWHyzZ0i29wLcl\n1aygn97Af4FATcCr9iqxWXsgQ0E7jMSABaUlFYw9NopXIhrM4MSfyFGpRqtV\nNG8QMoa6rX7FSpSPDlyx927FYm1iDKneUODyzPd6uFfo1j/3iiKYROSlB5RS\nKtdV1HXaPIQEgiHtamoOlNbf840U5f86Lwrw8IsM9t8lwIzgOCQUjKehWt47\nVrZzktjxDkRZkOw4OGwEvDRECnJWNxEf82GaBq3mQNi4JLoIM5HfNE19Mlj5\ntlRp9c9FUnoptACszjbxnOGZT5erI/rNRQw76oNSDkEzNSc9yNBhDp4WlS9T\nDvz1FlpMBO28Lbw7Vby55lQasB7NCaeMuAjPEi9pz8/X62ZhJPzSnz2BHfnk\nApbzPBaaOxRFwrWNApea6Z4U/0hYXMwAeDe08bO0nFTjS7EfbNZPRQAJl9Tu\n/bLApIG6vlC2zte724E9di5/GNdNPXCKgoZOhsRsqCb02MuHqJr8iLDbTZuw\n2vdMCrAV8neYxfV33N/U2I3V09NTed/IiQ1ZYZjfJbPIp2VHcFHeqWtUSG1H\nzoZWTulML+ikl44Fw61gH7xG0WTfaE2jKGniL53lR2lWBI/QUeH30pWGGUGA\nCmO0zbmXnnjbOGvRBjNHlFxZnyLQC6/gz940CezMu6H66cFZeA0Y1gxAila5\nFerb\r\n=aj0l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d21e98ae16f9c893bf27272d187617574615c417","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bd8ca9678.0","@material/base":"7.0.0-canary.bd8ca9678.0","@material/theme":"7.0.0-canary.bd8ca9678.0","@material/ripple":"7.0.0-canary.bd8ca9678.0","@material/typography":"7.0.0-canary.bd8ca9678.0","@material/feature-targeting":"7.0.0-canary.bd8ca9678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.bd8ca9678.0_1588612767159_0.6460745283053269","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/form-field","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.2553e86fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40b20b137f2f896878d0ecc5ba31780f60d0c976","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.2553e86fe.0.tgz","fileCount":34,"integrity":"sha512-YNyQZE61nFpWUprOvzvRZxXc62EZLE1Sru+95c4UdFL3ElSv0eNBW9ohyCwKG3gTL3pb2uhJvVSJeCPTacDIPw==","signatures":[{"sig":"MEUCIDwYgEDpG9Sawpco9TEugN+0MPZRfyb4VspmOgB+hxCdAiEA0fZb+MeYMscZ6n7JMpmPn79shUPvVwR7+AwVm17P1PY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFF0CRA9TVsSAnZWagAAecAP/36xzBQTOmvLMyRsbyxy\nf5So1BMDeox4veJ23bVDajsKrdtD3ADnMhgQ4Ql0KJSlBcOG6imePkW1Vz6O\n6EMm+GcgnOXseRG5why1vY7VzX0d3pMD+JcQ8MIIQ3BYNP2kMS4DKCL3CrNd\nPbiAkUEFEkqQUSg1DYcSIjm4vC7ydZpawi/KdUqtfO2KW/E54X0+WcubXKtJ\nlcPI8InRutk1h054oNk6RAUopuf1W08eabK6Q9RFg1j3tTiP94Xxkm32yjOu\nJtWtpx+6ag/CwVzB2AJNirBWdBVft3+xH1tHwxgWZXiJ9H/Kc/0a3CCkRROn\n+skGeRCtq5GN9IbDdQZbgYtd9TLm5+TGD7nMix5TLLqBFDQikPWqUWvCIH0w\nAwepdzkjr38seCsk5WsEu6KDWwIrS05HnG71GWpwQT1eYp7kLdQngFGbTMST\nHxh+PuAnJe5aAh6+9VnYTMCFGBEYCHs8BIkBwYY2uxptNWMUnHkjD14BNdno\nI6myCOv6lzoADno/SOTNa5Plnvp9SXw/+a4RVVpQ8ix3u7WySXSIdmuMb68q\nYVuIN3WPPSDMQmrJsf+HZ4xtlSmvWLkL85KdpDo+GPLfKZEqS7JDjSem2iMT\nQEPFYGqexFGYLgscQ4PJ5DIpTXBKMkc56vWLBOD3ZeByRbNVhOPvs6vxed5L\nuRo3\r\n=5afi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9fa3a214bf3d70eb6522a1f75e622d936e7c0273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2553e86fe.0","@material/base":"7.0.0-canary.2553e86fe.0","@material/theme":"7.0.0-canary.2553e86fe.0","@material/ripple":"7.0.0-canary.2553e86fe.0","@material/typography":"7.0.0-canary.2553e86fe.0","@material/feature-targeting":"7.0.0-canary.2553e86fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.2553e86fe.0_1588613491803_0.5023367470113294","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/form-field","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.03dec929e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e346611aa441585dac50a1d7a9f11fdcdb54be6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.03dec929e.0.tgz","fileCount":34,"integrity":"sha512-xlMSzsH4394wVIHruGR8kDFLQXw+r7ZtSeJAZG8741qGwzK+lL/I+MpyQSpexbCGpno6En0i/Y0gbSkcv3lzYQ==","signatures":[{"sig":"MEUCIGuPovo1ebho0HA+1AZJaJrptjFvgn/ATMi50xylM1cIAiEAhtKluTVj+lKhaB+KsItpUDam++w4nuL0Fi0eRKngrXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKaDCRA9TVsSAnZWagAAeqoP/R8qAM2M8+LIDQvJuLop\nrUPROBB7VhpB/ZAwTtrDsTmHt92Gfy8tf9iDscHR7c2bOQqpdwx6uz/f/ohL\n7PgxLx+Qt62Xe94ZcOKEOkyo521NRoqiX0RPzbMfDiOMKemko4phXVcrzBTr\nZwoj8wegsA0QW7Df2HF97KcIRaGQXljTJrz0sJCaUVERfihMq54B/VUtZNQ2\nhsKC6oo7IreVSG9Yi/O9wrptZTaIPbBfMfpRWlJc8GcCeMR/qZP2MH7uNdk0\nyThxQo48SGskUjzbz0tpk1i4OxdhUw81Ln/0WXCyNBbFaeTS8FcY2r3p0scb\nC/omzBNDoKGqNYo+ysK4aXYNULmo7Gtp8D4eCdvlBuw+PdHEnLR6wMIZzRo1\n/USHW7vfEUxyCDXsLnPQ6DettrB/JXkiBjoyDYHK/37fuDch44iU7JG89cLW\nbBwpu9E/zaBevCGk6AVPwXWjUoAD0EQO9nKhHclrpd8qYb5sotsmF7Y078v/\nm+Y3gpjRsArp6d/eROzORuYFMm6/a2YjpJtoCGVqq/l0XDBhorI8Pf5HojTa\n7RioFX9aWpNj6/gAAU4gJAb+ekpzQQkUK8GlY4WKqUO0wl57JVdDqdMjMo3O\nUzQJYHbWNfwLoB/if0WoODVxaRzsbWzB6oYtHGIu0MsptouzRRQaAyzyQ9av\ngrMo\r\n=8UV4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"976244ee82fa3e080e074d9aa9a254e6428c90f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.03dec929e.0","@material/base":"7.0.0-canary.03dec929e.0","@material/theme":"7.0.0-canary.03dec929e.0","@material/ripple":"7.0.0-canary.03dec929e.0","@material/typography":"7.0.0-canary.03dec929e.0","@material/feature-targeting":"7.0.0-canary.03dec929e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.03dec929e.0_1588635266648_0.3072833983619141","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/form-field","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.d92d8c93e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ebe0866ba81bf5c155a753d3741f0490cdf9320","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.d92d8c93e.0.tgz","fileCount":34,"integrity":"sha512-/F9jAGYCX5m1hNuyTgXUUdTqQDuYRirkZ8vIDcgPImCb/a/LiYI8KuIhUjXsS8vuiVmTgQTPxYMJ4QPoiFoI3Q==","signatures":[{"sig":"MEYCIQCuhE1+7nIlwvbecMfZGNASrhqqz4odkkH9J+AfMy/nNwIhAOPuh/9iSEr6W2G0Z6xFmfCvyDJzQPZPczBlOHbubIbU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZt5CRA9TVsSAnZWagAAIgkP/1F9SeAc7mDZoaSSY7sk\nSO7j8z/O9xCp2YanABL/IwxT45iiNvpubQUVIppIt3m56589SYjjHVlV2pFW\nILPYFgE2f7i2xAofHc0KxfLJS1w2WqbCZ1y4YDb7HanewCuHhgBJwJJs2881\noi5BPZeXVc5/4CpbkkAjcdziISHM6xhcQqpY2gCeD5JzJQWJgRxg+GHUslj/\nhXqsLRX/MMLxYDiZFUiDn7IBTvXOam5RdAtUKWdjg8KEbooARZ/EYcTH/4KA\nQE5cmAojZM+e2H5tn/IsoPGSP8+2553H3FLZjYeuLlQFhBsvNbBuKXi84Lc4\nUdlDx6Hq48qP9vvnXWWYh96OsOiylKnCpywDdz9nLU0jHbji0MPdgQxaKfbg\nRtU7xK1Jp6PP38EyK4QXiqRmR2/f5TXNWft7PpaotOCigjryH66rhXGo7ZAC\nYVZRWAQnS6QyerrR5QGD+QRud6SY+YB8kGuVFugPctHhGuOTQCbx8pE3HAYk\n/ahUxDfdOu5hX7l2BGsuwg7lN3Tcb2LpKkMZfcqet10yNcovfwomsHH4U7l9\nOjdaDrAKn1dD0GsCyvHgqnUXwmpV7OUdSrovgQjjq53G0ARIF+uF9n3JOFo1\nQXkaC5/h6g+i1MmzRhX9X2mQC3/FnKNcCf3tSqTgPD+eeaBHM853SWqWjTL0\n6612\r\n=6sNQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0781b5a0f14ce17201271abfff044630d170700d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d92d8c93e.0","@material/base":"7.0.0-canary.d92d8c93e.0","@material/theme":"7.0.0-canary.d92d8c93e.0","@material/ripple":"7.0.0-canary.d92d8c93e.0","@material/typography":"7.0.0-canary.d92d8c93e.0","@material/feature-targeting":"7.0.0-canary.d92d8c93e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.d92d8c93e.0_1588697977261_0.8039211832781545","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/form-field","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.09f591967.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62de7d79e4770b98d449195cd2c04f8501eb54bf","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.09f591967.0.tgz","fileCount":34,"integrity":"sha512-cPcHaSvBx8WA71DGIA8hIL8N0zO+epG33t8Y2rWuam27382Ri0GzlV2Y2zcuf7w5Ee+sZCItnBbd6MTcJmcoJA==","signatures":[{"sig":"MEUCIQD+VXuSaI8nErdMX+dRu4GoODr8tu7oOr1IBtCDx1609wIgEBcvNt09s0l9Fpf59YaiyC0eudE7EZGH0Mkqgc35R6s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdTvCRA9TVsSAnZWagAAsakQAIgfxUxj6wuZUuKFxypV\nN162PhOBEzFI+RnEwE+PoJwEvRuQ9sx3vjnTqkJqxpNVGdDYSa7PMoQvVHBF\nxnZOG+OlcBi8FNQkz6P5Qx91gzxRuMgIioYRysE0D0uiRbZ7cxIdVwtMQcO0\nZSzXNZtaaCrhvdunxHNopqGqUliNQUDQPxYYx3ZBlBW5pvfBgmwgbrXpUTtd\nNcwq10WL1QmVOw+h+Rgkhhn40q3LmhifeptVzunKfR/7Owinxz/q8cI7X5KV\ngrqZ0fc9z+KyAYYjWJqJ/fdtw/GTZHSBrUdhRqZekoedHMd5ocD4tfOs1bMG\nWr+pyQUYoH8BpjEonJILhzOsgKNpKYxVlnwrL11rO4O6OP5Bq/yj5gNplv1r\n+oG55tMYG13Y/TqWumHjM3xqLUl09ndBteOp7JdkK7836hq3NUxEjSAJfXAO\nkft2fYLeg0E/ujDu8tCXR8VuKoMk178dkrMfVVFzCCgxgN+hZ2Jsbc8NaXwS\nXwKS5pc/HTAADN8ftjYqCsptfTN05KMh4WDscePCr5QXjsECbITuXLhZgwug\nYX2GNTjv9tQ4rQTPOIXSHQ/UwPZyHIvgGgzM9/SaJHM/h2S7+sQhQ92+jvFi\nH92iYUJN/WejSH9O0yHisGvu4dfbSDxG9hZ/aJmpwvmJcqlYghx5Z54qGtJh\nbwcN\r\n=/W0c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b1c5f494b8c0fe5f6f9710e50d51e2736a01b227","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.09f591967.0","@material/base":"7.0.0-canary.09f591967.0","@material/theme":"7.0.0-canary.09f591967.0","@material/ripple":"7.0.0-canary.09f591967.0","@material/typography":"7.0.0-canary.09f591967.0","@material/feature-targeting":"7.0.0-canary.09f591967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.09f591967.0_1588712687201_0.11037455809669572","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/form-field","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.3846ce311.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57185d505c61a58b5fdbe06c3ecbed58fe8fb906","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.3846ce311.0.tgz","fileCount":34,"integrity":"sha512-D46YBMHad4cT8bNEIhTUscPKA2DOugdOGNBKNQtybnJeI49BLXYmMW+yXcq2NrSCVW96YpCkGnelu/hNpcsJ0Q==","signatures":[{"sig":"MEUCIAXo9Dcyb7h5YVCQGp1eQfT9LL5WdLi6uf6Lq0n2ca/ZAiEA5Rm8p821Z/3bVwX7B27ujs/veZpdXIgne75poNnSWlQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessUwCRA9TVsSAnZWagAAqbIP/3YT+477n2bRHb3y8WAR\nBZDOZotbNFHgBLtHHoQHCSL0IlUFIuepoteNLgykPuBptJhtrDa3aUp9a/4O\ngV5I+Eej2m+xj8ONuGOC1DBrQhP7v5PRH/yoASN+32XBe2EwGc/iAgw6ddoM\n5AWYxgoFLIapyxGX4NaKTBpwyFbE0ELu/T1Hv1XS6nRjJPhSNltI4QLHn+yH\nABCKMhhNiBqcdx+vZkVITPTwvadJpLDFbTvq9vgnSXmuHbBA0niIhoj7rrmw\nZUvJpbahi+IkznPXpNWSqehP1xqTPVHO4Cp7SO/CPtitjXaMiA3X9z38fcwW\noIxQ2BxlSFHOsHxpI5ITXC1GEH4aQeJv0z2gocQFcdeVWhPsOsHFX/Uke7cV\nLE8HNbHvm4+7uwhng418rzvvbQVkV+YsPdknYItVXei+egK0d06XwGBKkgjz\nSTu4GwRQYZk3ZP/c8odXhhLwH+loQNoBZI8fdMEt8ot+pdo4geiq6krm+HZC\nh7nz1dY/01bPjx5Dp5f2GtUiB4j91X5n7YbtDy3bR8vh5jDewYmfjuFGcACU\ntRE2MxNx8ipemGqxqElzS7Vvgzyo7srm/Veavll+Ird8LggMB/7rvlEHDFOI\nAJHmRKhM4kVqE+oq5eEDNTFKUnTCcunCkxMNELbJp7RKWiOOTSZ+E6C0mXRo\nePl1\r\n=SyM+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"80b3806d13f75bd5b77443c9e504fd6468a5820b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3846ce311.0","@material/base":"7.0.0-canary.3846ce311.0","@material/theme":"7.0.0-canary.3846ce311.0","@material/ripple":"7.0.0-canary.3846ce311.0","@material/typography":"7.0.0-canary.3846ce311.0","@material/feature-targeting":"7.0.0-canary.3846ce311.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.3846ce311.0_1588774191858_0.5811088511982645","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/form-field","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.ed7f32463.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f47ec13744b5cc881a3c367f4259dfb89c103a83","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.ed7f32463.0.tgz","fileCount":34,"integrity":"sha512-EqwLUdsdshhW7zu1NU3v8Jq+JZJi2VNfigTev+r22+nj5tkbjrPzHNZOv7KiB9oc4AzH6U+UJlSRdfCOQcDyHQ==","signatures":[{"sig":"MEQCIFJj9sohrM82VfoPlRz/i1DH4emGF+G+U+NXuvv4ff15AiA3MdqZTa73RtE0XARzQGRvPOxBrc0eG/ft+iCh4g0DYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuDwCRA9TVsSAnZWagAA3m0P/iKWpQC+HmOp4nGU+Wtq\nlu5A0/MfdJFAog/tFMnmXTfkoi57J9CFa6o7+VL3AySDVZOG7KY4fi7Sta8t\n7TqrmzQS12qdmJ0qzQNicTvlQPCao9cJVQy6EjLzSpAcov04KmmvxDBIfzTy\nhdBZcEgFD899TGFvpYzqfvDWuGs1a8nEgNFPNN1+aN0swEi5gmgFYCmjpRX7\np0IjSQWRkqU+mzqG7zmefNIg9qvAp/XaZFs7PT6jHV7jvG6QRgQbAEr8LVZc\nwLt3ZzLKwMfMtEKxOWptK+H95KJAlmUW91rvf5zQ7VQSuZnMcN7KhmouBHS8\nFMtE4kUNIV+6HTRHaUPvzj21V7A0zmJVDDtnkVf/J9TV2iqOJKPfbCyXHljC\ne8LPlKJzIHfaBGuR5D6s1o0bW0DtO9sAnPh9GBsTqcKcr+mwycF8qrt5c1ZU\nK6VY5vp+0z92lrvI7YBZpRzOXwCv2xZLwekkT2rjW6f7rA/8jJkNbUSc6oIW\n99JPRXUdKKgxmdaw9+y42qZ6uIyUaqAeA5GQXK9H7jcRUtjdOz90Mg1Y4Lur\nmc2Hpymo3D7SYBR4214d12ynvFB68igOdhlSGeHnkQSaviaZbaOErqavEmDW\nf3tQEtSZvBfRZL0T8cNoyXaImxPBM3U7AF2PXRWG+ukijLWLA9UbD45gNAgM\nFGWf\r\n=0hBo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"84dc461d7b4d6f61ef286fa2ade4f3d05018af62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ed7f32463.0","@material/base":"7.0.0-canary.ed7f32463.0","@material/theme":"7.0.0-canary.ed7f32463.0","@material/ripple":"7.0.0-canary.ed7f32463.0","@material/typography":"7.0.0-canary.ed7f32463.0","@material/feature-targeting":"7.0.0-canary.ed7f32463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.ed7f32463.0_1588781295730_0.16250690478800056","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/form-field","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.8135cc085.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4528712ec4bc4dfccdb2446bdf15fe178aa8f633","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.8135cc085.0.tgz","fileCount":34,"integrity":"sha512-Z+/f5ndmORAcqEmllWoz7KIc0NKLl1tS75Zwm13pjRnxdxHdI2k5l9b5E+E63884BBoH9WGRWnTAVr4EQYcPkw==","signatures":[{"sig":"MEYCIQCGJDNUIveB1MxUTHanh1YzO17AcK3+HGLFmiI6DboEDgIhALyAyoDVWy4ovPHHtUvaVlfXdKbpBuNwpFZceVEVHJ3V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxYyCRA9TVsSAnZWagAAiUsP/2yPu+nXaGAWejOd7vXm\nEhAbkHpKLb0RX5/CYsI5qJuhASe5Gz2+hQfqLMIbvslqCw7+ON/oextjCOL/\nhRHfTYkKbMxZsJvdk+s59r9draaiBY3E92V19B+ahj2FYlsgppu0kBIJmPnU\nfsaWpvzWoP9CWKHBbvfbt577KjwPXoMjD9QoXGu79eFRkZNjegrvHg0MaHXq\ns/iks1T/2A4tgQ2A926a5jaW+UrCW3DeRz+IGNvuocfrYcq+YStHb0LJA1QW\nNjFLPlmOQ61KVzJZaDiMUtXCrBzx1kuMBoQLcUfF6N4FQJBErU0WA+aFHX8h\na71M6vAjc2y7aP5rLybNc4C33/Hbhy1gA/DQ2MFu9EcQWBaZRwhye0tq+yn9\nSIpDJBvHvN7uw+HUPAKg0ogM040TKmze44ffllg/308hEe/7CBE7AWmLDRNp\nhwHXht//Ic83y2+zAbMj0miAOaL7Qs2LPycsBcS0K1u2GFOBpl/thaMCe6Ud\n7mYD3n5EXCoeF3DgcZwx82j3O+VEtkUu5rTk6UfWnNGBu6ZgReC9VGh82o5g\n62V4ft9FjoO0ncHQO/bZSKZirImmJPBpp7mEC/cP7lmq3WF29zeANPKWdjJ5\nqaDyuReLSQ6MCOr7pBqUpEmt/CRsWuF6otnz79n9fq/hrwQbbH3yjNQsdXeJ\ntEpe\r\n=RXtN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"56422959574aba25d1461d4e7ebd168437ebf9a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8135cc085.0","@material/base":"7.0.0-canary.8135cc085.0","@material/theme":"7.0.0-canary.8135cc085.0","@material/ripple":"7.0.0-canary.8135cc085.0","@material/typography":"7.0.0-canary.8135cc085.0","@material/feature-targeting":"7.0.0-canary.8135cc085.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.8135cc085.0_1588794929731_0.5040873193635556","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/form-field","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.deb212de4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38f0d23bdb8b3550943283064d434595647edf9b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.deb212de4.0.tgz","fileCount":34,"integrity":"sha512-80OgHDlEQlAegQMPkdIvEc4qJP/vL+lnEFGXh7kARpMq49/S802ZLq6itxW1L49IGyPCIBOgk3572MBRerX4Nw==","signatures":[{"sig":"MEUCIHtoR9Ittrj34vo2P0L8gU+xa3iI/B6xR5ITHLfD/1euAiEAkhfZyhq9MdbeCE8x9YqGaEaKpodgKTYzlmQlkwxgnJQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszfXCRA9TVsSAnZWagAANL4P/RbWO4vDe1NyPGvppERv\nCljsQ9zlSwrmaa20/vCcamOresaLWdP8lRiWZpA4eCoRVHdtF31fJiS7RyYC\nHPAkh/jk2dQGVVZRy/SpN68z+hsgVVcB8ucXJeT2tQYaU4nd+Twbpt4ylyY8\nkZmVTKlfDlhsR8MXldW74HSzU6WnTZK6OoN+VOPCnaQ1zU1KxbESun6S1XRr\n6kpUVyjAH7CfTpo1SuPGwZdb7fOjqxq79M4aS5QOpj6lWlmRcm9RK73C2R5B\nUD9hlABV8joGrk4Bbx24NU1FV6AJFDZ8lrMzVt3SWXy1Gu51f3uY08NkStPq\nxvsMGR7f0cYfuo+P1/LMY6Mvz88SM6F2wLZ95Kcbj4N9usE6RjdoUpYDNRMu\ni9b1V9k8KSkVQpkEQWArNy1JC+KNjRHe7GFn8lPN8YN0SFT5QWq1TEjeVfFw\nsYXFfWWl3Uqha0IpghjwX35sMFqtDwJtb4Zhcnn7Mdxxbiee7N/ds3HZwLZB\nd3k+g1ExsLs0/asnPne6Qt7xEaLv0lZPWFgpgohmuueFK7EpVkO5yBogX8fY\nLIDvB8T1IJh/VuSJvsfkDT+bbK2/KCgVEspFLeYss38j1EvEKnnvzCqMyZKl\nsQz87KF97+vFQkLE1SIVEAZ6sTr2+enAeiK9xt/GX81V5PFZc0DUqzvuDIXV\n6xgT\r\n=YuAl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fe9c146f82589e5f1c471dbb4986ed6b3a7caf54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.deb212de4.0","@material/base":"7.0.0-canary.deb212de4.0","@material/theme":"7.0.0-canary.deb212de4.0","@material/ripple":"7.0.0-canary.deb212de4.0","@material/typography":"7.0.0-canary.deb212de4.0","@material/feature-targeting":"7.0.0-canary.deb212de4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.deb212de4.0_1588803543075_0.19475285065866488","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/form-field","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.f83e00898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46f3e31196da438a35ab33c790fb03aeaed19151","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.f83e00898.0.tgz","fileCount":34,"integrity":"sha512-HgXpeIKGGLoSI1CKDXVgANXv0MEz/0s7Ju7lGhJbUkUQlrugWoNThffE3wiTqBuNtNjVtJ42DLfPim6/sjt2Lw==","signatures":[{"sig":"MEQCIBwONNZLlWi4Go2ORm6PkwPCaehfzH6Eg8X6Xhs91qpEAiBM9j7KLsqU3Ctxcm9AGGOqvtDPEjNWbWPFRFiIdnu9fg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDwtCRA9TVsSAnZWagAAqj0P/RO+FZk1ViXljpPN41rH\nFATfltLVgG4fKTtWxVxYUyl6JeJNj9hcPmxjeISd9GJziP5FXz4DLIJfF1oc\nJl9Utd++ESSCCjFQNDY30HQMdJQut/HnKWy0gL8OowTJUbxIh7GQYlB6P7RZ\n55frC7Rtz/cnERyKp5CzCf0ai3WMHUaXQLuZ0e4yR8RsmbZ/i4CGL8uPIHQ+\nA/v4nLPSZrj6yjWKMlzncM9SrkesSVBk82zES4u/pTU2TNs9QrmTnsNxGFSC\nG0XNH78BljFfBp0UFiqHG9WRRa9spytFnwtjNsSTjAwjXMX3Jr62fpuCvjcU\nVg/WUgER0R84YBAanEvDzeVYx4Sk7hMaRVGxiNNGBdM5GYGL3HTiSJtjs72J\nReZFFDFbnt7v2d3iFHu7nNe2xTagADoJ18qxQFXqw9DsErInVEjuQdDJBcAt\n8UcfOUhNFQ9MAto9dS055ne7+mfKCSkS1SFfvJMKoqtoVEocFVT98RRu/G1W\nVKt14gm3nMaMrq2pVlpPzesT0B+9ENoGO3mwtP/ui5qptlr1v/CDIE8GxLNG\nejXRoKeBYw9+lelbtYpzGNRg9WWnBpODokogMok++VM8DDbrpwgWvBXUfPQK\nUWI11i+vfHYFXMJnzOf9zUUSc9NabgryqmAIRuTQ+EQ/qSskc8jeKMRpQmiM\n8DLA\r\n=CjMd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"02060afc2f5dcb762e9083970f865f1c714a38f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.f83e00898.0","@material/base":"7.0.0-canary.f83e00898.0","@material/theme":"7.0.0-canary.f83e00898.0","@material/ripple":"7.0.0-canary.f83e00898.0","@material/typography":"7.0.0-canary.f83e00898.0","@material/feature-targeting":"7.0.0-canary.f83e00898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.f83e00898.0_1588870189190_0.6961769295455851","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/form-field","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.047e6b337.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ec0f2d3a766c3a403178bbbb5ccd1516b65f290","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.047e6b337.0.tgz","fileCount":34,"integrity":"sha512-Y55jOXu9SyBlXJqly8xdHxOcDoI0Js7IDkcZtj9IAS4KAMisQnQARTN4kCvsaR+gM7pvmB0LUPMtPijeFZJZUg==","signatures":[{"sig":"MEQCIFEK0Wf2uZiUEEs0fgX8cgpCWqf3yYLtCp8pE4t7zt04AiA/xhTnnSETPtI1bEU3/W0uQVmnvMCWi3jChYy2pdKmJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetac4CRA9TVsSAnZWagAAmWoP/0CjmVFLOOad32Pl8lyT\nUJ6WNBi0M5GfAVNnmzxFDMV85+YVnZs0bLGxpSIrZGQHqYXU1dvh2X2MiewE\n1LDLdBgSMlOtk9wpMJ5sh8oubw345vnwmCaHAoaNcdBLn8nRe9ValfsKKSEf\nNzkbG4GeaHAMD2nNwhcwRWol6POGSemKXLoL1nuofsHUBBZOPdw1I2ovUsyA\nd0Upg/wBrnpAcYluvBXGhGlnXpRgQv6pee4DaiRjPd7f1coCjIjkKLtvAxKd\nJW7ihk+4KLcIohj8Qw7Xb/kb8x+SO8WHPy51Y4jKAV+EX7RXAvUeK74zHnQs\ntC8UEo4tv5pEPOrYnj3o9BpHLmnxarAbPixMqIQUbl7djKUU7aTbA6tB0Ppy\n0uQub0VYJSRUZaRWZQQ91oXNn4avc16lGpx2EtN8r1Xtk2v0wmAXc3orwsx4\nVaRF//N/nofDgdrl35KuFLj7UxQ14GZVVQ8WwM0xk2YKCFB4c8OXdAZkfM/O\nKqcUhQJE3+arZ39J6QvVjnXqTW7oBQcYqFgWxHhX+GxRoxWejTS6amOlZHNc\nIkbL9CvPtTqcAOGe5XzJHUAXO5Jp0NW5jIkp0p9KGWpovbYYYI3k3Rvb3k+w\nhq/QyAARp2Syk5txVZG574VH0L5eOROzUt7Qh/Qs5ulqe2umk5qoPC/NEtWv\nZgjW\r\n=AMJ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2be3b5993e14d0bddf55fdb157837e5593ca217a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.047e6b337.0","@material/base":"7.0.0-canary.047e6b337.0","@material/theme":"7.0.0-canary.047e6b337.0","@material/ripple":"7.0.0-canary.047e6b337.0","@material/typography":"7.0.0-canary.047e6b337.0","@material/feature-targeting":"7.0.0-canary.047e6b337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.047e6b337.0_1588963128334_0.12179172641217773","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/form-field","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.119e21426.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cda73525b73267f93c3179076c4aab9ec8c864b9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.119e21426.0.tgz","fileCount":34,"integrity":"sha512-VxEG3MpwRchglSIDilTq4OIB69gTBH7GVCn951/ACjDVwqDHc87eTvGK4UTFrKBUSAnEt1+cLtiQxU3BXx3ACg==","signatures":[{"sig":"MEUCIEhSuCPHQADbCM7uUOMSWRrosBujqFDc/qgWODPo7MI9AiEAwz5KXkSXaFEJvtlifLaB5H21yWoSzFI8wFC1vZOAYXI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb+cCRA9TVsSAnZWagAAiHsP/2u1eeTu4LLNvwsFy+il\niHrd3oti3hboBwu/ob2gT1qW8q8RgG6ALEv9NR+q8rxp4m6D2QW1ryJhwU3t\n60yegLqOvcyQLO/jPJKs/+Yp9xNrJTYefnE6TzthzlW3+0MlfR64/PHt0JIM\nRycLm0zAY4ywu+Z17AaGcrx9kTvwRL3q9lsoyGabn6jQ3BiPjhM85jWD8Mo9\n4dYfS9juH0W6KzZvOuHe+lELA8z8+1Z1TD8DgQgQvNla0QA21c0HQNEvIDL5\nuE6aE6+LUHuwUdz+ZgCDZGQjzsOkU1hgQUbp6HkXzgnMjF8kn/EU3Q4Csms0\njCx/G+U1OU77Fklxk0R9dPhBqfbR/fWHhqm2tADB2QqcXZrLJ48kO4UI0CN3\nCOKvgN6vyDKeDvEXQtH+aWGPxhmZFcco0ymKHMyx+lDk1DdG47zd/5eqIyFs\np0N1X3WMA8i0oGO2FS/g02jF63gbAoH81WmZF0xfAB+4oojuO9sG83+4pFz2\nunTTb0x7omfDX3xZh5Buzq/DsJwyGbbS/NDXnDqhvWLJJSB9rdwbRovxe8JS\nBWhzi7nOKN23E9n9viVFMID3u/1ILR7KlG9rWVIfj4nWNuprFv5FTbOklmYd\n3aNgjGd9wz3kUdjUzTC51TyliDdi2aM+f2s3P+1R9Gdu3bkWMnebpYCXs8qj\nHZsq\r\n=dCWe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"693ba4159b1a25af6955ffb1ce0555d7a989aba9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.119e21426.0","@material/base":"7.0.0-canary.119e21426.0","@material/theme":"7.0.0-canary.119e21426.0","@material/ripple":"7.0.0-canary.119e21426.0","@material/typography":"7.0.0-canary.119e21426.0","@material/feature-targeting":"7.0.0-canary.119e21426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.119e21426.0_1588969372452_0.6221003953651154","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/form-field","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.2f052d824.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8de6584d525a38fae2693ad8eaf582e3851ab5f2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.2f052d824.0.tgz","fileCount":34,"integrity":"sha512-KmwJv3QwG9sBsa2i55+2LGiqVYtsBFJy8ogBtYVmRBoxaRsfhLUyLySlixhjWFDr/3hYlFpO9qnkw+e+LO69NA==","signatures":[{"sig":"MEUCIGZf/T0DNC1uFbyF9QO2i2cHwoIbmHrn1u2gFfTmD481AiEA0v5HsnkxBC5mQIEHhq7UX8C22iwzlOVwFV2re1wUbGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetconCRA9TVsSAnZWagAALysP/Ribq96Eu1IlwP5j+L+S\nIFK1nR8vnNAUOlrsaSM5V4+ByT7PqzwgGy+0MLnEga1vxNYp7A5UpzfOmcjS\nE4eQUycVoGoziwZSktyv5n3naOTMHvdFCNwBpBLBv1Hn4TxG9vMsFqOcw6Lw\n6oX1Dwm9NgXM38Vo4TMBQ8wyEvDmUzLXdV2owhIK6EJeUxVvLGD6JcWY9V82\nLBLxZDqwuEk1WKKgz1U+QmfAMVUEifRBA0I6/eMx4ukbVLn8K1i+dNrWyxe+\ny2Ieh+2EkJWV+pvVjuqIf6UIMryBH4OGwlqkw7+w4z4q0FFnXIe7vsMr2TiR\nVX9nY5/n35mDoEo6Mddd7F/kiVHpN5bUiMiLPyVKcNJYTO/EpZITeKvNDr/m\nuFQ+AGC96V5V+IlcWSoB02TzdTyIaI30iH4K3dUwHNDnsU0ykfnYLqTZYcLF\ngtHVfCZEcGvXJG1V4v+HgvUEKRgsQ2Uh8LoPQGw39nRVlr6ny+JzK3DSFiJu\n5kHWTHOUsZZ/ikwO+JOnkdrQ/YMhR4HaIS+UssPmRl2SW1GoaFENsLRPpTAa\nYArX5CV2On+frSHhsC8Mi2oOWHr67Yr7LFKt7OLvEG7EB58BpWTvBN8uiP89\ninZR2QqP7urG5Q75YyJiAeJ46/kDAB+7wmFq+7FhHENzW04/kAjWB+op0SXa\nAI1h\r\n=SOTM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e3bfb78e98db35607ba75f333490d9693f14e844","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2f052d824.0","@material/base":"7.0.0-canary.2f052d824.0","@material/theme":"7.0.0-canary.2f052d824.0","@material/ripple":"7.0.0-canary.2f052d824.0","@material/typography":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.2f052d824.0_1588972071224_0.21375706018658192","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/form-field","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.e84444387.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14b02bb6ebb97f0662132dbd45ecff0b630f32bd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.e84444387.0.tgz","fileCount":34,"integrity":"sha512-/Apv+ia5bQ7u4mRf59YAIwi1zUe+orLrXH5rH8W1oqJADAGnNh0Z5ri2lZ/fDQMPIwd+ggkKQJWZEprGuwj7tA==","signatures":[{"sig":"MEYCIQCrn9d+ep/lCb2Tt2vv9K+f4n++NwTmvMwxvGdhspPBtgIhAPco59LYgVsGAjesxiV6Mv6QH1dNAQtXEKmMjWKmtUOe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc/LCRA9TVsSAnZWagAA+PMP/2uXxWnYDOc2px5MMgBW\n/KPY8q0MXQjamNPzfXSwT0LPeRR7eKdHZCONr3crXa5JcZxtTsfJ/7esf7vr\npabWvOZ0/4xIVKFTEGofyk85WvvJtufaqbA4PUj+I37WtTTcJ7fj6TE27aJR\nabXq3P8YwZGEok4JUtNqGE2es02bsb1JSopMLtbLv42CVTZGxW+aIMJTePZm\nP0/aPTv9QUdqnOdZAr9ZfHzh415dy3XfM45xgGpOj4+qplPxeSGCsJO7c/gP\nXXtsZXGiqOoeymdifP1TbnRNQu3mesOsTCB6cBx3ukIL3hv2vfvCagAqYGoG\nMfaBJflPRwMWT9Hz69BpOrykqks1xZOoyalv4Q7iTGAIW1eLPLWUcP1DRtgQ\nGUL8dr12zyIrY2GjYV8ylFZ8r8vfBMOg3KFZO5qrFHkdzdzcJMl87JWD8Qq+\n6rU2o5rY7RDTpe1sOa3nZtNTnoGrcwImztwi1H936iq1o0j9SpSteanmPJBJ\nBp4hojEfyizBGMr42YlCbqWV/QimKERUObMYbOqXzItEzQR7efl7/8WA3R2D\nXUyALao/ASWty78heBhRLp0v+OCnqr8NEaljnpRntPHz95CIejIKvhfxvWCH\nB8IPdj8wlOoPTHtKk/aCMhssxmADSHvSGTDUlKsPpccpBGJXExKGzIBZFG0O\neCqJ\r\n=ipBH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"35f59683bcff8d7b2e79ea4f582488d0d86b0b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.e84444387.0","@material/base":"7.0.0-canary.e84444387.0","@material/theme":"7.0.0-canary.e84444387.0","@material/ripple":"7.0.0-canary.e84444387.0","@material/typography":"7.0.0-canary.e84444387.0","@material/feature-targeting":"7.0.0-canary.e84444387.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.e84444387.0_1588973515117_0.5017023644712817","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/form-field","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.893eb1876.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9798be2e36fab291e92392281cc0cf594016710a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.893eb1876.0.tgz","fileCount":34,"integrity":"sha512-ojnNc5GawM2cO2SjYjbXoKStHLa1HqknraXV67QgJYPr3f5Vdlqw9EyCa8Z1R9mhTe9ez+3AbAnSWtO3fo6Tug==","signatures":[{"sig":"MEUCIQCBo6/9Se69qMx9TV9c27vCg0f8bEwNL5EJWceMqjWUEwIgTIRSTx23ZpJWaOcWUieueVgnR+hrEU4Oxk6CvznSgo4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV2MCRA9TVsSAnZWagAAee4P/21CxXvhVQAmDFFrCQ3Y\nvmwvuvHq0ROdAkzjdPSJKchEcCHDfM1b4fs0223CQJVG9/vwHLfttyTcFPdF\nFGAsq4WR/a3D0CrNAkslm22YDUdBGKIEwXw1pfgnuE2FeTK0pMRHvJ9X8ltv\nFSMGIizsChev6RYOfnhTg6sUBsBipKWqNd2xUfK0Lxk1nrsWb+7CUMT5KLl2\nkIiguIgfi2KoMWf908TiYsEc7KkV0jpW85NEJmV8Qm+9hppiOsGeQJgDksjV\n+3MVq4oaeR2oHPWcymbcWuJRL7mADD5JYu2CDSUrJ1kTZpaoz064N8Bbdi+M\nQUVrn+nj3cEy5Fh+BPp4xwEa4xl/7ofZ/1IkTya/ZRd3po7MJjDC6ACXBWEZ\nAXeE83r+9yEzZnTAhSgV/lIb5+3Kg8InpTIcFbC0k5I7bOtUhk5HDH9zyflu\nlRFk0qfoeUMR8WXFYbAH7DsabE6/aa2kwsC/6uwt/0jrMPQP8JwGuydTNKV+\n0arSiPLBspH64ShZaCUSppxnxQ8eIXXyoIWIXM49+rKEQBBu1KVcWO/6uiyC\nZYyKGk45+G5DUVt+oqnc9lemiyIxbm/AaalMyJ9NixqLwoGpJ8+AVm5T59as\nxzfzbcFVKWf7G9SmMuFSx7ya3w+DbwDW6rE7EgsJ7lrjJI4yzT+E4ZYlLBqf\nGzlS\r\n=AXAW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4bf9fb733753ef4cba5683a95a2f2a71a743a68e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.893eb1876.0","@material/base":"7.0.0-canary.893eb1876.0","@material/theme":"7.0.0-canary.893eb1876.0","@material/ripple":"7.0.0-canary.893eb1876.0","@material/typography":"7.0.0-canary.893eb1876.0","@material/feature-targeting":"7.0.0-canary.893eb1876.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.893eb1876.0_1589206411314_0.7947022426377917","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/form-field","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.a5aeb3001.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9060a39ebad46a798d30685a9fdc637944c0c646","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.a5aeb3001.0.tgz","fileCount":34,"integrity":"sha512-xfkUtiUYLRQMLzaim4ZxBGloQviUxM0m7KzwPB9XDBVQbY1PAsywiGdJZKQpWUjlVg8asPgwxMlvl0Lifzt2+w==","signatures":[{"sig":"MEUCIAH8IYycHG/f5++HZXyJPU32SgyfYIWd0jyoQojJtMEYAiEA/cPhPl4J7uRe7P/WEY7hSgVsFqwzXUYWc0/ROv7i8XQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWFRCRA9TVsSAnZWagAAm5gP/1sQvBy1KMaCTweJTUZf\nPQdf2mIoqTh+d4ArJqoWaH45JGQ/aBGyTbTWtiyOQInDC5ia67PYYLDCzYnF\nuQ5UvDzMLacCZ/R2hSM2x/las3bUrQCNviQ++R5NEdgFwrEnF1T9xGRuXBbw\nxWbtoIJiz2IOaskC34LFvk+ZRs3yE3Ggt/Ggg1yCTp+F/K4CnSBDWn2BNe3w\nb8hJMlF1S0J8pMLAF/s+RN5npDouamz5HRkEc0Ddw09FMsZOKMRi4JrpskF/\n47nIrvxJR99toI/eCY7tCHGHnBbl2EoUfFsM/BZVCxKLZ90HerP/hnmBYTIN\n+L/jRU2zf2zYSgRFVAnLPwgHXdxDU/hYV508rDgchRY55wGONYg05NtMsLd+\nG6EDN1UEPDGqUR5x83Erw7BlJk+3muN/t2mN4cksaoLqtKOiwo7VA5NyEJKi\nXQFyYfqqQgtdioOHcKhOWFRthmTr8Teb+FF6faw3avNKJdCa7uaaupqhlIPt\n/jk+8oj3LjNeBF6n4hEk+oN4IcPwD2dd1gDlaoCfulsByKClnDvdf4RKG37N\nFCYpBndqYAgdH4sum6A3NwmoGj1nFokZ5zxuKuigncPN8RHgMgVVhvhl8ZFP\nbxNpuBWzMyuVB3U1LP6ruVSESGnxJ24tv3+zrUYdMmlOrahkWKrL6YM4eqIH\nM7P1\r\n=928E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"01ce640dffe32b7838dec108ffb4d0c40d3e7bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a5aeb3001.0","@material/base":"7.0.0-canary.a5aeb3001.0","@material/theme":"7.0.0-canary.a5aeb3001.0","@material/ripple":"7.0.0-canary.a5aeb3001.0","@material/typography":"7.0.0-canary.a5aeb3001.0","@material/feature-targeting":"7.0.0-canary.a5aeb3001.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.a5aeb3001.0_1589207377145_0.08045151565106101","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/form-field","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.610c68d97.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32ddb5f33a4ab4e67b2bb2cad53ff48c13ac0354","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.610c68d97.0.tgz","fileCount":34,"integrity":"sha512-rLmmBK3QUlFst8rEt7Wq+YIN2TlYcWFcP4+Oj4QG8GQkJRw8dHD/x6Pw//q+B4Htm1V12Xi3VaUJpPNSWs7rBg==","signatures":[{"sig":"MEYCIQC/cKwJwelUPwGayoU4vgTe1l2glo6h8K2hiUlNiKYlUwIhAKph0i/CAlnRMvW6eYbnGNxfhKGSz7zHMd2FzklJXeSk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuahmCRA9TVsSAnZWagAAPsEP/03D4D+GauU9Qq91eRN2\n9DOKs4AaHoF4yhVcNfDTu5mTINKVrrwpk5Hnea17juQPHh6W8OFXyqZKW9uJ\ny2iaShSIKXO+eFlq3O+35tW5+/byDoQxdvMPvjH6fZ97Z02uCA7ZAyS2tXLk\nW9gdPHRfGbTwfCINzPUxzZ7IpI2RReUcOGuQWwSBu9zImUvAHs+coh1PpQmp\npQy+XY4WHVEx7E/KrzXgjFyuXfQL8hfoW9FzjQYhccxzuywY6MxxLFCw7dq/\nAH4M6uIFZzaUpL99DCNfBp+osrmj2rhFBFDUKW7gdhAhPPcmCT86awBUd24X\nf6hWnzWiTozTmaJ1f5tcI5DaoB6ES895eCClBniQXasi3xpumyFFHQNRMqUa\nN0bNIDvUBHChfLXvIJ5XqLtxfhXJcMyt6EMSQzBACGNYUUK7KZZwF+7X4S2+\nO40sHKcQHBHpUpgOytW8Yuc80KSQcLEAoiCPXa23mVpdTmHMtAziqRSxADif\nyg5lL2DfUCoBDCQ2QisYq8+ZXT6oqEHBydDpuzS6bF27ONO0B3sLb5A20Uc2\n2J3ygwTbnz2Q37zkV54J24tf64z7SFsUwfZakpiQuZYBFP5yR3+O98/sAKFZ\nNNnnOfUPFkz3ipVTpUyHdpg/1mPKE4r39As4VgDPaizxPcWieRX+RbjyRs9v\nVN0O\r\n=67Rd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ac4b0339093446110cc551732ef34ba30b4f4a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.610c68d97.0","@material/base":"7.0.0-canary.610c68d97.0","@material/theme":"7.0.0-canary.610c68d97.0","@material/ripple":"7.0.0-canary.610c68d97.0","@material/typography":"7.0.0-canary.610c68d97.0","@material/feature-targeting":"7.0.0-canary.610c68d97.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.610c68d97.0_1589225573956_0.5256806047396816","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/form-field","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.ed52af767.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bb7c9bad9f24bc4d41c25d81c684d65f1fb114e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.ed52af767.0.tgz","fileCount":34,"integrity":"sha512-2n2gGHWZ8GVQ6yiMPgn0LMBZWfeDhBTC1+q6fZJYtilsvpdvA6b3syeqRCCCxY1yjFkJ9GvGKH5QfP2LwB5Clw==","signatures":[{"sig":"MEUCIAjphiOAnXhYYkQzldEc93Yq+ZK06CX3LTMH3XNMkmKDAiEA0W1uY3DtS9MvXdkSxSrqZk6ych1sfyiB5YOotYt09WA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubU8CRA9TVsSAnZWagAAxTQP/iPsxUWIWK65kQ5xT7n7\nWv2yvoUy7pYno3po/tl55uT/B2o27oz+aIdAg6aCFSKzWezP5dP3SaDWbYBO\nHQoWRmeWM1HBRtnoOsbwOD6jqpSsMCDVi3hUtE0wiQQgcYWb8nfjjcSBK0WC\n+pEWQ7m0hRqx9phAOpkoqQ/4lKbJkHnaiCy74dI1QCDAqwD6ggpIJ9TA9hjr\nVGzDgGx4i4KYZckb90QTkUzp6EF/MXb2rxXmIzAWsr5bkDTqGu4tX52Ao7aa\nQUowzqpNa9WKwoAc1TVhivTCGkuUVZ+jxjQFnCp+nAOXgFmbkVMohiSvhaQK\nCRsL3vD3AiLV1YcAhYhPWNjSS6fCm3Nr1eOoVaki3J3v0RpOHa8IRy0SxXjf\nM4fnjG6Xe4cCvk9qgF5QpnqbX7NzB1DImjTCBbeAfNVC6lQ4Ww0LygVhOwxY\nsQlpkQKkbZCYquB0Rqjl+DcPhAhA/hUjAIeg4oDKHM/ttE1ULguft9iQKUSg\n70Vd7rtAks9M3UfMzMcJF4c8sNaT5XZqCjSl7ZC+sCMdmBchR9WiHeLwY3B5\nmrGYK0c1uwGRJj1CjqrkWXvGgvfj9HxlidSMdgbp8WaLCG59Qsk5BPjpIKsR\nYoM0JpV7IEKPpgAuC1uRyJJ75w11ZZRdisO/cRRifSk/gfImX+IsaQc9/ybS\nkTGr\r\n=2oap\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"06b24ff740d1a29e8764ec98f735b6fef77dc5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ed52af767.0","@material/base":"7.0.0-canary.ed52af767.0","@material/theme":"7.0.0-canary.ed52af767.0","@material/ripple":"7.0.0-canary.ed52af767.0","@material/typography":"7.0.0-canary.ed52af767.0","@material/feature-targeting":"7.0.0-canary.ed52af767.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.ed52af767.0_1589228859610_0.9589881683973287","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/form-field","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.058cfd23c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c51ebe2af7445008449fed99ce3d913da4b0c9f3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.058cfd23c.0.tgz","fileCount":34,"integrity":"sha512-M8MQFYat0uXeZyZexhYs07taucKX9010LjA45z1FnetaPdhR3dG0aqppSw7DX+N5O1+RgS6D+R2l2G9YHRp8wA==","signatures":[{"sig":"MEQCIHwpBtBSEpAKNwhBMrUbn90KuVfRE2us8kZKXXiimG7qAiAf9p5Cng7fIqD/ROrMg8TpuHaHqj3LhN6GlratiF7Hcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucLECRA9TVsSAnZWagAATAcP/0LusfRBc9rgKqvvRLMt\n2va51k5qFsNzv/5MxiGqPYFsRZSHn4R7SSjiFgzXZoelFXTKfl8UVNI06oku\nZqY0iSd80ChR391IQ64wwRhMk3BpgSfPjXZqGOG1h/2yUJjZlsHyzRimQrwm\nJuT9ODNpkEms95wna0/RvqnDEe/3sM1B3nHD+RVU1WkcggTQ3eWxXgcLrG+x\nVLwx93LgtavRGsaXL8TL5YUTovdHulYAsRymVL4+/vlW7Ha85xe9JpnoH+eX\nxsuvWMV1dG07OSDlUA6qaiKJLy1cWKP6IbirZpljq5UaVXDuTr2lYMoqKjU4\nrhGV+qKvNp0U6XCr87NbGWeaDgMqbqlrZeLREssww20daVdfPloIEC+QuRtV\niuFGHYlFqztWlSFhjj+JQ1mGbwpMY9VtE4ctG7ctAMd5Xtt+4FKGb596kcgn\n/ePQRncbkSRMtifTZhYZgW46/Sk4oKeyWppZgZrXWGOMbgN05zlhgW1UiPtx\nQNoMQyeDq3SikFSTtRPwGVSrGYEO/kA4ql9I4Paae7gen4MtspWp0/dA6ELn\nrMeRfsRxfuvVb9f8/sJp6wDWuKNIDn3Lua7VAx6QaqVyssBLb3Q2CH8LaU+s\nicyJZWMHuMYObLwCqu/0ZT+Cv+k6CgY+Qh+j24+vMalCFG2eluL1Jyy4iFd9\nNkG1\r\n=2Md3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e012af26b00c720a751210639bef8379d1085234","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.058cfd23c.0","@material/base":"7.0.0-canary.058cfd23c.0","@material/theme":"7.0.0-canary.058cfd23c.0","@material/ripple":"7.0.0-canary.058cfd23c.0","@material/typography":"7.0.0-canary.058cfd23c.0","@material/feature-targeting":"7.0.0-canary.058cfd23c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.058cfd23c.0_1589232323531_0.6478750223326359","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/form-field","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.0a371b4fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03a1b1773233383540cb287f2c67948c2d6054fd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.0a371b4fe.0.tgz","fileCount":34,"integrity":"sha512-UBzOTk759aeX5ipjuMnXkVuytU4xBGgHLR5JRFJUkZfY1Ro1+ItPFFzMoJlXtf1CdQd2BKGXjqq+bckOZr8kZg==","signatures":[{"sig":"MEYCIQCADFA5cua8xXxkQ6s5Ahyan4m/wWUfbLhMIv0FK1XkDQIhAOdcK9bBfGsA1XpsFZ4gFNcQ1WKKo5UiGBbU90INK6wQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy7JCRA9TVsSAnZWagAAk10P/1FEgTghCoopjyFsr5Ls\nWQOvbtG8xocWwwpDd9lJwW8F7cus9QTWYH/AAXGmhtI427CQDFg8PIP4CfBW\ni4wIhtydBgPbL5+Y5xTsrBsL1Ymm6CEHcUsaDQUEhCwHWFNqoIL+PktWsBfV\npckm7LKvAc0Zdv3zOY3j9pD3cfluw8SaLVGShbAkETT5sbLiKHn4Aqn6dh7A\nzonFXj2ik7R4r+BorTWhVkNG86RW6yfE+XY+PfL8s+eNGeGFIE9pOHKgbTPr\ne9jaQ5nzzfC1O0gcszyFDgxicYiwBudzP8Oo/4CORkahswi5DN/UbUiQnxaI\nsFUrvkUukjNJuTwpyyNTApZw51o6cs70f9PYn6gdSV/z2fEuwQ3ZUUFlTXWb\ndWFKrYsjWNSbyQ+KKRGMOJ33eYcZAaD+e+ayJ67x8QBC85WXx01twFXrUq8L\n94XZHJTUJQDDWaf/zUIDYDJW9ofP2pl6/c0p8fnEhW5j+rQYNsZlE7iIfvlr\nCfANLn/KtxqPa/i9rLRPYQ3kGjVQogwCecafhi2rVrvGgZEl6r+NBu8/ocyT\n3Txl8n3Y/Cvrb4eC4rJ+lz7qLsXZFpGjnjOr7xDLlNNSLvbrl9+SfSAclpTA\n5hEMFXzl3G8e222Aqowg23Q3EZexPUvI+gSRSQFXb8m3nSllagtD0gLJl/w5\nyS1a\r\n=nBxv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c3c5efa159a3a5dd1da72a8e4e94015fb7984f7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0a371b4fe.0","@material/base":"7.0.0-canary.0a371b4fe.0","@material/theme":"7.0.0-canary.0a371b4fe.0","@material/ripple":"7.0.0-canary.0a371b4fe.0","@material/typography":"7.0.0-canary.0a371b4fe.0","@material/feature-targeting":"7.0.0-canary.0a371b4fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.0a371b4fe.0_1589325513273_0.14997857707892548","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/form-field","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.2139200b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ed89a71322428a00768aea171a3783caea0fad1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.2139200b3.0.tgz","fileCount":34,"integrity":"sha512-We3RJJwSjJWlOQco1nuAgr3bkGl51cHlHXHc+zvYaLlYLrnMaeQ8Pp/KykbynTyHBMcaJ0b94h9dGt6AFIjM7g==","signatures":[{"sig":"MEYCIQDDOB6b23LAYfAcPxq9KfvM3d5hqYjDDAttgMVpU+5DfwIhAKIzUxiWR6R7kUoJJi8vz1V6zWSFbHQkNweqMHhW36Ak","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAiOCRA9TVsSAnZWagAAIKAQAIa6hjTHHkA68xx5NIeq\nEom9Cof2D25kA7FcybOeTwMAY3ideBCsA9rZob8jjG0EG+/nj7H+BofB74hp\nUh+dSDM59WKSj4gJmbSBzEUF8pvwJhxyNql8J2RaLjLsY9roaAiKLwLIrDHb\nJk6gOMy2FsMOziB0QTJNTBwEAEU1pNN3FXZHDtkrjiJfJrhpFu1hchAF1+sc\nRFvWENB+FadsV3eTc8oYDKSLqj0dIP5dDZhXoUV26w2GOo3kQE3Zrq74SOWp\ngX3aVxYi476bliTriMGjGLp/OvsxZIVvLSPoxMh479SZrNY4TKYNsO2Z3HEF\nysAuMetUPJbdKOAIvXvQ/WO5kVaaRVsugCFedEJT8FCvRWfycHLnDR0xyvOa\nx4/E/bbbbdQ3aj7xiJ/d7/Pa6nSU6ZxJD2iYX88p3V1G9JcOSC/XfDoDnRQ9\ns0DgwqpBG+/FnI8aXXiUP+kT5i1XsR1dC7WO5AtjlZBDDeFCqpCwwfzrwHm1\nWHqr91V4wuJORNtcSJUxfgahbyZgOftbyrwFMLfXTJpjwlTvp4U7WX22g+EA\n+l0B2LoxTDc9NpK8oTlKcwIxZTSfANJXxw1BxddtTaOTT4jwkDD5+TxJVYtr\nBMPesYZdXqGV+auzllYLOsFZ7brTynz4Ay7XcHx7cb4HYSKpHqMYTk/ulQ08\nrd0a\r\n=7scQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"42c214d2b2b544f76002d71be276eb747a69d9d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2139200b3.0","@material/base":"7.0.0-canary.2139200b3.0","@material/theme":"7.0.0-canary.2139200b3.0","@material/ripple":"7.0.0-canary.2139200b3.0","@material/typography":"7.0.0-canary.2139200b3.0","@material/feature-targeting":"7.0.0-canary.2139200b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.2139200b3.0_1589381261543_0.7124016437410667","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/form-field","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.744d751a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99aca7ce3b5d48d5140ead729feb17b04c8eeabb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.744d751a0.0.tgz","fileCount":34,"integrity":"sha512-eT1f9qTWs0hNTh+vQ6YHZL3cs2mHMG9Om4ISHf90uLYPmQVFAgLtKxZOkdGfbJXSWPtrBjD1ovjh3V/FPXrvVQ==","signatures":[{"sig":"MEUCIBoWcM/XHsSrCtvCLkmzIkIZMilAR5YpQmxG8qNTx7oTAiEA5XgA4oOxUO0VvOs/gg0Q915fu04O0gpyGRBdKSACxr8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMxdCRA9TVsSAnZWagAAaCQQAKQ6w6MOmWUDqB7LSVTa\nz6hvfknSY7dVv5J0qcb3JGXGLHxbvVEuYMn3LcCef32NXF3hws7MFuxgEy+s\naAnsugfGD1Oj6rMKL1kzSsG+/jJ5mudI4m9SKZQ6yhBN9aMXXxWrBpZIjW1g\neBlNTdvNnSE31shkpHTS7IHwYDhwffJ5M5/43i6RWJgo0skDYdAQJ9bYdotT\nXXl7Eiy4c29XLi2QHE2CpXdpB3Sg4UN8wZouyO+T3TL3AyV9Jxf0JnCbYJAG\nbGdWVwhASuQzy7EO4dthTzU+x2uJdYnJ7tIvlEKKhx1hTcbfrAqOhrVMrmhJ\ntoHcj3HFGZrd/EUProwmsHPRj1y+Gqs1tlMjtk+lRNsAEgXT1Mc+LqKVfqLo\n8mYN3zHn+6XPype8VGmtc05nKPph31Q8FkuduNDKIMf3/pugW2F0VItzWARF\n/Z1tfLqdYZANLFbSHEW4aWwvq0OIdF0c5MkkgnGImFgCGy/K6gx2KuXe1BWH\nW2c3r4ILPRmvBGUGOJYh7ddYBWhpgKO52VOR8EKClS3OA/XFPX1nnQiw5pU2\ny1joPe44BXykeyy90EeKazfJrCcsaFWHPTaEvCaD91btABLxz4rE+WbsEvvv\n5KCQFomcr8f/voaWRUPCedNHZszT7a0fMFTYGw+bt7bckAm8mGYGRVHyLueS\njZ+5\r\n=spZC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"afc5bacf5330bcdbe874e652a8d6df5e4a35e7c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.744d751a0.0","@material/base":"7.0.0-canary.744d751a0.0","@material/theme":"7.0.0-canary.744d751a0.0","@material/ripple":"7.0.0-canary.744d751a0.0","@material/typography":"7.0.0-canary.744d751a0.0","@material/feature-targeting":"7.0.0-canary.744d751a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.744d751a0.0_1589431388710_0.8595756644351937","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/form-field","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.ad0c0c103.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4728ae1f20be20db93241f63be4dead4cc3bafc3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.ad0c0c103.0.tgz","fileCount":34,"integrity":"sha512-ZL4MhJhbAvDGCfYrI41DfUQ31QPFuvqGmHndBztFitnkc8G2WWX3Yfjd7opsCRFUOpVU3rIhaSyt/O8Uf/rfdg==","signatures":[{"sig":"MEUCIBQOj2VyTjypXgww8ua1lh8IxcQSFFW9vyGxqJjZWzqpAiEAxrw9KA4ITCpqH23EmSIQ0rIHmLJ28xjkq8Kmk6I94CY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVsFCRA9TVsSAnZWagAAjo8P/1jgWuw9s/ak7XdCV0So\nKA/6RwCq5R2hnQhY08LMnBBtjPbdWpzmTnO0p8QmI/OotytWwTuRcxd8f33X\nS0UAWMzXaVajAbXCgCUGuEJ6extaeqqtZqzjytRRnRYsPSnX09Pk5XAQS89M\nJ7YYPyjM1DZgX45pWXbbDxwr336s6Rt8StvA/URKlTdrcsbhbWx7rLY4rw3O\nG+Bc0wRJcW2Y53ky/uZXdZ48/Cu2KqQsakP6jsxs101pcSDqwiiTItLkInMe\nx6XKV9vrFTvTxeziitSMN/4hzkuyMtmig6ivL059bMEF0v35w3iGUvm+C3ya\nwV+t85GrymkSNoorPy1bhdrBLlxfm8Da26cqH2/BUeAcFhUVq7PxQ/v8d5ci\ng341nxg5IHB8CWKUYH+woBxSu+gdy7ykBiEMtvKmp8u9o2ulJxCvCw4LqJSQ\n2iyWxFeJReXMwEZat3JVoB94RBjzet7BYQpbPIhx2oabOlu3u7MogBpm2eZi\nz3NTMDB0xiUZokCkGd/Y4Ptg6eD08AiTxJVtZHqYkbPBkX7PH4veKe7PVe1Q\nSArozdKUZbjblAJujs2kXkRoBBKB2Us6JKCCfB4wXgg7z1StpE4tg0RhOyWZ\nVJlqioZ0mG3voWlTH5BvCUS2FwVTrIeCN4vUu3edLn9DDSNiN+tuzI7o6XAW\nf+n7\r\n=Yfjb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"76a0fe161f579d30f0d739918fe09f5f4eef04c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ad0c0c103.0","@material/base":"7.0.0-canary.ad0c0c103.0","@material/theme":"7.0.0-canary.ad0c0c103.0","@material/ripple":"7.0.0-canary.ad0c0c103.0","@material/typography":"7.0.0-canary.ad0c0c103.0","@material/feature-targeting":"7.0.0-canary.ad0c0c103.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.ad0c0c103.0_1589467908557_0.3910550002949458","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/form-field","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.fd8f8f2b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"714d4d42f8150d9ce912192f57ee37a46c783ce0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":34,"integrity":"sha512-2sahxnEh+5a+DTm6x+Eknp9XT9GJLWxWcG+Ow8dL7/sEQl+XDqDWXHUH0Je0zmbJZHM0zuxFm5QXbVbV3t8deA==","signatures":[{"sig":"MEUCIQDcs58zhK4eJ6yOYMYNd5gOjNMatlXGzh3Tn+M9ZBvJ5AIgKDWxIvRevOP/DhzvOET8d+UAyVtvykP8ZCCe1lol04s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsu3CRA9TVsSAnZWagAAqcwP/1nDpj/9fVeiSDILOynj\npYg9e7FOO4GJUWOXsVUwYAyifaV9Xj+fSdHw3UjmxL3BqGK+qJ19z5sw1D5g\noBPePoJ6RvTNWTHJIbBKrGFb023yL7iJ4qyFHIuktHkplyAFJxS6XQX0C1SV\nkx1uWRbs1qIC+2WWuvq4e4tYPxzBcpcVOgL+RghNZn34ulSyr384Av9IRKdH\nW+dBbeNOGJqxNhykHkxcMwMwGZxk66WeSLFtRrObYvxEY0sCefQkpSIS26WD\nlB2fia/JM+E1nbZibFwbHQurES1++6eJ4Ft/aJdsKNSDPvC23Scerl0OcZNW\nszNkfRGvRIX0akQI2UI6oZ2G91IWjzbYgJlFo+1XFf9VpXjtk8yeeg6LgfOX\nS4pOGyLtx0q+aJdGarU5aR0RYF/neVuW1Dzd/+wInihJGGeZ/dELRsuEim/n\nC3ohmiVPO8mLEpLANgmrsYKMmhhfeDU3Jl8dP8hz/vWceIbaAqG95BToJgBX\nuyVTTTPUFDiqzJcUmO2QrIiU4WgG73I/Jt0mBXg1JcjQa4E7u0o1fGR4ZSrF\nwbbocaUKwctCdXDSvGftu6jHMt7kgvnQXBkz1mTK1p73W+87tuh+YJPP9NTP\ntIDoOLbtpoFAenoEUQySsmLMG3rqgYAQUr/Ic/HyoKvxlht4sUcl+Bdd+bU5\nxNFS\r\n=K75Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"30fbf3d1582cc530b978714ab043f92bea7c4b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.fd8f8f2b7.0","@material/base":"7.0.0-canary.fd8f8f2b7.0","@material/theme":"7.0.0-canary.fd8f8f2b7.0","@material/ripple":"7.0.0-canary.fd8f8f2b7.0","@material/typography":"7.0.0-canary.fd8f8f2b7.0","@material/feature-targeting":"7.0.0-canary.fd8f8f2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.fd8f8f2b7.0_1589824438717_0.3596740733154753","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/form-field","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.730920fbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d89ee9a2be57b90cec42ec1e387e0524a1c64113","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.730920fbb.0.tgz","fileCount":34,"integrity":"sha512-Z/2ygAdfGtFv6ghh//E2dWWWL17h3kbd7/70FRyvGNsv6UMQDZPc4Tqbj34uV4YBrpQJSDmEXNdy+W3pRPdjww==","signatures":[{"sig":"MEUCIQDsj4TTEVeA1itJg9GoCmZlPL+eT2Oag4kxGDdWbZ0HSwIgLF6JJgsZ0QZiKGitmb+9+xxq4gpSo21xahwszzJ7Xc0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuWdCRA9TVsSAnZWagAAwcUQAI5IuuCV3GpBLThSjEoW\n14y9ojOwE3n49JMoqBwXY3gvrrhqd4jdRh4osTCmxKIgMC21mVE65EoNX0x3\nkFq8Hj5H40AX7jyfIRZPeBzg8/NCjHX+kVjyHktQdFT+hqIQk/rvf0lkL2cW\nGqyWlM1m7ZXzIzatz9ozg5ErlEXEWWdyDI4Z70lgORqNLuEwp50ScS5yGo2k\nxRdpwvJieDf9BX3l4v07wfWOXNrEYFne5oGI0Zg1af9TDI2cjoH1FBgqKTHc\njDufidStBfWEv+UNmKsQ9Y679Gp8JscqrqzZGmcYzNzFq56TBcetrBrsgcof\n2n8ZbE90R2Bg6tosaMYul4SW4ZLWbiheylb0UoRaLPcp3qQ52LW1Qh/ktpci\n56H7/FbRvNUS/xJkwbrv9fozIZa0bE8InNetJjunMfEqX01i4v8v5TRdbjiI\nXS8c1IJf1KFYOHZwK5jhoA/nSuYw0oohW6ycH0H2PciW1L+qMMka36oXOWp9\n9Ni6j3OQStvVVVNkLbTBpotBGDeeb4OwqonKcL812U+VixhQoUOX1bGLmHfl\nMUVu2Ee628Se8FJig5RuBA/C1TiSgZgHKC/yweWJOA1C9Ab6E3p3sUM6qvNP\nBkf7CU+1yRNhSsInDKz/6aMELR1yssB0YWBkkAC7Oe52c2F2DbbfJV+JaNNF\nBdUs\r\n=OKye\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1acee01a3bcc1944050bcc6a38a1846c507db43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.730920fbb.0","@material/base":"7.0.0-canary.730920fbb.0","@material/theme":"7.0.0-canary.730920fbb.0","@material/ripple":"7.0.0-canary.730920fbb.0","@material/typography":"7.0.0-canary.730920fbb.0","@material/feature-targeting":"7.0.0-canary.730920fbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.730920fbb.0_1589831067248_0.07104021130519356","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/form-field","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.bcdad99bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5bd2a4a4f59a915b0d93bb0245fc56f746341a20","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.bcdad99bb.0.tgz","fileCount":34,"integrity":"sha512-AU1aa4Hn0c3oFNxrL1aMt2G7QKQ+fMq5LVyakpm3JKQKgbZl8i5mWXVrJTrcO4dWuPPGOYIMer/nv0PmOyyvZg==","signatures":[{"sig":"MEYCIQCSv4bpYMdwyU3uomTFQRH/yY0ZeKQeR9+iwDecLnBcPQIhAPR+g5hzKAIxEstspOU008ETFGzhUGi0vPy/FVXyZ9xR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew0/9CRA9TVsSAnZWagAADxgP+wVozvjm5TPnFrahn8aM\nQ4o3RslFBHnO9asC1q56PVcC5WhlYG/sLr9UHGUeHX8n6f1RbbGcv56AhKKs\nVrQ7AEgxCpgxklJsCPDrgFxPKQ8PbY45C0sNUsjSmQCmuS6vcogyUdwKaB0l\n8zI/ntKMP3lR9yrPA9HtF304qbzPD2yrLh12yJbVC34jggHlffYeJO0ihoYd\nA60Lmm8ODP+5w1ypnQxxtaGG2GvtpuvqJCpEhh41fPBYiudd4iTqwIBznm3v\nFuGBsf3jeQOtgTtxMvkIJdHd5AH/0GJbH7V8ckpIWJjc+gnsKWHqmytw0VAN\n+4RoBt9gBlo0UBTon+j+3E235FShRCn+xa3Qs84RwOW4QiTjDoUMRSQziD4u\nzqGhC3QKZg/MfiDXvm41qt9P2wzv95MH8Fnn3Xcs8k0kzqM8DdRw1Fy3l99c\nTcKd+Cfr5WHMBhyRW4gtZ1rzHNniDxZx/67K0BsZt82jka5CtiVjMkvvVu1o\n6t5iFYamA6QH5ZEcqTMN4o4fTrRSPeKCd0YguymqzcycLO2jM2abvgx7fLOC\nkgxg+rYJ5dVyihqbj6RF7uLpFWqhDkTr+FKbZy2sViJ0I4kbdxEFkPVmuqzg\n2GHc1giPwu19IMi/K0eW1sSeqyD72o9XYvq8l1LzFt4zS+QtsN0vNoemVZpq\nqpLE\r\n=1CPd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"33c3545075b4fec07083bb484fdd7245d0b243a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bcdad99bb.0","@material/base":"7.0.0-canary.bcdad99bb.0","@material/theme":"7.0.0-canary.bcdad99bb.0","@material/ripple":"7.0.0-canary.bcdad99bb.0","@material/typography":"7.0.0-canary.bcdad99bb.0","@material/feature-targeting":"7.0.0-canary.bcdad99bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.bcdad99bb.0_1589858300998_0.7340415796100095","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/form-field","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.4497b86ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c00c920889408d1b6314e5a9944a22a36ed3be71","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.4497b86ed.0.tgz","fileCount":34,"integrity":"sha512-WiXanhDEflXlvMuojkesWkSON2STfVFPmWDm5SHRP0T791QeHZ040G2B28dtapjMk0N8F0+jTXeaIMvfCerV1A==","signatures":[{"sig":"MEYCIQDdNaUA69+JJt6sj8bSzgcEVx/sPwF+JxSeMTr/xUTTrwIhAJ3bfLB1kTgcFM8UrBJYaLST0pP94JaeVd8MxqcsgB7P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1epCRA9TVsSAnZWagAAIEoQAIb3PCsMN6/0R2T2Vk4q\nhnv1Qc/2MA/P0ddjz0Zbx48p77z2M+oKSnh1bb6QTU70uzwtgdXLOceTTCrM\nBDtc8Ecvrh22NAdB4ohUtzlRL4ifqtpEInpc/k75Z/Kq4KkWudB04gWXPz/r\nS5WzEN4HwJzMIISc6GBql6S2k+5/PnMZcQW5bbh/piHnFYKQ/1wEGkVaQUJT\nk4FFA+JlfcrE2YFh0vTqQ4E9+jxl7OsQYqIIMKXiBwTGN+oMO7AdVbSyPcul\nPLNUy4xZsDBMoWEb3ng2uBjJvU9RGz3hO+7Z6NAmvNz/R80vqps1sna0M045\nD7aWQNRll2NeGB/FJ77JDo76/D0Kw6xiaDTyy6bBGBk46ydhDWI1BlKTYrkk\nasy9mmwaJyWESymQKbREpkRs6D+zUq89EhI98o5lDZJ/bzjvv887LSnMg/HZ\n34C0cTzBTy3q/cJt3Cwd2Em+BhGUc7TL8PJfU+8m33/G/pQO1vF7KWF9Lugh\nsb0Ko3l9zBSUm1hmxVrYypfclywCS8gHfHilKcI/4DxdC1YGY1TpXPkyHusY\nHE5SuqLK2sBLcIy53JTfOMC9pUrkV17tWlHZ8sP9EJBx2Lwj8hELiYlqMTNx\nlbpW2puefSAA+h46oO4TEVjAnJPHJwfeXTV0mXXVba6KIlY4YIeKlHZChFtA\nms42\r\n=i2fx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7ffe8b9fd24f52b80e2fa6a7007881da7c29f885","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4497b86ed.0","@material/base":"7.0.0-canary.4497b86ed.0","@material/theme":"7.0.0-canary.4497b86ed.0","@material/ripple":"7.0.0-canary.4497b86ed.0","@material/typography":"7.0.0-canary.4497b86ed.0","@material/feature-targeting":"7.0.0-canary.4497b86ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.4497b86ed.0_1589860265349_0.7555643376496552","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/form-field","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.2e60575da.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e4d6efdc19c36c9df7e379bd721567bb1e04286","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.2e60575da.0.tgz","fileCount":34,"integrity":"sha512-OuMTtGxrJwjbojPsup4F8FjJV0MlaREc3o8pYm34zO/laKr7e39bgMSxUOp/HxKmRSUaPrMXkNikOhLI6QbsqA==","signatures":[{"sig":"MEUCIQCc8lt137z+vuRa3ZZ/suPpojJ9IK6Gp45bABvRHI94awIgT2VNqABW2ck2fyfYNYhYpPXwiDHr09zGaKShnRqca3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexATICRA9TVsSAnZWagAADVsP/26xi9I+U9yabU1Q/O+J\nb9MXGhDjBBPkPJI/+rAl1sCbrvKyyWDri/0nHT2XVhILQtZUREWKmJcTH52A\nuYPav+b3DXDMMDquIdWjzcQaTpEdyXFr0pbh3xCkgnsSfCBjfIgWA3RVD7w1\nczIvbSpVgvcmpJrm7MOU92pfbhbGzZPPu2A08VoB9yfcfEiCSJYHGQ8BxavI\nfCF9YLmKeFVfbaFl9kQL3mXiLnCHit2n0LEssa4/BWPCOIvywFFiEtieboOI\ndUcTr26tFVcypQNR0NkydQIM105ad5NwSzY8Lt9C8dMNB18XXKZI1QUfYnzp\n/cDJAIM1IcXCFHmvUvJUFjV2Wv254RadCCwnCz6I/Ek/BAVpPaPyeMIkJbMm\nBnsYePLmkjbQCrAYh3EH0AiRfQ/z0vmBwQilPsrGdDyU2+ULLin2zQNvgrjo\nMu8A0jurE6oYl4kf0On704XVXdKbKet3K5b205MhOoF2/1onCGBddVmAaWOp\nCkpFVaEWEFY/UTtfmNetlKj0uMbMMin04eKQln5qJjc9SJLWRdbcvXzXd+6c\n1udeWKJU+I7N2AYSOAwWla/HglFOv1pFHDZcumtUDyTP3X8TBOU1sE3PHDk4\nOsHKzWcl24gGpyKqzjpT3+LOKkqZesr1Y43UfJSMCul6VDLrKBEggVJf/Wf6\nQBGo\r\n=qhTb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a4b6f1d5a01445ae9c14845614630907beaad190","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2e60575da.0","@material/base":"7.0.0-canary.2e60575da.0","@material/theme":"7.0.0-canary.2e60575da.0","@material/ripple":"7.0.0-canary.2e60575da.0","@material/typography":"7.0.0-canary.2e60575da.0","@material/feature-targeting":"7.0.0-canary.2e60575da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.2e60575da.0_1589904583586_0.2978817447330757","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/form-field","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.e3eacefcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c60eda7db1812ab79a5f2ab9850f441cd40ad83","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.e3eacefcc.0.tgz","fileCount":34,"integrity":"sha512-Vnk9lSOD/Bg+BNkp8FbYjwu7W/7jAwVpz1CNFszr/z8JLV9wY2Hv/wkk88SQyyoZAygdY/022BEbdkQ/yzpYaw==","signatures":[{"sig":"MEUCIQCQGBAeNVoXy9Ew1P6BMV+OSNgQZvQAXziEn7RouVPD+gIgavstZjksWmvV38hoYDs93kewbo93GK/RUl9yyjeZGLQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBmZCRA9TVsSAnZWagAA+hMP/RyAJOvz2u1QlL9y/mez\nSVMOptvtoXQToyNWYEy4ZO/ILX3IFdHIGarOSXCqAoPaLydCZenSXQ39c7R9\n1/YWiXYJwq5/Ub6PoFo4GvbBrZk9u5dIsW+cPxD98liGh79UZL0bpJJIaXpY\nEi3yKnJyHY6vBrA5I7q1IA6aNWGMBV0KCxwGwfQ07nngiubp9njP9kAvWagL\nBuBlusJwK8eQ+7ldHInUZjQCiG5v+FTjwlL7DKQNSheImYVJoNhp4dn3qd0h\ngcXzQEnj+Bznrihx3frhJ1oCfMBvxkp/S5aZmF9xLOHNpRScEB8LcfApN8M4\nKRoxBYr2HsEWGil/CTZ8bz5bALUeuH7Bph3ycoyTqPaBGOBW4JmkTO1ocmWB\nsEjKVeD+8cizn6sxnimSED1tJwJUvdn0m+yR/4/jtAXjptqz8gr3EAd2qNxf\n4RAdvkHPTDHzeO1q5gi8AX14ShPX6pG2f+CEKmgyoVYO75PWp++Uaoe46W6h\nLwzIfYKqiFyd3aW/nOJXBUw7tJl7aNld+MxOU34+5ALsA8p8zVyk6V6lMgy5\nlRP0K6xyUGWVc5iNCH5XhUpFUJxkVXAiUr9+HtbGlZp4keDejVscXwvnt7t2\nsjlj5L4CsLakbQ8UrMD9BlAwqVfJeQFZsdx53bz/t7oinSk+xMYwhE74qp/k\nSEEa\r\n=fw9L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a80846c07f1b98212ba692bf027c2003093d0180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.e3eacefcc.0","@material/base":"7.0.0-canary.e3eacefcc.0","@material/theme":"7.0.0-canary.e3eacefcc.0","@material/ripple":"7.0.0-canary.e3eacefcc.0","@material/typography":"7.0.0-canary.e3eacefcc.0","@material/feature-targeting":"7.0.0-canary.e3eacefcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.e3eacefcc.0_1589909912782_0.20566198502472077","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/form-field","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.b065a4d2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8af0ecc4c4d8f658f8094b6a4f711d01a81c8466","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.b065a4d2b.0.tgz","fileCount":34,"integrity":"sha512-mrosFu56SxZf+9cLlKbhphfeSA+ERxNGgct7CFYl+SQqdP3WpU+k0Lp/JIC3E3d73iTLLVkiCCDw7jRfuV2LSw==","signatures":[{"sig":"MEUCIQDUfxGO0pGGo6APyT1C76vZZPuhsrwayjmNX/mMVvf3iQIgHRCBzZypCte5xFReG6nrgbXcnysq+Emhwov1G/ReoP0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUCbCRA9TVsSAnZWagAATxIP/if2pJ8mIkc6MVyqgd+w\nIXqPDv1nU8K6AozJYK30umkiF6ZXGr9Q3QxkiyQqHL92XIhrNajY0Kvn6hpg\nJ5LByTx0apYNG5gbyHwfd2KGmPqi2rCtl5CFLb7i7+Sc5yoMJfFMXP5HwLpK\n6LYgMvKIylK6GOdYLlFCVlEhyYNzvk7un663LIpOQB1tupaMj60yzKrlvUBX\ngtsVGLM2cxyB2GdEw/p8WikCrlPezD2JBzCZSZICpQ5oQ1E6JsrUPUepN6PG\nJPoEmJcJ3909aYGSAtBBYZMzZe8kxfimA/PH6CDZje0FRSQYvR+qwAM7JH4T\nfyqJ6JUSkrzUf2ht+wSE5XiUd7d6r41scr0kjCyFF/dscDOvD9EKF9zQ1p1J\n00yrxjMkyI+1YpAYeUKeizxfyp8vMRNBZzkw0B1jo+c8kyAEJa/J99P6S0mH\nkTiEj3gxFnzGPvjx3HYxF91a5Fu9Tti6GcHjnfdJlEH7Ioj2RhuFjK3JZchR\nRz17BGPggbzm7TPPfu63bzvWudYZE7nY42RcdQvLnl56rvaIihJu8pWUx4PT\nS0TN7k+DAFj9ZJvI+7UQPrS9dkhN6BqjjFM7EHpX8aBdNNG2opo5D2mF5tsf\nSUZTAeNeq5lntuYu/xgXOs2xPzHXt/T1IuJ69Ouysr/y2Ly+evobKmkRyzPl\nx8QB\r\n=YMi9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7de80cb2ccfd67196d7be3fd614cebb9cd73499f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b065a4d2b.0","@material/base":"7.0.0-canary.b065a4d2b.0","@material/theme":"7.0.0-canary.b065a4d2b.0","@material/ripple":"7.0.0-canary.b065a4d2b.0","@material/typography":"7.0.0-canary.b065a4d2b.0","@material/feature-targeting":"7.0.0-canary.b065a4d2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.b065a4d2b.0_1589985434577_0.3795324439318102","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/form-field","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.4ebce8d78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9e2d75fa8c1c8a1d71f2fe852de0ce221913330","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.4ebce8d78.0.tgz","fileCount":34,"integrity":"sha512-AWSAo0hu/7fh0KUjQAqE0nEcg+I2WHU5Drhgq0VVvd+s7BOYGV3Gz67TVvTIZb7k1XCHRogZquWo4yB9MuYT8A==","signatures":[{"sig":"MEYCIQCHk7pO9pCEoC2eciQofN+0wOemBEcXu2ylWPmJTbdWcQIhALfO1SojS79aInLrkc8DBfuzeFgrbwvUYnqs3ZmFBWJA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZgvCRA9TVsSAnZWagAAtYoP/28TQNfsRa9wB5pgrtCM\n4qM/9fSmVocdI6gyVFvwLTtHRWPFr5otrSDkySY6UYr7tMXhT3/iqNTo3L8h\nuKol0fC4WXe1AkmIXW/ub/brx9f9wd8CH2FDEvXWYf7L6UGu1u6HOBRhYghe\nuykKu2dblu/yt2WcF5DZx2ezTfQrIni5cfrlDsWP6rAZpknyEQjCRi8C/7X2\nwID6bHltUauHjtbtwH8QxhOVGr9jlvfC9DI+FPoMnzp1D3cULm6z73aIZiTU\nqkR5gLr80fhnA0c4Gp0i1Ma0ospzxpohAv19WM+s3fuVYq/KHT4pyNQptLKc\naS81LaRW6QRRLJityAWf2Cw188kkoPen8+FddrJJ93VxqfjEtNKasZF44iWK\nr2rV6dtpmQ3F1NII0qFNZiHfXgFs/RMrrxWF0K6ryL0848mccG+oFlLlua/a\n9G8xIxIdWrxZi6UEA9tBo5wL+XsHDgtZvkKMbZB0a5gbJ+IO4PFf9ka/BVjV\nrRIs17/BM93U4gzoURnLRgOQN2h3UCBeXpl02k9IRdXFb8WHREYOzhrjsVPY\nE77hD7cDcBLGSAwgAN2SVYMdt6o08wXpmgbQ6pWcK0O3qlOKOZRvQMDyNa6O\nIsNF3YNK2uKn4WjWBwhxMZEfnJIfoIUylraB9+iRHc78R0ZrmJdxPcFxOb+S\nVMMo\r\n=MK43\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d7cc6c4aec24377070d4417765fa102dcd7c7e0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4ebce8d78.0","@material/base":"7.0.0-canary.4ebce8d78.0","@material/theme":"7.0.0-canary.4ebce8d78.0","@material/ripple":"7.0.0-canary.4ebce8d78.0","@material/typography":"7.0.0-canary.4ebce8d78.0","@material/feature-targeting":"7.0.0-canary.4ebce8d78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.4ebce8d78.0_1590007854739_0.07874670303801068","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/form-field","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.b0fdca492.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c50ad0a9ade5f109097e88ee14ef15bbdee09de","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.b0fdca492.0.tgz","fileCount":34,"integrity":"sha512-qECgTRiAhSPXWp0A0x9zbFu3BUjTHnp2KKE7/7SzjxsNCfEG0VHQkLpqDqVSk0n+ZWnb/woczrxpLzUuHl2Z7Q==","signatures":[{"sig":"MEUCIQCzVLZd29fSgir07SQZQm5BPmy9OGdbPqrcgK8UAxHc9gIgNkdos9IkRtO0LllzzglEHYpR0qVv6T1ChavOgf59wAo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbctCRA9TVsSAnZWagAAfVcP/0rT0++f6ugGbYO4fhyL\niIX+1kowehhor1WhYPbhcY2gev26v/RTpVxHN8HAb4zHKm4T/i1MkIGL6e+O\nicE+Vuomnxez2comaGelkciRw9t/2eEpJ9IGMIQQ8a/GhZwV99KCjQ/rIKf4\nsjCJMJCZRUHSm2iTaUHILZSJTQ5chhiZfMlihplNwdtpBL3nmFzq66WkQDqE\nNSMyBzJjX9x/ndGOtr3ySbi4DB0SnZGPtbJ6k3z8ABLc0UBA30lV6oE8Ea1b\nWbFxS1haaq4ajA0JHhEAeo64Z74UiI8Q/eKNBQzr2qi/wbyerttuNQengzGY\nryIS3G26jRE4+XgexnWiSRUvhbS4JEFarG+x3pjIvRHXKqmPFKqHgYsraVfB\nY8qR2On0roAJzhpJ3nDd3KPSu6jULZN8g671Q4uKnA/OqPhFVxSX1abTcIck\npz8WPd9F6mZ5pIIbFYNr/Ch7N6KM3NWCjT1krFkFrM2mRvQkSJx7UDCIn9iz\nFd1M9n1ywcCj3eFbAfX399XFnICkTk8nvRMmSCGQjo1vbbFP826oawGP8d/H\nVA7GGyqqJRLZ+KFS4k6SxNVZe1Ubp1l7Y3G/72dXIzz/s31nn0rDzL/lHuSl\nWEMV12m+z//eoPOJ6x7wPU3ZXnAfRPJiNLe6Y7Vf+qaiXyBSxvXoGXFAELdp\nMRQE\r\n=Q1kP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"590e5f052548986555dab713a1bcd253b6dcd01a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b0fdca492.0","@material/base":"7.0.0-canary.b0fdca492.0","@material/theme":"7.0.0-canary.b0fdca492.0","@material/ripple":"7.0.0-canary.b0fdca492.0","@material/typography":"7.0.0-canary.b0fdca492.0","@material/feature-targeting":"7.0.0-canary.b0fdca492.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.b0fdca492.0_1590015789219_0.5106684778785933","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/form-field","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.c67667e8e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ca9c3c9e67496f07f375a417ea08681eaae3bef","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.c67667e8e.0.tgz","fileCount":34,"integrity":"sha512-t+h5ocehY7ltEQysxilVQxY/n3GA1lXxwfW0DSFYyrENQuYMoF/Yx+xl9j1C+MJkWUHkV259OHEtVaJUJ52YKQ==","signatures":[{"sig":"MEUCIH0wFiQKn8KZcnXwzKT4jMdieaBMnu4OuS2cPUf9U3N7AiEAttse9jBI8xRgMDPyaMkPGl8KzG9L/jnRtoxEr4x+sVk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexox3CRA9TVsSAnZWagAACxAP/1aCL31VscBjby7UFo/Q\nKfPZaqF/yMA+JRkk4lR0wYaylMKlNC/I6SS8ltZAGKmIfHekPyYPtGrQpasL\nWZQ05PlmC8BV6GgAFD/4Mpfq/dEu4Zt0JONQXHC11mt+qQekorb1vtZ4ShU1\nMqxrW/jyPSNzJ2ESqzor4ARAj9jrAFTijri6sxZIQ+KcaJngGpBGkLabWoJV\n8We9S5gODsJnpdsIr0wnwuB6qvz6MqwSc7JTHMDEsv1lSfCOYViqoZUompLL\nucBuFHbEy4krOm7Au7EUdKtcdF3QmXPfG1tu2ZPnlCRGCE/i1Av4gmGsLsjB\nChJ8MLkX8JD58vyM9DE0UJvXUy4FN9mszIiyOIUb6uWB0g1RVvOpDflj3ZFz\n8vIdggJbwkVCO3WZsB9RO4YVzM6vqkUxKMD4oYSPQF05jHQIh5xYGQ4bRRO8\nap373r83HN+W4jbLSXdjBiyHp0KAEQpo9wSm4pr19QUMPWn7ejcCS9h0tANC\no5B/F9VOILlPxkpBkm4IGKH9/Nls8/ACgtHCuRDAyX/5IVq4GDc/G9R8q6vL\nfv3d1q0U3TuBVjCQA+dDTplSEMueP+3MbZUksEAWK1SNxnuGqjS116prsaOh\nc0TGBj05YVwkbSVmlNMRKU97C3AGQwcLEFz2U5wiHqV403GINWecg85SEJER\nr9q7\r\n=joUA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"405f1e85ef85a7cfb12bdcba9816d716433463d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c67667e8e.0","@material/base":"7.0.0-canary.c67667e8e.0","@material/theme":"7.0.0-canary.c67667e8e.0","@material/ripple":"7.0.0-canary.c67667e8e.0","@material/typography":"7.0.0-canary.c67667e8e.0","@material/feature-targeting":"7.0.0-canary.c67667e8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.c67667e8e.0_1590070391348_0.010414554005054866","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/form-field","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.62b5f37db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b53f65c5b2874a3614a8fa42ecdf98d93bf3ec6d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.62b5f37db.0.tgz","fileCount":34,"integrity":"sha512-swMsOvwLntTjHl1Sx8QUsqVpX1RbiKfJyfmEHRBzoWZoABoYCkE+C2vqZqw+M9m46YzuCOiRQLaxNSla33BipQ==","signatures":[{"sig":"MEQCIANWycY3H8zV5Yq0p6gF8uX639KwDqdRHDIsZIrbv1sEAiBU5nKe9rxH+LT43k1N2b3DF0ced1k92ny2Y/l9B6osEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq87CRA9TVsSAnZWagAAsgwQAJm5lB+MAn5IYK1SaFMG\nzRsQNpvClt++GKnxem2ZTrQo9nVXfusCNY+yI1z1Os8CV2UXQjbNHQenrVMU\n6G13MZrHwzKyxbtgyKhxiBMbR0WcP5msVxGXSRtmQA2XVrYHRg8F6/2uNCtx\nUStcERrbsNm483hcsPR1+hU8VDXOkJ5TlNPJEyDxZOM6C3sQrLmQju2g0Ji7\nytGsmydaYm5bOuTxM27sSAxk11rXWaogV8BYUuqiYRxMWal1MKXujRbC0wkH\n2xzXcuJEwQl7sVekHIYeclxlA63X3X+WcCSfi5iaNhnjiY8b9dqw8Jqbfd4n\nt1w1QUBIAU4DQ9/ErmkgFW6g/Qw/U+656MEUKcv0jmCTuORgi6J3o0l6UsLG\n4kldWfanxz7cHx1OxT9ntzcYDvifQnI5PkU5yL4BJPglaFM/EHX+/ejDVAFD\n4xodO6oSB5wH0c0XKZ6Gd9jWawFrxLOyNzjuywOWlk6NTO2VvpkfeJ9FT9XU\nqxCRKraxpZz66FTb+4Hkp/wQbi7jX71aWsJUOa+djPBUTYJYjQul/l7LXBey\nSiO8KPYuQEly/im+pmXqPgk/ZU1uNM80KfTbJ0WsNs5rQkcLTCoCpBDf0Cyo\ndG7mosI03xFFCNHDHAI5934EJCXGw7XonEDtCTAotOhlQAy3kimt4HXRRBzb\noNn7\r\n=HrD1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"62c869c9d490fcd3f25cd87f251a83b273e32736","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.62b5f37db.0","@material/base":"7.0.0-canary.62b5f37db.0","@material/theme":"7.0.0-canary.62b5f37db.0","@material/ripple":"7.0.0-canary.62b5f37db.0","@material/typography":"7.0.0-canary.62b5f37db.0","@material/feature-targeting":"7.0.0-canary.62b5f37db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.62b5f37db.0_1590079290768_0.9922187802642752","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/form-field","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.2e218dbf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00eee3666c303d162b893f8d96f71eaa6d7a31fb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.2e218dbf8.0.tgz","fileCount":34,"integrity":"sha512-WZmAgs2HC3/iW0k+PDprSxLKQA4FieXfFuSNRfZuejY+2EFNoyl+Any8pL+dLid8p7tbScV4kkfhP0fuGJgOvA==","signatures":[{"sig":"MEQCIGMgmmTNABZKRxzwV0hl7TInENJ5De91QeN34kqr4XoAAiA4LweQOJcBeaJE6rm78ajY84nac61CnSmOi0TZe+6Zzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrQiCRA9TVsSAnZWagAAOWsP/jHJagU/BpjHEUNurYpv\nCFBhoLLN9XHcRb6gXn5E8lTA3//B+WsbUv/dqSB5DAam0/oz3G1trml3HgIj\nEPC4sXQIpriuhO1WVrd2zAkBTNJBnF6gyp7/lQT75DqqiMne93Ql9ZGc3uKh\nmU1rcTgTv4skE/6vBuHLkohofxAiaz2fs/uOZeaI9fwxam4ippCOADffVJM9\nWCd1Jqb8EOOkH1n4mlvB9vnF60ZOkz2E59ibZ92Cmd8A/g/A5fMpqEUq68Ec\nOSLbnAkiLFyohxsZgwlCFcBgDFBmASabSkWqpiADmihfqKtUJWZW5CX3TAOu\nPlhjauvm4DjAZLzec/3qTI/ptcU+4GLEPbyw32H0im2OdvcXu/HvQ892P18u\nCm8ZZPOhE3L0J0Grm0w1w4yOMCFL0NbdrgsX9JuhBynh3TgzoiVNJ+IB2Fyc\nMIVCI4bx+zVrWDFBylWG7wmsceemrFmLGu5L5yOyIWKWFz3VmBai2L4/lY8Z\nITN7d0Joa1Ro1rSlZy5Bi4bSxdXw93KKIFHqkO+EkOYTPHRncccROzo7zMms\nNC8ChFm4uTZrsq1oEYFe4TJ3SMJ52BK33yB0FuISRKysmNCX51lGNNeBPiWw\nfv56kGMlgEuHnfmwVpMKLSepYRVk4ihpyaPBSXgvhhcRwFuMY47NjLX2XiI+\n2ozs\r\n=orC6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f9b76f9144a233e7569877ab8f0dbbb1be555055","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2e218dbf8.0","@material/base":"7.0.0-canary.2e218dbf8.0","@material/theme":"7.0.0-canary.2e218dbf8.0","@material/ripple":"7.0.0-canary.2e218dbf8.0","@material/typography":"7.0.0-canary.2e218dbf8.0","@material/feature-targeting":"7.0.0-canary.2e218dbf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.2e218dbf8.0_1590080545914_0.04068816985419765","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/form-field","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.7fd792bb9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16807efaf36fa6814ec55400e9fbb0d9325a6195","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.7fd792bb9.0.tgz","fileCount":34,"integrity":"sha512-RGc+waR7udLuvjjnC3rkOas9KjiCxa0VwWuCpwhb3EmTTmUfKeSLwJ+WbPbB447DGEIeQFyrKbGmUpqxleNT4A==","signatures":[{"sig":"MEUCIQCtU/CjP0KjIiHgWQs9MExn82KD8hb1gtRiK30h7C51awIgKDlPBC5Dt5AEOuDxFDeroucJvBsk+e6zvncdrsc2s+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrcRCRA9TVsSAnZWagAAxY4P/RK25nXfmrgBz1M0omFt\nUf+9DhaoZkeN2FOdJM1zvoaQepxwI5kMVXuFthmdsgK6vUuJHfIjwjiURsy0\n8gLwGefcWHp2S1OuRyiA3NvzGnjrhXClmIXqYE7qq6JMquqI/ooRljzipK8Z\n90H+2ThtgWr+quJH0qJFNUkYW5dvjS+W4QDDmgv17IKxKRqe5dPNhRqwTyss\nWKyn+L6ZzvQCwqRx8tWayIv+lLfVhpuUSV2M+GfArrAWac4QC6832b1pNdoB\nxsNYa+ZHg2jQe8nZzDDA8p1v76pOWSFTf/ety4WGxcP9wW/m7hv2xdJEXOow\nAtR31qfLumS1C9S0C3qJD0D2S5PFBPbN4UbQZZGDp/JeCFbeItI7gOzJks86\n4U3guoRu7IsVXU7yAWR/NepzBMsZbSbpJTv9BOwH78znZ4mBw4Vz5Oc6wzXs\nbVpe78ps6+p0ARYB05XNZozxFoeeT/3LkJ4DNLTXZECL86hs2N9vYRgd8gmf\nT9YXrOQA2dham0H0EHg7CXaA9pRWk0444Iom43ZHPbG+2vqXwB9B1XUlhDyq\nG++mbGHwZ3PbpvXiMmi4UBGoMKXto5iCCKe2OZaaCKtpr76Ycj7B0Im5CzUB\noK+gP4ZLABwtUwtlWRWcxHcmvoa9Me+f4vBFfw8qpcFNuxKICgtxOlev6vYy\nGho/\r\n=TiPh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d5ce4b5e7914675090d101b10f10374783326ede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.7fd792bb9.0","@material/base":"7.0.0-canary.7fd792bb9.0","@material/theme":"7.0.0-canary.7fd792bb9.0","@material/ripple":"7.0.0-canary.7fd792bb9.0","@material/typography":"7.0.0-canary.7fd792bb9.0","@material/feature-targeting":"7.0.0-canary.7fd792bb9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.7fd792bb9.0_1590081297215_0.21625175114384132","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/form-field","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.a66493cd8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a781c06dd8d4ecfd132efacdb5eeca049ff4c049","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.a66493cd8.0.tgz","fileCount":34,"integrity":"sha512-kJ3eii6c+eR6faznsIS4O+t6AX7acR4vbS3sXY0HDta5VK4uSUuazosWRp08NaeXmp0Gfaa6FY7r/IjhD6AsWA==","signatures":[{"sig":"MEUCIQCLdsxj6elzw4vui2pVYA8jPdIPnuygL7XJX7qSlw/x5AIgXHr4lXo6eF6AcmqNDG5836HHhRro9g+4M7gLlIXOxhs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrfoCRA9TVsSAnZWagAAGE8P/05mm3MbLwPEKBonMM+H\npHChxuWhUmFvxCJElxutbjs7Jc0UWjZYdPIXBoYkOCOIeFiCfBevgil+XEN3\nhxqyAJdyM7QxL+zZcQh3EjuGvGu3+ykJ73qNBv+wRoF82NW9Vt+T1KX0QoXi\npQcosqB92OofAOBQqUYM9HCyaxrNZh1oS0MuaNs6poqxSFeKMkGvjvd2nP+q\n5qqHQJAnBfJHhKVD5gN+hK/3oldccXMEz2rHXqdIHfbbUW9owkRnty2shL76\nawGyb9IrAjKHtvh0YIy6CikN49AUw+UiSLKwX3tF0x8TAlBZrHw2MUFthUF5\nR5q43xSPc64Pe7fcG5sSdo7Bb9tHdDxcgXjgilpfvr262ssdRifvnMs7/uNs\nYifsuhanRhzBK7OoZKO6FedGSqYvM1wSZI//rVhN/UkFHqUagTElcHAOeyxg\nj47yS6e58msTDXhITtwJiS8v+YbF1F7XPhxfFoUeg3O+Zs5+9swPdGyuBqMX\n48QfXCOsSsNLB5KeHYFc21xlnNwOeEDcpRZk40t6OKVwLlh4LavU06uffEOL\neFoVMNtH0HRhcpqIpSvBkxZgYmXhlNYcyxtLkuda2XB03yuHUOptcSLwSUCi\n1P1pdey5xCtsarWIQGYQmu7QhvTqWI0Zs7GHouS9cbYlyyCb7favo5yM2c+d\nyO+U\r\n=eQW1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a14e3cae1fdb42680777a9a6b5706060924d68b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a66493cd8.0","@material/base":"7.0.0-canary.a66493cd8.0","@material/theme":"7.0.0-canary.a66493cd8.0","@material/ripple":"7.0.0-canary.a66493cd8.0","@material/typography":"7.0.0-canary.a66493cd8.0","@material/feature-targeting":"7.0.0-canary.a66493cd8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.a66493cd8.0_1590081511784_0.004081043962359976","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/form-field","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.da05f66e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e346820ac881c2fa7bff9cf7d51504a18db8aa0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.da05f66e1.0.tgz","fileCount":34,"integrity":"sha512-Ta5W+xukOMFQBD3mqlVK1gfCsoOl4gOSJFu9o2rX8TMsJkvyN9pkT/Ziyaezid77jHBGEvVtGFqByBI+ZnbVSw==","signatures":[{"sig":"MEQCIA9lRcGMe/IVhI/DXrQKSR7js7C9Do5ZmhSztk51paBIAiBBvWQyDVNHiHHOmT1kYBolehaiKEJFXiyX6pv//bYxCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrhXCRA9TVsSAnZWagAAGL8P/3msv+OnoV5z6d9yIMaR\nR1qL5l4zkkPIo9tNRc0dYH5JcVi3vW2YSALkdIDsVKUVaqFLEFoaQbeypkVj\nO7rgJGrqfYw664m7Z4zyiiUg0YobIhsLu8vkvvkOt2EG2xRnDkD9k4O6q9OD\n7zznxzZsO8bRAMSB0ZspsYhy3q0XOdvoJ65zuPXfZ7lsNRbnMLa9MAu8iBhr\n0Vshves23YGbJifZFBQkg9sLU1w1CUhmvVF2rFbbTuCnk8crx2q59OkhpWio\nUh2aWIDrbgvaIzYDb9WJAirXys5eSjNQayxZmfUGDUR54mVJhaXOGapyAavI\nZwf4888lqP0mBBa6nlYl4y+HbrGPUZfB6cHsgYzOgiJPqUs+j2PaM6n1ZeTM\n5oIVyMzBtSp9MCGWy59COKaWbVrhQOj14jFOMl8XnRaEmVxttMoz2dIjsi/I\n0i5neQ9zc+aAXdHwxZhgdLNwSQkKEL0y1EEcaG6ssW/3a0TbbFIsyr4pLIGS\nSzNBJEEbbE4nHxtDuFSbCqisIQLMRM5CvdREgkG7mdyb1853ztUpqZdLnVp5\nduz8qnsLR8dk71LFCUbjHF7+cRL5CfQz7TMdxIYUudrN+7k0XqZ205y/9ssk\nEOned9nLkYwTdJdwc5oceDfPGHqMOnlvjroHjNl81S/DomkD97RkvtjWN2kM\n25X3\r\n=qwCK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"97f495e74f33645d8f066a4be88eaba95700a4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.da05f66e1.0","@material/base":"7.0.0-canary.da05f66e1.0","@material/theme":"7.0.0-canary.da05f66e1.0","@material/ripple":"7.0.0-canary.da05f66e1.0","@material/typography":"7.0.0-canary.da05f66e1.0","@material/feature-targeting":"7.0.0-canary.da05f66e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.da05f66e1.0_1590081622842_0.9900711802549047","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/form-field","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.740860e78.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d8c0e2278eff708309f39bd1c92e110e8c64fac","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.740860e78.0.tgz","fileCount":34,"integrity":"sha512-/EFTs50T0kQgAqzRrFz/a2wtb1oTBxwdfZtgby1zqqbR6xxWPSCfK0S74TrnuoOtp1XUKmZRwmUK62hiGlF61g==","signatures":[{"sig":"MEYCIQDK17/Y1ZO9iN984yvk5caexJPWrxY99axyIIF10uYTPwIhAI200aEod2LMh8YWZ63uVAgjCSWwamNlK+usBzI3RhFQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrnmCRA9TVsSAnZWagAA4WMQAIaKB0kErgO5su68+5Mt\nBmD1zN8XZ8T4PFtDNPoExfEBMLi4ELT+jVrwpMwbn2laEbOfFkv11n6thtAQ\n6tYU6Qa3+rJAYsmWmvKJPLPdfNMnxcrbhJcbbXRqAft8sbFwwBKOlm53sbCi\nSdUWJ+H94jSAdSTjLPuWltAm6OQo1hYJhWEPNixhPY55q82SgMBvzqymOv63\nDt0AuTt4K6nWeNSf09gOj4At5oLaFU7cP5suHI1Jx0glugGF1+BnOQ2wzONk\n656kCR0KoCn7Upa0uczHu95b4hJdrdLbwWb8C0fkedVFX6y6XA23JZAAI8IE\n2vcrdvtMJOHWOathfwcRZ3WIRuOYSUb26eHvod/o0vC5BF7BHmvThhcGw93d\niVVFxKMDgdKuQN3HyiVDW9ak6+T3RF9yeYJlO6yHrTaJKPeHn+oVSvUdTi1K\n9ZeHCSuv+cDuhYYO/tflOOsUhkWEW1a1LwPsJN9gp/ebXRtlLd4IBxkBMCAl\nq/S6UAEbxuv2f1+ffdDSJ4fphKUIWR6VQ+A6QKMGIov/0UelFIaTYrl3N/N0\nsL5xhPFBQp/TJopkNhSNYkXKihpwii6mwRGa0EfaeEkWIO0uffOTsBj8IEOs\nPijG0Xaap+opsswhFixBSUg4uL5ZJFhbdBjS2kK7orSindjh/emm0kgnWRdM\n1lzs\r\n=RvQL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2319c23e86ed8e7ed27865b711bb6ea6970b98dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.740860e78.0","@material/base":"7.0.0-canary.740860e78.0","@material/theme":"7.0.0-canary.740860e78.0","@material/ripple":"7.0.0-canary.740860e78.0","@material/typography":"7.0.0-canary.740860e78.0","@material/feature-targeting":"7.0.0-canary.740860e78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.740860e78.0_1590082022203_0.9499969785582163","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/form-field","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.5cea2610f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ae319e533e40a426a79b9ccda98e07f458ca0c7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.5cea2610f.0.tgz","fileCount":34,"integrity":"sha512-VdJK05afY+ggETlBBhaQ484mIpmUocJhkEUaDHEMrggbgY8+CwYYPI8Vhva35hVJh67bE8/MF/Zwoh2Ils7kBA==","signatures":[{"sig":"MEQCIFmGgvcruKn38X6fNc8l8hMuv1tjsQcJCQCp2pkBu4bhAiACxl5sgqIc+ttsbha8UA/Q8GSUTV+EpBHfGJMdfd+0MQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpeCRA9TVsSAnZWagAA4t0P/05uFXGslO0Y9rvDPL+U\n659sgQ1PCDBjYrabcFcAMmHSlP32RD4mu5da6Ph+5ea1frsYnKLDmj6y/SeQ\nxNQrFYwpQHF0STdwZrrGOz52RI5Z3TYn4b+VRWy246lpYSNSqx0s1MKCmWHj\na4Zrw8TAZXMXZJWJI+nuNtCKUDo+k0xAHFkroG4zu7ddFJFaL3Wr4p86XJzY\nE0jWSj7iERzNMfvge/TObZZmJp54J08xHDiPGXFeFD1Ri+7Lhsg2oC9hatOh\nLa17ZB1R7ADTGLTiQpydGZk2Wk7BopM0x1eNxTBLMr7m8hkq4J0pCJH7H3A0\ncjzfllUoGMvFB1HjuccNHAlNtWjPTytLUhEAdBPNsp6g/STlLa4F+kGQTAJ7\n7lfDvdLUx8OQWaGlSUQbrp00GPFlBcETgniAiuUA1lUlwXU5URPcw08Z3eRI\nEiga82pONuOp0/S5WQKQwQQn3JGYvPa/hGDAOINXb1NfoqnK98RQZXN5ThuC\nQKsc/J6zor4WD2DKyt6gNVD9AuEv/NT82je0FLItizEQSZEWcpThlIVwC8kw\nNSa1A/w+79FTyyh5ljvizqZ73x/bYXZ/tFM+/qxVgN2zqGhBzAqz7/weq5N8\nwqak2IRNqe28kC57w+0EvYuF7FawQ6YjIcF83vRQx47yMpuVdQQYh6TP3zAe\nO8ph\r\n=EJmH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"647d4356b68bdae8879ed7384b0ed1ba4e1954dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.5cea2610f.0","@material/base":"7.0.0-canary.5cea2610f.0","@material/theme":"7.0.0-canary.5cea2610f.0","@material/ripple":"7.0.0-canary.5cea2610f.0","@material/typography":"7.0.0-canary.5cea2610f.0","@material/feature-targeting":"7.0.0-canary.5cea2610f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.5cea2610f.0_1590082141605_0.5997720433885845","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/form-field","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.cf7747ef7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20d8f2c3cba169b8ec0351b0bf5da52954495f4c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.cf7747ef7.0.tgz","fileCount":34,"integrity":"sha512-IO+nM+frxU3Gwx8/N2eHYuCP5ZuQ1V+c72vo4UnAsMHZ5MaoM3Z6qChE9g2pRvKSToqdva1Urt+6cB3NLk4deg==","signatures":[{"sig":"MEUCIQCT7+dkgnre2qVTCoUoF93+r1E4Ekq+Ohg7xvyCbSUEGAIgWwogQ/607u3UrzswmANVBAwXRmgiRCNc0LtAv/ryzSw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrp3CRA9TVsSAnZWagAAevQP/i/pA9qudDqKcUvc18Sz\njyqq01QjCEelXcqz8rd7aN6P/KwYOOo6+/aBH6WdM80SalpQ4Awgz9kkoXbP\nBPJpjsZXW4QnitSZq4beogywgD3LZIQ1szuQ61xDVMFGzyP/Ip8D8kLm0698\nArCfGnfb06MoLF1hd/QtDuEgxD//GDLWbgkkMAXFWMr+OWS65GgkMh418XfL\n361xaG6zyI6HTkzYR1tbm3616R5BTONgs7AbWW/u1hBg9D6Rq3DwD0gg+ekH\nUxi0pGvGOJPKYzx2YGu3nh0kxNKdRBMkPPDX7Gi+4O8T+MExQuLRjNSzKH4N\nTwKqwm9K8AnJZ12ECj597MjGBVjS0+bUzEPuL7wo87aBWX+9nTdqzjK2Ix3R\nS+jOWKXB6lqPDfS4JUbCATchBVEAvAkg9eaEMKEvlnWopbau2yye4N86ntFa\n19N8iKlsWJ2kCrtIa0OVi8FPYnKbqvdgpZFE237KzjxuNSdQicJzApocTUkv\ntCMMDk42Jlm/p9nD7c3HRQG/iBEWeasz3o6kn0Ks97/tu9UeSnZrALs1JNf+\nOpMfVpfFlJ4nvZeqvv3PY76j6s6M6PhVCCGNpYmQq5cIh67OMF6BtL2PHVHU\nW5HMKZk9KCC2nQaG1fvulX7inJYW9ulh/8WgWVPejfvoRTMYpY5OqN782iU1\nhtZx\r\n=agaq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"12d3ae46d64646ae020ede8b9ce88abc7efd384f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.cf7747ef7.0","@material/base":"7.0.0-canary.cf7747ef7.0","@material/theme":"7.0.0-canary.cf7747ef7.0","@material/ripple":"7.0.0-canary.cf7747ef7.0","@material/typography":"7.0.0-canary.cf7747ef7.0","@material/feature-targeting":"7.0.0-canary.cf7747ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.cf7747ef7.0_1590082167258_0.20071594559203354","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/form-field","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.862d0d7bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf1770dfc2fbe71d8497d50199ee53e5c3d5ad9b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.862d0d7bc.0.tgz","fileCount":34,"integrity":"sha512-lBqtvPT50EVUbE0rnrf7+xg7mNWwdBIDG8DS7GeF3dVGYQI9K8DzIh78n7hgHYwUrLyiq5PYrT2+y8D2PwofkA==","signatures":[{"sig":"MEYCIQCUWEmdBzgit2rf+QNU7t7dEc6wrFnP0dsycbtAuIYPuQIhANeu24YNtE5/wE438me+lPWUZ+FCYeVeN1YRKVeXiq25","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrsXCRA9TVsSAnZWagAAQ6oP/ihNWERRSyNg1t39Ztlh\njU7rgVOPcuml/Ec+SOfQq59w6rUesMCccUKf5rgwMasA9sNg7D4E2hUoSjFn\npP56LzVIHrpZ4cZf+Bjgf+5IZIJWVtszryCb4CSLFKcO73nW6n+OssOoQNDx\n8EXFKPCWBpm7t5cX7rR8jC5suJIlLUCJQNauV7eAqP66gIcAGLjhPUBMFcBo\nmMHZM8jrLfMHgoXXgLcE472ANmRg6RRjJ387cS0cW3CPK3P6ulKJZSIcOX1j\nww8EDwy+yNyR70Qa3cKZHlRBcQ0oOmQeYry5tFsr4rYhEpUOeCIDKWpEG9B+\nLCaJ8n6g3F+YxvWvqSyYM56wvFui6a3TYB/vX8Qdl5C28aeB9aR3bDKB+XW/\nHDbNdM37R6Nkpfq2MHDes32dEaga5SwY7ws84wMfLZjJ1um0su7WS44wb76M\nQIrkgV2P3mCf1UVk+LtaE8Uiv6gLIrb3qdfGK3nrZsnqcsKiVd7up+gZwsyU\n7N0bz8EQXLgtlgkeCWFp/x0IxGKJ75nyopY3vCnZUWl8pyORhqt4j4qx1P5s\n5uGUUTcTkNIqXYEmZ5W2sRlXPqPjQjxhq76EBEC5ylYMX2OXVLF+lBfSWGwR\nutsGCwLMOQ3Tq9Dh7AJK9QzGejpUgrKA9KndD9pBD+loRzJsuoxJMybnTyP2\nh8CV\r\n=Rcnj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"534ebaefbbb3a8abf3be3e2e13c05f86a5461127","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.862d0d7bc.0","@material/base":"7.0.0-canary.862d0d7bc.0","@material/theme":"7.0.0-canary.862d0d7bc.0","@material/ripple":"7.0.0-canary.862d0d7bc.0","@material/typography":"7.0.0-canary.862d0d7bc.0","@material/feature-targeting":"7.0.0-canary.862d0d7bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.862d0d7bc.0_1590082326840_0.2427989289770629","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/form-field","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.0008c8a91.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2a67c0dc012b16fcb5d58ede1a58936717a3c14","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.0008c8a91.0.tgz","fileCount":34,"integrity":"sha512-/E9rKPxU/t/i73smmGdiLwtkT5CHzfoOmocZEW5oKTR0KovQYRqAK5ps4H78bgqIzMeMyNz9DSIjj6foJ28lzA==","signatures":[{"sig":"MEUCIQCjBMoMRtEralBF1hVzAeNxlRNywqnQKSI154zwhtQtFAIgRUInzBmsP4H4FsRbYd7sutwVTmQPaBiuF71xZUVKR+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexteHCRA9TVsSAnZWagAAQ8QP/0YkjgjVa2WA800fL+Hc\n8gFhFnRwuSa2SFDXt2I5t6WKVxMHPOpM6cCXr8IKqNjE//M4U2eDXiCnlJXj\nc7O5o0FHaIAdWlvWaoNmh/ijj8Qdm308pigQM+Gt7UI03LX9NXBz8WvG+dGl\naTvE9XEaw88zu9U1HN0CHoiwQ5EsyCWZN3lcmFeQMnqB0xIWxDspfI12QnlA\nw2WxWHWwNIAJ4CMlbjjQXFDxVTu8O/T9md4F9QAUJEuboknlfPzZzSvSBUfL\nyb6NOuO0snyoBK5lWOw41FhXKwA+4Wzo5cEQFPfiNxfzqYvAXQZEMqGkkvt2\nv1FNlabgx/vVclmdXz52zfoQlYqhVsCKrL4/yHkN4M8NtEEjflhrXTlFoLba\nCqsXxOH1/ZIjOLiE2o+fitteYBibWlxKlKmt0jqcvYpAHNMVEmGCwsiobwBO\nwUgH/BL8IuqY+agnlk/xnw4oDXa7ZczFZzhun3uLwUGD8XvfPfM91N0rfQMD\nBNMgGdoDF1FbJfh17Skqp/8lDfTVIBW+bOl8gGRpe6CpKXEXPQ3DNkJNps6l\n3rFaecasZT4YzTRpm8c2Njllq39hkx+2jifdP/mz5efC/aqlZyYhH5eY4trA\nq23hfK3sZgVRogNsFoEjQY6lxh8bQsLfyNA0FPCPtU/69Fu+g/Myy7KDnRls\nQn41\r\n=eTGi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5bafcd3cd9f6f60ca813af30e2b0a8974de09ec8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0008c8a91.0","@material/base":"7.0.0-canary.0008c8a91.0","@material/theme":"7.0.0-canary.0008c8a91.0","@material/ripple":"7.0.0-canary.0008c8a91.0","@material/typography":"7.0.0-canary.0008c8a91.0","@material/feature-targeting":"7.0.0-canary.0008c8a91.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.0008c8a91.0_1590089606495_0.3166913492926333","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/form-field","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.541638fa2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8142a84a94f106f28d3c6367a0f3ae5827057bfd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.541638fa2.0.tgz","fileCount":34,"integrity":"sha512-LLQU9m49amoPJP+lPnWsxClLcSDuPdAj5pzdvY8zKBmflp2EqniTYfC3LBakvMcZ0bHrBLoBkT248O3mqQd3ig==","signatures":[{"sig":"MEUCIQDKHah312i2G6KWqxhfgHWr5NTxH/0IiIOlew9lH5XGGgIgM6cZ4M9AO4cCt0MPRDN50TWJnPq4Vd43NBH5mv0iVn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextsICRA9TVsSAnZWagAAxRYQAJQZ7WG1eSfA3XnNu0Cb\nygzB3nGmuza+4T4Ku6uHRKBFUdfTKCqLM3WXNTjY9YxqFjyp9y3OxgVvR/dq\nxxzCSfOPbf6Hqa7+FjVGR7p1qyI+ofcOrFVLvaXAC4DSYn6A5ShQ9H6U6J7q\nHU4mmqORUJHBX/8r7tj9fdQBpquDtrMEhzgbbhEevNqoNCBGdm+JXL7FpGvJ\nGaI4OnDRe2KOptplVatmPWVKfvoxqCtXO5z7KNk+QJEBVrwZ79L2cZuw0KAw\nJJEcIHFb1nQdz5jWFhrwXMJ03G8hFCJ9gEqLgmDV7KELfiPvoqlbQTQsGvPk\nIII3JiSkxym5GlxBo7ZeqXB8W4iXqIRtE/MRJbHx09IImwhUYkfdyhnxZS3d\nSS1bpU8jU5wXRmuSb75dD4ksapVH6o5CUuK2zqGWafN0kL7yv3BgvZmL5L+x\nQEmb201Lt3rg872rLaYpdfxFloco4+2RLckWoSk+cG1eYTtzU38FqtSlWZ7D\nCbLhACr5BiYf+IeF30JHr/JXhFp5cMAY4YJedmOTqwAa51MnxztV0ftrj6sM\n6+vyiLNYCk8r7G4yfcs/AGImswp8kbxutfPDYzvDH/A0aYT7hGw3CJ2a0F3w\nPVZ+JCaaeINNh37lXvaRHa0RbpcHJF7keRxBj/pA17B0NiI2Dd34Jioss14K\nXXM0\r\n=WmpH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e9634a8258477402629947671e06d007833e14f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.541638fa2.0","@material/base":"7.0.0-canary.541638fa2.0","@material/theme":"7.0.0-canary.541638fa2.0","@material/ripple":"7.0.0-canary.541638fa2.0","@material/typography":"7.0.0-canary.541638fa2.0","@material/feature-targeting":"7.0.0-canary.541638fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.541638fa2.0_1590090503975_0.5639150094785019","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/form-field","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.6167cd075.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bbf8d62bd55dbf004b76c57967ebd8d6730360e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.6167cd075.0.tgz","fileCount":34,"integrity":"sha512-Fgox8ORwx/tTuumimbWYZv96OxsWpEJzRuv7YOQ6hGqnQ+j9KudYEFcKQMrFC2i2stRZ+lTxE5TVU84dN+9V5g==","signatures":[{"sig":"MEYCIQDLkcfcbb9HSOufiQRXJotYb1RVwOQ+Gx/MlZp3xdPhHgIhAMusxEFHeL0UcDwiZKV4LCkBtLJKR9q0myRK9Y+LOEp7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuLFCRA9TVsSAnZWagAAwUYP/RKPgmHRgIU/nT+yL/yL\nqnvjvgDBKgb1klfZPY7ONrSlbgs2KdeSHUU/k4WN/HRECyzv7hIzabD2vkFK\nusctoo1I2BT+VEK9JaSEovyw6Zq/XyTO+Bb6sC5ZnaOV/fXt/GNFvHdC2DSH\n1B2eXtw/iuJLKI7DPGX0uwQmxUKkMwYeSgZywnlP/9Lr4fTpkP2W6sV25tXd\narIn0kOjGpiMdOdkj3Qv+tX1WcnHsv5KWIR3Z+mNa8xA9SAuaoOlnR0k57zX\nwJIlIIrQuVoC1lKu9qdMSx/W0Ve6sC9GmOzf+BdUzFG88RXcVnxRj23QhWpp\nCHiVY4H086jLLorZGqhOLgr9NrPcpv1xcsm10k5EX4nRM//FA/g/BlzdgSkj\nDZ1bsHlX1K8V0QeXVVrQU2jmi5EE8kIQGjl1pvj98Z+2WxMwrbpqRyZ3vImR\nIT6Bfjq2B8qlevlJP54kOG8toxn0WQeHARRw9YpZBJ5bOc9EjZ/rer6a3wkp\nwCY7hSRE6Vl8JMFRYQU9eOgXAbAgbsui5O3rVEOOgzfkXMWrdv0ZExd1YmWU\nOIbnP0lCDhDmHCnV+sD5w0PmXCB5bCY7DUQJ56WcYQD4Yj5KCtzGuQeXdUAw\nWL6Ew4iS9y8l051KVJI+Xs1mXBNbJiVDIjRhGOklvdKGCyJmHhXLU82LKh5J\nT1aC\r\n=8xb3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c86a924ab304fc32e4e6840c7c8962330b6b0fcd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.6167cd075.0","@material/base":"7.0.0-canary.6167cd075.0","@material/theme":"7.0.0-canary.6167cd075.0","@material/ripple":"7.0.0-canary.6167cd075.0","@material/typography":"7.0.0-canary.6167cd075.0","@material/feature-targeting":"7.0.0-canary.6167cd075.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.6167cd075.0_1590092484456_0.9085558262001803","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/form-field","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.863ac1b0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f5f2f1550ce5996bb9f16912149f32cfff47be4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.863ac1b0f.0.tgz","fileCount":34,"integrity":"sha512-coKPM0vzJoEfD05YF4XvizEVQHAQ+OAyGRYbq5sn7g4psnFM75OK2BuHyXpxcWODyJ8R9NEb3teJ4PA5I9vhig==","signatures":[{"sig":"MEUCIQCDqgNi7lLqwYY5UPYnhtVAotHzb4gMYH6NLqwB5EgNqwIgAqth8Holdml3M/nrUrphQSwdcXfb+LTdzQeABB6cMEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuvaCRA9TVsSAnZWagAAtvkP/0zvYj3evpDbY8dgY2xd\nCiCXUQUSPsN5TQFFXRCi0G4RSaBpdhj9mDsGpuRcABqRX784BLgF8kp8e0UF\nozCHPRKl4QrzJJ750ovelL0fDeos5c4W6l7cxw7o3Xuv62NBT8ePkK3W0ibQ\nlJONk1aLOg0w4B7mPKsF5xtS8TpEda5OzLk9iYlV9SqqRIZ89qITmAzua/N/\nS2TXCb2jYsWYB9lydofRtcikHKFA0nsEef0ZCV17B9hr0dYFiYmhW+x515m0\n/92k06FvIZ7hkP0gksFKN7PPd/mJPGRdOBlYyMMWdNvvvYXMA+9YWGF+yY9a\n04Fk7XcFM1qmFreuY8E1ITeYSvdfQ928sUC8XR27euRoNpsDJshdpr0yzFcO\nsTZMvLS0IFhM6N/FmrdG+DPbsgn/On8gIKbAOwWxs309BmSR6YtWvBcZnEbZ\nsYA841DUocxnw90f7WV+zDzA79xsjrzbJZCW8ohe+og9DYiL/a9Ix40kApI7\n1c/TryU5Ru4vG0gqEYtnbxojfCfudvSycatug5RtDoVKwY5sMSPakW2iZRSW\neAl2xNByYbnD3Hvg+gHy+tKctcHboFaDn+fNJc625uq/aqvPXxdA81u9Hcxu\nT2Pr+W5QQHHUSQkLTLELIm6TPqPsJGyG/PYt1hmVeh+0EeLXChSoTWrdbhVq\no8Oi\r\n=Gmtc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c1e7026720dc12f1bd465dc892c8718b429563b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.863ac1b0f.0","@material/base":"7.0.0-canary.863ac1b0f.0","@material/theme":"7.0.0-canary.863ac1b0f.0","@material/ripple":"7.0.0-canary.863ac1b0f.0","@material/typography":"7.0.0-canary.863ac1b0f.0","@material/feature-targeting":"7.0.0-canary.863ac1b0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.863ac1b0f.0_1590094809763_0.05694225890036897","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/form-field","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.d30a214ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c03483187a7aff52490089064ade5041c49ddb04","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.d30a214ac.0.tgz","fileCount":34,"integrity":"sha512-qHKKGE44NA2ralxLxlYA8RFbRabw9/jzSRQBCoCkRQRO0mLyDqstVdQ5oydapJmPZZO79iQFEunglGAmA59S7g==","signatures":[{"sig":"MEQCIGhnywYKh34UV569O+iZRVjjR/VdRexvrCNxul3TTOzEAiBIX5joQJyOZMdI0sPV2QCls4MItCmIdsbwAGOIWSvlBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuzTCRA9TVsSAnZWagAAY/kP/0BrdqybNleaVSL+tzPP\n+WLDJJplu8OIP1oSHJcTXp41LqnFEEHrr0BGq1ZOlLFOj4uCzvcqJtw2WC+l\nhyqYSvdjE8RSeUqQyYDPltqfYHq6E0TzrxMcjgrnqerUDBYxP0VUsU8NqWZQ\nvgPwORSm7aKBTOwR+j55KIMAVvrcrhku4eDhYCVzhkoHKICUvHb6qivFRWnx\nhKF/FxDjyoTpH5N1TBnR9xQ13fYZejnF8n8jvImjLeFKZaYnBuX0fvbrVRJt\n+3yrbWsCLRqHyvBkYuIxKmrYFy+5Zf/otUt92LDFUUVoz+wer0oszrHU+U4n\nybRfgtPchaq9FdhkhpsdPcfE/tRcFP9aC3cMmSdKaW5aw10jQWEP7j/CMhUx\n6OdJ7mwre430L6TmxmBuh88Pfyq7G/3zb6uzBOPSyLPkCqdnofFl4XNXOt/s\nk05MyJpusKFHRSXzCalj+ArkiatuYyEX8Q+9jFmARG4JEPOs3iTuYDdrZYan\nMhQtQUkbT8WGeuvZAEggYAGLEj4Cv6jkeH9bytUxhQ2cshTRdP1tKTN3WzXG\ncQaoBoOBuntHdZQy9xg1iTp8kZc43s1MqZum/4piJrkeKtH1+H/ZtSLH4JZv\nmUqFhqYnrDWV2a6+QYvLXUJbZIr35Na+kIq0RSzbLhxIH5s9W8oewmMqinHd\nBpOF\r\n=Yd4C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"635c0e7c484f851d2ecb4be825abc36357ffc685","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d30a214ac.0","@material/base":"7.0.0-canary.d30a214ac.0","@material/theme":"7.0.0-canary.d30a214ac.0","@material/ripple":"7.0.0-canary.d30a214ac.0","@material/typography":"7.0.0-canary.d30a214ac.0","@material/feature-targeting":"7.0.0-canary.d30a214ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.d30a214ac.0_1590095058902_0.5439280655390688","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/form-field","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.62abbc8d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c52806149778966d7f844d01089418763a673cfd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.62abbc8d7.0.tgz","fileCount":34,"integrity":"sha512-c9n5rImz7mbBNYYLALqFAGLkJVFkPBOaL8HtakY5/hKea6cIlnVkwbgGdN64I383DXqrhCk9VnLId9hmK1gNzg==","signatures":[{"sig":"MEUCIQCtbbVwueZjFbY0zJ9AFfE0lCVbkGibki8IPnAYgZd5MQIgFfhvbNBROqNdCRn0/T8qifZgADze64fjJQeRMZovSrs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvKaCRA9TVsSAnZWagAAx+AP/ioDv4HbWISQIJ6IEEmn\nSkLLlqno78NKjhhaa8z9BeAsHoVsD2gI7foYVO2/E0UoDsTdK8WU4X7DY2f2\nXNGyliJeYBDrk3dvxJjPbd22WEXFJaOHf5ft3FDrfPQW6U+cKRZT6IUy/JZ+\nRG18CsQiW3cFizxQmrfF5Nw+Fiju1cDL84Zlco/xVkgj/aWODVRCvRhGj5ds\nlCrBLS3WcdopZ5MfnEP60LlyNdKG03+8uVy9u2hDIVYyDa1EjzfzmVn+/KcO\nM4g9iczMPzPuH9YPZM/XTuGGfZh5ESweIFcwQcGAj+1z4B0jgJUynuyZBQtA\ng4DeM1+BZBKj+9boOMQEV0drUrYswClRmI4fiWU8sq9XQbLHTJVmFPL6JqvS\nFM5cx2yeZc8S2Ew+LoqWtzU/eEw3QKc6Zw76glGKeV1LoQyERjTd7QqJ9VqR\nE3NwZK1COkQiESH0o5YqbOEKGOxHOpDV7HUScsrdUzqjPK8dkGGq9jEPzZTc\nmwaX+HdfcIQ6L4m9LkLNBsVuPYvPtkaNEkDF4TB2WEvWgmCGwRyaR/VScHGL\nMRP87Xw3K8r33o6HKB7FxQ/4+Hpg+8Kh2u/Gk5rBPK+s0UvIHI0vL59d2c3U\nQgNai9U6dAlwX2ywFeQrBP/1+jMuaLnYQZw4qG2Z5icWH2bMQxX+dAxDO+0C\nDMgv\r\n=+aXy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6758c29e4b065e2aa9cf633b0838c4ebefb9f54c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.62abbc8d7.0","@material/base":"7.0.0-canary.62abbc8d7.0","@material/theme":"7.0.0-canary.62abbc8d7.0","@material/ripple":"7.0.0-canary.62abbc8d7.0","@material/typography":"7.0.0-canary.62abbc8d7.0","@material/feature-targeting":"7.0.0-canary.62abbc8d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.62abbc8d7.0_1590096538130_0.051443929398313104","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/form-field","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.49bf31d5c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f4c340253e33e444914cff39843c0db7c13b525","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.49bf31d5c.0.tgz","fileCount":34,"integrity":"sha512-fAIaC1wXkTVP8UEvzyO6uCCt/O5F8MQbx7YbUp2davFY7x7938XOFlgFUVapxCzy1t5rQlb36DX5IFuECV93MQ==","signatures":[{"sig":"MEQCIBd1yDoEt3TJCIgCyEK63aqkxxc1Re3UL7tH4Eevb9u+AiA3Pdb7zoRHP23Q1l+SrQ0oAHAbuMhAyXel7I6D++b+IA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvNmCRA9TVsSAnZWagAAtp4P/jPAbXutru4/Ln9ZcUyA\n1HbIubeRXkIHZMjj4y46+bEJElZCJeD2qu8JsTPNgsDRkybKB2mplvzu/fMO\nmuyqX9uZlNJzZgs+h52qm2Ny4WHQ+xAnC5+TM9bSAbfjGQgwOOaDurXcNU83\nNeab7C8IBpcqg21mP+4ojh5OzOA7KXB0sPPdqIQU5emmA2Sk1syicSqCfm35\nofmg8BZedYd2mW7nc8M2/9z/2o4BZ9ejrp1APG3M7DAdufe0kAQtbin6iHH5\n9nkoUqAFDFQBF2pNxMiyinHMg4MsNuCCtn1IUJsGWUhBegqAhxRX7GIoDPOx\nyKj3d8r2/GrV2kAj59S8LZwrbNUEDNIOUuI/YZnpRysgLqUwZOizVo7s+Mfp\n5vQAcrdqhB78/4p9zmNOIHJOQS2jQLh2wVzAF63HzCUMnyt+IjGxhSAwAq5G\nSTQ08/Z8vVYqf1skkSBuGQdJZttE7UeTxT74kPHM5ceJeE7H1PWuXqcWjPR/\nsqftluRBoeqnXiHjKuePDINf+eHOUOU35P7ka7iLbG+Q6mj21S/qNVjVFfdV\nNQmMO2QCPF9W26wthJBeL6bfqoyO5Pe3yxJjNiYvlnbv+jmkWIwEUcsawNP5\n3swOnFvcAOikPHR3qBPXCuVlbx/cCp4w2Z7489enBlv1SrKyy5CujjJdyY5V\nzdOc\r\n=yWLf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"01cd7b0082a754dfb042df35ec48efcd4aa4c52c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.49bf31d5c.0","@material/base":"7.0.0-canary.49bf31d5c.0","@material/theme":"7.0.0-canary.49bf31d5c.0","@material/ripple":"7.0.0-canary.49bf31d5c.0","@material/typography":"7.0.0-canary.49bf31d5c.0","@material/feature-targeting":"7.0.0-canary.49bf31d5c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.49bf31d5c.0_1590096742144_0.04925231955767129","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/form-field","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.8e17857d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1312c39246d3b52210e884d43cfe90529dd48515","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.8e17857d0.0.tgz","fileCount":34,"integrity":"sha512-pz5/hKKcMl7QUE2/bOzVKd+uWWTeu11ElL2RqC2MdSVyre6paul0uyN2i70Xy2xHUjGCkiTd1GOnjEhsyVSAoA==","signatures":[{"sig":"MEUCIQCrzD05sIvgJ/yeC3j3BG1NXTunm4KAhRP4i6BsBm5LewIgRS4zs2mDHegp0Yecxd36uQaz9qb/9Svh6dHgSHMepcw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvOgCRA9TVsSAnZWagAA0JQP/3/W3kBYgvLoEGPtblDZ\nikeNn0dtQy9JfGTC4wb69CpvHcwgvypqTQoSAQ7PYTHczicl81HrJEdMSQtH\n4D1RRVYNX8AN5k7MJ2WmQh/7oOdmQw7uTNTYvPa17k90Km+sbz3eoMhPDCXm\n92bCbkl/ZPYPGYQSTn7Nm9vfMlQMsNatsbOVzJnIOL26M6jrFMdZQVnU2V/a\n+FHTuqd9L96SWLBuMjK74kU5ySbze+nc4UExr/D7yblddea+W68FhxN+QE/j\naToyJ93rKBFfmoEKAp3jYEiZKGBhtWoxonSSougi9LYwBy0gcT/FYpXzrK/O\nm+QtFnrGvCw1NYJpgJAoWmaJFmmDdhGNiV4x3d+IsVAUyNFoBZZCQiB22nfw\nohxGJ7KoAKErJg9U51TojTMg93v7WtyEDgM/MplfB+enlBLeVeh7r/aCqTCy\nwuOmobKZMFs61Fpr8K7whIu6NpjBCVXAxi9iAu6qCbGrs/fw9AAslmob7sAD\nLbwlibW4jqLFa/fwKYfTWOrOaoAarBuyNhB4zUJvmdKGcPeUbG39e1whaoAN\nrr/tvDfPXQpdKxAzWnVS6Z0H27zvNbn5yz0t4eMaSvedHAHXp/kLxpndsPQp\niijnTgdvCEt3y8iJslqYZLLg1fTlQ16NcbzARsXLLE0zXy+KWKp05jyoJlaK\nzOdf\r\n=CScf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9b03d700366fd287f2ec053c5ef4ccf802ac600f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8e17857d0.0","@material/base":"7.0.0-canary.8e17857d0.0","@material/theme":"7.0.0-canary.8e17857d0.0","@material/ripple":"7.0.0-canary.8e17857d0.0","@material/typography":"7.0.0-canary.8e17857d0.0","@material/feature-targeting":"7.0.0-canary.8e17857d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.8e17857d0.0_1590096800295_0.6702934736956279","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/form-field","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.c113fc942.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c9b08d9067d287f2e15b16e374cf0e356939a95","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.c113fc942.0.tgz","fileCount":34,"integrity":"sha512-+UIe4GeFaytPrgDuXIUog9I6Wt0F0mevhxZKyPGp2VfC/NYO+5588Fw1jUJ5LRpGx6GSIHb/i0upj6/1n9ZpUA==","signatures":[{"sig":"MEUCIHqhtUwZlOZSCuBn6gs4TgFnQo5cAHEc+MYkLPwstJLAAiEA9fM1q7yeU/iPrFWw0XvQyQLzvWCs3E9sgR6FzIs3Eio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwTRCRA9TVsSAnZWagAAu1UQAITodpf6NA6xMXB+1h06\nBls5w0HX63GVluT9yyWoG2KyIZdohg5j64qEWbgqO+hmTg6zRbbcopRDLeox\n4CxmpIRyqzxZpuyX7yrR5h0BzAwOPpBpi67qHCk5rTolWPtfCEcBNjpJfxv7\nD8rL0cHGE7Da8yNktXdg87rW/pxuKtFKFeGaIKXNID+HfuSx2c/Wx1TGSa7D\nIDn+WtH5nJseNzQXB8bfkiA8dywpmXRN4lgYSWa56EcZA5QFZaoNKkJWfP5b\nqpGeC0Y1mCr1t86espm3GAWs2fS/OU4RVHAULZDZysVaF+GfxnjbiNdq4egn\nhLxS2BFYPXP6/bvDmrMlavrb079dtNJL+Fg1bXNhfdGRvKJET99nbqJODgMg\nU8rlhg6NgZOnfyAnx/uLE4Ua4Dao1j1cwXfad18JlLxyRwVd92UsztOkxd1n\nXIRXcD4QJMvo16ExPtjbMSxqqRnaS04QBh0c6Hi+7aiQCPlBJ2m1KPYFMqZ8\no2WlmtW6P4q/BxY5blTid/7PTGwkhsSqdVPqNtWI5yV9Ud/RtYqm/5ku0xLy\nnU3SiilUNGAreg5Ja/OARCGyYOUeiNsnh5S/PRyzJjeRWQzRJeQKY0+EnUxt\n3a8PgTvKdsSrGmM+O4KlQFoli3bzZX1qBJrQf87KN+InSJvXmyB2o8w5JxLm\nPaAW\r\n=u0L6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"49605d78c19f78dc1b28a35457efd8dd808621e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c113fc942.0","@material/base":"7.0.0-canary.c113fc942.0","@material/theme":"7.0.0-canary.c113fc942.0","@material/ripple":"7.0.0-canary.c113fc942.0","@material/typography":"7.0.0-canary.c113fc942.0","@material/feature-targeting":"7.0.0-canary.c113fc942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.c113fc942.0_1590101200628_0.38845761623247177","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/form-field","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.912d9021d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d74e7fb9c489597549f49d6676d26df2baf30e07","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.912d9021d.0.tgz","fileCount":34,"integrity":"sha512-AWl23IDe4S6joZuYhW/3lylQ5Ceq29fmoHl+cGliAHfKWTwO8KbpzCpl3fxDzKlapZoFtq11s7rg6ibb8gqCZw==","signatures":[{"sig":"MEQCID9vckzvQzbGpz3ivjoOmaHvRdLoFnieI6AW47AewTM3AiBJ00GxiOkvvnpFeRW0JxivHF0+WoV5q9upGJXqpDImDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWPWCRA9TVsSAnZWagAAwZ4P+wfqoC+Jv2uk7ho0ABbH\ngoPvOyn1V5+VknMe7O+Zl4p9FTbRRt2YgfiwmwMlpM2FY12tI+ahZZKH12R7\noG9zMAGsXeqTOVWaGd99GwmHHK5MRov/y8Ma9NifBZob9hfCMj7PzNEsAnZS\n+PdBLkow8lG2LXywHvPh6Jfuny5JLPRay2DJ0ORkWhD4bzSQCuax/bt2nzHp\n+eRiDkCc7bF/qrqPMFY29xUVTguB9IzjQ3aLO2tiULFaKg4OdfUF6XV/Tu4G\nb0OYJuBdcEYdvpLr9p17nE1P3UzKtjizsAFH0/fDof3Gct9m4WBitxizgrmH\nf+CDMNj3l4rcgsap37oTx/c1T60H90AhbnOPW3K1X/D9SFknWxZNoVy9ZkmM\nGm0X1hSsEh7xzohNRCHPgf/Jav/SS+/RQ82/JfafCBu1wx4CqyrVuHRnDVVl\ngJNCzs13IIvsMsl+3bv9yURAHNo836j3KlnviB29liK0PoSQJhV5hdLGEzh9\nb9mpK6ELo0Hc4wxQVlJo2Lhy76Z25Csf959cAW/P2740cxXW+U9FsOp9xDRu\nBZgELWjZfCKvij1ao7AkjyVpzE2m9UQv6yPX72iKiUsLR6cyG4Al6RQ1VfGg\nLi0FjOkmcQgLueQky/6pvCkBqTrkqbb2Gou2xAW+luF9dC5EUGnQ2WHb+m2F\nTDyc\r\n=J11Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b7080ce5675d8ab69b7f361d040e079511499175","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.912d9021d.0","@material/base":"7.0.0-canary.912d9021d.0","@material/theme":"7.0.0-canary.912d9021d.0","@material/ripple":"7.0.0-canary.912d9021d.0","@material/typography":"7.0.0-canary.912d9021d.0","@material/feature-targeting":"7.0.0-canary.912d9021d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.912d9021d.0_1590518742186_0.5965401504603896","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/form-field","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.68a2af131.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa9833bc9a822e734ea61e19498725ac69b48f23","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.68a2af131.0.tgz","fileCount":34,"integrity":"sha512-PM6VyZP+pdv9jrBfMDftkPurwnT1BvwEt9C+k+LO7U2ARNmicf0zxNN2WcaEJwL/KMMl/eopClEtdqle6NJ9KQ==","signatures":[{"sig":"MEUCICUORYJCXibmeebLoY3T+dhnGPo6byHJK65g1UpfcdueAiEA2TMq7oDUohja8fsMdO1KtlQkAq3BWMvkpgSdCpaXy2A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWkOCRA9TVsSAnZWagAAGt4P/RSEG5+5G5JYFtMrBZ5v\nWZ9RYHwL+3XWU76w9CAmHy18iSnFDF45MXPy5jgxeFJsEEDrkpuXG1MMAWrH\nOz8oxsEd2atQVnbQmSCp0BIKzszrZuGf3VAEKNjIRckJkgTeiAJQrJZsAP+0\n0v7uBX/dJ9pHk1AGQSzuKtADhoURAqqscHhc5EcsVCcdxx6oVL9bl29D2ZjF\n1ytvZ6sVXYubJOLBDfxhZ/q/ADjpi/cJxQAUCOy3wugyapTAo+DvGziQRjR3\niUCXrloWnUKsA+Yf71twV0s3Km2w45y06YkrKcE6v1feq5mplmsgOTtfcu+h\nnyE0LlYtjj+g4CJ37Ap7fEwnLR/an5ZRjbe1tUIucJV+YXObHFuqHIY08aFp\nIj515XzM4f9defQMRFS3i9j5DBKpj/XSgOAoOhvp12FW6aDxz7hqWk4m4xIK\nYJdOiRl8Yk+QSUUSXSJR3j9LWmGvYSvT666NiMEyoY+FZmAmv+EiE2s6tXNp\nTBnaFXEzpKZIDLySZsDXO+FXptWzp7OjR0joZdIT51M6zQVmAhfMGzgiH6EX\ncNeAkkL1ruYhrGb7aHOGE/RGwrbC35ZQexZ2WrvCD8dcDHnVMTvKL5JzSelh\nzTFM9llPkNPJu0wHzdIjkd3rVXntix4XlayH+mN56DqWxvxvMPhxyyvcAdWK\nGIDZ\r\n=Xchz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9fa697d39bb8f18500434764b1fd608819d2e194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.68a2af131.0","@material/base":"7.0.0-canary.68a2af131.0","@material/theme":"7.0.0-canary.68a2af131.0","@material/ripple":"7.0.0-canary.68a2af131.0","@material/typography":"7.0.0-canary.68a2af131.0","@material/feature-targeting":"7.0.0-canary.68a2af131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.68a2af131.0_1590520075270_0.7822024107196184","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/form-field","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.01de07011.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40fe6c00b505e5cf2cc7b9af92b599e3fd4c01bb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.01de07011.0.tgz","fileCount":34,"integrity":"sha512-8JghcPQZJ07EmPbNPJHcI7I7E1SbIjJukU5BiZXEJZD4QhsdBMmyEv7G4/SZl2I3T2Ah8w4vHNRhr0NYKTzcdw==","signatures":[{"sig":"MEQCIF4hBKiuX+cVXnqqBufrTtwBSYVnFB/ZK5D5aYzGtrUyAiBWXRMTr0KkDmA2LZGdaC+JiHo+/rAibzh0GMSSQcoUaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXOWCRA9TVsSAnZWagAAgj4P/jHvcHcf1SqxLihU9Pz6\n1X/yVLtgz33VtFrblcUQlrAc7bFynA2n+wEHiGQ8EZ0H8TE+qgwCkS2bSNFO\nrijeGVDzinsjmq96gW7A+Y9hnBt2ZN5GI5O+fusiapRzGRiJD6Y4CLxKhcoF\nCq2UWh2UXoFoXikAcVX7+iaj1+Wt5KRjWCrtjSF1oVZ+cm90iMjTmfs6zUT2\n/S94YGxPKxJqWIBT/5H0DB9CLjPjo7yWTbBCnfOIbGKMfKFm9egYFTGsoVlN\nfAWcWyoC8jR6fY8sl87GbmgHyTorkrk8VqKnxArk62X37WYQgAi0VP23QtA9\nhUcQNoVDLM6jt4MTs8z7tdC9LznrY4iV70kz08ZAxgNYG/65t4dZhVgdwZkR\nX5Ga8OkVEcx7feCBVqfE2g2juiEMlf2zuEWO3erwGtwzrLR9sOVcnqcThmyV\no5Jhsdy2shZFtJcYhxzkkASbdIU1BfDnYWQl830BTipirUaOFT3cq/vcHUM+\nzEc1FRNrLL2gR+VNFW2yMg8SIDIDzJ44TriTTwSh73U/E5Y88RMFXNyQOCPj\nq+zkJ96YxbMvbE6CDD1wUGxiQag7PYecYp1PzOLPKnSFb+HyIBzFW9CFGC//\nPwgqAEDRVPa9jFo1D2BLMaWIQJ2OCqAOnjLNHkPoLHoidpSlTGn3zyAM/hfC\n3ogt\r\n=4t8e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"58ff4055affa7a1d66e79813fbb147990e5360e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.01de07011.0","@material/base":"7.0.0-canary.01de07011.0","@material/theme":"7.0.0-canary.01de07011.0","@material/ripple":"7.0.0-canary.01de07011.0","@material/typography":"7.0.0-canary.01de07011.0","@material/feature-targeting":"7.0.0-canary.01de07011.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.01de07011.0_1590522774110_0.6198698932093638","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/form-field","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.51d4535fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"291b82c33dd8d9ac0eaa9eb3622d633c891a8bf7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.51d4535fe.0.tgz","fileCount":34,"integrity":"sha512-aNxexQkKLW3NYQkVkRXDIECI+QMfeolX7Aqf/WDhL90aGNmAQGhgzo3ll0P4Nl2JN4LgqhVcmNZVZ/JR4993EQ==","signatures":[{"sig":"MEUCIQDUfM3qWeTVVJor1tSp/tOCafS15drThYECoCwv16U9+gIgFC2vUo5krZfg0zG0WaNGgXmILkvg1ELdU9294u1RmSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYulCRA9TVsSAnZWagAA4ssP/Rn5bScHsJkDo1xH9mrm\nJUX5jXe8sTvLdDGhpNZz9RMkdAji1KwYtFObLpC2DC7YSbox/CNmnVCnIkN/\nHWrYIKEYzUkOlTDB5DOoatN6+UqsSqV3o18J9ZW8sRQLA22SK6Lgekar59Aa\n4pbY70pEGpEwM+ahQQLyxoyIQ/vMj2b04NB/sYthExH2KJK1hK1k5c1Gx0HH\nQx1rHf8foaT4N0Nw40/8YxmxbEw9MMKSZsDWd+yEygfi+yAPyuGJVApYdODt\netk3Z67hO0Nl4ZojTSO/jaLCP8FAMQkkc197iWtYyfs+Sy4kkRqlV0dF1dvh\nIFPvMY6bZsdSR6UqwKWcLloMVpVEAweOlnykic4plH6A/OaNKbIeJFilR8A5\ncA+neHPNb632Bk9pTN1UoSGdOrKrGEP9k8Ax+SLbdE0WLvURxr0m8bZbF59L\ntA0XBIFkOVLXKpEo+uCOLZ2k5AfK/3rRJSbTvVBp6idEK5R4ofGp7gr6sD/f\njwYi9/53xwqlqW559Unkvti3zBXGiYfjrFhzuKv4gpYKyB7PV6gx467zdBy/\njvwvA05Lh5o2ow2WDJhhNtd3ehbF1nL8g3bw7yGAvgHXo/OlmU0TBXu3pwzb\nUyxRO6htGK7RHzkdLBnHq6019Y8xZgmDffwtCeVrygm+y1ni5y11Ikqf3O/5\n86ex\r\n=sAnv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2ea346ccbcf8fe2cc90f893a510a194ad4f67356","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.51d4535fe.0","@material/base":"7.0.0-canary.51d4535fe.0","@material/theme":"7.0.0-canary.51d4535fe.0","@material/ripple":"7.0.0-canary.51d4535fe.0","@material/typography":"7.0.0-canary.51d4535fe.0","@material/feature-targeting":"7.0.0-canary.51d4535fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.51d4535fe.0_1590528926924_0.4016882027153157","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/form-field","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.b86d826b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e222d2fab0a2d427275f67e2707e720f967a908","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.b86d826b7.0.tgz","fileCount":34,"integrity":"sha512-3Ci+yL4S1YlKvPLjlL4n+NrObyfVLQPNnfUKn/FMzKz7lYGWN9CJ4fhW/vTnMlh0Xhi4aMA+OH6ArmF1NaW9kg==","signatures":[{"sig":"MEUCIQCOM+k1VlkxIYj0R3KTG598dg8tBpL/KFvEFKDr0PUbIwIgLgcbXQcLY98/l8qcwuU9Xk7YRWhSyj+JpuZnh+OX6A8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZSqCRA9TVsSAnZWagAAZDsQAJnmy4Q8Z3yi4xglSt3A\ng97UTNPh6i2lBroax9eFcFAb12g1JBqy+d+ArNzgBHoiRE/BVbPMLMyNyin2\nqcAmdUxkxcVgHH0D0O62S7Oh3+qqkj1yXZItGFlPJ+3yq0dynathe+y/O3RN\nKpJAkP2N921gZvDMA0ex7bFhJ9ksVSkLOKAwxBrRtENvNeNepOe+OHBTiYop\nUIi7X9yCWtrTWAdf47XvUQlCXJgBbtootRjaxF76mw7j+aOH1EhCXxocBh6J\n5MZmCzHq1MXBAgY4jE1/m+9RISTUf+tdmIBrmswbRzA11qiasOJAkKCiyoLk\nRj0l2d9ckEL2NxeN0ZxwZtzKKx1tLyiUbLXjaFedTRM6jlu+POQ3fDIQxwnm\nAOos72apTnKCGBHEAvlxm+sJh1cdLRo0fRssrigLe+VAg0CCo16tb6lgESqc\nIN/SlbhFPh6slkoQSNljhJZnhq/YLFKA0G+39StdtzVUESWArNQhFJ2cvV/P\nsWxgGweJUZg7aVnnYQIiwFd9bS+ZnmjBzq9bIk/ygfaLEsgDmVD6yy0XKJq4\nKLD5y2z2dEYYKDx1+efestnrkeWdTmfvXYarF48+AcgZWzJtgwtXvU+XuC6f\nWP4A8dEzAZBGpufMmPDPKjeXZCW/EF1pq+A1OdxRmk/ySaOhcQE1UzRyBL0J\nymbt\r\n=S9ms\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2b22865938bbce871e6d1ce8ce0129227142073c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b86d826b7.0","@material/base":"7.0.0-canary.b86d826b7.0","@material/theme":"7.0.0-canary.b86d826b7.0","@material/ripple":"7.0.0-canary.b86d826b7.0","@material/typography":"7.0.0-canary.b86d826b7.0","@material/feature-targeting":"7.0.0-canary.b86d826b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.b86d826b7.0_1590531241859_0.11589360581884978","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/form-field","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.d91794c7e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c72f0195908b7cfaca68939a9c8512f17cce9dfb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.d91794c7e.0.tgz","fileCount":34,"integrity":"sha512-Q1PSX00r/cwhQNrTf7k6U9sam8BVGWftKwwc2u6/poEqryZXHA8V4iNIKROqEz81pvm3c0OLHFvQhlvti+nhRQ==","signatures":[{"sig":"MEUCIQCZWogePrCgqwaVAG0yrEk5Cg6cwvyBlGOmVw+LpfFfgwIgLhBPQvKSdAo8sE6gMqqmJeD2cFyXCGFWmfTsMsIlQJo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":165046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezaxhCRA9TVsSAnZWagAAa4YP/RQqhU2AqT85e/tliTh6\n0FJ/iiW8rsPW1WFjGqsVua0k0wne9E9ysr9hduRaR9mv8w7m2hV1K+4qJk8f\nQUj+m8vPzFYtZldpQXflJQ8cx2+1SnP5aKeNmL+Mb1UgFHcR1ebIrchQ0oxd\niOrDntQxtS2RA4wDWwDhFBIuKZPCOSZBb3DVmtW0j6J4MDy7dOhhgrVJGo2g\nQBfhpnsFX2RquCTLHD22ASKuEMlBod1CSu0/4sq3qh90CF9DYScD1FgS4H4V\ngb3Jy9j7tTH4x6hiWFxxj8XVxRLQKLh5dY0QK0WWGu2WsHo2NtG45o9/eZCj\nSQ3Uhoxcy+SmzsQSEhjw24IMmcUOwBfaZMYGE2UoMkB2rlvgudoF6OHAljKI\n7cbIifIVt5zFMDYa/gM9icZfN97eUX9vovpUeIdPRLWyOFtYKxAjHB3FCnNv\neH467sC2P7qA9wqam8+vrStRfeK34zhvFMsoWjRGD42i7BWfUdrtDHwSsgTR\nStZE8bYTKj3fwPA/rJKurPdo1ZYPm19C5ymW0Iuzq9w85uUsI7pAnUZr4fBi\nGya4dMGKTmq9PRNEonJDfYUeJtXnzgXwgqfJwScEOEvCaBoqhL+8zBc24tW/\nCTOcltZCx5FuI0/MSwpYpfVulDYNhaccJ6yMWzOqPa4tSQysaVmgIM/4zQyv\nc0IN\r\n=cpTd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f931cc9789364ca07cac4a17cef0a225bf43c168","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d91794c7e.0","@material/base":"7.0.0-canary.d91794c7e.0","@material/theme":"7.0.0-canary.d91794c7e.0","@material/ripple":"7.0.0-canary.d91794c7e.0","@material/typography":"7.0.0-canary.d91794c7e.0","@material/feature-targeting":"7.0.0-canary.d91794c7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.d91794c7e.0_1590537312432_0.3250309731653407","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/form-field","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.8c6d7e076.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a9e35d95b659a057c73e13701a61e75793a483e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.8c6d7e076.0.tgz","fileCount":34,"integrity":"sha512-J/AbvA6GVOFZReLamNktV617RrRTZo2r6/5HTyRjq9ZOTWK4MXuNAel3tzQp826VlFg3LX5gUMqgrPd7F6rnDw==","signatures":[{"sig":"MEYCIQD/1AmCH1BRBLhfLuEUP0cqqcPkrx3eyue0HabPIcnt0AIhAJGN6GF//T45yawGY7+cupgCabI1laaNRDCsDh57QLlK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":164148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezriaCRA9TVsSAnZWagAALt8QAKQRk4+rhGYYdvwB14Sa\niT6+JFxcUR6C/8XpAZsWzqqzhouDQXaw0QdwatSfEWKqS4Z/KP1toXMrsB5E\n/FKD9ISQjqdFEju2VEXx0jFCUFf+oCkPWxUtUTmMabpzFwPvu0ssKq7BBl7y\n+6Wq9alHw3iKIiqLwK6LPEyNeuzYhS28YtuyV1mTmLP91QMDYuCe554UUK4j\nZ82fwL3xdNl6Yr3sS6DiKHxoyllfxea5xvdi2Pav4neadGXV487XJ3snNVNe\nfISV6s0e2R4Dn6uSl6GrN1UBrwSNJEhliRkAxc8QbedRSi6/NDMJ4jBHqLbs\nPW9kDjU3QTZmlHbJf2RfAJjG7tYnrIrqgGo3IG2FKW9dVkLWO40dbJBaXxJl\njvaYosAv8lGHPnpMairV+rs6F5oolv7s7v4IgWWnaSlDHv5KDRgjFl3AA2vX\nboVU0yEuFR+s3jqeGDHoYo6+cpvP7LSSnkpIrh7/2qMjXlYe4HLxdNmgFBVi\nqP9D+0xJVA3XI2iKiAFU3iIfstwR2AolVD3aPE1ZCO94JlUg5A55j2ON3JmT\ngRTylhlzv8fzcggJKcd/z9BY8/1FUtb2BbAYQUFF6yW3NNEyZEyIZi7ulcUr\nxON4Q+9W/6RVuK2x3V8IlRN/m6R22+tuOlloAHVhWDJEF9WjQERu/t0rmbtM\n418w\r\n=YNn5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ca2efa9bf20bd3fd24c7f6ff263721fea798614d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8c6d7e076.0","@material/base":"7.0.0-canary.8c6d7e076.0","@material/theme":"7.0.0-canary.8c6d7e076.0","@material/ripple":"7.0.0-canary.8c6d7e076.0","@material/typography":"7.0.0-canary.8c6d7e076.0","@material/feature-targeting":"7.0.0-canary.8c6d7e076.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.8c6d7e076.0_1590605977906_0.7857276568808533","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/form-field","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.5b5f62f93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0cfceea81e3d736adb5d817cae41427f66fa0d0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.5b5f62f93.0.tgz","fileCount":34,"integrity":"sha512-C6KHcfGZF0ySMEUGBEAXxe0KZzU0ZgIKTFMmzqTTHIca9mY6YkPgidInnJl0KiI8gHwA8RFLIH5E01vjvuz33Q==","signatures":[{"sig":"MEYCIQC5sf4Gip037kUvnavxHT2kKa3K7Hrfaxqs99t0+LODMAIhAIqlkteip2Ks9dsnCrBlh8qNK1+TtSApWXOYu/Fs7ST3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrygCRA9TVsSAnZWagAAfZYP/2RNRiT6k8Yu2WZ0dLEH\n5a74bgPMg6cw9qclAZUf4Avxf8njjXL2JfuFLTHaXZiL7ATXkpoe+KY3UoUc\nxRrLC6E/HL5Vz0Dewu7A6ov6RP8MYiS2/zxA/4Qj/nMGJBBHR2knNCRwyPi6\nYKQ7zpn43koODkHYuV+vDIkyIlVESom0TGZ9Yket+/Xot5SIovLmvyVeSrwP\nMxG6BgWEEw+BHf4MbKW3LR6W/ByQEoM8LEIp5AOMNRuYcfM09KWw8VkOLB2p\nPgu+RP28iTCJ76hYN5xQlnUVDUwyFj1vcs0Z7OAq6fUZqj25jhCFjNIpiRMr\nIhsD3D/cptZnfEotmye8kjSKNM6dNP0DHeVQf0FsN2P63hUJDc88e7V3fnVE\nwp6xLkGiX1x3r2RS1Q5YoFqEJshhDkj1a2MRz5waACztXROeFJ1x7EJCwYjM\nW5ABYlQKLoIxZQ1ghH/LI6j2Rd438VsGVWKHR1V95+uiTwNiH3vmFCyGOG9Q\n3L+HS38oUm6WChPfzTB1YQJjfarsMzy79PeXMv4/fwy7iSDaYOtjpMnFsXQm\nrh0VdSwQ1Y7Dm8u4M7+IzouzfkkSt6cNJtTwWOM/fT93NEoLE/Zv55sIuWAv\nAMO5A/8vEysEfYd+5yG0IQe4f8Pzf+PcACPIBlpKTbItJyC9qDEw9n58fcxW\nS3n4\r\n=C420\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bdb576423b0f8020c453a5473bae420ee287c240","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.5b5f62f93.0","@material/base":"7.0.0-canary.5b5f62f93.0","@material/theme":"7.0.0-canary.5b5f62f93.0","@material/ripple":"7.0.0-canary.5b5f62f93.0","@material/typography":"7.0.0-canary.5b5f62f93.0","@material/feature-targeting":"7.0.0-canary.5b5f62f93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.5b5f62f93.0_1590607008152_0.07661233325053907","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/form-field","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.d9972abb1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b39144fa784f6e6a8db5975cb33e007de51a6616","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.d9972abb1.0.tgz","fileCount":34,"integrity":"sha512-j3AmltCPZ/hJK7jckqL5Iy/tyMQ+oNGxQqVc2SHIz/4SCZljE1frYPQo0g809ly54fst6sxzN2KtCDynaCVfYw==","signatures":[{"sig":"MEUCIC6i/Qkc2nBRHldx6ynpnkPr97QK+Ep7q7FPvjcr2FCDAiEAiU+YsMc7qd5FSQACBbeL0qbbTRdGQYaYx7TnZsoy8Jo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsu3CRA9TVsSAnZWagAAfQoP/iTqhV6tiazFHVJSVgrE\nrmFSCpbRWpVy5k/AUX0YmX7vGuEMwHzwAMTiDje3Qiccbwv0tac6c8dcBk0J\nllvZ2uVtjIA62kVsLzvfpHh97jaFRGHtlL+YFpodE/2+8H5hvBwbzS6HpBZp\n8llOa+ZyL+KB1+Ov7ZRC3RrhVCZayARk3/jhkS0bp/UpMj3JN5X+IY3tR7Ju\n/Oa7M9LDNzqaLU5cDIzQdMUb+ARp8C4vxKisrsZu8u9wbPU4rfOiQs+/12EU\noMPvoj34qbROvULxwurvg2fFvLWgKo1hR/TVCuaNi6oP0iSklEhuCFGOXVK2\nVgIJQUm31VqJIacmbHq3aARkeiY6F+NNuSjPVVae9R/Ft7miwgyAWff815tS\n4/nB0WXDG9wvjopnp7X4mBoa6VedT6AdyW7aR23d9nFOIa0/cBUocJclBag+\nPEBn7/hahSAVhWv+7wd68mclbXTs6NXaUrj1OG3eW7YwkrQzRcJY/m8/ZeS8\nsVUtvAKAEeLY0pzy9elssV540+UPnOoc1G6J5X/Dlpllcyr0NdodG1kzDA8U\n48G882IjaquSItTib7jhttF/pRIVDbuoXn+Fe+uHg2Fh1cSg5+YxhxarNGKp\nZg75obfxo/DOzJO3ImrO8F5OoXZAjHAZ/UHCJ6f4pIhTCBdZfHHZ0Zuczzeu\nT81o\r\n=p92J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3db449915645c45b366327c8152342a34f1e10e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d9972abb1.0","@material/base":"7.0.0-canary.d9972abb1.0","@material/theme":"7.0.0-canary.d9972abb1.0","@material/ripple":"7.0.0-canary.d9972abb1.0","@material/typography":"7.0.0-canary.d9972abb1.0","@material/feature-targeting":"7.0.0-canary.d9972abb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.d9972abb1.0_1590610870645_0.12404414799203356","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/form-field","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.6556eda2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f575176a6be774e23a0aa63452643a8bd92a3701","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.6556eda2b.0.tgz","fileCount":34,"integrity":"sha512-1WGP1wF+mbRf6Yv9bGBoJLUCug1jxxdxyvNKjfRJ9Sr4La+osDahekwHr18ekJFAAdYpskCNUm4Z579dUp/7Sg==","signatures":[{"sig":"MEUCIAdHhwc7sxXVBFCk2ZDQ1R4gA61qlc5XECH2GHEwd92WAiEAnfn+1BGSb9qwFmrrA4MkNZbMCH7q5NWqdmhG2PloFbQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs3dCRA9TVsSAnZWagAAieUQAI76bu8qI/+AJo7daQgd\nGxikicnvmP5BBhhaNSoe5hhwI7VpHY36676QHfzSzDEigW/8GBGPtykfXAX1\nsR7m3U06QCxT1iG0fRk2SzUm7THAHfFKQk0say84g+VlQ9bwkU9Nev0FOdyG\nvYhk7bRGQ9G5snlJb3OZaiR+tIdtVE84XEdnLRum4HigetfcF/T4UlHSD6KX\njjXjzkcZgPzCLDBdO3LFsR7T5cDNiPOCS7Vwu9b125E7hXiNmuCBradLQ/f1\nYUYXpRtu82GmS+J6CPpDqc7o/E04t4fjWJoHCJBZ2DGdFkSkyHxRAYBEJ14u\nnPNnzm2UqWeHDGlEhmdQFEDxjRdbzhHCGuEbjUG27RzstNHx6+w+htFMNBMB\nsKD0jkWbrT2iV3OaZkeuNPFah2ZoGP3hw36PKF2SXv8/P3bRiQr8I2KHtiru\nV3W5gkBRg/7xlSs0W5206hcHQx9fRHV4YvFJgXx/5U8rLbkhcFMkIbozsbxF\nbWvbrkAXfsyDWRig5yHT4D3eZhJOV5lwxxyzhlqt0vmAqL1vr06534Yt7yQL\nHfiCQWiv9W7lUPdaiVbzrWvAjRqLbrld3fyIzF0QJ3VHU29gHSCzTHyclH8m\nQa74n/RmevIN/28mYOVuuEIGp3LWzRfHmLfzBjFMpoLDK5x9yc9WMAGIDrbo\nezoi\r\n=VG5W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"504ec59b4b401d057e70ba4bd1bbef2f87218204","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.6556eda2b.0","@material/base":"7.0.0-canary.6556eda2b.0","@material/theme":"7.0.0-canary.6556eda2b.0","@material/ripple":"7.0.0-canary.6556eda2b.0","@material/typography":"7.0.0-canary.6556eda2b.0","@material/feature-targeting":"7.0.0-canary.6556eda2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.6556eda2b.0_1590611420926_0.15731946809371555","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/form-field","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.32aa23641.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"68473dc62fa488a2ac9961a13a8ed04e865f4d0c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.32aa23641.0.tgz","fileCount":34,"integrity":"sha512-2UBv5rAOoyJlZgxAXad/ab/XA5asbSXjHhCvgzNiZxmX2BeTuIGxYLCwBKYUljrcQqytDTdgI0kIMtze7zj2Wg==","signatures":[{"sig":"MEUCIBENlwTwr7EuLXPAeEpXzvGJHHZ2RMPUgkXqd/sC28OIAiEAry1uOQ8AzhY/Xm9h7hGzUFoUy5MbmdDlCCvqp5Jb9EM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt3bCRA9TVsSAnZWagAArBkP/inJjZ2OQ2bd1KPEwmqB\nItFeKnxVXwcaYSn4sbdUlPJwzKzU/J5sIESN77oGGeiL7OQQHJjqEgXT1YJa\n8KJhv9uGbZGKas4NMuJ4OY03xVnMNSMkvjNtcOym7HfGvMQlSENLK2Dc8+uA\nRzAUCwrEKu40xQd4cO3r7iBzim59m55KdqDwh3z6FHHjGx6ILWHzGgS2aq1P\nubs4r5+Bqc5T/O3eLzMcvp5L0taCTTuDDkOOqpYTl92oYrB17n+RqqcyUJLp\nANaI6RTddiNHSqI0x1Hm7dkqhxdGyoNn4IAhhd6GcfAeIq6P0ChaceS5oYXp\nGe4fPU0hyTK6bZ6dH9rBAij8elcs/vXhkHPTfrumqNIi7ILevlyKfHrb3FCq\n08K2bTwYRfi4z6bQXVNsgcDOYGD+mA8sFDjsIooxMw4Fu2RlzyncQfgrzhxf\nBN7qw6SZYaohJnqRvtFhNg/yFNl492u41zOP8TaCsPLQwAfI/XxQQAV+AchB\n6pkEKV9jUD35cIruCzttAaHp5hCvvZjKQTDOUzC5A00dd04/84Ck1tWK2PWI\nVC+JovLJPCQvGbca6kpURTDE8V38RLiQJwfqqbrhgzuqvUh5qadI+/kxhM6/\nIgfpymDdy1YYAtLRE/I01PZXyyXvujlVraM59ISRkUrHhfvJBDt1GtX/GO+b\no2qJ\r\n=oJpq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4cc39075dabda7fb76257a3403f0bde13084b87b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.32aa23641.0","@material/base":"7.0.0-canary.32aa23641.0","@material/theme":"7.0.0-canary.32aa23641.0","@material/ripple":"7.0.0-canary.32aa23641.0","@material/typography":"7.0.0-canary.32aa23641.0","@material/feature-targeting":"7.0.0-canary.32aa23641.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.32aa23641.0_1590615514914_0.772195079077034","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/form-field","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.654934dfa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa276c1e19ca87cc1a499406da4763f47498c593","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.654934dfa.0.tgz","fileCount":34,"integrity":"sha512-tW7k91u+jlrktfoqAeqWYrTbgLIglgXo3W+HXp2TCGLzC0LfaXYX0mB5jMhmrZ1tWrYLhaqpedwX+AAqOedlPw==","signatures":[{"sig":"MEYCIQDlnJc6gJFxIduCsIN9NBYCyoi//3skOrnQiU7JnhSKDwIhAIN5EoUGVoWRns1sOxhaXvZiUfXW3IV9xsMB+Yj/a3EE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwe8CRA9TVsSAnZWagAASUsP/ie8eatruK0p3sKv940R\nE/AoVEjT4klaK1VefoI3cWS/iTa3vgC9SGBEDeB46FrYllW7gvSYYSPi3UQM\nvTEie0v0zTDOm5zrRCTscfNL3DyVbJt+BMEf6hMchlHW9Znwq4c0rv+drniJ\nmUrPYLQIli2IvXux2LrXdDkGpiV1EajYyjrwFm1aUev1u8dM6/pMtu7mAl9T\n976f96KhCHEi8yCzo6FsH+xbX8yNjjgeYNfrkWycOZ4SHv4UhOSzUtSxTLMp\nW7U8HVBh7DXaF6beKH1ofTrUFinpn6NEdWxirzIcM2CXH/HQZQIFqP4htTf+\na9m7DewvUIh3x3hCaWDY0NDWhmBxPqzXIE61JbiTT+S/FGOb6XNMv0UUsBB9\n1X0sLs8R1nHB48Z75NWrluC4cnp4fRrBqfRPBiEtuKqa2dvcpQTlG8jj9yLI\n+oHB3CdcEeCx0M0vXTiyCI6x6O7WlALoky0VAjQFqHFB4v/PLQwgVT8ue8/+\nzzvv5q0SJ+3rf+delc+d3l6Aguixw+JqN9csXKkecus3Ohw+24b+RPrS5tLD\nqDotW3CI9iYtQSEljzru+A8SsnFHbhaMmcyQsB5vkpgD5h2Tl0HTJUsS2Ix9\n7HLlQDSC+zwQOpqa7VsBeWWeUUtYhQTNlLf4pXgp1kE6iogp+qEFcIfLDFAe\n3MHQ\r\n=CaaM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"99e56121d157a5a30949b826c0d521a365a1ae59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.654934dfa.0","@material/base":"7.0.0-canary.654934dfa.0","@material/theme":"7.0.0-canary.654934dfa.0","@material/ripple":"7.0.0-canary.654934dfa.0","@material/typography":"7.0.0-canary.654934dfa.0","@material/feature-targeting":"7.0.0-canary.654934dfa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.654934dfa.0_1590626235860_0.33050096747216795","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/form-field","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.41910b8b8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a5f33d1844311b278269026b3a0c7160e058fb3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.41910b8b8.0.tgz","fileCount":34,"integrity":"sha512-iLz5NVkM+qxOM3iiYE2t/MVe7ZU/RxN4RJhyvvFOURT6Jkc9/WuK05+i3g/zhcHc/a3YiskwR9zOQHEpshDP4w==","signatures":[{"sig":"MEYCIQCxl+kBtwIuAyaedoMZoeYKf8dSxZ3pF9ZBG6OGkFa7dwIhAI3J0gzHWS1I7WDkYR7B+TcX0QyqQc4GCPS+368MhW4y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwsYCRA9TVsSAnZWagAAndsP/jz240YwqMRI+dYex/Nh\nsWm6IZ7Skc0r004WueHdE8U95lFaYv2QxqQHxFfDjM4mMWpyBG6dCSwxjmVb\npuhIulphrTlq/1q2KyBTyYrZRzqKiGwzS+km4zmFbaDb8JYbgT5jM0fRmrDL\naAAoNTUYgh1VeRX/FY7Zp09/NFkXo/RPEsdB4u7kk3iIskeP8k5wRK2dJy01\n18ZckyCSccb9hKJoDdpMvXZSYSSmL4PCAo6uhEEE/DpiHviuW3ZZMp5KStTa\nCCsyfJZC1wxjSizUBsdyIk1YOLwUv08gmIuw+JyKRjrTpsB55FPf6CzIywJI\nZo8tOSUqAFSI8jl8Da50zKQFbp07OW0khbYXz4KzPYvYn2+XnU7E1w1sVKVu\naL9Gt9JlAywaT126n0iqzZf/ehcD3PqIMbxuNmOV8JORyNeB5TmL4SbWRNMI\nWP2NoSdwVCr0qTtLOsoxOLOwFtWWtrZmcIcdxvsM/Gya717N5vu9JjF7olfV\nA8vcQdM9K7MR8RHbmn9S+CZdbqPWWelvej+yQRg2eb17KYbyXciNzcGcc5kl\nNLHusCmiFnDUgayvWh79nGjjnC/ZE07uT/HXHNBgGQwIxvMGoJ9lAoXzyoLN\nEUyBiS3zjc6+Ajn3n+NPd5+O6fNao5e1Zfg0oHoBNB44mkSMtnr/UXzG9F6E\n8B5L\r\n=3zhi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"14656d5f31e9a410c15eaf9b47530d57a5901add","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.41910b8b8.0","@material/base":"7.0.0-canary.41910b8b8.0","@material/theme":"7.0.0-canary.41910b8b8.0","@material/ripple":"7.0.0-canary.41910b8b8.0","@material/typography":"7.0.0-canary.41910b8b8.0","@material/feature-targeting":"7.0.0-canary.41910b8b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.41910b8b8.0_1590627096166_0.13923824346299485","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/form-field","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.d66d22bf9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc24c9f4e3373f8ca0f8e958c7d3aeab13488b46","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.d66d22bf9.0.tgz","fileCount":34,"integrity":"sha512-fY8wC4jjZnrBeaYL78Wqgj7udDz46xIm/jct85zrX2qWg1mz/QMoQkVOmRs426LeVfYZe/umySJzxo3IoW0sVA==","signatures":[{"sig":"MEYCIQCFa/BG4o0Ed3SDqScSAZsGHwMC2+WkIkEq5vw1kFpv8AIhAOwf0OaXW3N0CDeQffgVhMXByVI1Q9+LXiOT/jDul1H5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BdACRA9TVsSAnZWagAAO70P+wf8Locp1MnQeXfi1ihN\n9+TimDqLJK0rha3jKrUbbbT/wQhZDmgCRPOvbDoqVBWGoM9GzTZ/de+k50QL\nf2TEbFXDVMH3U5hgsRD9fPx/NkopYfZPP1cuFLqpWaVLIu1tQG0gUhZKXbst\nN9z66toMAVDoJls/NBpbMNyoeA2oeKAK0LIasszlTiuoXYKClZ6naIeJtjXm\nUo+4Jsdyxu0uk50YlJzq0+jsq5EsIlAtbcCviVi+qprbRC3wJUi7cZMhLCpG\nl957GQ/2962p/6MBzENg4Ii852KUmvPx+exIMBoFfKDNsmPffsDKkn+9Amem\nzaWnzhTuM9/B0aCe1VzWhGVT4zJEcsWK9os8nJ6HMa7YpJMO/J4by2c3iV0s\nVcRDrVD6piqctJdEIYncdF9hP1cKultf60tn72u8suYZ0Ip/1PS1g3tw9nJu\nKkeK/eD01HeyI+5OfrRTt4vZnfNJhYKkQ+crzTK9VDZmAHQWVIX556Vy8zGc\n9lKdatNdmX48EhzopOBtfKZErdwLm9JziF7XHrPEhoVWG42DtsXjVMLLK10P\n9FCq/UKgc5COQ0IplujP40qPArW5J5L/2A+kfBdjZNAklskI/qKu90uh2jLJ\nZqi87Z3VBKNRta3i1StmiVq3QNMb0xy4g4b9E2/J1ZDMMha0pccxKUpGUp/m\nKor1\r\n=J5cp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cc182def4daea4d871df41985e6d893429174b3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d66d22bf9.0","@material/base":"7.0.0-canary.d66d22bf9.0","@material/theme":"7.0.0-canary.d66d22bf9.0","@material/ripple":"7.0.0-canary.d66d22bf9.0","@material/typography":"7.0.0-canary.d66d22bf9.0","@material/feature-targeting":"7.0.0-canary.d66d22bf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.d66d22bf9.0_1590695743235_0.14954264857377986","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/form-field","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.8904f3cbe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8d2dfde06a7bf1f89cd337055fdb7a019318244","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.8904f3cbe.0.tgz","fileCount":34,"integrity":"sha512-Gp+23+k71JmH11vVNtd5MXr8OmKSaCN2UbZDqmPGyceIub2N7Pbyq9j3e4d/SXEyCncQ5ENrhKBMkSqdLerWXg==","signatures":[{"sig":"MEQCIHiWpWdb6FkjFFuqf+xKc4zWPHqT3BJ1/AaW7XUGhfoTAiAcLqpV4afSrB6FBcbI7hahrbYrARHTF04F30T72zDAbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":163880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T1fCRA9TVsSAnZWagAAAEEP/jTPTJO0ZxyAhXL+sWxI\nZkvXp6Kwizr2yaln4B1GZRE5gK64Q+K5b29Oyaj2npoKP2i/6nPiFFHOhsd5\njeg/Wzup9X0bBiTdaszzdC/Um7tRKh+OLItbiwLhSHi8gYCDrkwQxzlrikJg\nCCT8mG99MLl5gJnFSMWn+Dd8nIa+f8wukneVNkNchXnIHhsccyM4QWTYP1aF\nHzyX8tsPjFkqBgQVlc+1xkS+bUp6US6K493Gv46BbYYwq9vzXy5ZIzwqY63c\nezCP0hD7WValqBm6tW2dVXYrBpXGl8+EFzBpoDKUwTap+4t1GGNHy+ULcfbj\n1PY3XPbGaBQ/DXvATmn0s+4IUcDf75gG9Pu8BhzZcIC3Kvtqaf/WLZ6UVJ1J\n/Eu2QBfv6JPTfxP6PYwSnWp5qj38xlOtVgdSNVQP8LiGgbne22jrTT2SAL2E\n7+ZGNfMkfNWgxu2/JDxONs4yCkfm3fLeW916RneoG0ER0irZ3GYj9a6/XCPM\nri9awyCQvz8BXxlu+GNmICHxU+GJ5ZsuodBW4S4Wanpxw9MkQTlcmYuViD53\nRAvM2dqvyTqFXX8hrvD/eo7z2yPN2e+NBUJernKT7yP817jurSiS4xd2GQec\n81HftzV8oKEP0IU+NCMRxHBjjfjrWQr3WPFvXkLgJDQ4d7jLDF9LJ1I8VM6V\nj9iN\r\n=4PN5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f78dc612af1ed0ba397842886fe5bc41e32f181e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8904f3cbe.0","@material/base":"7.0.0-canary.8904f3cbe.0","@material/theme":"7.0.0-canary.8904f3cbe.0","@material/ripple":"7.0.0-canary.8904f3cbe.0","@material/typography":"7.0.0-canary.8904f3cbe.0","@material/feature-targeting":"7.0.0-canary.8904f3cbe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.8904f3cbe.0_1590771038626_0.19098768831340052","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/form-field","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.51512a4ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"972c35f81fb9bb8e4e54cd9097e4b2688824aaad","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.51512a4ac.0.tgz","fileCount":34,"integrity":"sha512-1rgrplqfFNFNKdS7Cd1ETtmDVA9Gm5Gz3Iu7WtJPt4ptae2Ru8nIlW3gF+a++1bZFWnreE5xGxHNb6BEe9e0ww==","signatures":[{"sig":"MEYCIQCbIboXPRLbyfBk4p/IZyzXJn4t21qIPDxK89y8xGr5QQIhAP4zgpNYug7YOMjxPQB3dxhDc3j1jO7eAwlC9DegNLKN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V9TCRA9TVsSAnZWagAAFt0P/RfE1tLPvyCfBOZgTrBl\nq6WUxBdKNBdGHykNIPFj75TXAkwdm5mzzSALRSCB1zGppL8xhUfnuJAzEdhv\nkQ9M/yh1rBEYmlAWJuuGxDrfwoep2uarlmKPQoT4wvCHu/ClFPh4bEqxEUtX\nXu2a9FnbmSaFWcDpJ2t3TwLyYbah8S83VxS5+J2ZKBAViGUuzTyCDcWNKtHm\nNkBa3avzBmcxq3GULDY9zz9T3OeMZAiUCEjFxxoYSh0FHwhU+H8yUTTRArL1\nNAvIRaGCbht2iaaE2pdkfJ69C2Lu3ZUesj7KSaMrjiQNgfDMfLxlt9YIHFBd\nWJkC2YknBbfg5jlOrK7QMep7ZpQoJl/dGgjuMSEJGdJuJV5o+C6nRayuUSVt\nNnp9lSohiiTVWycVEoJj3YF5UUa0Z6x72Nrc1HrdXiSLBfxjzGxlbG2h1Hc+\nl5DWjvqXZ/aCgntrO9AfKZhu+i8kVDrwizYKnVXKVcwaTIigi/QsnJEVI1CQ\nmbfyA3ggRc6Ubs+DNbbsHb9Odn/PWb/yF5f0qF8ZszXNBWgAK+IngSchizkj\nD4ihhaftAiaeJ4Gg3xoWXOt9wvBr1vsGWtdgBLsBP26+Edeno31aOdSu7243\nGewF28nqsA7eg3DwIy7LPe2TEIcw61bBwfXjSfwVMLZtP1gY+DChviJ4Pdsp\n4/Yw\r\n=pWav\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d5115fe8118e1e2bc71fc7a491f672b079f281ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.51512a4ac.0","@material/base":"7.0.0-canary.51512a4ac.0","@material/theme":"7.0.0-canary.51512a4ac.0","@material/ripple":"7.0.0-canary.51512a4ac.0","@material/typography":"7.0.0-canary.51512a4ac.0","@material/feature-targeting":"7.0.0-canary.51512a4ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.51512a4ac.0_1590779730902_0.3555032811861798","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/form-field","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.0743288fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0aa6aeb6d26e3cb43d911f60aa88600c1958c44a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.0743288fb.0.tgz","fileCount":34,"integrity":"sha512-1pBfvWlmr0yCT0qx0NFSK7W+4NTfElnJWAXE6da/wk4aGU79RYX8gZ23c/pyXkzS3DCfwDYgVKxyX7ZDEPWZZw==","signatures":[{"sig":"MEQCIBCI4Cnz6kjGGsqETAbyZF7QRQWyCschgeGTsGiH5q18AiAJVeJphPN682U21wD++862hZr4G5ZHnd7m9ur/qSB5gQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0WsCCRA9TVsSAnZWagAA/QQQAJdWHl9eTJnTbwHhWN8O\nuDMdYGMPB8+auuBP0pjWr2F+MTIUwuyMZpQX851WV/2zyGZ4TGSXMvVzrbI0\nBp1cUsbS2DBP7nKSI1xATC3eMLVmqLpXt934QjbvwQm6lF5dyYDcKWqYDehz\ngoROgn2Dz39/mZGSl/JSekel3s/VN3fSAyFuJIbS2V2ESwhE/Mj2OGwG2q7w\nHVQzO8Dm5kX5WyPkRv3v/JLAMQmDjDCBvQaLaTogdNJWSGJSkhdlqBNUI0tc\nwpg0DKaWx5ZqS9LpKz6oIrcIQs+ULwadFn0MIS2au8tJ+Nv+0YlPYVbbMt6t\nLkmdEt+WlZzyex1uIJtFiu1PQJg2TkGgE2g0WJ8UCWR6eon/Yvw/6VrS90vy\nCp0aieEFgPzFd7cG1ZXA50NRTAy0O25n+Y0Vv0ogx7k2XajrolEFNODJ0IzJ\naJpMUh58F0ON8S+NwxXaJtb7oOouNZWKE8iuef/CJwGAYW0aUcUL3+POgi8e\nxnf/mlxpo+R2M8AeF+a+z9n/dF2hfwY8HHq6+dF0IMpn1Kkeo/Lld8u/Ck0H\nBwoae7MGdxdzfkSZK02rNbjdzSIsuQdfDMk0Kk2B/f2J8EMySKU9oekR14dw\nYWMKixuq8HsSiS/p6am6YXbTHqNu3whLNItwmOEZO7ZCNPH2RGr5Hr1miu9u\nGKoQ\r\n=zObC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e0c92eea0cf28bf0f2367fb0666eb8592ef2f8c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0743288fb.0","@material/base":"7.0.0-canary.0743288fb.0","@material/theme":"7.0.0-canary.0743288fb.0","@material/ripple":"7.0.0-canary.0743288fb.0","@material/typography":"7.0.0-canary.0743288fb.0","@material/feature-targeting":"7.0.0-canary.0743288fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.0743288fb.0_1590782721924_0.47426573396418736","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/form-field","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.06ef147b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08ce0b7022215c8623d5581bf177620d03728659","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.06ef147b5.0.tgz","fileCount":34,"integrity":"sha512-ZwKWm+XQ5e1s/xwEOOV0K6ply2gfgC9Hjc9krb7MTUIAm9Y5GhnmUeSnvEZ5P7Yr6Emi9rDzzG7EG9ZFKQGIaA==","signatures":[{"sig":"MEYCIQD+KiiMQ9TPevCUH25XQUfdb4GDv5065QO94I0NDE9DcQIhAMd1k/yW4A2VLhClS4rg/PrNrgI1LGMVKZukPqLXaGkh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XNcCRA9TVsSAnZWagAAPtQP/3PB3SLLWgBuoHxBKcQX\nPyDdI38yJxN+jjl61fXSV/EjThWDwEddpR0FpnNhYjyprlON086km3Ql0leA\n+xrC+g+Bn2NXA3HLdHFUkCtLzWOTet9SYNuLQGQ4aXS3g03D0UO57QznU0/o\nTK0nW7/dquXKXFJmsG7xTE17rQk0b2bS1bclqaR2kSgy3ziC6btfgi6u43PD\nKRlFt+B4LhcQXaw8jzFganG/Qu+Iq+sVEtiWIagllp96I+DMUnVz6ap67btf\nl4zk3Im46pcLhTiucq++dgVe3J0JquK+2NoXrJ71rHoNjv2aSyGT/dP38+yM\nV3GluedczNJXhdihGHUE3DJVQUTN43X3+2NDHYMHpjg7gewhSOni+MLiZ8ge\nY+9Lc1z1A20LIhdGSq97rltCAUCdQJqmmOenj/MXhIRbhdgAMhRsGh4G971M\nsoWp1plU//pL/tFacPO69e2BTJTkq9v/WFgb7Hln+aEMMeIlWvICKYi7uEVj\nf65sGFqTvf6RYLG7QtW3FkOInmV5sZW6ucdUqHn5RZz9pGNTomReQVRWcZ8Z\neFE9WSSWlZuCRR+jYGQw4tV+9RnRagHty2uyP8BZGU8D5QDczfA9TjGg35NT\nvwCUwvc0FIXd0aZESu22CUUJwJNpRQ3bfVe0tX68sYAmg82xhmNnoX/Qnptl\np1y0\r\n=KNFd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"43f043010a4682138cfe1d453ea0460f912fc2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.06ef147b5.0","@material/base":"7.0.0-canary.06ef147b5.0","@material/theme":"7.0.0-canary.06ef147b5.0","@material/ripple":"7.0.0-canary.06ef147b5.0","@material/typography":"7.0.0-canary.06ef147b5.0","@material/feature-targeting":"7.0.0-canary.06ef147b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.06ef147b5.0_1590784859317_0.3369759253043658","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/form-field","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.8073a20a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5d9b29a76a89533d9ed39a7dbd868e1d950fdb0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.8073a20a9.0.tgz","fileCount":34,"integrity":"sha512-MN0VZnxLexN0/57LsFmmQEPLqZCKNMUde7pJiA6VFso+pGS+3eERP+z67QzsUH081SKgucjnDTsMs7ixr0gXaw==","signatures":[{"sig":"MEYCIQDOjewbFByypu+EHaH0uBiEOXwcvKntJqpUJxZO581vUwIhALV92xW/+n9t2VmyONGv+iBI7KE3TuEBcc/TiBFO0Zec","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Zn/CRA9TVsSAnZWagAAr/8QAIPwHatRc5jsBi0pwQNY\nJ4MBpfCH2R4spv9oAMTSbEDTWOnKjGbL2EPGA1WNDtqB2tX576c/dJRwvOw5\nmjhFj0OmO0OyNuDRMueqFosgnl9ez7TlboVTSXZtOAPtao2N2WYmyVlRLgQ0\nNeGlc4PRb3DP5xSBsLt1qZm4iNazWRbsEmMCjhQp1aVcxR2TEvQH8QJjsn2f\nz7FcahoUp3m/bA8PWUUtH64Nnj6dig9kN2is076ji2viD+B8Ltl8hdFV68CT\nD1kP71yRqke3Pn+oT4Dqcjshb/jTTnH6eR4/QZChBICZcDJ5GSapl2kFI1tW\nfiL4CVeN0awjYjd+2psjcPKsG3CfSfHc5t60LJb8b4KcAn/oTD+zVtBWs+ad\nk/0wXmMVxT4/4+phKrPLAlVz8HtGbRFc1j7jLGcVi2GmnLgBkKn5gMLBLyqB\nmr/8G7/soaE3YS82lmfnM373Ggnu3kdJFtFbNrui14enxoIKdQnUyBf++r39\nyFlSGn5yyBt6fHhNhEb3eZ0cEu9IgEWQNRO7gbNXvUqeBZpDcn7hu0CcGRPT\nIvhDj8VFuFYvX000TSqx3H+Ep9xQtqdUqHzWC1oPB1pVxO3YtLNrc/MAoGNx\nHYsoIDoFq0N1d/qQPlTtH7JMOr9PBzccrZwMlFI4AcGpFKr6z76P0v938O3O\n6nf9\r\n=JAkc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"576fa22ec00234b59b1dc4215b8dd1ae982c7c8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8073a20a9.0","@material/base":"7.0.0-canary.8073a20a9.0","@material/theme":"7.0.0-canary.8073a20a9.0","@material/ripple":"7.0.0-canary.8073a20a9.0","@material/typography":"7.0.0-canary.8073a20a9.0","@material/feature-targeting":"7.0.0-canary.8073a20a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.8073a20a9.0_1590794751295_0.5542988824383","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/form-field","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.72ff42330.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b65450b2bc80e95da8373e1352e3bc32555e1ca","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.72ff42330.0.tgz","fileCount":34,"integrity":"sha512-nOGbXRPgZPd2RhIkGLZuNbtLW5d/y/q3vL4argoH9Gnwp4/b79cZTw3u1wQr2IzkNn2lS56/Ycw1Alz9N5uiOg==","signatures":[{"sig":"MEUCIQC2dF2qM1ynFk59+ZtTITRTiMZuaYZa5l6elOXrHVmamQIgSQn9a42YNzU7J+W/l+fZQcOPRo7B/uKn2e6GdWMjPLM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TB1CRA9TVsSAnZWagAAYVkP/3qJ/2wK3QB2yTwcSG/Y\ndUhb8WtxGtQKF7Xn3JyL7Yomer+kmXaka11/takRoAjsnun67w6CzH+zdVHM\n36Xmlzh9+L/0K2VPQxnqzzF4Z+v30o/WaqUXIySNm0EelMQO081EbtfQtC4F\nH7SDZ8DuP47QaeiMSOai1N6BPaFDToF1/1XZHVSB1uEOAnkcf0hfxI7LjY/Z\nGgTrg5T1/JQnUw5ucTF/EXVIYhkk3E+CA3K+wDmsOvFtTfFQZ802Nk+7vK3K\npHRObo23fYOMmEHOzPIyY4nlMxZQseqDEDJ7A91aJ1eBW9KGNMLXG/NqhV5m\nusLQTFDDULlPl6gdTZBR0wvKDVYpxx1A3/eIeJA3gkBNA++uq/lN9ROx6xdk\n62SNQxz5Yeyyb6T0Ao+l9W8HqzaKDkSB1OdqcDBZ/KPrrS5zokttzOiGPHbu\nmLXOMj8jYy4davLXkzClF2/984G62Ac12CoMNikG62jtKUw9KgkCVpJwYIHd\nMViCon3hZrkVyvEiFoKpbXrlVNZ35L+FjrdWME2warnnRN6fJuJYkpBS2qMY\nUR3stpQgRDVCWjyGrTY4wMw9tkyTVbW1Xf+PHeJrU8rjaFa9gVNiD1/h0yxJ\nwNl1K8DdpwBia8favh4UTEXquEibvxY5CjTiKCUsQjPjyjZQ+48BKPXS97JP\n34By\r\n=2c9E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4c820e9d38fc1bae9a502ae78e336f0e8381f432","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.72ff42330.0","@material/base":"7.0.0-canary.72ff42330.0","@material/theme":"7.0.0-canary.72ff42330.0","@material/ripple":"7.0.0-canary.72ff42330.0","@material/typography":"7.0.0-canary.72ff42330.0","@material/feature-targeting":"7.0.0-canary.72ff42330.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.72ff42330.0_1591029877142_0.8123750552828077","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/form-field","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.9ea52070f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa2dd3514b1362e7b747a55e6de18b2bd2a42445","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.9ea52070f.0.tgz","fileCount":34,"integrity":"sha512-HaC5a0tle45GK0iAfggy9EoKrl+6V6uyBGjDJOYA4Y8rqsUdtB0aQ51LFspIgKXqiwHQsItVSJ0ToMaPyza/2w==","signatures":[{"sig":"MEQCIEvzem5ylX4RuvLKNZNL0xvS5+2tPyqQRaj8P/a3wv95AiBt1Zy1AqcF2fQOyeQpyLGen8iubZx0DA7FFwVdAQ5bhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TGRCRA9TVsSAnZWagAACz4P/0nz0gD1dC+1Bf6MaOJW\nE7rSUKozK0PpyVCWs2hUIOJ0GIP1t+SIffyG+6+fGpaW4VGntdpikOwRdkt0\nbAYqmnHyIKx+VG9gFFZfATaGfZvikuzjms7s+psicwSHKx2/ecXjf/zvG2Ia\nb/LmOgzMuCgr8wGm2+/K2vNb0nEOdBVV9b2J2i+RDmWyTQC5TOygsPF3Dxod\nPZmZ83G1P9uvdpkNJpoqTZEehj1kddIq0X5YUcgM+azru112ogjQDEOSUn6+\nXRfFE7OtCOdgvMlmYgr6Gpc/b10zYRwGAxARtm+S+ngrnKq3fNVJuRdjS7ul\n8p6JZZvbVo6aD7U6CrNzajBloXZsdBqYDGi/vzrvsiDjarmnlPsq86IT51XP\n7rKhGo1hmBUmt/redbszEgd8mEyN9OI2nJL9zOPayQhzcQOWY59YbOiR1Jgh\n4AjIKuV2ojtXcNbRj+4GxxB1eeJ5rZkKIofI4ga+EklhFOrJ6M4H8g7Zwp11\nsN7kWSK0Ubhr6AUI/ySPM8npSv40r2KsW3G2fZ/ZhngZqU3Boou/FYo1+BOX\nJVHSA+ISXMjD3h653iRRl0mYLHhk3+5U+d25ctGmxVYRvGgLu+e7UU1N0h1X\npX9Nhhv7QjtYtYxGLmbKEkf6l0j2ttIg6B6SR7lyUVX+rV+BbJbjdcyLXv9Z\nXx8S\r\n=gp6Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1c7aa3231ba2d87e7abffc33fbc156ee0889131a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.9ea52070f.0","@material/base":"7.0.0-canary.9ea52070f.0","@material/theme":"7.0.0-canary.9ea52070f.0","@material/ripple":"7.0.0-canary.9ea52070f.0","@material/typography":"7.0.0-canary.9ea52070f.0","@material/feature-targeting":"7.0.0-canary.9ea52070f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.9ea52070f.0_1591030160805_0.13917552125931243","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/form-field","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.d86ad3b60.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce4fb239bf57004e96f4472e24f5f40b22f507e6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.d86ad3b60.0.tgz","fileCount":34,"integrity":"sha512-ioEvnsDOCjaEBmBXpNN8v5jwtZSbLbYMwcqBaNCCYQtVZBYyOJCbqOKNqG2SkodZe1XX0Iy/VMPv/Z+hteInUg==","signatures":[{"sig":"MEUCIDgoVRkbB/pTzomUcTcHDtNp+QQD2I1OBRbZyjEj5nK7AiEA+FAGkDCWDRzcKUOVz69JNVbTWFoIBccN4rn2RjviCm8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T+UCRA9TVsSAnZWagAApt4QAIQo14u37VNnnQz7MpS2\nXgyaKrdKJ6UD7uj9sLLwCqWcTNu3la0WjZtX+NMVjfvQ4pMA5ERuroUh7mxi\nSXinp/nFgknLkdB/fOpVgSDmCy7TgtpgbjkvEh1MLmWKWFAuThZJ7r49xmdU\nimH4t/I9eP1uL6C5D/ZvSWcsHg22xsQ45ek7RyMDZNKwUfRzmYuz9Sw6V75G\nwzdfJd1ixVAQN0YK2FcLrSGFJ/d3jzZ1YP7yISxb2RyblCamW4wEG6dcp6uw\nLM4JaYlTVkPSL/jdOk6YDQGATo/RAZUQItXOwNgXSOEI7RjYPOu4ihSILDht\nD6LFiVd93dnwCwPGlYN1WvPkJqaPvkCle1fUTvIpEqv8xr/SiLw29enoYkIh\nehzmQoyeQZk7DRzQ30TFD9h4G8G6JV625k5xj6ZtdMXbSr8Li/CPWxYViWJ2\n3h6BpOXH/f86RrqSnA/XAxq5heBlsI1OvkT+WPvQK2++WanE+1dtdYPCQDma\nFK5lQDHGhJw4cnr1N0JyKy66HnbOz9jftZAP5tS7ofhN4dJzPWj0GBzmHvoD\nVGo6LXYvOm4uAj4+XaJbSeg/v724rjjOKJMhoM7mF8q/ApqP1BsyB1dguu4w\nRYzXCJmvAa/MMrikmPPyeYL/mz5zPT7cfUkTkZft5jP2Iuc1uLRGVAOS435w\nEa1L\r\n=sjhc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ff64ee77c98ab8a932f9397689714c078eb9fd02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d86ad3b60.0","@material/base":"7.0.0-canary.d86ad3b60.0","@material/theme":"7.0.0-canary.d86ad3b60.0","@material/ripple":"7.0.0-canary.d86ad3b60.0","@material/typography":"7.0.0-canary.d86ad3b60.0","@material/feature-targeting":"7.0.0-canary.d86ad3b60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.d86ad3b60.0_1591033748111_0.46290937089652373","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/form-field","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.b9776b1d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66c6f1f1e44d053fe35c693c37558a37cd8fe5af","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.b9776b1d0.0.tgz","fileCount":34,"integrity":"sha512-K76ssshPakOWMqK/dkCzCHmnGbpQY7AGEf7F+BiMtej+ZMg+TOxiMNlu3kOfHJtupeihzuA92fxp9VCHne/+rg==","signatures":[{"sig":"MEYCIQDObYI4MkX9Nu8mnQeiHtMjqTG38lIEkPiPyZoswa9dcwIhAP7Us/VQljnVk3A+fo5wxlhantOtlmm2/uynnoSyzxSS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1UhTCRA9TVsSAnZWagAA2SgQAI3yAPijivHdKFS3jfSo\npT887/SSLAixX17eFL5dw1O5BRVloxHrbH+sOTsDacsfYynxsGdTWPcIsKUQ\n0aMof8fFxUwb3AmaNleHpJT+rs9ACna+NmPKahmnmfS86wMFOOe2gGR4nfEv\n+ygj2W9irA6wxwrHRygmWEoaeWezhN4y0aztEuuebN4dZq/KGn1hNrZ/ym0S\nmvJufhqwC8tJJkU6z0+7l0rpPSadw6AdeRStvenOB+BPk0+ZYNtgSXNEPD/k\nu6ef0cYQWPAKON0h16iZ0dUJdtLn2puVjPO2ZIVYqyrBhOYgTi2+UkUgCPfi\nfTaU5QPT7InaUTwbY4DUWZgzWbGEAOfJi9IqDPIkfFi9EthR1j4YFe/Oi6dg\nOBBn0CW8EBCtvUirkk0/BwVMqNHBaT7w9+05XCVVp1bTpfhpkPnh+vIAFwSA\nFmsFCYL6ukS0acctpt9Yj66A9msDIV8yuUTusqWgeZIxUhbGYG8kdBXa4FEy\n8nVsIL0as1m/DXAYfvf/81mNKpIWGAsZYW0OkuHgfzhvBf3ox2TW2LOmxPet\nq4Y9YjntFu55282/rXEK+JdKcj6AVnXwD2SOOCKLt4TURDyW5dd40tc+kKHd\n9JBY2FJg01Ac3+HNV75SEogoC1UfV5/nS2S6Qc+7trW9M0tnpj73ERWM2DnR\nrHKr\r\n=goSX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d43f6785558859ab233dac12d042ada9fb8c1b84","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b9776b1d0.0","@material/base":"7.0.0-canary.b9776b1d0.0","@material/theme":"7.0.0-canary.b9776b1d0.0","@material/ripple":"7.0.0-canary.b9776b1d0.0","@material/typography":"7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"7.0.0-canary.b9776b1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.b9776b1d0.0_1591035986093_0.8653171076884936","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/form-field","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.ba6f7c294.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42482265c5dd48f99f063e643fc8aa13e471e560","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.ba6f7c294.0.tgz","fileCount":34,"integrity":"sha512-SbgCeRb8cQoKUK5GR7Mk+kf3xr/cpSkJ3BVk+OID5nDovM/qQCRPb6pOxjFPeUbtpSmedC92EUKrQ4X/Kqd7hw==","signatures":[{"sig":"MEUCIBS5AK2P8QYAYi/4I2hBI6PaU87+z0YPlqM5UEZbiEJTAiEA38sT4+Uhd+f/59sSvrmkrFSAil4apuX8h3vxxiy2R5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oZJCRA9TVsSAnZWagAAlUQP/ROL83iF2ljmFuq9MclZ\nkcTDK+T5ssRYfo9OwTQ+ti2FTOocSLj6lZe66ePOrpnUPSKhHhHbNV6vXhrJ\n4wFW72xIDMBHM398JiCbC2rK7C40Mc6o6xAZ7gsKbjCOOjsYEirjy6ddLKSH\nmolrHIuDG8glbfPVsVcuQf5sVaWuNtjwEbTgqa07O4xo+2PERUnKaSCqkgxh\nH9r4VYMrt2lmkvBbjFO1DH/F7PqKlubi6o4XzD0QYr7W2hwZa6zUC3LjyatL\nS56QQMbFrarqA3yzorN14io+a6LXzSwgvtbkMzqY2qKk2dBXY2Hmuf75XiUe\nClgov0zu5xeZgkXyYl0pTK9ghF7feectHAb4qXGQEbYVD695+F3lauM8jdjV\nvp8JbiiQL+3RMXqPLinGrxXzobfdnxUJQmyqVXqHtIzYlr4YOOJ+VMrhD0Sc\n7OfAVjw6BWSl3Exf3y761AplM2dEmv0mv1tv0oL5jLiYsNRhB4tuNkQKa2hc\n7nqRJ6RoKcyF25bFzdfX8a98cB+YS1VrU1wV23q7h0P4PAiF7kuQXxlDhs6Z\n0xeudZv4lCzSVk7x4ohjXLj8G134osPY9HZoeH4bYOKN7OpK74lftNVW5Eqf\nQPEAezOhZXFmglEZVk8o4+2jQHQBib5Mc3dEbvTRN7bmS0z9OghXv0VwtwQ6\nLoXn\r\n=EqvU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f181fece0cab022dd478b7c2f4b768aa14f7ebf7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ba6f7c294.0","@material/base":"7.0.0-canary.ba6f7c294.0","@material/theme":"7.0.0-canary.ba6f7c294.0","@material/ripple":"7.0.0-canary.ba6f7c294.0","@material/typography":"7.0.0-canary.ba6f7c294.0","@material/feature-targeting":"7.0.0-canary.ba6f7c294.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.ba6f7c294.0_1591117384488_0.3993043670699479","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/form-field","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.cf3b664ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adffee9b29a4cb32499c089e8e4c2e337bfa4529","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.cf3b664ab.0.tgz","fileCount":34,"integrity":"sha512-SHxaZ2/f1prnrgPwSlC+2q8Bnsej8ndH5Y4LQjuW7JUMFxXPHj5xb1nM8NxFV4Moxo3hvuY9RBcr937yp8KlzQ==","signatures":[{"sig":"MEUCIHlscpp5T8z40GQBp19SYi33l6BmQ2dvVkttVBEIZASNAiEA4Ya5dC1IVSTolscGxn34GpOynqcpzJQ9OvDsCm/JPrU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1pk6CRA9TVsSAnZWagAAHqIP/0DSAHMkz3xb6xBpKIx+\n3VJ43JkbZ/8Zm24EfE5qrnBvMP84zdWOtJCIafy37QiRFT4KhuZoaqFbFuI2\nWWT8V+Xd+Q86r2SFAKhoFTQeE9yogBtLWsRW/lB1BKTOf4kIKY9JjLhCRWsd\nqfGCWFOSfjCN7jZCDv23Q9/H1hCfGdr4VvPS3BcHPfMKuKbdzg48Yd+GeTYB\nLxwH6BwhdbtMxxmNjJLTgfdw6US5e8FQcd/X7nIbuCPATsGoBlWWCF02vV5y\nYDHaXKPVLk6IqWhvbTJe6U8LfyVTzVPrukgm8k3V4lZasGZDSqRISLfibth5\npihx7bNNRIrICHCpjiwjeymHWXK5ETPnnmJoF3eVb1qwSFzdAf+Vo0Li7LQD\nZ7COr/B4s5tG6dnojIa3McAl0vli/ZwraPqdHNI/jJL4DKR8dz3cEclR8IsM\nUmqRrWtvrWCDjIGrNClAlRc/KLdAT4U9gGlSgR+/VKkVcirjKtvv0gE84VON\np5VDq595dtle18MF+3e//yPt1be2eaOR2f4JvChsc0ryNIzGgxnN0WSbcLIl\nsKZhDd8YV5edeYKHHQziceSYglpEnQkCenlW79WKhZrPnMFgqfjThvNrskEO\ndhvdbyy9UwErrKg17723MOZ+qLeEXCDpHVlSG5ifH8lKym3AYDLjEHm7NJlT\ns7o8\r\n=9eW2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"708ed8576095ca5e673311fcd970680f855a7b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.cf3b664ab.0","@material/base":"7.0.0-canary.cf3b664ab.0","@material/theme":"7.0.0-canary.cf3b664ab.0","@material/ripple":"7.0.0-canary.cf3b664ab.0","@material/typography":"7.0.0-canary.cf3b664ab.0","@material/feature-targeting":"7.0.0-canary.cf3b664ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.cf3b664ab.0_1591122234183_0.15903704405326446","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/form-field","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.4ba3c9a31.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4287a452b66491c0fef686a0d3505bb79897243","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":34,"integrity":"sha512-eEvyrjezNUMTZHXgbtic6LP6XRLMGEok5y8aC9lAOyKgWbRBbKoY1Tsvgfgzf7hJuqwco/stn4nJrAhBj0OVnA==","signatures":[{"sig":"MEMCIG6Why6Slli3JlHsOqcxRH2MLkvB0+wsZaiet8d5a7MkAh9YEo0IW96+/WB+DKhIXwT1c8upiu4lng+TUihuzJl4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uZECRA9TVsSAnZWagAAW+UP/j3c0Bu4lTs4MwecOBpO\nvh3+TemDFyUnWAw4A7KV9MdQCyDnEBwEGdwrO0rnWEUB4esXa5hla7a2vKXY\nxo7GLJd55ZK4t5apK6drCZuWXZOYyZiFs+VRHwdPJzadteHneTPHbzaU5Vxd\nuiCZiaJuC13QbccOcpVEsWSuEvQx6Vx6ktenxsgSqQp3VO0xnLez1CKpmCaS\npY96XI8t/N+KC6JyrCHEtUnrPFYeBFRulQ670Iwhx7Mof5q4a+5bgqJGVGH4\nMFokxyTcoXvMyoyF1Z16Ayj4ZdvlRiUR8FiAFq5W4LiC8Z0Osd8ykDy7ai4b\nEJJUZh2ETCapmKVjMtBI6T2ivb0C0BE2+yuxOW0lb22ZnZapjhZhWMRENHBR\nCwnv7XqBHdZbKQPNvCf4GISmz3dIljkPONh49qXU9FHA9O96u+eBY/7Ks/tv\n3G5GN/vv4+ynNODU1AvbRlPWAp0mqE2N6A74VrawtcO6Tpq+FvtywW4F1gGR\ngFbA0Fzxdccf4c58D0TKSgLPsk2Zzz+o7BeB3RWvsf16RgZBpcUnuBGYdE3W\nJIm2Bn2HO6c4JP7kofMvHuZZ5Enl4b5V3cVNsfEGxrmpojzj+u762F2ZCAi+\nJZCLNBk4BS78ASDdFZ9NXblqaFO1LVD6NSTWs2GrRxl+2onqJWHZgThk31G/\nic1U\r\n=eNEk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cf7f823aac5f803db06863c865c07f432ec4fd09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4ba3c9a31.0","@material/base":"7.0.0-canary.4ba3c9a31.0","@material/theme":"7.0.0-canary.4ba3c9a31.0","@material/ripple":"7.0.0-canary.4ba3c9a31.0","@material/typography":"7.0.0-canary.4ba3c9a31.0","@material/feature-targeting":"7.0.0-canary.4ba3c9a31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.4ba3c9a31.0_1591141955562_0.15261437947338563","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/form-field","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.388b042c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef091993e8a269a2d01b33e444a66bffb5dc2743","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.388b042c7.0.tgz","fileCount":34,"integrity":"sha512-Lydo+AXX22VvlDRnDpXIE3O/YAdBKN5YMJ/cRNv3bMF39rgi7Hcs3tLWGpP44GVOATSGjNIU89WNP+TsnWlGmA==","signatures":[{"sig":"MEUCIEjR358Js1f91ekRfkdiCJ2meAU7m5o7Wd8sgG9KHHcrAiEAsxUo4i6S1iQFVdRPnVvgwm4KEAixPz3e0TNavizWF90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16nZCRA9TVsSAnZWagAAtMkP/1XRWjBj8TJihnW6ecTp\neHBfXgnZElv0llvOdZrxkzd6a0GGrG0iGnrfjF/PgtryBIC3hdVxU2TeISvs\nxGOZ4vwS0l6QXK6xO6a0g5JfkIMNbPKaY9dnj5V+YkxmgMruETxccF9sQQD4\nlHVR4lCr5pW/SdY2y5LYT2vUGKqSsHN8r5nnJTYwMqVCEuld9cGrd1v+7xJF\nCmMmwgjMGpJtAOnTUGJxC4OOyDafGtsAhPpsxsovOf6M5fi2o2w16i/Yfc6r\nRUXL+qXuMahs0DbTXto3l2F+XyI2y65bA68yByBKNxdtrQ9wK5DF2AwcWcA8\n5HimZK9cRHj2sKbOelp3sF0FMuigepzTESo2guVmw3YqIqtYs8M1WRVfrkmO\n3RlS02hgattntYzZW2rpJI8LJup6UXg16NSSFy86FYno232HtqCjnS0usugZ\nok9m83YtYphUZCSzpKSRWMFd/PE5cxOHCn83fjS4gSwbQT74Q394YLdJ/l21\nHxHdtJQ+gnPN9Kh9OpiziDLuOqyup+k1KsBtahzTq1jKEYVbd/yABNJTIC/u\nPJ19rspWp/yETFlYrpwfrLh6P8oiUnT0UGBKaP/OCxL84MSvmlJPZpXv/+lh\njFfj/rlCyJC9AsFKq2fkhAZ+7nePSPhUxCjJz7hah4HcryGYntAOz+hvS3yG\n/A95\r\n=eRxA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7c9ddf94f1ba2ee332d7acea141e5022b58f79ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.388b042c7.0","@material/base":"7.0.0-canary.388b042c7.0","@material/theme":"7.0.0-canary.388b042c7.0","@material/ripple":"7.0.0-canary.388b042c7.0","@material/typography":"7.0.0-canary.388b042c7.0","@material/feature-targeting":"7.0.0-canary.388b042c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.388b042c7.0_1591192025160_0.9854472841952313","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/form-field","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.cca1ca84d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"274f6a619924adc9e876b99a2ac80eacdadced6b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.cca1ca84d.0.tgz","fileCount":34,"integrity":"sha512-bc/AxbRGgVz5z8YZkJGUQXQ3wJLPZaW2o6HzKkrlp82tXcKIDFIkl9bGbIrTfswb8B/Ps2dcm2VUDESqgvIWqQ==","signatures":[{"sig":"MEQCIDVT/cWclv/2ZyHCUtygGsR6MP7h96UiW2rCpL+XoBGFAiAMDioBkGvYpJbkAjm8d9Dd+GjUe/YuJw+KDhbX+rOdkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18nJCRA9TVsSAnZWagAAY04P/igu3dw9NfuDq+fP4ihq\nBA2HHrO4tnq/o6Ki/4DoIUJRPcaNzgVy9yidhXQtz8LavxMhhuibfW7cq2OG\nI5GKhsn++5oC9Xbs5MO3yyrF54PIVR18+9X7qRLvi/FPstSdsibRy6hambmG\nUuWpo9jI+p2zwV5AYLME3Lp1g9bSOnZ4cRVUPP9EGXJ5DZ5z7f1y9w07DEJO\nh/JPkIQ5Omsu6NlJm0fzaWZESUNbJkkQjPhHhk7ZXz1j7Gowr9As4nzxOMyw\n7bpiko8PuY4it/OTVT5Ttey840vd0PeXNe4scSPM/FSUksqLJ2EDs3UYUZq2\n7JlTkhMD5b6TxwywxKoCbYFOnaxMeH+80Pp0AZtdhc7Q9GaQ/qB9pgLEe6V+\ngAVoov/DJ6FLxH8PxG6oql9+03yllD1cdEARQnc5gfHLuI0999YeNiET4Yve\nWJmS15z4xnYfXyq220bi1EKkB2WYYJBij78hl+SQi07yspPsPNLskbeiHr2T\nIOz8X6ccDzmsYnxfrfmnV3lqmCPaOeRUjMuQLJqK9CrdyFhCo1vhiD6TK2on\nFCf2n3aa5xjXEpjBx1RWSmhkDTEQaXCEhaAlYGISYa6mlA8dqC3Ticb4kDi7\nj4ngXUYF0hfMJ+A5WezzNM8mXTqzoJC5dItxd1uNl+PDvfvVjNsx6I12pAHA\ntC9j\r\n=nFoc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f154bcb37f9df5f07d3c6dd0c397a436794ed609","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.cca1ca84d.0","@material/base":"7.0.0-canary.cca1ca84d.0","@material/theme":"7.0.0-canary.cca1ca84d.0","@material/ripple":"7.0.0-canary.cca1ca84d.0","@material/typography":"7.0.0-canary.cca1ca84d.0","@material/feature-targeting":"7.0.0-canary.cca1ca84d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.cca1ca84d.0_1591200201326_0.9669007193877808","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/form-field","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.9b0b5f2e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab884a4caf82b3973445a6e3bb7b1864e5bb1ce7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":34,"integrity":"sha512-ySxfBxDX6LnU/Qix7L1k/fPKn7eV8cC4cxHuyLSqFdNMDBk0VjojQnI9uztSPvbobQKvFNZjNqausDEDa/u38A==","signatures":[{"sig":"MEQCIGUESJaBpIpgHdXHY0qWKt/Aj9oFDpXgDvzcPuKcPJ09AiBUbkPkCY3huBzwj5AXSPjTQ5cK2BWKMTuhp9cWbmKbfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/K4CRA9TVsSAnZWagAAOfkP/jL7v+oj8YFoxz09QQh8\naoaTKNimEY9JbJsV1drICGDkhXs1bxEYX6Kq72qOLwLnlsfkZ09SFqFbVLsk\nfbz+6ZsUqTXZOSgWz500fyMvimlChBHQgg3tFfqOmvJkKZBtEFk6XivsssCU\npjanKtiJR+tmZDsd+Qh8/ogLshHWAiJvitt6oXtxJ6QOJ4D9CoGesrYHqljU\nXFq7D5IaMqgVmKduV4ilOiiLDc/gvgZ4TFmbopI6jV/WHTVlaB3qVVETQnHi\nkbZh6kWRXt4Yv5d22FJOf5QxaI40yHrFGZQhr7T1jSamIvgAWWxWDtNUJSnr\nxNIVGiTGvZDJiYcKzV8cgO9xOJNFj9DicVjrWtAHzsd7AyvIgXNVb4nXIon0\n7AI6AZoUTZdyfDps9J94e3ZqenLV6zAWF61T5Yk8CtiB+y3X90pZAuQwsohG\nG2qth1ECA2+RICyVys+ILeWHOoguP7TMs2lgCBfBy+meOtFsXX+N2Q0aCGRg\nRmUT13Latwf4yvTlFK7Amm9HrkI9m/m6lQ/8uRCzGBP1nHyt4fXo7la0sZAz\nIoHwQ1Jep4NCq27C7S7JghcrK2ZcjU/S1m3+52OpfVH+xOGz4TI1GtuUl3H2\nkBWmC/QnrF/pdEGeImPUjWabZQc6ASprawld6EcupGnfLGn+Z9bqj/JR1eu0\nuECH\r\n=c2lG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"35348e60387f88e73ce8e1376b7f352877821cb5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.9b0b5f2e0.0","@material/base":"7.0.0-canary.9b0b5f2e0.0","@material/theme":"7.0.0-canary.9b0b5f2e0.0","@material/ripple":"7.0.0-canary.9b0b5f2e0.0","@material/typography":"7.0.0-canary.9b0b5f2e0.0","@material/feature-targeting":"7.0.0-canary.9b0b5f2e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.9b0b5f2e0.0_1591210679847_0.622068643094966","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/form-field","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.0a7895f4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16334dc231d3a96a3998388c31f210afe0fbae22","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.0a7895f4d.0.tgz","fileCount":34,"integrity":"sha512-uB3z69NpsjgJSvRPhIapbDmxxHV2jaPOf+ajl8QMPuO7k/2yOmTm+epPfl8lorZyvfDNs9w3O2v/6wBxbvwJRQ==","signatures":[{"sig":"MEYCIQDcmhFgzroWzbIHu8xax/UJzPzSU88KS5aIXEOOl/9TmgIhAJYj7kQWcvE12cVDl1sBXGfFPt2aDpqT7wZcEhs7SBq7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BGJCRA9TVsSAnZWagAAe5UP/1MkPUs7by3TFv2jQcru\nN/0DSIO6wic2c7s5x9GGjftLIJJTFMPqqprSot9GESQyf1n1naF/BITCZkg7\nblhgfOi64Hf3H8jO8bwW0VzAmZZu7ZB8aaFYnyZx5vTH9/Bmzkgx7FgHzDuI\n1vNb4Z5irElB9kMXIieAgUgoAUTncG44+ZFzesNcg1rPN8Pd7hvnLMjAYTTT\nS07/NgmgwimqsuHpWgulVq/GMMTkAb52cR7e/3oCpDdoAId+QwQeB6lKUK0O\nRxEJFF/uNsoPhq9P2C9CeSflRuQaJmYZh3u9tJ605BQ6JotsP5PELCkKsGP6\n7+x+HDfa+ZaHKfUU8lQ5Udop8lJd6Rp1ZB+VHKIMZKlYVprVMfKuKi4AhK/J\nV5A3UmOYGzDh3mdS++9dcgItnnyxfa2kkqtPV4nSfFBhYIA9XdkIsHpG/xnI\nB2uRvEzk2rh9ilyVtNsTcjZbCqBfGCEqQaOU/jCZJxnDQMRiCOwltcY6MPc0\nd3PyieX6peOZZUb8sHR9oHt5dOe4tYtCn86erXHl1YqQMWoCoFpl4dy1xi98\nk2UYyWwm2w3iTgWBN/pPdvm1Adaxj5O9gccOcV34yS3EH9Ymmu69UYRPltZl\nLcKXcI7alGQMUQKYpIqesFMMX2qQIEeQ3q0HkuH1FMozKyCpMqsoW7fPl939\nCl5h\r\n=ecaL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"929c9bffd0636490958fcf34e0b40578b44a9cd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.0a7895f4d.0","@material/base":"7.0.0-canary.0a7895f4d.0","@material/theme":"7.0.0-canary.0a7895f4d.0","@material/ripple":"7.0.0-canary.0a7895f4d.0","@material/typography":"7.0.0-canary.0a7895f4d.0","@material/feature-targeting":"7.0.0-canary.0a7895f4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.0a7895f4d.0_1591218568774_0.9569274443654607","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/form-field","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.7461aad68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a10f2dd68b48768bde1822861a8c81870c2719e0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.7461aad68.0.tgz","fileCount":34,"integrity":"sha512-NDZydpv0ejf1d/uiHDcn3eVNtKBpm7p6DPdZx6eNxTgV5lg6dNVdjVICg3QG4sVkQ6hTrxgP7fZ/dLvAiaD3dg==","signatures":[{"sig":"MEUCICZ8h7MxOnypuUEdYuSKTKuuhr6sGt1eTIO7pRDs1XUDAiEApmnkkvyp0VESv9kgIDMkoReLESUv7m1u6ZwvH2R057g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CBoCRA9TVsSAnZWagAAMQMP/3YtsFz1ic/kBCEQ4o4Q\nNaiiAHLNm+AExeDW7TtleWhbZ/4d5++s0q6habDCQ/Z5HCGelvqHvRmfLGrg\nCp9Edknd8//3O/dO3NAfnXD+wOok3kEgjMp41JvB+f6esL7pD5b72LEQ5WAi\nbGamdT5Us1mwV3vnpiVXUG1vkR5Ih07yR+NSL8JPCCqg+JQntYY51p/upkAU\nGJgBtEh357Vhmh/fo0XtAxII8Gqcc9abUDmaHYSclNJJzQPU+XP9HdJrAIlc\nroNRDsul1IRIOJFfAKE+VQLEFTyjD02+5e8VjYD1tztNNhJkZLI7/lJLzqK/\nLWbnVeVOd199GuA/wZS8mZ4gTY/9ZsrtXHDFUJkbFmWmQuECqD1enLa5j3yr\nlJNNETP85TFPMmmjhBmsRlU03FzARmslY61p0WQsQM0XIjMa+yZychfXLwna\njWuz3oSDTUwvRPUjVOsrBz5tXMMdCODrBAyXYAb8AlcOQpAXbgdui8qNXZuF\nYEy03e4pjqTSYWUp8QqOxqu6FRqa/yEq85wLwKAIkLgG0yOgijAV8psVvXYS\nRn9kdHpSDMjgR74RC4sMJVHm7qR1ysyAgD1yaOAxtvURZRhOLh+ZXsYI/r5R\nSl4zazn0ZrwiQ7EhNyKvHhma5Kcr7kmI5SGuwj4TuT/0Y+AlzbnNeeZgS2hF\nO+49\r\n=SZgI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f9166e39b20f57c6b5cdad1ce684529ca891bd81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.7461aad68.0","@material/base":"7.0.0-canary.7461aad68.0","@material/theme":"7.0.0-canary.7461aad68.0","@material/ripple":"7.0.0-canary.7461aad68.0","@material/typography":"7.0.0-canary.7461aad68.0","@material/feature-targeting":"7.0.0-canary.7461aad68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.7461aad68.0_1591222376038_0.3054872426157518","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/form-field","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.a0dc2b5c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e513de9507628569b39a1951dd94d4c24d3e05d6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":34,"integrity":"sha512-BfrjugHMQ0XW+GSxenpocHJgHjdsgxV54pkK8gdigTSzQEPIY9R5Y5NxMiDMtr8BnOUHe/YE3nQRjg1zfc89FA==","signatures":[{"sig":"MEQCIG9bunWuJeZT1AEneghQoQnOthHnC0Q5Tf5C1sbGpoxDAiAjNHgNnx/wrJr29TJMy4JVePsJWGS41EYgBeveMUHGxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WRDCRA9TVsSAnZWagAAdFYQAJyMKx1lo88Qbt0XMKAM\nxA5/iLS73whkV/BQvQimms7s8GIIIXbfSLQ0flm+7+ok2jSpqidQXZqSzcF7\nWrjatjeIjLrL7ecuzFeYMJkYFoSX7sXFL6io+ebysdyky15IkdxRVfSx/9jL\nkBYc9GOSGA0RBIPx0QcMSJyRYnaZyONfr/pp1ZAydtj09jWa+uHnjWIXo8gO\naLajvlfrCDFHGMWv/8Nzr4NW0a9gH7iQ6/8xBzQt+8tyJ5OLWAiohSy/F0e2\no44A5vB3K5Xy161p5h7SBnTabHZPPgoArqgbjLnEtH3o2N3c57NX53XLZUf3\nLeIbffkNE1TuCoPzl7FHzaObFQyclu9ZXt3S6YNtIzpdTv1JRJnDYVehAC3B\nQAVzHMfPoaWZH9arONoRK3954wfdfN0/rpSqtxl2hnejgG1ZJsJu44zZHNRo\nMsdaevfe2hcZ9c16nTtZQ0xQdGnidF7qC9ExwxfM9Oxbt8CpcqvHks+1pf0D\n/1aCC8PpKJhuIpUie/Ycj2TX8W3a2r6svGYpg57Hl1NZrj653S76dg3Rk3Q/\nohaqP6H80hx1FYUkFOmJhMsaalFfkZIY1nWTLAywvn/+FtMXQgZsh5gZ8VIh\neNJz0kZmhBVMk9QN7fRf84dRD6kuuty2zVKZBQVs5PgO+4sxO7J6mfyZjgnb\nhsbH\r\n=O66K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5970f3857673cb8c032d0d4532a6cf1209f94c47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a0dc2b5c4.0","@material/base":"7.0.0-canary.a0dc2b5c4.0","@material/theme":"7.0.0-canary.a0dc2b5c4.0","@material/ripple":"7.0.0-canary.a0dc2b5c4.0","@material/typography":"7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"7.0.0-canary.a0dc2b5c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.a0dc2b5c4.0_1591305280041_0.4703739836819969","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/form-field","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.2b420c5b3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e1ed92545fa628f4ae03dd252c0bf332cf5e40c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.2b420c5b3.0.tgz","fileCount":34,"integrity":"sha512-V2DhqeWM2oX2b1VnyQKL/BmaaiMs8K16dvwcD1BOrIVYu94MDWvJLiZHFSieLs1aGfvpcKImst89t80bXjLzJA==","signatures":[{"sig":"MEYCIQC/h0BYZe8TGGwAIimDbQtTABhgMTIijXCQvgJE+dOhrwIhAP0DDMd7UhsFWRnHMqQWKATe4toSDtnFdpUTI/aWnNWP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mP/CRA9TVsSAnZWagAAZdoP/23t7xbQhzWS0GGLZt6J\nS8kEakJ6jT/f1b5UMjz5ZuKsDLqUeNjplmGLjqbQub5txG+gDouZY0uCE+QD\nVYoRDD+H8fvdwTCpk1cFNHT9GNIh8JHlQ3m23QO3uVrpDi/krSLQ+p5Tk05n\nyD6HMeYq4xAf9aMzesVZyxashH/RtMnSokhM9Dg4IAMzaS/UnMELgV5XbD5c\ny4uQfQ2dSguQkM03E0ZherduA+yKPxIa+6ZY3z81S2QrxDjthQVPx+g4faiV\nNhuidbCTfjUas+gpmz9cqSD/YysJeRK+Df1+w9FpPF/3WGWvPVl5N38N9+bi\n1siW+FJeEgI3GLDiMI8WYlw5J1og1n48A1ntp4Nhqn4uJlgsmBNHjNaZf6wK\n0MYb/9Oi5gZo4jKBPuuKXktFDMdztYfdu6qtNt6np6pePOsz19cn5wqJ4/3r\nrnzD8qYsGpytjkyHpoX61plvWU0AuIq34snbVYS20rJy41lXV2svA1N/KB+F\nFWBzOAPwvFz7vmotNMSsscrRN3FP9c7zGgXXawcVCoY0dAuJfj2lYGaSzDAf\n9eHBnLMAJ2aBgXf5SC2Z5JjEYRIfcYJb5cJ38zCZ8kE/B+GoFmMGtkovInGo\nrg+RQaDT5IU3VrdtT+cmBcoGrn/7DL8zxIKJvPR6twO/ZvNFWEVsM2B7FonR\nl5hB\r\n=dIKw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"80cc16a27982fc781b2a68accf38760a98fdbe2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.2b420c5b3.0","@material/base":"7.0.0-canary.2b420c5b3.0","@material/theme":"7.0.0-canary.2b420c5b3.0","@material/ripple":"7.0.0-canary.2b420c5b3.0","@material/typography":"7.0.0-canary.2b420c5b3.0","@material/feature-targeting":"7.0.0-canary.2b420c5b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.2b420c5b3.0_1591632894642_0.29921236346173075","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/form-field","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.8fa22aacc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0b3b828235132b7e7cabe207a238510094b8076","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.8fa22aacc.0.tgz","fileCount":34,"integrity":"sha512-w9X6AsexdID4C/QF4ZZ1XLxGGGNT1veudJMZoFmg+m3RAAGz3AGCsJln4WWyKlDal2rFTxIdLR3VE7HCUtmreQ==","signatures":[{"sig":"MEYCIQD/pez22REqoWvkKaoRIUTZ/i6aN51zmVlZJggcxGIm5AIhAIyGaKimUT3rCX+8IbF5fglC1ZLeVKa4hIbK3VB09GeF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n3GCRA9TVsSAnZWagAA5SAP/3XdFkuUeEn5/QxvJ7DE\nS8VIaiP2hfHKDVBBrJSU75F+NZZXUnRS8X+Tzrf9sZQ/z50GePyVESvcVkP2\n7qBSI3OzNPmqLuPsuJK/sWdxoXk0MPQwMcYj3kNrI7ZrwqFe+u9T/ZeZzwkz\nT1puGluCYCE44FWsx7ySGbgIfS1CfCPO2ZnHPkhL7sG/zJC5eyu5PddCVmT5\n7ukqT7a8qStHLbuB1LYg/mcsu62kYivV6NMekspJSofGZrt1hGPwypQdgFrN\n/3wphehBuvTlSEn4RrrivIAeJsKzKK7H3ai3+Q+dONhWJ1r7sgfPh+oOqY77\n/h9uCrqj9IA1oSNU05GBW1z2k1D9N5nGkljX9UziWO/YXvXl2BXJLsHnjIKp\nn6hplei57QeWajaz4bt0KpHkqZcf8QmLdJLMKH5eacxRXCuLm6cDTVpNK7FJ\nQ/vMvQNVl+Zvl3NecAnkprOmEzCbcZWbBeHLhRnmYR8tjt9GkIcNnMokwSqP\niIWTXyNehw0ZTtO39y2bx4RdKbGNl8MLD4QMQCZ+JQuvL8zgMoJViLnVs0v2\n54fGtrYM1VuE4DlSEtznIfyBPrKkAx/U41xk70qiukscBFhK8WPbO77/Y37c\nBYvZjnM3u3pLO8FOhgyBpaHbBxAkMtE77k/kMih7KgId4/IqZrRjI417NwsO\nwXpY\r\n=dBRV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7c66b081ba582f4d58dde82c8b83ab1dfbed6063","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8fa22aacc.0","@material/base":"7.0.0-canary.8fa22aacc.0","@material/theme":"7.0.0-canary.8fa22aacc.0","@material/ripple":"7.0.0-canary.8fa22aacc.0","@material/typography":"7.0.0-canary.8fa22aacc.0","@material/feature-targeting":"7.0.0-canary.8fa22aacc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.8fa22aacc.0_1591639494343_0.22309226458671239","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/form-field","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.21c4e4ed8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c09d7c55686ab2e4e7df32cdf1860ba1defd3eec","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":34,"integrity":"sha512-ZxRp8HUELzY/yJspCZdKbZhH23hfXzPKhC2CD4CCG7ZhcugbnbbDoDWEt4uDb5NCTNwxYJ4A9xY3GPUAizURjQ==","signatures":[{"sig":"MEUCIADO0b5OENEvpwSDZa/+ekaHkOtiVPHeKwVUkGzvYbWRAiEA3AVvM2UY189Lk2SipWEiX4TvvAryBA7mWPT7Q9C3AXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3ocZCRA9TVsSAnZWagAAEUsP/1aeAFAbhT5VzAFqSJ5y\n9uXq2KbokVhkEgkcoJyc9/4+Aiiw6PZNSG+Lit4820gtACKTcHSewud5d8x5\noYwamSXqULIURyjEBs+BXTSd08OBhpgb/u5tvVZgoOpL5NFob9FItPvS9QyF\niHa0CWHF+S83J0hCwg1CMDQBDr79es4Yadej3ZasvaUSQgaFZJq8EQ/5XPRj\nQS3zbGgzrkfEDKELyoyBrCiWsCmy32IPAoH4esXdZZ14STvAVO1vqrUkVfAi\n/G6ff8QltFo7FgS698uUaFnEj2LONGSEb6w547EsjLf+keAPU/7RmIw1LNXo\nWeEgMuGRQEnjY5MzyUVHTMHX//tHspa+RVRmF2emkSgb3HyaGWgx+tNEbvvB\nPkPc+MKsLYAOb1Eyn6OdjiUcW4TSSPlFCQwOF3fXvmhKDKEpryhdQ/ALp5t0\nM+lKmyNtFKE+mRX2vyqiCza4Iioiv9Ljht9+nLTm/CwguBqCWm7Rs5PihdpQ\n7SClMOyJ/rKsGFGq/0RdQ3plAeIm8rOtC1ZOJu4MlG0BepEpCjxub0zn+IuJ\nqHDOgiMlNYMF1zkdDDooiauQvTL7f6tKoBRUquBaks+WFXQZ1Zd8OmNMC25U\n1kyZmYEA5sAN26ge+UDZex/8r3tDO7mwmFPwfxOEoVgWa7ABMM9eHp0eZGsJ\nTQhV\r\n=lcjm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4028e059428ff6b13f79ad3f9076ddd853ec1904","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.21c4e4ed8.0","@material/base":"7.0.0-canary.21c4e4ed8.0","@material/theme":"7.0.0-canary.21c4e4ed8.0","@material/ripple":"7.0.0-canary.21c4e4ed8.0","@material/typography":"7.0.0-canary.21c4e4ed8.0","@material/feature-targeting":"7.0.0-canary.21c4e4ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.21c4e4ed8.0_1591641881334_0.4625648077019813","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/form-field","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.dfde46516.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5e4233e74db30370d834f0dccb99b3670c896f9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.dfde46516.0.tgz","fileCount":34,"integrity":"sha512-b0Ddd+9zx+hW+zP7Sy8hQX18QSKi+5nLvJHyq0pSLgd4zTp/o4TCqjJ827bgagbWIaZ7sr0Qc9HryMoOD1H6pg==","signatures":[{"sig":"MEQCIB/cf4qxLT7HhrMzo8kCT5XqdGyY7z1JUZmZSxMnynNEAiAMHgdoO3Q8h7IOm0IgmYANQpZctAr9hTpk3DvXKA+dnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pSdCRA9TVsSAnZWagAAasYQAKRomkmTEQ3sZyTyjnOO\nrH4osn+rQuy04NIlXvpMEbTAClOZx6KymisZyIxfJ2Uebkx2/cpqCRvqQ8b6\n7QmHAtE/3lk6q8vkvDXfAmOMPc4vPv6OSC68ddMjbT1WGZlj2uwH7ZbScnxR\nIrpALgDfrb1hZmbb1xNVdYQHHAHImFy1YR9SSidlpOrvHc4SrGwkPsULdjuc\nLtAZgCta+kJhfLHoVXzvhFsnVcQ5wxQX3wPJnlWoo6LgTPKN11Hjdio6JHNZ\no35EZ0TYyg6VzTzxSDAJ1nrVsDnuLduyCgmeTtkq0arCKHTL0LIV9whWFo8t\nCPF37F3+XL2Zgn+6HDf0zDaJDMhivZhiU+u7vJ0tx/vs9645MbVaOGuiciTr\nDg5Edoe0/x+XcAFeKd9Q594bP+RbME/34ghKAAgKGbjW9M4nviknBwxSsfNZ\ndIdNPeS8P0YbILQQXcpABXQ1GqnWS/XjTVYWSe/ypJ3kK2gcmMFFecBvmFTG\nlsO64hR3xskzkzu8hUZ+ORrGCxYOlRjIkVp01nuLAbYwdWa8FRAMFuDHQRxJ\njwC9gZ4sZUEOy5z9mu7Hv+PNBAiCbPp3MAhSnuHg5FE2GYxRSY0J97dYMDwq\nVcD3ujhEiI7B+EPO/BEe7pNGFprydEWa6kdYwG+cqId9UoZrLBRz0307edVB\nF5hP\r\n=EAxh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c25d474d22b404bd6774ea12567f0916bd7fd165","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.dfde46516.0","@material/base":"7.0.0-canary.dfde46516.0","@material/theme":"7.0.0-canary.dfde46516.0","@material/ripple":"7.0.0-canary.dfde46516.0","@material/typography":"7.0.0-canary.dfde46516.0","@material/feature-targeting":"7.0.0-canary.dfde46516.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.dfde46516.0_1591645341012_0.9389133455917531","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/form-field","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.05cc5c206.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51d03466ed80c4332887c7da66d83535fd5f0012","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.05cc5c206.0.tgz","fileCount":34,"integrity":"sha512-4CBYnJipe+AJ75Yi7z5jEDk9EhIE34R8vDfLvxIakUxquOIRZpIRuHV2hWfNNSaBT5WaD22WlbJ82QzZt5lA6g==","signatures":[{"sig":"MEUCIGW4J7wjWPADgqy9lpAfkWDqEIfVI3pRpKwXdKS80xR8AiEAwm7ypDpFfCwZQtVfDRsQrL7LmT8iTJ0VnyJXki09uCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qY8CRA9TVsSAnZWagAA4ggP/AmCsS/6hRR8wyG2tF4N\neiAXmgzOkEvAJ044oazwdgiOvyArCpo4UIoQcWTYk5FpD6woUJygMkOGblQK\nSszJ3aCkQY51JBEFdwp1cpIKPM7p2v0OGqfyx9HoURTBhlahtq2yrGtmgXTS\nKY1NngGKdnV6+GBMzvAgqK2OtBWaqwMl0PwivQriSJc4HNF4htksJYOlD2nF\nlUOfdkXIvSZGODqAglmyV6q/5Cpi2D0tVP70/OmCw6qBMIOTxjY8zgDDz80t\nbpeOBktj+oCuSEwpH+k7FigHFPPooCIcNSfTUff4OvgaIbH9lzC859T0bW33\ncQPo+Pn7nK1i/MW5chzGIoujZez8tX7cQx3xH4dfIuQDrblzNxE/ruXzAxFW\nmKqhJkvxO9CQQqmnwX6UVUPiWhMyS73VSfdCco7CVIa7v83phYg3NofHs3mB\nZAd7frSeNeK7gZTWcWkT8DQLZtT4ac7u1CwPhL8IvEkJO/sZuW8qk+o3RKmY\n3FYW3qTwib9nnsNalb9vCHbBTTUDJpALr0yzjIFb9JNbSwfvuiNEE1vI9e8X\nZaOm8XD43bCvgvzzK7LyIyfVGr90OA4atGw7EmbqA7W/C37lHXvuniBvhugg\nf6m7VmGjuGwpYDldFQ7ALsarS2cnMh8WDyzxjh8r4dn/hsinnYJurwk/XADT\ngR9N\r\n=PH0g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"933ae32b3f02920ab3f6f1660cefdd6302297532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.05cc5c206.0","@material/base":"7.0.0-canary.05cc5c206.0","@material/theme":"7.0.0-canary.05cc5c206.0","@material/ripple":"7.0.0-canary.05cc5c206.0","@material/typography":"7.0.0-canary.05cc5c206.0","@material/feature-targeting":"7.0.0-canary.05cc5c206.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.05cc5c206.0_1591649851448_0.9689533012947613","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/form-field","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.3ee488f1c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7ab9a607e15091effe0b644e2a3ef4b8210c738","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.3ee488f1c.0.tgz","fileCount":34,"integrity":"sha512-0TtgCSSzGI6FCCMCrSYi86Ofryfjdfx7tl9eaCH3IBZoVsAa5dBz9Sr24e70wRZXAiGXEa2WI/D0QH8V0hD+Xg==","signatures":[{"sig":"MEYCIQCerkICElSjDFrqbsEzyPAej7kI9eh9jlLiig5iz3Wc1gIhALMmU98mhWqOWIuRjAvbieHFzD5YUL4K/T2Vs3nLqUsq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36KeCRA9TVsSAnZWagAAm+kP/jSNgQ9UEhFnPwRzRpuE\nyJwSysNP2Wz9VrQAc1GVAixdLArzwL40OWPRZ7/MohcZ3pmthLjxNikTyU/x\n+/HnrkzdTo9zr5Wej7DnW5qHKajRkh/LmVSxXoNG+i6+cquJoa44+8VDdia+\nHSHjBNKyG24xKXJ5H844pJPpAw1JCtryTX0E8UcYMCOi6/osfIqMnQiHUB+L\nD+W0IA3n88IIl3UP4wXdHEBCa/35hsBW/W+vt1AKiI2o9Z20g1WsQ57ZAuhY\ndYUJjnv9Xkhr6NJn0LfP5tD5X8AY5wAfbXwE6T7fPlFfTqiV4/UbT2UIx7ik\nAbktoiq9qTb5lMs6S+W/PRdj6pI4dMpxQ/5rYBkZFnZvKNi2h0PuIZstzJbJ\nXndoE908a45omdYvKkJIWFriasQ+Z7EvRydTPeIcGFC+8t/VXv9NkO2WXcVI\ncmlB8GKlfLWFALaUb/Bkp8nBuVWYuSrt2g/cGeY7Dy34ylnKDupP9fd8Xqiy\nAavn45fuUwGmCZZ7mGgwoIbQ2bGDlO1z3fDOuKLpu/bVCOMzgwQBN93NYmxE\nu5UT1cJwxXe38RrnK6CIB5uwj7MJX/ARWp/6Xgiqetn3pV17IXIV4iIRYWMG\n/4BJJl7KsHu3HoKcKbumYCkOekNNY9mA7jERrHyOm2XG6VhXes3vJzKK2usr\n0EJY\r\n=qKst\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ceaac97d295d5d50e71137ff6d4b390630570b8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3ee488f1c.0","@material/base":"7.0.0-canary.3ee488f1c.0","@material/theme":"7.0.0-canary.3ee488f1c.0","@material/ripple":"7.0.0-canary.3ee488f1c.0","@material/typography":"7.0.0-canary.3ee488f1c.0","@material/feature-targeting":"7.0.0-canary.3ee488f1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.3ee488f1c.0_1591714462374_0.030712312239890682","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/form-field","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.b83d720ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8edf954912784ccac50ab5f252c16185234e89e8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.b83d720ee.0.tgz","fileCount":34,"integrity":"sha512-eqiPzpYaL8UflgkyjunWR6CV63MHeCvMhyZxSPyP6NpmtCGVhlX8qDqhQu1XzlcsIF7E9buvPeka6H22o/oNRw==","signatures":[{"sig":"MEUCIE3L9l4FQkUGXQn+9FcWVpsdX9wIqgx3ybS8u1ogPGkKAiEAgLPE+rwWkpIWSZ7N+8+OOnVcAyE31IY9txi7eQ3PLAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38ZMCRA9TVsSAnZWagAAZNsP/i5MhSKIchFq+sQ7DJpG\nfNRwtADkcFDWkYemhshahi+HHBdnlWRUgI6pqartzslHlWr90mcYGX8PQ/49\nov2ZLKvN1fIAmtJ0T6fyZAtUB9nKiI25oAJCuhdCiiCG6vmhS+dmrC+hi1cF\nK5/59j2wt9ryw08dAHHxRwDLfORWYmh9X5qzbypMVOBSMrVgMNpjZZkULPi9\nQdebjFDusro1dMTBOU40VZ5rxPf03fbCKBQDK/n0wY6u50Qysy54Q8NSVC2k\nQMpONBM643vBrVBNme9pRCM9rw8rcPaxBp5p0enhpCnj4qFfqdjcdwB7fv1b\nExf51uBLMVwqNgn+mVL//pb7CcZyLDZE+659QvO2ftrjFgAJTfCZwwFDCdHp\nnPoUh2nsDbUbNiq5XmjgE4qN0LOtjdMgt5pb42A7RtDqsbiZk2rwQrng3c8h\ndsWTD95/60NUQIAJNZq8Pwu801rlKib+12qJZam9UCQW33z0SVqPf0RXnpZ7\nrAqyhtKVZwm5R2krl6/M4xmeJ/nCzJKwbX8FiUkmcuL2ZQ4Db24WMAHDIaiA\n8vTX+BP6ikwaCoEgDGG6JNHZoakgSl+nWHJfU6K3HWlpv7tPkZr5g28RtoDn\nITbyp5gRhMG2jJsvrYtILDDJ30EVfYxIP58c7TcSOjiP0TSoaD9YuteCMFJU\n7VR5\r\n=/U0E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3e998e476c86bc89c3bb626240ddd068529062aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.b83d720ee.0","@material/base":"7.0.0-canary.b83d720ee.0","@material/theme":"7.0.0-canary.b83d720ee.0","@material/ripple":"7.0.0-canary.b83d720ee.0","@material/typography":"7.0.0-canary.b83d720ee.0","@material/feature-targeting":"7.0.0-canary.b83d720ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.b83d720ee.0_1591723596260_0.5664720595910324","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/form-field","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.afb1c11a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38411a716693e258cf520ab55efd28054d460c5a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.afb1c11a9.0.tgz","fileCount":34,"integrity":"sha512-gzY2xSrfUdQH7PSZMi2oH/MfmG7KAt6aRKLn37CTsgoQ0ugqUsYiMphMuhLSGY7RgwIkV2tWiOfpq4nX06WBpQ==","signatures":[{"sig":"MEUCIQCe6CZEQjqGrwGyD81QwGGfBnyjUI4jcbzjqRxU2axF3gIgNumBS7zWsON/SAUFhlSLjKF9By1gBqB0annQFlX8kyI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+4qCRA9TVsSAnZWagAAciAP/2+UW3FSN5IleWZ/aJr2\nAxuEi0WIHHeyz3TDNG+PyQ5j7BwhEpCeFoJT0Ghq56xoaRWtqgClFxi/0WSG\nEcxxyKowpru8eensyU6rkhBGmICli6wIYfmucC8suD/GW01ozIhmcdlAxYJ1\n6QsNHz76en267snv8BE7GKmJiL3pvRPKUf0HLaV4uJsj1iz2P+Ir8QaqTvu1\n1sMK3OrCwFJ40/0Q9L03w3x/z5kD1WEO1LVGUb1dwvHoCqzKNsOygiC0f+2a\nJ0hrZPNa6yrONLMRKS4J/hP2n+zAN/2NDKTxZ6vDcAegL/sqY5IPLjdxuB4w\nvR2MsUeUAonLxx5REbS0CUbhmTIWfQ9jDB1ga6+4LjTHO31uyHwN4iHRIA1B\nqaV9PdEfe+4JI2Yts+dUrRkKYlkr9qwM6Yb9HB9PJM9pHh4x4b+u2IxpmmwP\nq1/5aXIc5AahvY1gqKNNCGVott9upK2vAhC1Q8+a9DFZOQKOC2JB2kvJj+Pq\nyHZSEstY6Pg3zUtJzf8ETiosUIFxasErZjhOzHct9CNz7MjjxCrUKPaWYIHc\nSrFwfhPA7Dzydv1Q8W6dwt/Gw8oI6j0CR/0TCo4qUWOWGsMGDbAA4+ZKlV1T\ntB/ZOhPXqPqCyKSgDABOYCO9k9CdCOOCpNmGj8SMbGCy+ODYc2VDTqC60EAH\nULLV\r\n=lZcN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"893f09ebba8aeae1b012971b66ce3c77c410b823","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.afb1c11a9.0","@material/base":"7.0.0-canary.afb1c11a9.0","@material/theme":"7.0.0-canary.afb1c11a9.0","@material/ripple":"7.0.0-canary.afb1c11a9.0","@material/typography":"7.0.0-canary.afb1c11a9.0","@material/feature-targeting":"7.0.0-canary.afb1c11a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.afb1c11a9.0_1591733801854_0.5211850330422199","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/form-field","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.39e6f71e2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f476d2ccd740f6112de78515287b7ab294982831","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.39e6f71e2.0.tgz","fileCount":34,"integrity":"sha512-vV599FIJnQTeE145JKp7IYTVG25yntvG+NVIktiyJ3xGZ1/WDMu2OTg7PcfiaDqdEhNbWWcmI8dE1xV1h+eCXg==","signatures":[{"sig":"MEYCIQCXZOa9W8wbPhW3zhLJqFd73M9rd3n/VUiLCmJWCkjtmgIhAIeUwBgxsD8Tw3bhUY0St5oPnYGIro35g3OMikBDET8W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B3HCRA9TVsSAnZWagAAhE8P/AzzzSxsX92pxEiJDd6Q\nRxff2/Ha58PmhSSqTWTTOUC/q8aovRFjyPlxSKHvY7sn1xq7/aOsXiJpfcTX\nOCSkWU2INm9CkwxKaK3aOsO0TCK3VK1hXF+u1KHKSHpeIYDQK63RUj9ZHT/D\nzKnBiF38EMNaG4154gJ/beoPiopdQblY4caeOc01WSCUsRZY62ID8lnuIQri\nc3MQtaba4+9nb84ujxssAtsRioQ8SMTZRoz+UZZCoP+CZxvqB7UthfZRdVxW\nPIiC1BcAuBMe+rsnAhTYcVHC74isGxlGsq32R2DpnrfEZjHQAwONqd2c8kut\nX0voHuTHiLUAijS/hC/y5+m/YObKiu7Fy9HY8+m1g4vZyqMIJ8YGyI7IDRM6\nAmWLD58ssWpL59Dx0QZWf6uHNc6HUfJLBD6g9KjH0H1BNcQ25PjiPj1sAC38\nMYN4b/paLjBkbGHeWHsBqx18xwIi5Da/GZ5Cgn/UclOFTjB3V11WC4P2teuU\nnXv3e+r530Qn3l4XmQViNWXKgUsn77LJ3tl8+pcgJFL/BPtwcMAQy4PKO97L\ngTv9xVNryr4UXiAIkGlHA1xvdCBfoawum1RYTIaqD2tUI/oGOQ+tTjNVLqvg\nuC6rS1qCGvr2EKAJq6Y2sL7imFH0b9cpj52iF50VvNH+b3r8i5kBh1G1htTV\nFkoa\r\n=8b39\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2f7273891cbcb7da6646bdca0ac4c5dc2ceed9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.39e6f71e2.0","@material/base":"7.0.0-canary.39e6f71e2.0","@material/theme":"7.0.0-canary.39e6f71e2.0","@material/ripple":"7.0.0-canary.39e6f71e2.0","@material/typography":"7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"7.0.0-canary.39e6f71e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.39e6f71e2.0_1591745990731_0.9214164634869724","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/form-field","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.d4c66dc7d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01b9bcf9ef144b54a41365facf3a5d83c63206f7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":34,"integrity":"sha512-tLYdQw1MacuWbvA4j6X8EWY3D76ZxqR8gsqxCJbV6atYjKdC92JDyvsLMO+ycmcsxy4K35+tDrUJbtDDHIqGgw==","signatures":[{"sig":"MEUCICjnj9Yb9nXfAuCQXcZoJab+EUkbOKw5DF8YbIX7WYQvAiEAu6MVXj+HMVIG9JMwt0hTHygA2m7rp4SYG1YIK6raipU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m4HCRA9TVsSAnZWagAAn7oP/2LJp7vGxOgVC+pxvW2Z\n9Ovt9DLsLMQD1b3y350BHUNkNWJz0GejFfWMDoo6nGTLTX3UUwAEg/sNRzjs\nVSZR8IRyhElNPz/KjvxoFKfmytcVdHoF46RSh7Pfhq2Kg222TtNU39EUoVYM\nOdO4VsYwiU/ruVqozglIjioEf4y+dm9SR+WXlbaOhF+UVl7NLVXuhSN17mH9\nc9qOpqdWrxIn6q+TUvwAv1g+2ICvtZqkRAihaQpZQCIpm9ehfewtTq0ZpS8+\n+/HhDhoKxcXoX8Ja/41AP7yWZUCUHsJ0GzPoce5N0VEDD0YiurY23UwFYPcB\nXLKYE38pq9M0y/wA7GdHuAAQ0ZZ1A5IpfUD6IVOpkBdwpKg/5qV9RQIHu14f\nTqU5pn/T1ebc1Mb24VS+p7O3UbWfPqLLSgEiZRDAftbJ0DCD7iq6iZk0ELz6\n5rbGZii7iaR6/F4+KNvkg7nZpewpBctoEkLEBg4uBu5L5VxAkXQBbH9SkSec\nHHzm8om1CBJCC3hyJehQNlWOzjezGRls9FBy51TUEaBK8ClyhJ9+0J40XYkG\nLnNbJV9R+bLwkIg0W2zITDnYL4++W1BhGPHe64WyfqnIE5BudJNpHymm3RpG\nli/qfFhB6sq4kLn1VMoJTVZJJ3+DKrNDsFmGXTrBqxSjl+/v5wQvtcKtLSvD\noJbP\r\n=ktK6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5964d9e6836962528334c54ef81ac4cf4898392a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d4c66dc7d.0","@material/base":"7.0.0-canary.d4c66dc7d.0","@material/theme":"7.0.0-canary.d4c66dc7d.0","@material/ripple":"7.0.0-canary.d4c66dc7d.0","@material/typography":"7.0.0-canary.d4c66dc7d.0","@material/feature-targeting":"7.0.0-canary.d4c66dc7d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.d4c66dc7d.0_1591897606746_0.42284413063703585","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/form-field","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.be4a19f9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcfcd5973f3a728756ab465d204d267f292f8549","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.be4a19f9f.0.tgz","fileCount":34,"integrity":"sha512-rIkEq6ci/xCxBo1gDMK6Eu2eE1ljib+nlmUqWnht+Bmia048WCV+UbLIZ35hC5JkFwpJcTErzQTxIp8XsVtR0w==","signatures":[{"sig":"MEUCIQD61RM++i9g8p0AZDVvOCPqGOdWI5zQTE/a42LaM+v/DQIgcD8+y6nH5Qb9bNa5K/wklyZtucpSmYITAd+xy/wIx7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xvmCRA9TVsSAnZWagAACJoP/jIt+jqGYvJhQkw/F4wI\nGbPjkJYaIh3FSxvylnjk3lTcw3AW2dIaFbO76fCmwQTU8vXeJJZPv6RvMBMg\nP06wuvMSqPeEa7zEvFP714MXHFspmuX7i1MsqejmfdDdoiZ9BX01wOw0t16V\nmD6wMbhXYfosfIrP08JQGLMQt1sETL9E4lOmoKOB0spPx16+xOSqQ5Bzp4q4\nUBokjtftg8NRdzmCFrjIDpzEb3Me2xGYncadgGfcCMI8RjKQttAAA6F9e341\nwscyX07vG52loT0pUXHJLA07jXksDgIImxhJcBZII+XyRr1j37fB/enJqmi3\n6REtUOQS6X+Iq3AfI6cOEtbDE3FQP0u4YRpeWFAeZsh6LTdniKGXcaQCOEn/\n+RJEWDZ9EugVeQXWPQN8h73ceEPqmv7Vb8RQkAaEA4By2O2/UXmTtc3TStC0\nl47NPmWr3beDL28aQeH8zlU8oIxzXMS35aQkACQWo+kc6gB0R1oWQcHMGW7p\nIX+kzLE8puh5Ofeu3MkbDksUkcf8ec+W5UL8kDcKgk4JD75Y0Ng0QKKEU7GE\n0S2wEzdfaynabo1N2G9Eq7BeZxXKOFOzb30CBQCtnZ2LptkXbVmjRTcGJb0l\nP9fl2mz6w3v/lufI7UJWrAczLPrfEQPENVMxkmajYZ14BRUDO5r7kfsKy6y2\n1soq\r\n=9ov1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d7a0b89cd18efc7fec60e96de627e59883e3657c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.be4a19f9f.0","@material/base":"7.0.0-canary.be4a19f9f.0","@material/theme":"7.0.0-canary.be4a19f9f.0","@material/ripple":"7.0.0-canary.be4a19f9f.0","@material/typography":"7.0.0-canary.be4a19f9f.0","@material/feature-targeting":"7.0.0-canary.be4a19f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.be4a19f9f.0_1591942118285_0.6902867282018263","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/form-field","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.a6ac8f629.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57711ef6bdca6f06179b001cab3e3b1fe2ef57f1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.a6ac8f629.0.tgz","fileCount":34,"integrity":"sha512-ym1Qhxni6l4AvohX3ZK0aeWaiIDapj3wPc9AnWdS8MDSTJneKH8jvV1bPqisDIONYfbMn02aU12qwZ9e+AloKQ==","signatures":[{"sig":"MEYCIQDx3II8GZ3Cig6PGxE1nLoLV1FlOkJAk4ldHsUFMu6sjQIhAK7sPy1Me1Kfi5uNFViww3ueruL9g4DM14aljdxVjEQq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+iOCRA9TVsSAnZWagAAs0MQAICpwFmbvzj/+bOgaFeG\ncpC6Ch1Y34tbJdQPHkO0T3CuCej7hbhDGzvMpE6jeU34n3dii7eLwVtbyzOc\n7Ik/nAL1aVw7b3ekKId8F+jERrJNPExsKZdn13XTURw64S8vtIKQAgtLNdAf\naISxeJPT0Ogfnnw3C0fsWwXUXiRBoiw7XLvAYU3H2b/MtF1E2zsEZh0tbdPn\njvYuIThUsXRz8Q2ONfG86/1ZsDqAzPoeLhLcg53Z5goci06/rM1qsiceJHd0\nrgxOioVftRdJpau7d2dlQPlBlnzsVsdOlA4Zzjl6stT/coBsAg8KvO52GJ3J\n+j/Cb2PQ4DiKycPXoZ50pxPr8VNw21zOHYvDNqsn6QKf+B+GiUktITiUDzCi\nfQyORCuKXMipxqkHjp1F8B5sZfiYcAHeJaTCI7yBBbcq+2ulKi7fJ+BeD5k0\ncxVzbT4cw9ufPw5tGdXjszx3T30zqhL23nIR3K8FcF1+POjwC2Dq69XWESIQ\nztrUL2r+nE2vsFlZE6R/Xf5Ww+dvCLRCQGRjrHWl4zH7FKojl6Zb73pnEJr+\nnDevYPokUIU+3KzOx5z/hcjup/4MUpOdDZzV3b0C9orArpcUIKJ1plkpFYhn\nEjCof9JghPQ6l8NG43gm9UvDy21GgD1AkehPFxP3Goy01rjXDuGKlz+60vhA\n6a2M\r\n=BDGB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"30d2dc59ec3530f0f21233e5b8e93c990a4a2776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a6ac8f629.0","@material/base":"7.0.0-canary.a6ac8f629.0","@material/theme":"7.0.0-canary.a6ac8f629.0","@material/ripple":"7.0.0-canary.a6ac8f629.0","@material/typography":"7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"7.0.0-canary.a6ac8f629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.a6ac8f629.0_1592256653979_0.12102564364360302","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/form-field","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.9833dc287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13c9fa353c2914e3aa2794a5c2a02eb72a33875e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.9833dc287.0.tgz","fileCount":34,"integrity":"sha512-unaPVZBUoq+yK8GSVHtBprACT7GYbWD/CDkI0ncxqaC7EngHpbVSzUUVdoMgRoXPXz9ha8aPLQ7GVxPBep9zIA==","signatures":[{"sig":"MEQCIDtfDUgjDOvBwKasQeE2qfyV5/TV4V2t8PaK7C2G8Y1fAiB8OCSHQx4tBBQcKUQPzQ8Obd7tV2JVwO0GS0gOdN6FHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SJRCRA9TVsSAnZWagAAh/kQAKIRhc6SkzYfjUOYKFBi\nL3e92OYmeGPGlcCmiNvgC91fVYjYpGKXipGbpaWbirZdvREIhvlao741ou9W\nJb2AfzxPlh62Cw5f1conbojqI72jr3H5H5nY6RE1ISWtyC0jq1kr4IP3tpnu\nGGdhu/oebYbYJCtcvDnK+Tybi1DuW72bXKrhgOYrjwFQOn/+8QkCR9tFmd9p\nZ+HvJ3DXVRRxgsgzz0HHlIrx7NAZnJEIwuf8trAfDPeHMA9KhyDbSt0StEP2\nKj1jS/2IKPE75cb29sHi5nVSjXB95byfBG2vdiicjMF2j/XKrmQ6iv2ijJfI\nhXvFD2fmkWP/r+22+3sEFzz/1yeCLeNOgVWmr3PwhpqEkZWPFUv+5PF57Rmf\nUyO8rP3+y0jos94e0WQMiMAFt3jOKCxv24BOnpSdyPJkLea4XQHfVFCPK5fx\nyCfutC4F4kc4a0gZxFGDqZ2jwBhYrqOouWuYVr2jyD4RhYoMXLsPm+3pKeaQ\nGrAdoGAUWsaTxsccL4ZYhd0hkX3kaezySIr18fe5STxb10EtqXFQwcqNEkX6\nm4O1Q/t4zIVs6R6hJIaddt8E+8qxkUwB5UAD8LesGgWpNN8lizCIxJzQLi7r\niH7VB7RpBqVaM9VUnONGHuIls390jRy1cziCCr/D/9pE3d0y2w534R+R+Qta\nLDeI\r\n=pYSA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6852334e45da838c4140c1aadc974a39d80a83b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.9833dc287.0","@material/base":"7.0.0-canary.9833dc287.0","@material/theme":"7.0.0-canary.9833dc287.0","@material/ripple":"7.0.0-canary.9833dc287.0","@material/typography":"7.0.0-canary.9833dc287.0","@material/feature-targeting":"7.0.0-canary.9833dc287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.9833dc287.0_1592336976921_0.29394185298509456","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/form-field","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.3aa33998e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8db6f6d1930e95455434b4341da65c2942312e3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.3aa33998e.0.tgz","fileCount":34,"integrity":"sha512-Q8kKI5aX3xdDK0567gHkr73pezKpvF12WY0lgdOqETILvtVkPCl9oVajbvwH+zGbq14gURUynNPTCMErbazs8A==","signatures":[{"sig":"MEQCIGzPQ8PZWAQdYloTBU/s+J6Qmi6mIgtvgbEoFW8cpy/NAiAD44IkdJia/1LuPk15d4zOutsmYuKMq1F6G/tg3c8EZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SnICRA9TVsSAnZWagAAGGEP/i8R1a+zTaQxyg26vH7J\nf/KqMq60LxHAPwuzHYdtxRCz3rCIZbePnHfp+oY5eGLGkSC9iL+Wc/lHraL0\npu1NaXWtVun+fWwLapaI+mPwC0V3Vh2oPfjXTLGbGQvknuUyURDhgBh0wFC8\nqrz3SFYVfyDqFPOyeV+EH5YghXyDlIW6NU95wrNnH2H/JrQi/NLviF5ZERsh\nxE8cRnrOZ1cqnRWKEehJDX/NC5fJTH2oJ+rKo/5dQKRow3ZypQabsSk6JQEg\nlbqU3FOGAj43mUw2dFH4pivV7xbvLeegKX7zAn5WuzTDAboGRR7BqDf2meFH\nnz8LlDXjT5kjWnYaeUuAG/Fy5K+4vcMq7M3JQwq5rYT07aN0MLocfV35KsN9\nwU2sT/saS+gojU/ahjJAst9rxPzQgDsgSpHO+3jh5eDcOZUGXlTvowpREnfX\n7X8qmsHlVVUGMWUURTHTKha3ZbtqIkhB2aCoNVr8reYETabTkJ5FUrzzXZcu\ndaLNUykTVcX7EFemcO4LjZnRvP6YvFf7fSkyDixbh/fBfSdIROCkyK24Y5B7\nzAbvidsryEkEEhqLhHEErtKROz/Nmw2StNKMuPxKmdSj8q8evSmecsJ9VtWH\nYC16aGtHJT8pNVCZpkc6rr8+STpd4CAvx8KmxkPfka//315R1fLM/gnxDbB5\nKq3N\r\n=zoka\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"20873613db8172781d25b42fda84ee1fecd88558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3aa33998e.0","@material/base":"7.0.0-canary.3aa33998e.0","@material/theme":"7.0.0-canary.3aa33998e.0","@material/ripple":"7.0.0-canary.3aa33998e.0","@material/typography":"7.0.0-canary.3aa33998e.0","@material/feature-targeting":"7.0.0-canary.3aa33998e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.3aa33998e.0_1592338887949_0.10900815206647363","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/form-field","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.d2b54d183.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d3531f2f829482276506257bcb74681cdaba2f5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.d2b54d183.0.tgz","fileCount":34,"integrity":"sha512-F53TFhLmvzITyQoN19XXWa4o8jD+v3rVgNKqoVf2kNYtXNsOzjcN0BQo0loBtXHJz94+cuSD1TYz/tWAmMJeeA==","signatures":[{"sig":"MEQCIHgIF0jBE1TAunHtFP+s9pJglOAPNg+AD5S/s0VEQiWiAiAyONsgAbLZ1FYD1lLOq7w3VqAFGf+wElFGAlf/OuXkLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sBLCRA9TVsSAnZWagAAtjsP/3fKCU191sTzU8FZkqGl\n0Rx+iJubVPXDx+gDeFCg+ZX8idzgzpIRl3+NddHv6fmEmctk1yxwS0w5iZRe\nC/+sBq+KuDko5/Qmpq7X8viQVAsl2yd6pn1XwC9mdKI0wU9kaHTT0sx9DiL1\nZUYv7UAELVrHODJODxmOnwkabv7j9QVM9sAcd50kLsBkBqiu6x3JCdOwEeJZ\nxuIhruBqRcXoUYetyRKUPm6+9uIHhELJgXQpJRgxZs4IK1UbDUrcwIkNlXtO\nHc1Z9ycPXYbpRpGP1hXLqmYzjEYdRcKVLS4M9nvKvYTFEsR6ukWZtBAlZFJa\nwuIYQiJ0OYx+LE9r3eZKtj1g4daFYjfgfXsgvxEW4XLz4N6U0s9+jvUxLdjr\nGTZ964Y+jq/G9n0OETKnUI/UaXy5BKYWKXjuEcutWDzGB35w4DufJ82okt8d\nP2544BLRZM7Qwdh3yGm0U1Wr53dK1Coqz+lD9pzgkqav7Wu8UEcqvSiQhRQO\n+ASM5kMujfQb7EcOdFwb/sOv3EVontTtvEn59txRdy9NvgczdmVE5aDkTOcq\nqlLHiOrjbnjLiQWU6/5Rc1LnLLwHEVD9iZlh48aE36YSMpVvgEeiSzMdruqD\nh7dreLafd/WglVfJUgT2DKDeEaVpJ9PfwrP5taUE1JDa9lAtWlrTkOxNetz3\nA75d\r\n=iDho\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2941697c8abef0c194a923cf548ee231dc67a2c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.d2b54d183.0","@material/base":"7.0.0-canary.d2b54d183.0","@material/theme":"7.0.0-canary.d2b54d183.0","@material/ripple":"7.0.0-canary.d2b54d183.0","@material/typography":"7.0.0-canary.d2b54d183.0","@material/feature-targeting":"7.0.0-canary.d2b54d183.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.d2b54d183.0_1592442955497_0.9047352429135689","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/form-field","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.f2a488e95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a0dec05f304f7569d1f8fa8dd147f6e60153903","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.f2a488e95.0.tgz","fileCount":34,"integrity":"sha512-tU9+jwJhrYpi13u/PBbyb53DXuJG4vhAceai1S2mm/44xpE0ybSNNfYpeKKDzxeN1mV1G296Myz0LcsvxjF6qw==","signatures":[{"sig":"MEUCIQDllbX+DHECotPoHVkAmPTyy6rR6yVRVjzWvI1KabM3SgIgI0UmPe6vlRMGfDxBFvaHlob/kl6F4ydkJIVpvN2uZig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64KACRA9TVsSAnZWagAABmgP/2KuSX3a2kdfhM7MftSB\ndfjIv42K2H/+xvTfMzMZFdFyX0SUBCZhOwXuxa4bt8H/ioc+Rsr00jdwjbBu\n4JF/4pw/xaLNvx2JRMeiXS2lrlIROaoPgWwCFkFuh7iVIcdIjcZ/Ev9N1wYR\nj5aDtD6vqmqyB/QMK6hI/tXn4yfFT0vnw6UkTRx6SR+BpkVzIvXkj57FSkdS\nrFe8O8cyQ2V1yb5e4GRMmp4MFDeUdxuhiJopt5X+nbxgLa/nBNbTFQP0I51d\ni100R5YkNsI5KsP4rTQUW+D4YVzUfGZU09GQKw/lTubAJ15chjBBCFVaiWcy\nw0js5Z+07Qsc9rPk+58EgELnmZaMUp4ougEsoXJez4G+kj8ot0KEJICiKtCC\n3FkBLaGI65kxeyJ+pUwAmu0mHSp/zF4d2AuMFWgOEjqBC/jUS2p+QQ8k6TeF\nea9DizFgMojYMTJhU52YsuC1d43JzQa6WmT7ySLYoinwbrXVpjt++fbST0NF\n8W39sIrS4jseRGvAXJFasgo69RIr0nEcr0QpDUU62CB0qAsTrSULQ6sUpFSs\nLLhOHXZginys7dPUf2ZsEM0k3WXBgRFQKROSNG+u/79bdmjqYYPIG0O/53F+\nnxI14zMIb3A2N7IO++n0s+5zLjPeAIJGKAp7xwfxrZkn9F1uC5eo2lNn55jp\nJ3WQ\r\n=vWX3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bd7f6aafa23ab94aa2f862ece45e1775f1895b88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.f2a488e95.0","@material/base":"7.0.0-canary.f2a488e95.0","@material/theme":"7.0.0-canary.f2a488e95.0","@material/ripple":"7.0.0-canary.f2a488e95.0","@material/typography":"7.0.0-canary.f2a488e95.0","@material/feature-targeting":"7.0.0-canary.f2a488e95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.f2a488e95.0_1592492671585_0.19748574667644703","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/form-field","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.bd8d1aafa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75fef38a061b4bf4cdddeb9192438a3f4c9b3b08","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":34,"integrity":"sha512-VwMOzO0IgBcli68dPtSZa96WQosRvh3A0OF0YycLLKGTI6UPCGcbvDytClwhf2z4UE4bElIHgatx8KmO6bWA3A==","signatures":[{"sig":"MEUCIQDjt+yLj8tR17D8/LbMqr/c56mLj+g7562+fo4iTYjJIAIgD3eHrtZFmrNRblLnlpa4hWqjNn+B+iKY8N7NRLIor9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64VSCRA9TVsSAnZWagAAIDcP/RKuYLwSJOCIKBh0c1tR\nfpMUc/SmjjLPyvK82JUumzT0IMGr0ybcnkTSQ7hgh/52tqvj9kACRkXGohTF\noiL85a2tlx7oKuKj1nHabzgCFH49NRbzD0/Ix1HIq7M9torWDRFWHu2tiHyi\nTqf/VMp85jujnYJGOHZzWGe5tewNGmUYMa/aT6tzAmKdrfINxN5pw/LWbqoj\nmG2HnnpxTkV5yaq7FSyH0KT1WUufbYSBSR4xF7erl5CS54qFDrN5hF3RmUCe\nOIYjDic80WUJ1TjkPw1npXxAO6czbFbYz+xA+BCw3kkXXKTkLE+HROTxF21w\nYiLmLpuR9XmWNIRjTCiZGdLcBWoPAEtVSNT3pa9qH7+wTDm0OU45ILr2I71T\nrY0tsBrWYoKtLfAQLdIKv2mv9hsmia1TA4eL0Wc3xEyUTwACUyEhpb7zmiju\nqcbEy2xk4R8oziBP9my/seiNXJRJ4YhSgRnq14t37wjsHP2Cs7IJPXcb3krj\nqUgONCIlDtptaSOMOexk2XxTeSDo0kmodYJyTyp5oTnoprFbTtpF2C7GToVN\noKv2lSMDfrqV0dORsCf+EnlE/hkyorfGkjVqW7fR+rt+7GfvBqBGBIg8utRo\n12q5cKJSCzLhvuuKjbdyNMpRvWVO7xIORIA1Zo+L0DLMT8HFCHz3beuHaEPK\nANVd\r\n=BLnf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"05dd265c139c96ecaacbac16c7128e4a851b00f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bd8d1aafa.0","@material/base":"7.0.0-canary.bd8d1aafa.0","@material/theme":"7.0.0-canary.bd8d1aafa.0","@material/ripple":"7.0.0-canary.bd8d1aafa.0","@material/typography":"7.0.0-canary.bd8d1aafa.0","@material/feature-targeting":"7.0.0-canary.bd8d1aafa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.bd8d1aafa.0_1592493394386_0.3306646152764612","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/form-field","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.1321eb968.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cfdd7d928723e4fa7f707a85d7e3a8a0be5a5d8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.1321eb968.0.tgz","fileCount":34,"integrity":"sha512-SOr9DlpOkDPFIJESiaAVjc5vcX+s9GEQ0AuX5+Ua4wH0WD/6eSgK9mtds1wsXMxnIb1K74y9fdqt3fC3E0zxjQ==","signatures":[{"sig":"MEQCIEHCEX1Dyd9cli9/8QLB8m7AHKXb6FFatlbCx+CvtatwAiBaEiMuezo4kFmhh2o5yWVRWFaaKqs9LkaBlH3mpySqvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RA/CRA9TVsSAnZWagAAzwIP/AqM0UD1Cc9V/xFTf5S7\nXCH6GAtinx57Hlcgy/PWApa5mzxRVeVtr9/ECtCL3FlsIvYnBe5fho28ccHA\nxtAbmfBhH/yGpbzVRdKuyFBfDHKhy3H3yqIOQCVtIGNrnGrFxC+netU2nPuT\nYEGbC/Jted3ezfhfeK8SQW4JbsQTD+f2OmghXX5OAXmtGalCuE/aBlrGdqCi\nKBnQ3XDBrgLcZxH3L9Of4cQ/QeX1kIclc9i9GeXgEhPkn4TNhWbQR5Teg8H4\nvWMVfXVyt6+mvPLFaAfsv3KJ5h/uZGQlsz6+iRpaal/P94LLkLXTvt+l3QaT\nFqOkA+I3SLd8HtRu1j+KHPhNx3YbHrs5oixsyD3yLyDdGuiyWwi5ptDxkk2o\nDnRW17FJhBNUhqLIHCU9XsQGyqID+YpvAg+ILvv5fUt4vwbbeRFEVInqi1xK\nIXCOTRV2HRmoA71e/xzRIMwtk0AVg2RvrNrtYRM2SlwO08NQMrp7Y3LumHd4\nb7bke0pYrn6OmD4N2tXO7stiNol0e7FsupaT+R2kVoqUZRQwXZ323OCK8AiE\nnIHemmf5KcjO4q6BotpQc5LguAdg+lC62cM+/3ZFpgEWnoyt7GMy6IhfwpzO\nFrh7POGjt+g2ubfBfOGptnAZrOZixltS4Zit6ya1p53ii1jhC13fSun0i3jh\nFd8w\r\n=D5vw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"41c074a3370c2ff9b4dd6af27f2403d15cbf2832","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.1321eb968.0","@material/base":"7.0.0-canary.1321eb968.0","@material/theme":"7.0.0-canary.1321eb968.0","@material/ripple":"7.0.0-canary.1321eb968.0","@material/typography":"7.0.0-canary.1321eb968.0","@material/feature-targeting":"7.0.0-canary.1321eb968.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.1321eb968.0_1592594494810_0.17642892362963525","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/form-field","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.db5cc0382.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e0f4c888be8f289163d56790ce7d23bb41f1eae","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.db5cc0382.0.tgz","fileCount":34,"integrity":"sha512-9EwTJ90xBh6BA/8zJwzE9Ho/V2tw99XhC1Tj5NwIc0H9pvxgtkSHcyp9zvk/z+7e+aRFTx9PVieCxb9O3JskCw==","signatures":[{"sig":"MEQCIDF90RbD+khD+g3yOBacTOPXApT7clEk/QAYAO+ZKXYpAiBao80cwMXuedTrYzSerQvBn7zRrBFv0sduX0BDrqmRGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RHDCRA9TVsSAnZWagAAm5EP+gMl6dWbbyMD0vnunkFa\nZrW2/TkrtOUdoDYrqkOXqvqDBkRtlXtecKoJ9f0h+G4lJ0pZliVohJRlYNFh\nSslwj7IeApGlg37g93H3kdMERtJ30VD/D+UrLKYDPJO8Bs+tQ3dhp9DZKsi6\nx5h4mz32IhA8g3jB1G4Irp722iWGupKxnHPHQy/28Jq2KeFVWGoddM8OFXji\nY8q7dk/RXdTiX843PCs0rxhg1RYeYBP4bVdRzEx749BW1iJZ48Vw3C17alKc\nZzek3ASAA8S0+NMHpmNgFkCxuQq/I8NmsAE1lhQxn83pzzPEDqnmPZ0CmU0O\nQFr4EkcPw8KDDKWkBXlppoozmGsAgq8JavwqCVBhmiU/e/oxfXaE8J4Lo3Oi\nPz1+ICItMBMJ1qTtGmoeLr0LMuAf+YmMNYf6oEIaQW+Kg80UWjr/zUcNcfT0\nnn4QCdn78oacPERNL+uTv6bazj0jsyzjO+XGyhPW6wpJfHmWUJd3ZWWnj+qt\niaj/3o+MvrGJ4DEGhgUPge7ZYdDW6yQiduBeueyTVGGjgU7LeGE8vW9H4yaO\nTbuGr2lWEkkp1wiRTL/R3/UtcPb7tQvZatkkxFrwgSvHVo2kUMmBrIll6gED\n5f4j7LU8SjKl5D027bI+FyNSLNeF22i2xGDr+MOEOxxiXWNGBn0YS04gogFe\nwv1f\r\n=Ypvy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"698cb6184d0d6e6823147f7d050c39efe9b8e3b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.db5cc0382.0","@material/base":"7.0.0-canary.db5cc0382.0","@material/theme":"7.0.0-canary.db5cc0382.0","@material/ripple":"7.0.0-canary.db5cc0382.0","@material/typography":"7.0.0-canary.db5cc0382.0","@material/feature-targeting":"7.0.0-canary.db5cc0382.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.db5cc0382.0_1592594882954_0.722329450839166","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/form-field","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.6ac9bf031.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b1758bb7b8eb4cd232258be51f908693660f841","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.6ac9bf031.0.tgz","fileCount":34,"integrity":"sha512-ivfzMalquJe8p4+70NNbQ3UQDBK+KQFC8jn40DLlM41jhm5zIMFg+hMQS4B64MaLp9kAqDOUEolRc2c2W0y7MQ==","signatures":[{"sig":"MEUCIEBUkUZwhn4EU+iTL5LNC0In1XusQHY7cjY4iG+81InbAiEAxyOLvz7iQMjXMJB2VfR9vlWQKzjsb2ZJvrEw4h4aa6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RaLCRA9TVsSAnZWagAAypoP/jPL9Xlv1EglhQTUj4Zi\nAIr5AvHSZSRuF4sFEUFo9Yac5rqoQfPvrFC+Hp9yiBa+zibT2/6XdciyuHMZ\nnJ7NqqUtrHruM83zSReqhzuUzCZpW3AQvxzC4dA410ig2Ne+YvrydtNxBCks\nY5eqTk8kS3XjR9eQOnl1srjasTZQB9oK2wp0MM/Kb/G2J5IMMHW6ATD5Rw8v\nnNEUzp3nVbGrkDHh0ldJH6XLkKCnQZhlZJaNkzTxy1a4sKCSqwTiUhOg2VVr\nNBvUk/n2XVlDqXUfKH6wWp7ndxbkcp+joDSIvWKA/BNzc5rNOgiveZjls4Ej\nk4IKvBT60ul7kh4EBYB1mK+5gzV4e4RybW+ISnpFJkBs0ptM/s1fGJyCvsIW\nXVxV1ih6aAg7gEYKq1Ap7NmHMobWBZrIJ2a3Q/V4qzDHbOYhacM9m4CTdr4k\ntXIEFC6DGFL0yvnFIrqIRoT2lj0pwFzwIavN7fHGVF2ThO92R1ddzknvlwa+\nfX0OlBuf8DeyH4oRmHC5B7tfs7Ia4Z1Y5wogOoREevZtsBHSMpBP7FkLUWY7\n8ldIKbdFNzUMYNOhIsHAO/v9x40001YXRzfv63Dqt60GVS/iZVf3LxwhZnJ0\nc5Ve/bgg1KcQos3OKXX4RXqIGsVrVEwLXHq3g0HcJabK56E64csLwx3QEmAs\nd1y3\r\n=dOOJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e80b52100d3a9ae7653579d78250cf18752ea92f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.6ac9bf031.0","@material/base":"7.0.0-canary.6ac9bf031.0","@material/theme":"7.0.0-canary.6ac9bf031.0","@material/ripple":"7.0.0-canary.6ac9bf031.0","@material/typography":"7.0.0-canary.6ac9bf031.0","@material/feature-targeting":"7.0.0-canary.6ac9bf031.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.6ac9bf031.0_1592596106439_0.6259047609231101","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/form-field","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.c21b5c367.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdf211b3c400ec5196fe122851dd5d6d6ce3e38b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.c21b5c367.0.tgz","fileCount":34,"integrity":"sha512-eQP3DKi51Z0KJY40usTvBVES72rLArAb+h14Ht8Po7NsI0oLUSiXnj52UczqT/u4BNmBF2FOUn0r0vvv3leQ+w==","signatures":[{"sig":"MEUCIDFsVgOZpQnwSAdYSX47PjGCwftjOd9QpmqCSQfUYW72AiEAma2lAQLRqT7QNbjIrBfLsXoYvTqg+IQrfXuzVq129j0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RvJCRA9TVsSAnZWagAAE/0QAI+F7FJbn2ooMbyKMs6N\nZlj2WOJjSoPtjmH/4cR4t6Dxb3JhG7w6wC+SYsJ7ticQkOjB6+nkaiKJeMaS\npKtq+zX1KJC6w6k5bzHnnJ2mH/AzJEUeZ0nEiYKCDtjIEntyDK3yNUa8iWzI\nfkI7am62J68wpVSCv2kbcG7nrDBVG/P+Bqf5mXCOsyKJtiOf4poE1RTmYjej\n8zyHPMHSgl1YqBlRMq0MFhdiwqdmEsPYIbWksqMVSkmSlt/cEgvRnG1rjVfb\nmhbXUnYfFFFyndEYaQhhmW8mHMkq/sD5kWP7FkD4N8DwPf0LP7/yO52uAJlx\nj3zmMYmgqWyJiZTaM9ZHVf+Y4wQEfr88YD5U9A559N+TlimTKMZOJuYpF6AX\nA6iegIJyftFKree9N2xdX5l9rjSJ8GIdxV8+IdBhJtlyBdZ+W9pOyFofWJiA\nZQXXV0p6C/pKptmslu55v0JfgZ7pnVtgGAAtp+QyLtErrtPU3BrffRBxKYZD\nRc8qYrJpunslgGW+3lQL0YX9IfmWmLhrE3qxd1fc9ayyRpUTLLGawlPiL3qS\ndvdQ3hZ4c7IIg5HJt5Lqf+zzYPI5JIITFSqU1CeidBK+iwrfJxUJVSyhuauC\nlsXxgw0MVHOjE+JcV3JriLadFfgYy8MzpTudZxQrsFNiusgJt/1zPqoqafAT\nvC3u\r\n=3Gix\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"08c734c10ebecdcec22cb27e38dd9d3941fbe847","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c21b5c367.0","@material/base":"7.0.0-canary.c21b5c367.0","@material/theme":"7.0.0-canary.c21b5c367.0","@material/ripple":"7.0.0-canary.c21b5c367.0","@material/typography":"7.0.0-canary.c21b5c367.0","@material/feature-targeting":"7.0.0-canary.c21b5c367.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.c21b5c367.0_1592597448847_0.7462051119148942","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/form-field","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.bfdd7fd39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0aaab7335b9e21f1cf6f4e9936fe4d9aa16927a8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":34,"integrity":"sha512-K8GPXBHTXaieRASfCCzM2Pu58V0mIyf0EXaVDYmfHwQUyVNkyObOt25YxqyJlqDtvqYLGtQ4vlZA4LYT6ZAsRg==","signatures":[{"sig":"MEYCIQDUw9MMP+vZooAIAcDOWHh49fviMO70UguIWRTHdQiDBwIhALptO58nz69WpOGRJ8eu8cQfV3rDqr+7d4l/6H67dVCu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R34CRA9TVsSAnZWagAAxF8QAJPQDZVgQXqApkA65jGM\nCAaBKy+UY+lysFe+1RCbCbUAFx7o6WoumYFwSGeOALf7pLH+s2WYHmKOkl+3\npnaTbGKWxoMAFsym1SNGJ+ar9S90X3N1/OYCM7wJ3wKmJK+tWFjhw4wNZEZs\nHGc/nuvUXpVyxLmZVZE2Yjw+mePARHL0JH1PbpEVgZdMSPmEm/sVHgpU1hPW\nK1eIZA+5MLz9CoNdpugBJiUfAoesYIHpnszc+vmpHF3v9R9KfXzNqDMr12KD\nDVE1O27AOhK46IdjrX1zgCKFY0rLOuBOmhNcC4hb+GYn6lRMiyr6N7DLPkPg\nd8dfDULCjNCg36slx749AFc87hQGXsG/4TXhZPgLnyJP3qoyVy3cYQmtsmmf\n5Q89QHxGgvxczFQ2bEBtImHLPNrWoP+ICDOmYEzKbFdn95FP1rGDiXUL681V\n6RQ5ChYsbvtzR0+EsrJBkKAB8Eczu3/D0+Qq1PDM30LoXsn+lZswuIL10E3z\nJ6L8BfXUEYQPYzlQBu2luiklhhEM4x9b2Lia0TakqfeH+Yq5fQGurXyePKgB\noy9e0Rmlg65u4+/aibPlVzTCVdoEvCFWtbm9pve4iOBy9n0u7d13u/Vnbk1I\nsHcR50SLsqTFXUFPhSeaH5ffKg7yi3z8uHR0Ny6zMxnwHAQ1hVMQlEebw0Zc\nX8wK\r\n=Um5l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b9b865bcb7a8ad91c21f4b1cc433f6a49dc627a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bfdd7fd39.0","@material/base":"7.0.0-canary.bfdd7fd39.0","@material/theme":"7.0.0-canary.bfdd7fd39.0","@material/ripple":"7.0.0-canary.bfdd7fd39.0","@material/typography":"7.0.0-canary.bfdd7fd39.0","@material/feature-targeting":"7.0.0-canary.bfdd7fd39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.bfdd7fd39.0_1592598007918_0.27646203294174243","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/form-field","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.10b505785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db8fe2280e49ade43217eb9ddd5ce5f8e2564a91","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.10b505785.0.tgz","fileCount":34,"integrity":"sha512-HOcJEvGWm2MWyN47vJnjicXfEmHWiwk9qsKMPGJ841vj2lsDiPlO0XbdLQ+8XnnPpX43RVqd8J/jJXLkSS5otg==","signatures":[{"sig":"MEUCIQDPz5u/+mcXFe/+hAbNqTLNgtjrnwuMYORP2RW+GXP8SgIgIcY7n3uwxPPBgy5swYSfDf6mjOf2GsjFg+qBeN2xPnU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R5SCRA9TVsSAnZWagAAkD0QAJKhLlDADUkgJrVufJvE\nh9+zExIty0SwgldwYgcVe5Zpp8N9/tZQ1BATnvpdRxw8KlF2qmfXLg/pvUGn\nGwPv9JbhvL7R7xOstX4y16fjyAHys/Zib201BqB2KhqiaYDjirIOcmWF4kM2\nv/v2xsMMTjobBp01vTf5R7mkLRxKbyIHmWeLfLarANbYnV+6J9Rp7fp+ArwK\nQp3oqR9kynm6v3UGAAuX8WEoo4dCbzuKvCxMmxjYQzH8eY5cPgIvMbRmodqY\nWcwwCLc3o5j0WjJl13EGVkG0ZRGuBfRy3bTIS63GvRPTZNLa5nQ88At2w/LN\n9rOp+JUcZyPzqyiwEfxd6TbdwcqgJIJl46mKz7DBpfoFGPlyJ9EWFNNMKKgC\nBONLryUjrc/QChYbqKwX4woJuDy04AjP+3ULWqdVH9jHNeDhPhfvsEhxtRn5\nU/OnYLTovt3HjQbOQ0geqy7cre8vyxgEhQqMD1rZHpbMIZyXQl8Ay4UyJzwm\n5bN3TSKRW6gbqfzVXDo1zTzvRw7HO9FkXiweoJ75iZf1fAXE6K+Up6BozERy\nAzRygUvkZKXRLn9iEWPga6AuYR/qxf5DeoAPV8tquHbiwMOneXnWawDwQXfG\niO5aWV42r9uPwHHvD/9ux7TQu1r7gnoqBr36pxYrhwaFIrv8iS+olxOBiX5f\nNmWp\r\n=ccMG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ed5923edcb43bfccd9d40cf56cd605eeaab00d1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.10b505785.0","@material/base":"7.0.0-canary.10b505785.0","@material/theme":"7.0.0-canary.10b505785.0","@material/ripple":"7.0.0-canary.10b505785.0","@material/typography":"7.0.0-canary.10b505785.0","@material/feature-targeting":"7.0.0-canary.10b505785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.10b505785.0_1592598097614_0.2953406106899912","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/form-field","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.6483d3f44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b7c4d0bd672feaa27ebf680df9e137cd82195e5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.6483d3f44.0.tgz","fileCount":34,"integrity":"sha512-FCK6aRH+AzonlZTFyR9HAUhvRh+dH7+TxburAOa593wg9m1eIIUy8PsPwwvA4X8C9eWadOm0XzDe/0hP9SNwEg==","signatures":[{"sig":"MEQCIETchl6xXLMGGm4NXqE08nOqA4F4Y7vrs2mFlIzxP6xvAiACZiI9TD1GSPe1DgwXhP9d9WMKLHigasPjQhFJ3STNRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SIgCRA9TVsSAnZWagAARBIP/1vyv+ELsS2R9rV5LDhj\n6teHPbu0a+QN4RD41YuvgCMuUBR4XzK1KW3mK5bETSsmq+tk0cwnl06PsQmD\nTNEMnYNglveZhoN3xT/7T9Jk8VdB2tUwufF/cY5mfxrz3X19VAciXgz6kmuU\nYL9vNSIMeK1ykDxmh3nHsMe5ryVfaYVe6waum3iYWMy5OzP57kr+XaP8x6Az\nJg9X15Rk71FlJCMbqUxO0u1cVw8mLL9DNrJO8arTurKNJGoAh4uGOJV+3l/H\nvizSExE3OW3Uy6ucxp9lYj34sTQDbLa0bL5Y1TrSZ03X0x5txp2fn2vX4mdp\nCmom3FbWqyLeeC5vg7w4B5Mqa91Pgpk4mn1YGx2BOiFF/z1wbSyi2OxVChSU\nfA/EUwq0s3+tn8wID0WIaNvlAPmzQqfpgiAYtiIRWOStrpXB2LsCuv3gGrn0\nwZstdlSfBBFJ+sa7nvonhQcLw+E4yD/H1Q8M3RaaqD5QoMC2VhSLIRA1dwFw\nu3ESErE/VGfuDKyolu2sS89DAc2YY9i8KR+0St/0DjHgCWipnVMEqEXZYMgw\nSIFr5q5PjX4eLdlwGLOUFBlm/u6TPSgLh3wV6q+UO+RQvHIXobVTskB6Rg3k\nnBmX3I1alZC5jF2Pm9K98CgaDIp6d1HlvZfJOZq1FworpmvVmAuILQoYcSJ2\nrUVd\r\n=DRs0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5c831da018408423d31c9c4813c507ca591a010f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.6483d3f44.0","@material/base":"7.0.0-canary.6483d3f44.0","@material/theme":"7.0.0-canary.6483d3f44.0","@material/ripple":"7.0.0-canary.6483d3f44.0","@material/typography":"7.0.0-canary.6483d3f44.0","@material/feature-targeting":"7.0.0-canary.6483d3f44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.6483d3f44.0_1592599071815_0.9189414700507383","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/form-field","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.30a74e921.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5151c73ff9d4a44957e4e17798d114d980ec5ba5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.30a74e921.0.tgz","fileCount":34,"integrity":"sha512-ItRmYPYYNTFziVlWRekS76SdE31L6C0KZITlblsBjLTg2ww8RGTNERPTX6tvgVSRzK7YgJSpdjFjXXngiv6A9Q==","signatures":[{"sig":"MEUCIQDsmF9MIlP00K6mnTKcMBepPQf2mYXH4SAdOVX9ZyRTswIgZJX+pwPGlYqgZCTX1M5FafBVNbdn6YOvEnpxGoYcxKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SKmCRA9TVsSAnZWagAAUcoP/0a64pGwfr5wRnTyIBFF\nLdgz/w1E3vLI/lURFmRDXc5jUG2tixk45zsyM0kDB8a5Veq0I4AsccLKeH0B\no+LClj5pfworAAR5gfdMhN50oaxYHVWyGOCjEYn7HTPa9leKYICKeq55jfQB\nsN+y8XIdPhWXD9cGIHgMjnmknKN29hxZVqrE3Mr/aT4Bre/Y5vhjlBQahm/v\n5Bgl1iUN2zNjwa8P0eRLubGqUcouesk/mcljr9yVdmESrpdwUMoF708wlyJ3\nlMoWW8BCd70k3ho2si1HdNxRP1Fsosn5ggBIoSwkJNacor6I9j7WOb6QNIdn\n0bi4kEHt0TVvy5zladzHCJ1Oj/ae+yqpRAMXIcnIUHJ3GA/EQOafMzuodjkO\nJrXBgZzBhnA5yj3QI/3bMp6CXvdNVCSs2oKrdPi3P0zXOx/yUDN/sMmK+2Kp\nxxcnGJqKbwsC+3GJ7bJVPnnBMXI9KuYHXwLVX9FK8Njn6yGocW5xb34qnCId\nRs/RrHgaDTq0oxHZt8jYDd9aLkoMzYPgMqFAfrZMvHIbFPb9sCMwnh7inhEe\n3N18+XMI7E1h9GtFiOE3BNvo4GcBk9CBoB0Ly/VjySyQHd9j/akA3763/LY4\nzTdQLaXddO+pVbwhyvqDtxq5Cejsx8kNW3IcMqZw3wBCuz7HOocoxIhjaabl\nUZno\r\n=qG2+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5f983e004147b05efcae5aac51dc16aea4a18a8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.30a74e921.0","@material/base":"7.0.0-canary.30a74e921.0","@material/theme":"7.0.0-canary.30a74e921.0","@material/ripple":"7.0.0-canary.30a74e921.0","@material/typography":"7.0.0-canary.30a74e921.0","@material/feature-targeting":"7.0.0-canary.30a74e921.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.30a74e921.0_1592599205552_0.8566511986813303","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/form-field","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.c20727498.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85d10b0c816bc26f9703d93a90cb1ae8288757e2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.c20727498.0.tgz","fileCount":34,"integrity":"sha512-FNt1/TPXm7JKRMmIQFK3ej7Ws9HuhxBM4S2Or+p5f1MiWZV/323B6cGiCPLiHmBbJWSCF3fbYZGrTvlIGVq7jA==","signatures":[{"sig":"MEYCIQDCNNcfB5Qj+SOPbMxz12onKnqCN041hpWJ6C20NHlOygIhAI3JvuwS+bOF0D7kUI1psXl/WV+2+H2xKz6OtbfR9ePi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SNPCRA9TVsSAnZWagAAzJAP/12V0chQLxHhSahJCxYV\nwUF9niXsTxYJpyKWUz+6xF986CCxKlGgvTb50k0HPaqAOrnvch+RnZs6tJi5\nZabZsOjOFmWKL8rLnJV6VQUMvbi02/3n0cI3ejHCGSl7a7gsRzy3dFseHFGv\ns/+OBLAjgznV7NOrDnhsXRrRONvRV83bc8qvL02y7IB8H6tcOxmAq58w2Tbu\n4LikqnaYyQtBHPYO95wmjmA2J3b5klyZEInYrCxVFWiAll7/bjty+ORF0hPz\nstd4VHEZ8GdCqbUA9J0ZTsXMQT3LXIsfrA5Hj53soB/0RLAW43L/eZFLNO8r\n4Wk1Re9rzuCFPX4Zin5hi9VSIakA3FyHyloJys85oT9md8wgHeQhjmzgU5Zi\nnr6kKSJ7wVh5sDuYF/697pM+AAq0W1RZtVNlIU/q7po3u48KsN+hQC0+UUcS\nxxoFLwCmErEOlI/gEyoMqCKb5XxVJmENo2NtbEgyYMGJx+yEWtnFY+a1Wkia\nCm+kFSnM6UY8J7iLIwZwh6rl2mvG/UUN9MI25gjYS0FOK7h+MMa/AkFMnKGU\nUVt+Y6Q4u680vlnz0wKhAnOdxbh7i0/4DISxO4PBTABkvoWnKh1CuGv2R4Uy\nR/o4FGZ73ZilTpJEXizEXpKE+syExaoVn3jndzykGBFnNUUxrpuYhLz5CMx+\ndZL9\r\n=2TO5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f9ac75746f7899d34903c19ff758bcadb9ce2d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.c20727498.0","@material/base":"7.0.0-canary.c20727498.0","@material/theme":"7.0.0-canary.c20727498.0","@material/ripple":"7.0.0-canary.c20727498.0","@material/typography":"7.0.0-canary.c20727498.0","@material/feature-targeting":"7.0.0-canary.c20727498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.c20727498.0_1592599375482_0.20350229189970004","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/form-field","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.4e360ae94.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2629bc101e5ce22e1f534d00892840beb3d1501a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.4e360ae94.0.tgz","fileCount":34,"integrity":"sha512-X0L47uraVEEJCuBRsg50zWCFnXo5GQ+BaXcIEQW1O62fs8ZPPxM3+j7KCwpiISYZSj6fxCGgnHv2zew6224e6w==","signatures":[{"sig":"MEUCIQDPFqpTX1JzdgdG1K4kcwYjaJ9xNYiopoeuNXZzQldK8AIgDa/Ql18e0DjEplA33KKQ2mFra0JWR1qXMQ5QO+x4U+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Sc9CRA9TVsSAnZWagAAVMgQAKLDQvrC7LIGniKaZy4w\nUKT0g7s7sNZyUdVYXkjiy2BIaMNGhF2ppLVCV9+4ORSf0+ZTxIyEy+wNhx+G\nM5gNy9xZF/pWakC6wWYE2ml79t0+pp+4ovKr1iYgT7FiFkMftNgyGxxtgoxq\nTL7kn+5RshVECw97aF2tL10VQS1udSs+U7f50yDMS5GGCfz/AOrCMae1R1ZM\nU2Kb48MjmpUCcc9fio1m43eQWmKkJA0WAlnTV086NjYWztCIDVKsuscRCUCe\nVPaBTLUhCCZ1HfukKevOgvu1VINXE1U0pt4154Qr3EyGC5Uns84h2vpvGBQ6\nCs/uekRRMQXtUtU+PgYHF9cwonJ0Eh4rcz/pJWBlsns/M/iw/2XkO4cHL6c2\nNQnrX7d6J4j+TODMJOYwD1WrXlmBOz0ZFOdLqZA+xqRXghTPG+KbxWTby4Yd\n5glzKc3jdMgygqIXQpAOY+DjZLc7SmUnqVsVepseIQtBZwY97RDbuzPAmVyh\nb1RcY9gXrmw2Oul9QQCoEiLANb0wSYX6tTwqLv8oXOhgmuIRVOfJdMZgE23o\nS9oOMu7iDJar1enlpC9YUqnveE3J0xidQVDC+eQ2DJTD0NqrEYgiF6F2cFit\nP/+YpcvhWaCEvFb2Rvgbso/zsbcxTzuQuFF0d4YlzUP/BSLWLUPanZqlbMkB\ndIjl\r\n=aRF2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7bbb3adc3aa84c4095304613145fa53862e147a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4e360ae94.0","@material/base":"7.0.0-canary.4e360ae94.0","@material/theme":"7.0.0-canary.4e360ae94.0","@material/ripple":"7.0.0-canary.4e360ae94.0","@material/typography":"7.0.0-canary.4e360ae94.0","@material/feature-targeting":"7.0.0-canary.4e360ae94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.4e360ae94.0_1592600380988_0.017940710750015132","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/form-field","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.8550fa53b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fdadec0886eefa07810ddaae8ac7f63298ba2ee","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.8550fa53b.0.tgz","fileCount":34,"integrity":"sha512-JGYjm5TKUSGJkpHZybKxqF4B9JA3ZROO6AY+2lQb2lpBn8MJEBoaV66dZ3gSUGqZVXt93na0ahZV+dywKwUHgA==","signatures":[{"sig":"MEUCIQDeB3ZZoFiZ3aNGyQ+XvfhevilCrYvmN9JhDC6q0uG6BwIgUCksjoOCNGHujJKCT8rB29tASK6yEw9VwaciHOdOmI0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SfHCRA9TVsSAnZWagAATpYQAIwhobkmKUP8sb7eTXot\nRjNZjoCMUByM6xWNnm7dk66uSzrOBB+ZpBZNhF3TL9ubvrWnnp5pkKD120yg\nb84Zp6OulNAFFFFI4+k83TJF++wBwlbDXA3zYrQ2WX2BH5nfBXj82KaQN+96\nvUSy4oCN80PVMTuSnPv8F9uLqmm0jVDSLRRsJheu3dCizuJX5zhW8r4sOUQL\nfqsTBrHK30T/gjazRPHJeidNYxMnyRAx8PJ5jgkrHGbT+bra7PpONtYJfINw\nAZJxsLc2NqrGkDwaRHiV4UuHNMabA5GV4WCW+g6I/gcTkhPe0W5alPRvUE0N\nPb5fNe6YxouKXO0vdzIzDBmmLpidOHVaUrPxXTzM08L9qAxVcPk5IuGzxjxC\nB+CeU10NS9V/eFtXC5LcCqNUdahUPjMxFaNVf2JegtilvvJRmD2jBDpW1PD6\ndvFOv7SOVe4gr0FVlhVz6s/72/fkDbADnsUrXTObEfXyKSjCu7Th0ZRIVXRN\njYZ46ucbyVai2jxxtEdIHFx0t1jHDNR+vMPUPQYnc2Q63f1I89AXtr43hRsw\n9k8VYs6zOGmr+gWOCsHwfFIVZTLycfcX5JfhXoQ55lXrml3GmbxipYvTQWG7\n7BWC/7lkfT5f+scw3ntIULNIZrhwwqZIdDZmGTjCALn7PDXsFXnx+mTHXbnm\nkdT2\r\n=Dhi1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9d8529cbd579dccb2470a1f19fac57883cb2a5ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8550fa53b.0","@material/base":"7.0.0-canary.8550fa53b.0","@material/theme":"7.0.0-canary.8550fa53b.0","@material/ripple":"7.0.0-canary.8550fa53b.0","@material/typography":"7.0.0-canary.8550fa53b.0","@material/feature-targeting":"7.0.0-canary.8550fa53b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.8550fa53b.0_1592600518955_0.22376478888723672","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/form-field","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.93ade142e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97651bfd9c0f5b74b6e32260fafd639c3505b8c7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.93ade142e.0.tgz","fileCount":34,"integrity":"sha512-hb4e613RAcEzF4FgarHL+Y4ka4o6KqtAow5Ly2dsWgOlWVPB8XYcbK3D0zg4bE3FuGRBaWnCG0/ysGrjbvtfsA==","signatures":[{"sig":"MEQCIAfQUS8Ac0gAR+a7dja/XDfTYVTFUpCWsAcQnUMtweUFAiA8FSEuvOLrxU+RMBL22ioyzn3gwqEwzfE7INelhCl/xw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SgMCRA9TVsSAnZWagAAuvIP+QGKY0cahpCRv+KMC+di\nRbdjXAle5HCefvmNrmwOHV5O0JkrL0MFd4CAWQ5mLgRj5+pQbJ6nMHTcB15B\nW4ps64PbFDc0G3wfcaN9PIMHbaNXaIR/cC2FiH7fnA5Z2+xBclNLrndxEs7n\nIzcxX5HsVu18DO4ddQiooTm+ZMyYfupmBO5UfnzZvJ4GrQ8+smM4kmJulitY\nGr+24xFSZ7ykfhh2jxZ3WEZmlZYgFYDdGmS8M1YXFYsnmqyVQRo61JonsMBy\nMm3WkWe5AIsMKG3+HobUAUilcpnur/EVN3F8Zjo+Zo0pqloEpMgzABBSShdY\nIoa2JgwV/TUuHByicaoEaKKIIcMb47DRFmE8SgM9SXqEHiUilCBTxlEbN7jK\nDOVsv+HBUp5Q+Dmk2BgxwZuveRfZ/KQgykFlQCRYd1RupwIO3yao2xXUnRDa\n9XsNZs6mDMj5E8uZVYMOvNzzDKhISuSSJCwxLDFHFNnmRUjJrL1FnFfgAaBV\n7+3qBOoniI2/hFR4ChF/q1ATjfXTE05pFg1ewrt3gMXEju/WD4V6bOFEBCsy\nKBm85WenXVNWeWv4xFJvAWv2TQNqw8AIfJ6SDEiEwvK/op3EHIKQ8LiVtQm6\nHOrOZXIERoEnpM8DVzWBXLDWrwoFFZI2UvFXAPVHeqm/ROA5yvCbRT0cgEHj\n27z5\r\n=25ZZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fe392b7ba8c7033e5614eb91a20bdf2e6d7d7936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.93ade142e.0","@material/base":"7.0.0-canary.93ade142e.0","@material/theme":"7.0.0-canary.93ade142e.0","@material/ripple":"7.0.0-canary.93ade142e.0","@material/typography":"7.0.0-canary.93ade142e.0","@material/feature-targeting":"7.0.0-canary.93ade142e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.93ade142e.0_1592600588373_0.4651629850159167","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/form-field","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.a0032f5bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d0b9ededd2a2a88b50a54a3615a7d1ebc281bad","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.a0032f5bb.0.tgz","fileCount":34,"integrity":"sha512-V1rLbEHpm0R75unV3MTQp47FvGQfU2uQDG/jAzrzmAtVRZsujP1UDDpbbOoXvaPsB2xy39iVyEMbOYEcwluEsA==","signatures":[{"sig":"MEYCIQD2DNeY91O/LQlUeB7UK2h9EF/asJnYI/pz3N0hqVb8lgIhAPuFRoQgM6C28xlQuZbZye0jKxarQFq6zs8pHShEj/uY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181734,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S3yCRA9TVsSAnZWagAAtZoQAI0zuqBHdaDddeKfNOp/\neHJwi4rFf3Q6OuPwxZHMei1ivOZcyyAqWbHc+DaijRCViYVu+tbbL2REMGyq\nVw63eVxqIKzrrLjys1MSaCZVkI2VG1Z6KaaV0Okhpf1mKA+U71Z26OWITumD\nAshhQE7p4H4CMGPA5lnJKSeBWrhENJMXr1ZYXVNOmrr/sYQbwyinaQ/OT+d1\nxQoo4vYROrRHA/QRXd1sku+ZrqrtXHqaxK8QoGB9AUB4RhA2JXNHLHH5iNZn\nK++ekKxis6cB3bHl4bJI3mUlOnqRc3mkhim9rICVi2q9804XfRU26pzHCzDd\n3/79aFHJ3T6ttxrfApbrjmn5V+M6kZpSxqnFXVi8RYAk4WFwVuBLpMjbwlGs\nOiejA7XGOjfwjKM95ao/EnkzJTfvJLDn+k7FOkT8W/l8vUSJGScPmGD4IBpb\nQtAHqw4sm57CskT9goPdXA8UtZe9yJ3qnoXqEiAHUhHhukiS1BHd0pzAGid7\no5kEWqdIX/cnO2guFb1nxoWAseHDlNNBbU6ng4T02n1+kGhBE9qW6ODm/213\nu/rI3Dzb046L123OpXHlTXp7J6F6FjxNQVnvtXVj4TD3VkUbh/6oSoi55t9U\nhne/73eZBFlHlYsaWnwy96FScntqhcreOgGKguiXHZZBQolWHZko2/Xs+XDY\nxRDL\r\n=7BR/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8c0789d8c409d91f7f4e13675ac80e0f355bac02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a0032f5bb.0","@material/base":"7.0.0-canary.a0032f5bb.0","@material/theme":"7.0.0-canary.a0032f5bb.0","@material/ripple":"7.0.0-canary.a0032f5bb.0","@material/typography":"7.0.0-canary.a0032f5bb.0","@material/feature-targeting":"7.0.0-canary.a0032f5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.a0032f5bb.0_1592602097551_0.36796282958582593","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/form-field","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.3f342e721.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34276f182928e2152ee122f729ecaeb501decdaa","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.3f342e721.0.tgz","fileCount":34,"integrity":"sha512-LJujMbBbhPKlWNWvbYQKjoHbWPgNF9tFfTDIDI+yIrbVGigEqNlJvAKla36BkqWZbKmDy5fbjIdsB15aDifyPA==","signatures":[{"sig":"MEQCIE0W4a9HUAu3XGC3lF5QHYlrkXGEae+IaLV4Fh+SGxROAiBXdfdPDc5LHLozT9vVocF8VP6SGlfbpeBUsTxJADEl/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S51CRA9TVsSAnZWagAAftMQAIRvmgNJh2kNL3rmxYe2\nOibZosIdanKXu6GV/54tPM9VVH+yUSgRrlQoYtiDdJBqILpTywj7/O5FQcTF\n4/j/FNzhIVOy/EC/kdLzImLMwPGtvLNee0ugJTMk2BhX5iIsJ/LLaLMLa4dg\nJ0Ux5GrbbZ9rF0hWiXM6Y7aIXUvW7wrR2/r1Dtpgk2ClG4NMLBhdcwQMXd7F\nHbe4Yb1+tSqaH5FzF9VMiAWYYFB4lsa2JacGMzyVIet4sv9B8XGsAspsdKSt\n8eFlJq/w8kBxQQSOJZJmXsw8EXrg1r9I/sqevM61ktBxBNibi+LQHprzDsZr\nNNMkQdXwr6N4SFdHL2WXejW76Ico7gCBW9zulBAgDD5cLSJh/0qfGRa4VJRe\nKA1sM59dzghdyRiDoRY96yj6d7YgxvbA0P4OgvZuwk+1XLClHsX6Dt5GVw0t\np8PeBMLZXDF91hqoE9XiI2tFPjy2uREpuybFWzupKWfrtheUvZA7GSBEhAml\nRDDyGV0Re0+HvtzlwU2y6zV4kqpx5VBnWvYV6fZXo+KXBDPRiYAcQi1R4ne+\nzOW7ljjK9aObPsmwlmHARGpuNxvbA0WQbwJKBwQoGn6vb3D83wLJCLqUs2f8\n97xwyv819PR9xnkte17c/FAUPSttbYnkCXtSjnF4x4gZSIeseJ3iHScc4kyf\nO/j1\r\n=/I1g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e972042c8ae08ecc8469492707d55d647e3495e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.3f342e721.0","@material/base":"7.0.0-canary.3f342e721.0","@material/theme":"7.0.0-canary.3f342e721.0","@material/ripple":"7.0.0-canary.3f342e721.0","@material/typography":"7.0.0-canary.3f342e721.0","@material/feature-targeting":"7.0.0-canary.3f342e721.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.3f342e721.0_1592602228481_0.18675283332663262","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/form-field","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.ff89457cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae33e29b6e29e8d89245c7bc837e8aa73a98db31","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.ff89457cc.0.tgz","fileCount":34,"integrity":"sha512-2dOg9iR8YyP32xqWR2YaBQRT9imxq66TCi8UT59wmnpwDrfaTv8xoz3HCYmZPc4wrhAkXbdC6yR5LDMTIyMJ9A==","signatures":[{"sig":"MEQCIFlEAHrF1i+o2KT7KvCY7q8NbvsPbrOn92xG5iRrX1+pAiAxzSztaQqlJlqS4XpulvLy0MIfoK0mI4+vAbEWFvFN0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S62CRA9TVsSAnZWagAAtsEP/RyyPCTzEjm3cnSubMJD\n+pu98H2qR6hHTGh16GQRpzgoHBtAutJv7moDFTnOxAxzLnobqiL2nKem8+QL\nVy1nk0Ob1uzSO4AVdXnii6ciPUYsvxOz2RlM1fKgbNo77JNQBkL/2DbH5QIv\nnuRwSk3cq1eClFnsUdacMhZiCQcACBFAnXDrAzvKsMmkB7HNIZECQjTyG3qT\nqQ6GH1qWdgkZM8f2Xe1/Dbyo/VhHsa+kZYrcpxAPswJtFiyveNo1O7bLF3IS\nDS5OjMRGoOuOuoMCjM9R9SdwbjRx+Ya5zULHs8PNXD99ZHADH83ABuz2YS39\nFm9FMT7wP4/k0Vqwj6v3q/m4v2d3KgGIT3vxwCOjjMIxE4nysEfT86ZE26je\nqj2jWALVIi3Ezttr1DTFeNvVT8w874BD+vKWgMu1pK0+0+kA8c8+J09hg5Qh\n13mQCya97vvB9gqRO8KfLNBZQ2OmmZHTFcR/L2rQDDVMCuxC5WwjXoP+6OU9\n3Rck4rHuiHiZzU0vZbSTeOhM8pjDUOmRafQh1EIeSMHKmMyyi1JLY00cqfp4\ngjtc7kjF2f0KsJ2dpD7ZAbVd0WxmgW4t4LrC7a4IxUk/P22Z3OSc2hR3mAkJ\nS2JjPhQbt3gPimM97wCT/MxwQO6eTGDs6XWTP4BFY5RT7AllRsgqBsk3m85E\nOpXf\r\n=Z9Yf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1a3ec64383e8afdd818b5edfb74f32f6acebd044","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ff89457cc.0","@material/base":"7.0.0-canary.ff89457cc.0","@material/theme":"7.0.0-canary.ff89457cc.0","@material/ripple":"7.0.0-canary.ff89457cc.0","@material/typography":"7.0.0-canary.ff89457cc.0","@material/feature-targeting":"7.0.0-canary.ff89457cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.ff89457cc.0_1592602293668_0.33020453549028983","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/form-field","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.4a1855cf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d56613d0b578c16f73f443ada44a878af81f831","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.4a1855cf8.0.tgz","fileCount":34,"integrity":"sha512-/ro+k3dQd3e0VdaUSBkdzuU2m+YCa/+iwGrXuYcozOGB/oBZtrBMuEYzLrHfYwaRX0n/5fSM29PKctdRRest5A==","signatures":[{"sig":"MEUCIC61ga6aHEwJF5YqfCGYGpPbeTQy5+rt9RqquE3qnPpFAiEAzZEoZMRi7w30YRi4n6HETFCq9us9FIAf1Gt9LKMSdWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S9ZCRA9TVsSAnZWagAAgAYP/RWnwj/AQZlMcrtTaE6X\nohTwwKmWQfA6F8h43/1jk+SYCKD9uzerdu1OTzmbUcchHPv47h0yROqA5a4m\nIvmhUOLdUuEK/Mr+brZ/DoL5zi6AAB//gE73xlZi3OQjNQSM8SmELcJydCxO\n+0lPX1aeW6iX/gUHHPydh6t3BbGaO12tuhnSJjsJZBgomomPIR5xk5jlJyE8\nbwHK/ozfWLvcOTj8Okkdiycsd6ocEJMkrqROYPLPViJLCzg6+xcwitGkjUB7\nlIo/N/fYmA6WjboNBFQ4npB9NwAh0xGixn+hCqvPWIW39TA1rNuYD1t79rUs\nKk4wD+R833zdVQvCrO2PQ1982rwOVXoUp8RDtX3p695xSWH9VejNz/o4rMuU\nUx221sJdUqwxCfZUJe37RDkbXknzTbjD3iH/jwjnlCk9z1RC1i16sFHUtI+x\nyTXC+JwEcfPVqYkL4PWCLGYqbGUVxBKahLOhnVIB6xFX7VpK17qEDHb1q7k1\nTkVnLcIqtBnwg0u9V6pOu17SE8oig6IvifB0L4NbRbE1C6HmtJF14rK71bt9\njKw14F0bxD4ZLbrnx1r1zjO/CE+w/B/o67KEyXiHaVkXCco9cEItmfgt5mis\nbysOBG7t+FfekYL83E4qBoYZLuuO4D0aHRg4JLOudamdpgPId8xyMqZqYMJI\nPHeT\r\n=xjUq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"eaeac5e820cdb30fcedba281da8c2c4a846f0e73","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4a1855cf8.0","@material/base":"7.0.0-canary.4a1855cf8.0","@material/theme":"7.0.0-canary.4a1855cf8.0","@material/ripple":"7.0.0-canary.4a1855cf8.0","@material/typography":"7.0.0-canary.4a1855cf8.0","@material/feature-targeting":"7.0.0-canary.4a1855cf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.4a1855cf8.0_1592602456937_0.19071579266202043","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/form-field","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.8602f1b4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99b3749edd85867f7cf91793d843a5b183eee79c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.8602f1b4d.0.tgz","fileCount":34,"integrity":"sha512-0P1YAKNt70ValF/Dpzi3/YdXe9okbCUOPZYz1Nik+kb/vjrcgXNacIXJvaQ32rPvbghUkyTyHuFzkUDMgL1kwg==","signatures":[{"sig":"MEUCIQDQP19gNH1jnd82xFwA/a0qEXI4KJHHHPwQjcBOA3RF+wIgYcHlrvN3J3CFdBU+NTySgWC3vNiI7/RccmEkY+1kz+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OkqCRA9TVsSAnZWagAAfooP/RPhRxKYLz+7wBdJi8K8\nuLXc5c6OlgP9QGev0J5sTslrXnQO3y3cpH37AWOH4Jc2gQ9CzdDCdCwFoBop\nAk3tdJRxGGllPtrcQiUPAw8TNnYjFm8AMY8Z4XijhFjAbzr1c0I7OQmOZot1\n4DjqbjIz9jav3+M9UKy1UpIWCwZl9IA1S3bbwYXqvTDTMHTAKGPO8OM+f06Q\nyaSneBhgnNFXjEQvZ7JRmbp0dE5a/dTelBVK3pT5/a82HZ3i14i4WsR7mi2Q\nyXiotcfUu+eRiiZTbhOfwoNo76AXrZx1b23IQsbMli9a18Mw81zFNkab9boh\nyjHkRaC0M75fnKjt0PmMQEnzqktBj2Imk6EfPhL3ALBikPkXkZPosnF27CxK\nMcPSTDYbpxXeUYn2/p8mQ1qZzJEjIaVnYp6y4Xh4eEmM6wRxT3YIAVM71UAI\n3/wZ0negOBVM3Z4BiYcLbSuPwMVUmuoFhTdxUtR0/H2QktHCxnnpeUrolVXj\nbF9cHvEdA6uE8C5qXV9vVcFkCHqE6BJjCADiK6Y51VmCtvM/nrzMzKmy1589\n/qjsSRpeoZ2qi/sOzGMDFKuu57C3IUs8vdfg5WbSNAmSUjBsMRHQK6PgRnbg\n+miR7bvK32h0DjqQQsGfnNSxN3SqI8X3ys+CwzHolMJl5/gr8jXZ2eQX002t\nzcAC\r\n=1r/8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"07f6372c5a2f6f8add971db62aba74793d912f70","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.8602f1b4d.0","@material/base":"7.0.0-canary.8602f1b4d.0","@material/theme":"7.0.0-canary.8602f1b4d.0","@material/ripple":"7.0.0-canary.8602f1b4d.0","@material/typography":"7.0.0-canary.8602f1b4d.0","@material/feature-targeting":"7.0.0-canary.8602f1b4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.8602f1b4d.0_1592846634244_0.8803218647082278","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/form-field","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.69f9f0982.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae9f74536cbacb5c37f255a1d2af564965c5ccb1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.69f9f0982.0.tgz","fileCount":34,"integrity":"sha512-A5ONo0uwmtm8C+7wsh4N90SSiHQI1NgyZCvFyiZ8HKMV01fDt6stRR+jWxz7ggElDZftW8Z9jQqUJgTNgkkE+g==","signatures":[{"sig":"MEQCIBw1zN0FUN8n8aExJOSeX5uA8T80Us7BB2sOZ1M6ua6ZAiAN+rIeUr4DGJGqeLt5XKmlxvXETWC0JsqeXGGv1NEEQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R9GCRA9TVsSAnZWagAAii8P/2eG9pw4j3A9CYPLvvcl\nDTIjitpqZzRLulKf64WrBmSXGBKQ1DIQXgkX51OKzaPVg/BYGF0ZQP/vBxhE\n3FQ7CtFVLuckrg4v7zFNKCW3Vq/u5370oGOkbmGPjCA4d1LVWnThCWSCxetH\nUETveIuwwlGXomgl2HaJUkvRoAG87tGow9YLbfVhp64/SLGAgr960km4Xu1S\noDWpCJ+VJomqYPiX0hh/UclEOcJOI8ZmG6r/ZSYt/9+mxk1+TaeT0XAb1r5J\n3GjtCxYbUt5ySi1MgGaBx0Xy/XuMNIn6bmVw+Fokk/mYcuRdkIhjlu6eKRIN\nbqvk04BliCaUtxR9w0nOEcntHlDV9EpYUEUkxgWJ4vnptVKDHg+kjCPd8BMv\nBmw5eDFPTxgQqHnVPOVR2JQEAmse3zs4Z9Now7TaYrlqhX73KJgluTI21QOJ\nxmuqZbK/Z3UDUDwOOj+Gfo5yxKotsuVOUw+1zaA5N8Ck43rWqoNrviP8CF7u\nzQc8ga+5Yrtsgu4Z/SFUbtn75C9kPRASlDXDfeRgzu7KyMXWEMgaTLhGeFBV\nE1Wx1tT1nqvmDmy3YymZaIUtM6+5mNvzzB5pwIqcSlgJkNoaXR97AJa5/wMB\nP8wHx1cGuc9Hi4GG49rbH+R9d/VYroW/CFi7EQlIUNWqBVhOPcY/+WSfg4eb\nUyXO\r\n=PADL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3aa0430a8c5f21a2aa9f3d54afe07b1c1b1cac09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.69f9f0982.0","@material/base":"7.0.0-canary.69f9f0982.0","@material/theme":"7.0.0-canary.69f9f0982.0","@material/ripple":"7.0.0-canary.69f9f0982.0","@material/typography":"7.0.0-canary.69f9f0982.0","@material/feature-targeting":"7.0.0-canary.69f9f0982.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.69f9f0982.0_1592860485831_0.843665404985634","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/form-field","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.369a293f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fd3144cfaefc0ac79e1e837dd741cbaf481a331","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.369a293f0.0.tgz","fileCount":34,"integrity":"sha512-o9EyxHy/gA7C4INRrT/98JZ/0+wq1Kp0tL1/I+QuJPomZZ6ba/DKw1l+CHCDG840subZ1aXjehuaU/ix6SgzHA==","signatures":[{"sig":"MEUCIQDbTEdJNIpm33SLq/WCBbtXrsLQbLSdbuT0Va2h//UolwIgaFtn7ywVc/iEqZEIOkifj9K1KIH7O2GNgssqbFXlAHg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R/fCRA9TVsSAnZWagAAplIP/j3WQ250WMJsEppBrV7o\n8/MWWyKzzZYdxNIU9WV9n2gAeKoVa7zgCqFz4Fc7Nxr5yaX0AUEP9pZ2D+d2\nn0GsxM0KCI06H52pco5okAlkZE024/VqLiPrOElqM0NeOFzLsfSLIlLhXQUs\npy4kG0RUXO3DM8k8nMmuyyI67SluFTDaLHJu7xfo99lv0THELpBPdIsJUZPQ\nq3UIjwOLifM3LMuNsFfiPNrTQVFVs0UqPJy9CnudxzxMTDaKE2kGEkybYnhP\nqrBQXF+/XFJ2GhToV8EQmtf4aVvESAt1h3b7sDWz7E2n2L4IEftbYFtE25Ds\nh63VoPNXMOqTrnqQFKly3Mc49JYCnTYr5ZN5jnwKvPwYukmLYgAQxx4fF26s\noCfPQY8stTmInq0RJnjG8fixBaClgEcjVgwis3xQPxt0Sw4dIFbSMC9Rn4HG\nvxPQJPZc+aqfCT483X7mlRjIET85md7DdRkthcI1NyOyWQVtbctMZcnDLr+3\nPl0Ng0rjQ7meYKMI1QbLIjU8yZSTAsD4H3VW0h5VoriWPE8JV4pLYT5PXkMh\n5aSA3yMfGAeOAjgcbF0NyMymlBKNSXeNW/2nlKiWv4Dz7Me2JMTOgZG3dl3j\n0CK5EzG1Avc9m1rwm7sIfd9PacXd27AwgL3gwkI2obGUg/YL0vrgHacXnbnD\nJ6sJ\r\n=qMiP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4b9943a16a4fab61aaa8f5dad0d4f7aecee862f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.369a293f0.0","@material/base":"7.0.0-canary.369a293f0.0","@material/theme":"7.0.0-canary.369a293f0.0","@material/ripple":"7.0.0-canary.369a293f0.0","@material/typography":"7.0.0-canary.369a293f0.0","@material/feature-targeting":"7.0.0-canary.369a293f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.369a293f0.0_1592860639118_0.7959387866072032","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/form-field","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.f1432b5c6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b5d993396a4da842a5864a834183dae288863c9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.f1432b5c6.0.tgz","fileCount":34,"integrity":"sha512-4AZhNMvk+wc0ZrjR1Af/h3soQd7+HW4ELSoW/3QGATBksmA13Ao92oSDEGmGQ4DsxxGBW+nFwD9xhq5ETUmZ2g==","signatures":[{"sig":"MEQCIAkBaS6QUPyTWik6t/pHjrt1TgQ9UjS9qQbk2BR/05O2AiBdzCYypGFrfJGjQKHAwyXPCFzJBZRtplqytq86UR79Lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SHFCRA9TVsSAnZWagAAznMQAKRWIql+WTwZgjJaEtEx\nldQWr63jGwFjOvnWeDbbvJRxEmRHPMDaEhxydwGg3QiL0DHoIoY5YRNfs3zh\nzED3JUpRcumDDfQ7ZBHzT2cewy9e2VzxZW655cqd2vVyPUdUcd4RwdSj88PH\nlTtMNz1UKZsNZ8qeIBYw1fwhoTLwJMFlN+Tg+qAOx0uXwtmrbuMSYTU643zH\n7A7TXnUtnM0NcMVpGYMdxnRwOU5lV2NQYcd/ykBHuJP7sHK3W3mCMvyzZ1pX\nTLIcxSz+GY1EU6aRqqHppMsmZC6QWpdz6awDqn079Ba5KUfGtYFDRLlVgGCE\naXjG5z5Zd7O4GH78QmetaYDbHEtoHHaey6pK52f6brT5q7ZnoaM+kQpO2RR3\nNc4s6ulfei87bYY/pc72ffatiAJiM87iFl1YyEoZZqDavxFikL6d12TXpsf6\neI/xHFX70wHtI5IdHT9i2tlba9qfqSR0YIzpRfwWbXX94/AD9u/t5pp50XUS\njq5CJJBNyueew1iklmEtsSfIXUDnRbWKymNl2w2UEo8w7Etu10kaOCjBFgKq\nPd/EtDnoPWqs1jhQPobg3FECBnP1ytWJpZLSz4jxuLUpHdwINg5DhJp8rz1k\n5sq4chYIRcty/rjwWQhDolmc/SLm2j5OrMU/XcYyRzzEgIF8azzWYRg+Oato\nZuZq\r\n=MEQC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9987341fcee9f9c549490bf6cf1a6ce57b5a83e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.f1432b5c6.0","@material/base":"7.0.0-canary.f1432b5c6.0","@material/theme":"7.0.0-canary.f1432b5c6.0","@material/ripple":"7.0.0-canary.f1432b5c6.0","@material/typography":"7.0.0-canary.f1432b5c6.0","@material/feature-targeting":"7.0.0-canary.f1432b5c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.f1432b5c6.0_1592861125176_0.7235601621262615","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/form-field","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.4757a16b4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d12633326fa407d648fc88dd774710231fbf4499","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.4757a16b4.0.tgz","fileCount":34,"integrity":"sha512-QcxuBiVdrwTwO4b/OSlZhClEG8X/3SF5gX+Yh5iY739CAw9nWrGdxMeonQRKL3tNxXdcllt6DZuRl1Ci9zAc0Q==","signatures":[{"sig":"MEUCIC9es6YnQgOX1wZ8c/yRb+o66nDsXBHeI6/E3Nvw1QbfAiEA5yiDod3QYxt2+q2RaNk8kKHrU73ChG0J+TJppz99gCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ShhCRA9TVsSAnZWagAATekP/j50t7V0etwCeV5VFW52\nnYvFrs0nIRalN684uKpHWfFbIfBCLeWvOwcfGlz2s4zi6HPUIY8t9NaIBtGG\nCpmIn+U/0+WzKNrAQJXI8dIFSkdRYitMyqUCid1DNbC8D8zdxeozYU8ysDZ8\nBWHlCpRzFEvkWeJ3yyUSUFJgDWzEsOpWGp0a+6urZ3dVXM6HOFFf7P3mjLf2\neDZU6DCv/M/0/DJsC2y5yLJcSWAFgQxjgqooZ69EkjKrAZZz6/CZTzsFeUE2\nE2b1MhVX4Ssr0E1gtfPpGiSGD/yIBU1Ck3mMwHoVP/apY7HQLMGnODEr7lhE\nL/dp4qDWEc7ARA2O/Vv1YmLQJPUGgbPu3qPLKH0GzP8jO0Dj3Tkmuy1OYUKv\nMi6RvPg2PDajgQ94VGwVUgxzdTTKpX91s44Y4E43rtZPDwtoi89se3r7aAmS\nxYRbY0uWWgcA9TcWSJPiR/RixFTNE9J07NNxmNMslhOxIFs8BhXGksYmtgyA\n6z0MpSLOIKdI4whDT+7jnUFW7NyMKMKTHafG5r1rWxKHBlFXz82qHdHpT/pI\nT332Ck8nGTNGjy1MEHN7AGqPXMx1yE2+Lkdkqx4tN1Qwcepbx8IiUUliai3U\ndr4NhpEUE4cUEX+69TgUcu90c7YgTxPMwvS201mVO2N2C1RVY5NqX1PGLMgU\nOERL\r\n=4s/Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"50b08262743d25109a9cd3d4c87d82d0631d9c79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.4757a16b4.0","@material/base":"7.0.0-canary.4757a16b4.0","@material/theme":"7.0.0-canary.4757a16b4.0","@material/ripple":"7.0.0-canary.4757a16b4.0","@material/typography":"7.0.0-canary.4757a16b4.0","@material/feature-targeting":"7.0.0-canary.4757a16b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.4757a16b4.0_1592862816764_0.11757294915079708","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/form-field","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.f8f472762.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47ffead1d7f977acb816daab823b00616957bee1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.f8f472762.0.tgz","fileCount":34,"integrity":"sha512-1/fvd+nCettViaimmT7ZPh76xUhcA1qy7Pi7imw3A/xxBpO34z0NcuV5qAo+M/sroYdBSz7V/c8t+P+K+rKZvA==","signatures":[{"sig":"MEUCIQCeXDRp3+xMqImxRhHUK9AqUxcgOlVO+8DC7o7XgO7tcAIgA8Qv+qaoTJ/Tph9Cwa8pJmZGU5xloNPFUeZCgK0bhsM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SlPCRA9TVsSAnZWagAAOIgP/jR//OjgEnQOP36dZDau\nzEAgrDWtxhHa1vA8r3kcZ/4Xn9wr7AaYqM8pwFdH8skda+dOhC1JPXu8ccfD\ng1OhcScbaXjOm72NPccgYMRfbia24qQj7tQ8HfdC0/PrxMR5LOzUYFNwT8Nw\nQ5mZ2rx9ose73xQ0zzyGMgysBQcdsZyiWKRP/UWOIHmVbRfCfDHxvSMTu5+S\n4PPfXgciA1+NRbywQxtMUui4zi2aSbnSDfOKoq7rXvETKEZY2dZUrpal8m5n\nKRrKzh4tLTZYsYOFGbolSFVByWnlyvl5wMAfP+OROpktm5YhzWsd7GqEfdPV\nfoaK+7ZluaNMFUjDwdrORmNxWQJDQUtfAT9l4i2MovCD32Blg9f8+4UJMzPZ\nImhX/rnxzR/W9gnxZmTiqjzofBIeLQ6QKh6gKisypO7rF4mfKCJyk0N6PLB2\nYx80z0JBc59vHUpCEdJyEg6YB3j6ETowyqNOMRGtAXjH0I9stS6Lnv81fyAW\nKMXJVwLq51V7MZQSmi+wBxUYMNxrwMRCRjd+z2shagQ4hm5ZV4IuZ5BgsR9D\nc/bOQsGYkp0bEQcvmXpMZyJ5czmMrJoU/vOlmAIFoBQBjxfJxA1lHwvLu+tw\no2SHSWgnpGY7PhQ53KsPYgPbDPY8m1XT1OSijTlmzFEhFdkvqgCUd/q7J4RJ\nWZDN\r\n=8cjf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b72e40a4e5c11a670f3423da9ae1ab370f088535","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.f8f472762.0","@material/base":"7.0.0-canary.f8f472762.0","@material/theme":"7.0.0-canary.f8f472762.0","@material/ripple":"7.0.0-canary.f8f472762.0","@material/typography":"7.0.0-canary.f8f472762.0","@material/feature-targeting":"7.0.0-canary.f8f472762.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.f8f472762.0_1592863055037_0.3598147834292893","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/form-field","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.7e4d55c34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3337edb1985e60a0eb0deeec98d004f8d8f2efd6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.7e4d55c34.0.tgz","fileCount":34,"integrity":"sha512-zTFOMSHIzJOMK9NC3js+YIiWD2HkJZUt0gcTSdUPHoklt4QhSSvG6dBc6C56iGSsjFGaf4HcifVfRnWNxZiINw==","signatures":[{"sig":"MEUCIQC3AIhCkaM2Z/1L/AP0E1Clk/GBIXbxETJTV190ZoDOcgIgbB8cp/ghL+vnOqdYpnr95+cQAeC1NSaz9qLIhzGUifE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TDOCRA9TVsSAnZWagAAoK4P/j6A+KPK0Ayox2hS/HFI\nSZYtB+kc7imNw0SZOYihdZtSei3kyIBI/eHQxicP25iy+ugutehc/Nj5kEE6\nAoaeZ9UsXf/4PiGPZ2/Sy1FHbfD/xMX8ECI6WMpeX3iPTxUzwsCfOwtcnAHi\n6OTypYW8K8HLhvFm2a4YvH0orgqe9032DpUtQWk8bH0wXtHwAp7xeSkirb/L\nfUP+PeDCOBrwzNij4VL6URlT+TNGrOZUBTFu4So47CBYSsGrx2F2IxJZa6+9\n7qG8yhFlxaGxaV2+f56Ghxabba9WvNOVwsxNkVJAE/RiTK11djm8ZeJsnAJ3\nG2eahYCY3jfKVM30CXlRGDu2XMBH/ZEAPUJUYHGfUIrgRfc4VdQxGADOCCyA\n2nrzY6fIcfdon1MKNELjQoHyYIXsBGpbk7bX7CZVF/f5kUG3TRDXem/036Od\n7VuWPwEsvsbvv1PoQuUpJGKaHwCCkHzg6TFLVWi+wYGhwVdcpWVWQYCTIbeF\nBjbnrA+l6r6IqXIp816tao0MHYiVpJZCqa6mQOB+W5RC8vIDmYYOXuC9EMgi\nktkoQ/VrONJnUCWxzxhkF9U6QGQb/zC/iu5DTBsC260gWtpRxZxGfKTN6eEd\nnxpvDqpj+zFnhG831r8qJiVhqV7hfyPi0zPhWJWHs2mskudi5SFR2GEDlGXQ\nSJRX\r\n=uWJQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1dcee78d27cafcaab3b8f265b4f1bea83600563a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.7e4d55c34.0","@material/base":"7.0.0-canary.7e4d55c34.0","@material/theme":"7.0.0-canary.7e4d55c34.0","@material/ripple":"7.0.0-canary.7e4d55c34.0","@material/typography":"7.0.0-canary.7e4d55c34.0","@material/feature-targeting":"7.0.0-canary.7e4d55c34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.7e4d55c34.0_1592864973786_0.7916155756887708","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/form-field","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.bd1dbc91f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7985f39af4f0252adbc61dbcabf28e5568a11817","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":34,"integrity":"sha512-3ngp236slrhzK4Y74nfVY2DdtxWHujYYeTrsvzHfNxI1pw2P9DVWMtqow0ugdLwMqrdfverkGpBupv1sB27Srg==","signatures":[{"sig":"MEQCIHENWWfIuRxhgOqmk/5qG6eRxjVZn/SpYEQ5zYB3Z3m5AiACkOlXi9XtD/dcbYEC2N7id63U9VOOcXOoi2ZitiWPow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hGGCRA9TVsSAnZWagAAEMEP/RgBZDF89l4V0nyIKZGT\nbxufxvaY5TgQU57aWO7shCUMe5pLxTXxowMSJ6dntODIJuryrJ3xw5mvbgu7\nKaBtkyyCgG1utPFUzrAI6KRd4+tkoqNOn4JNNavXb7swlamHihubbCau9Nwd\n5NU3QcSb2H938naFIeuWKopACANqWCtQHl7BkfMUytarKnLh9TXs0xK53TDu\nlrdxwCfKP2wWl/geKtDWNwL7u1pi8UyHabLJ+vd9cux+ljZf0IMg98j/ryuV\nT0EczVU7Ju+gLorKeSdSg9aO23Fl/AOQVoKShVDxxcBhrXTSdf+izy5h2wfZ\n6LK2LhPJYOzMDgpZCYrMJXq8f3Xw3fxzAfZLdo47mcX5vFpaWIWxpTEfHfP1\nKPHzB/z+wXoyLoqxrfR8Sg+o0bYkKAloGqzjKmaHxhYJv9AdnXeqKpZswrlN\nEw4+JECwyYgoDJaEdFrATh7wibgUgoTlnUmgcE9Bd+HrqBNlrlb+WUgPI5Qi\n31n2leYW0maejGdg4pvLZkXd8DRz3u/BQb/4678vXFlYmv/APKh89kQTdBh7\n06J5uWJH5kTSTUkGl8XNgE3URwAVdPwVgIl9BvJA1Oxpfw3sB+lVGYxon/Hl\nK+jyOd5fomnMXNVWYft/6IVb3Hzer/2N5wV8rd8h/Qj0nH1AJA2MBqfEwD1z\nn3aB\r\n=hxag\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b63b8059c82f418a3f6134124de3ad8bbb08976a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.bd1dbc91f.0","@material/base":"7.0.0-canary.bd1dbc91f.0","@material/theme":"7.0.0-canary.bd1dbc91f.0","@material/ripple":"7.0.0-canary.bd1dbc91f.0","@material/typography":"7.0.0-canary.bd1dbc91f.0","@material/feature-targeting":"7.0.0-canary.bd1dbc91f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.bd1dbc91f.0_1592922502089_0.6796729926490055","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/form-field","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.31523bc62.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"819457cab5244bece0f5ead9d11585cea38791ba","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.31523bc62.0.tgz","fileCount":34,"integrity":"sha512-H/Gg6j6s2/qS4+kZlKtOOtVlnUZODalaM7W1bRwcWs8REXbvLOO+/+lwTL5eGHgIDXw+ImmU2ue+Y6pnIiCgtQ==","signatures":[{"sig":"MEUCIQDtHxfU1Fb/8TpB6PO1PM/EEsg83Q7BIB4IDGROs6iitQIgLzBwSRsHqhyAeo6q0xro9Nl4qArf8tX/YM0Kq9lLbDE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hLSCRA9TVsSAnZWagAAXdgQAJvfeUtYi/Bgg16iu5sV\nCbI2UXeOpm0DFIOKCkD9gRUBTC8IvOH8xPc6ZOOU6CxctG+mNtItrfhuZPqe\n5I6z76kqudGEtTTSUhFpR6W+Z79npnKdpgIAdie0yDtqBukefkG5Ed9kuh9J\nqADiokTJyZ59ES0ZBOtVJXUuuZkSAGgLsh4HhJXyXMobybEZLUKlD/POgsiJ\nSwDjRu5X8hphQ6BvHHJNLF3Um7N8mjF/QXgGkt4W0DE4cywIGfbN4GKdwbdY\nZYj+0K46mpd5jW6H2HhSsxhQ038P4/NohZs+njdBEGbMn4g97MrxdX9uLuGj\nZ4shd9U9g7MArtTwZipE1eaqpkQkuZ10TXGFo55ucP+lY27Gum7CFQuR0832\nN947vvO8Ao3wrkntj8JuaCG8zJzaprnBnyG8CdSoDahMqjEFinVCcQmIda1w\nXkBvpe3kjCAtap42K15pxr3Wf7bX3JvBzhs7zG/pQBYZVNKaHXnR+p24tbmd\n/SjMAkrtglEhALwr3yjzIYvAZUAt2URXjGSaQtb5TU8h2oVKl7oLMEYu58Nc\n9C2Jxpbj0mASXRtctzsCgDNXwDOOKryiFc+YI4Ysbvzo59M0oOHFrBj/axVE\nAORF0iFBfUOUAAu5t+ynw7Sxi07Stkfnja1RFTHy4Co3cmwJXSW7oN5GVct/\nEex+\r\n=VxfM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"035ab4d41a8c444abf721e44192fa6e10bed9f79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.31523bc62.0","@material/base":"7.0.0-canary.31523bc62.0","@material/theme":"7.0.0-canary.31523bc62.0","@material/ripple":"7.0.0-canary.31523bc62.0","@material/typography":"7.0.0-canary.31523bc62.0","@material/feature-targeting":"7.0.0-canary.31523bc62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.31523bc62.0_1592922833774_0.4658131273507775","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/form-field","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.a96b6d4d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a871ca48c8ecdd38ffa332aa70281248a25ef5d2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":34,"integrity":"sha512-6+VtK8ZLi/AjR1oEVAQN5xzq2DbBdS9FgZ09kArbye5I4ZuH3QmI0O88VK9YPSCcJOofw2fyUdxf/9+EzEiwYw==","signatures":[{"sig":"MEUCIQDty6iWKmdMJOikyHHCjGjdHCNqaHaav2/iOmwWPXEvlQIgCm8BtCJZsbhkJwNZiEUqqFUdYfziszor518aUr7vwWM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hRRCRA9TVsSAnZWagAAVrkP/0rTZdhZWnI9TrmOsCTR\nf5RwCxxM0+eEbhEA2IntOikg3svzzcrYb7btf920jB6jvJk4SfSGuU4vi0aL\nre6d+0wOvnIVR1MR1rQ0YaXRZDsBpCmk9YrOcmkuFvApcxS8m0DKUXFqqjEy\nnHn2lLSe3nfDQGfPQHW4NykF0uY0aTaoFiZd5pxJOUwXituUegN4KWFqjx+F\np3cWlSzN1hQcqh/2fM28FT744kXKLkqKdfHWEjud9/68SVE1zn4GAyb6WEB9\nuh6m6GE5D9lsME+GOk/nYz32RAZNH2bBIglKuGfvdEmnYPMxtLs13EeA4j7F\nCbWz0hBXPq7Jn/SFLjUKT7HCiCVuSUHGRfTQLJXIcfA1SnOAUo6IqrJ89rko\ngFesOMYHM78Taji5Er07I+MF0e6KkNX8vod6RtVHbEfYrkzsJTxNQ76/K3u0\nfTq4l3nZjPJugRFvErrWvOoJTCDG8rR5uywDDeHsT44S2KNh0DEN6PePIyYv\nL/tHbY9JFyAi/T9B4UrTZH84quoNoqMhpCet2Eimh5mWAHjduXqh01TKEaYb\ny3exJZxufrwZIwEPAY8yGp2U3TajLx1iPkgedRJSUtUBxMkAyhZ8zXti+A4V\nsfyksH0Q950f2mh5A0SaNs+GKB5e5Rzpi3+8FgZxoSgRigHq7FHEzfUKmFHQ\nuqky\r\n=xigD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ddfc88933cd9a6210bdfc449fd3fbed391abf4c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.a96b6d4d6.0","@material/base":"7.0.0-canary.a96b6d4d6.0","@material/theme":"7.0.0-canary.a96b6d4d6.0","@material/ripple":"7.0.0-canary.a96b6d4d6.0","@material/typography":"7.0.0-canary.a96b6d4d6.0","@material/feature-targeting":"7.0.0-canary.a96b6d4d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.a96b6d4d6.0_1592923216561_0.08590364482098223","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/form-field","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.ef3a09533.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"513c63d3a027eb6a5f630ed20065315d28fe7cac","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.ef3a09533.0.tgz","fileCount":34,"integrity":"sha512-+wUEUDxC4CHTLgTZ8LPHkGdqlOaU44zUg74AZLRMo9PkihJ42IM70RnX15Q+l8YPkDfnNv/qKcopZFwYSkiWuQ==","signatures":[{"sig":"MEQCIFgKqNH0krEea2IJjc3uURFVlUlTH7zkP26/yeTNO+SSAiAkBz55Ab9tv+8Hv59xmOf+csvwWQ3IedOiB4s25fsnqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hY5CRA9TVsSAnZWagAAM50P/0qg1wX5nkdrrhXIBhGV\n+TjWOShLa0elxf0Y+e+Y6qvnxsciXBToVK0r8HhAyXZxbV1UyzqpnY/GITXH\nzFqV94TsJnHkGRxEXvswL/mCW7wrhxFVEHtyHRrb2zjD+/orQpTqxNEFU6/c\nIN2ZHaeAVtgMvT9OsJwn9VE8agk0Oy4r/tAtlvNyUuButhaEfLOPA9Fg5vXu\n+Qjnbuzpd+pAUYFXtw7N6FWIEzPpx3CNMKObpws4QQJqlgfS4RfaxmAV2uGg\n93Vm7spz0OYO+wyYgYDFB+9YR2KdQ2PVO0zNTZ//I09HinNmp3u7bDlySOmN\nb8fE6ff7btXnUys1QUdTzBpz7jVQCgN3oNMsE/sDcwV4ceU6ZfU89m47eqNS\nN3qGKYQhO7IYPWm+X4a4PPkPStMSBuhPDVj8hT5TO8s/d/RMigT0mgjJWv4U\nfJdhVYf8zTdk9/9zipCzlOiV/HClg4rfJWh1ra73ENOI7FXd19x5304aN48H\nOBmuVuZbZYlrOrSPTXxbnWZyVt+qPuxwBHIfXPyETe+TvAmohK5+103+1QBw\n9hT3PBS2Pr9H9uPx2LRVw6Yw4uVB2gQjvONU3kd0zbVQeeNqXCUuRJeqWdww\n4RXblVdBdeHprFGR/AQViiJiXSGtGyvT7HGEhds9hkOxPBRZ+mZ4SfKbT2QA\nfx/4\r\n=ADud\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2af091492939e0fee42736977683591ffc221f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.ef3a09533.0","@material/base":"7.0.0-canary.ef3a09533.0","@material/theme":"7.0.0-canary.ef3a09533.0","@material/ripple":"7.0.0-canary.ef3a09533.0","@material/typography":"7.0.0-canary.ef3a09533.0","@material/feature-targeting":"7.0.0-canary.ef3a09533.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.ef3a09533.0_1592923704987_0.8738860111356441","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/form-field","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.080965f39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b197dd56143058e29de6ea67408eb53b92765813","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.080965f39.0.tgz","fileCount":34,"integrity":"sha512-oKnjmy0GBGOxEda4PgMvn6MLQ7evOUUV46on3ihCeNPJyZDtfDQsZ507kpFfbpcwoxwOOp79pn5gsUqr35S8Ig==","signatures":[{"sig":"MEYCIQCv88UEuw8QlzpbVwY5Wipo8egLXlJIBUvIM7uVExXYJQIhAJgsasCQMRIjgPGCoe3G5Y02Bq4IhPhOiiRcM8TiSS3T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h0bCRA9TVsSAnZWagAAyicQAJr2kgS70SxnKuLDfy2x\nPlydyOcAzv+pfCAzORkdGDkSk4wgbyTV/mzk84cQ06W7g6wZjRsTbbOnK65K\nMvZXPUEfpO3n2SaAuQJABvyEQam2pERwYvenbsSMrxLZV6grubnUqzmf/FRC\nDnAVdXS54WJe3DVvOsiSIGZEfOZPuyquUtgacO+SQu8KZaFHpQ7BCnuc6OvU\nbmEIpjy3gAA9bWpro8gWfee8xJRhxrZsjF242iiDh5lYlQ9UDFMzMCX1aYZc\n0uXNSIKNrDtUURbKIvmJ0MrgyjzaxYdJAuwYOg9brffE5+32r13IN6+rB3Zw\npIud7X4TPUCUptCg5MZP1+reL735VVtn2zANDXUCQOO57w1WGGVjKx1NOR2y\nAnf//aDFDBBFItGWheV06hsQCwsM4nGzuCP0OXQDlZboxxCChwSlW3laAoTw\nyALLRrD3Bpo+59xFdcn00HeLXV/mj4gsq+k6ZimDfPhMsb0AJkEaJ8NANdJf\nsbfN8fuhpwrMOlUJog2NmHlicxR0p2ufd6aCYnXQp0/lLlzTXnEf0HMXclgk\ntOYnf/IdI7JX1Y8Slh1vumeBvPs/nvQVixDCwFXIs6S5yp0fh3vpfeM4eE/d\nhoAmHwNaIt9sq9XzDFo35n6hQ/aMMI9Op+/FwxJ4C6Hjg1hexA9Z+H7hh0BD\noMxV\r\n=k0i6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c0d7c5371df46e0114aef4ac9bc2b3aad1377f76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.080965f39.0","@material/base":"7.0.0-canary.080965f39.0","@material/theme":"7.0.0-canary.080965f39.0","@material/ripple":"7.0.0-canary.080965f39.0","@material/typography":"7.0.0-canary.080965f39.0","@material/feature-targeting":"7.0.0-canary.080965f39.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.080965f39.0_1592925467178_0.9058072468035321","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/form-field","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.1bd67b65d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"687f217942f86523911e2bc7daba4232215ff930","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.1bd67b65d.0.tgz","fileCount":34,"integrity":"sha512-0zsVTXbj4ka2k/ICN21ODmn6o/T30HetNBIizQz8LbsXWwW6qzQppjYbkvn4SIiHHaAHHHFYKHPQZSF955F9Tw==","signatures":[{"sig":"MEUCIQDFCMjdxBDen97LQFV49aCi1IKOGaZYzhUjT1J40g9vQgIgGUBhUw/Ir8fbDmfje6z66Iepn2MwiyDxZEq7AHkBe5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8icNCRA9TVsSAnZWagAA/d0P/2apCz01pDsoKWCXB722\nGv9r3ClkcaJmZoxXewgeJIGvrn6JDCdw03CITH+6SlpKGEyEQ7j7wlbyTGcY\n/aIVkt5FNjNQxJASwdv/WqPp/WSgC/ETh29MAHqrNi00jxYWG/IYGf5H30ay\nLtmqzNOdMyJ/XrLQ0gdaMWvOtH06Y2gjVkxa+ruVALUJZhf5ptKc9I33qMlZ\nZXMubPNjN2fOhkp8cXMM3SpLW2/aKSYlgBgoAtoxpvnIpsmCOwoOgMtP/KR1\nWgn1qZyQplnNXctvt6Zs+yVR8Mppj5hejq85nkCRgyXdrrwh386J+FSvOlok\nWPnDYq5jfDd9V9+F8Y3DFilPDnLrTuuquHsZfRhyaScLOT0fD3guQWfTujwT\nNQeSenxHKuTRrSyBaA0OR3qhu4pbech5Mhc03lnmQAjSztw1dHWO4QXVJUbw\nOP8HOu8pcMOEwOBhw/JqxzzKxkBiA0pQMtnY6XnsTAYXx0/oF1ahqcb5nNFN\naBcEye9gKteeTyyL6/OtJ4ia/9oBcINsOhR988xqSlmCzX2Fbut3QxMr1tK7\n3JwJ0Gsrl9BApygKpblnHh/xdvQiY/XY12J4XI5vqavmou1b+T6hh8hqpjb6\n5MwvtoJmVbLFoZR2DQ8AfhIbQaetsofy3rrytD0Db4A/Fzy6WFIfzlv4Le42\nOqW3\r\n=d/yp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dcb3206c3f6c1567eec203025b36bff594d66678","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.1bd67b65d.0","@material/base":"7.0.0-canary.1bd67b65d.0","@material/theme":"7.0.0-canary.1bd67b65d.0","@material/ripple":"7.0.0-canary.1bd67b65d.0","@material/typography":"7.0.0-canary.1bd67b65d.0","@material/feature-targeting":"7.0.0-canary.1bd67b65d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.1bd67b65d.0_1592928012588_0.05366659459647449","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/form-field","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.18ca31248.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a080cdcf7637cfaf7a578e17e883074ca3e0f2b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.18ca31248.0.tgz","fileCount":34,"integrity":"sha512-p6GCxTE6H0JOZLbB/k4vzEV9UzPEYAB/e8UzJpJnZDco9oLcwpmftmIocA6NU9gScZ27Nsz+h2tLviZy+YtCfg==","signatures":[{"sig":"MEYCIQD+0tzBZiiX+Q4e0RxiEFFcm6nhp4aig0o7i8BBBeg0eQIhAK5JdZaPsRCCZn0WSHeISIds3mevwBqtT6Ko4GtuPU4i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kkKCRA9TVsSAnZWagAAAb4P/3MbFoDH/cqxSap5GVHu\nb+zKRFTdv83h550hQTFC7lyv6g3XMmgQ0G+YqjsFdU+05pKzG7QBUrxJENgx\n4Iq/hqNPDY2SAkHzPTsTNfJmJ0dauG3DvDicHM1G0F6V8nVCqM2yz7GCu7lX\nO/veNuoK3cIZJ9neqpSdZC3x0BTE3kGVAxF8xbRe+2FA1NzpZawiLQo/cnk8\nlYkmfATpOzikAh+W/yFFBHbGe/Myk04MzcW19nuAorstxpX6P1+jLlKdzOfz\n1MyPnCC15b1mhOljJzDpOJdQ4QlaNIrnuj+EKjwNvhi8dtqKvv1QsAg3KvBZ\nS/3bSN8x/WvxLa8n3uVJ9Y9ymAepP5lEGdwSJxqUAdqujGDa4NRC+eDdYIGe\nRcI5FN8GYMtVKStyFfW1DbcbA7lbCox8U2IJGqUJx6La0I2nxQRfyjeZmY2p\nr+Vp39IhyzQQHSR1PQsXqClwV6KGv8ww+J7R/J7NIbgI/VnXaqifqSCLVGWH\nBQSUSyiUKbfOshVB7GVu5m/F8ZRDCU0FsOrRswbpxyaClVbQan4Sgqvjog+9\nZzAewEuuMXXtk8cwO2jX4pyPGvR2yS4FJM0xVy39Eu9I/cM27kX1qRTPrQd2\nfZjHd9F6XxC8yHYeoaL7OlRAJQ5Sv73a+Md8dHDESiVnEJrlliaQ4yVLhD9/\nJ2WX\r\n=DGCa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"34a77f9ac5b41ab1f71969d01fde32c58ffc08ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.18ca31248.0","@material/base":"7.0.0-canary.18ca31248.0","@material/theme":"7.0.0-canary.18ca31248.0","@material/ripple":"7.0.0-canary.18ca31248.0","@material/typography":"7.0.0-canary.18ca31248.0","@material/feature-targeting":"7.0.0-canary.18ca31248.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.18ca31248.0_1592936714270_0.20029743736150674","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/form-field","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.39cf00836.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6d419e865f20935c59cbccd01563902f6c2501f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.39cf00836.0.tgz","fileCount":34,"integrity":"sha512-A4cdL3DQvrXJVhV2OJE1sYy9rSccfTUDK97FOozFPrb3//PgAaSY3lFb8Hj92L/KawNxc7Kq2vH1GZKIUV4SGg==","signatures":[{"sig":"MEUCIHn1iRVnaFgOBgVxMAGVoNlhiOmV8YTbl9K/l98nc2qhAiEA229K3cg8lfu6em6s46usZSbHSSoExbTD6rvLzlJ8EDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k5pCRA9TVsSAnZWagAATb4P/3ryqJiLM3VfBufzIVRO\neCaTtWPQDRkZTmI8cWpLaPanu1PwRXrI6qRbQFWgjZ+GpdT15+uZfWXQe0kr\njK2MFLvGgr9d97hPioLlhAVmhgf1vBPXNPsoLQn/uM7ed6f32LrY21W3u8Xo\nED9db7Oug9cqrGMVrQm5Dw1mv9GSS/Hfbm+x66TlAnB42PgWB2yGT+YlejlS\nBvZqJ7EGwmnAQ3BwiOEIasXIqrdGNvhwwLsuumG/DdvncoOBObN7Hbbw7BeL\nryWRzdDUh0x+HXBwyIlzeBs0f6R34Tzu2nJasLkrbOYMVpRAnbOIi4s//acQ\npo5i+G0xF5mXi1QKR3U5Uw7vDLoL4cM9KYARvEVmusmEpyUz4XBltw5+PpAW\nKz+nOqAlalvskrKLN9FcYEWhWFKqBl/HPAKCfdDStBdO2FclD0jGY/CoA1oY\n0hNR1FowhWs+xqCfZDEvH5dcVhOSpJ+fACk5MOA7thp0xbZGBfumyT8Kc3yr\n1mACoKtKbTUXyL2rBVfFQ5jKS2lG3i4Vn7aJQY3ElVIvZwdNHlXcRNQhhTuH\nIlOHPZE5Aa3ABNNSl4fgkIPlKD6hnxQl9KyNCYbyZOIVJjVP3kNl3kSTExgZ\nTHCYO/ZlIVyH3xy9XIjgZjl+1OO1KoZ2Zpvsrew4pe7m8kLIGYI1HEqPsDO7\ne2zA\r\n=OQY/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"490def2a6575f8ae6a6151f024a9af3fed1f5215","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.39cf00836.0","@material/base":"7.0.0-canary.39cf00836.0","@material/theme":"7.0.0-canary.39cf00836.0","@material/ripple":"7.0.0-canary.39cf00836.0","@material/typography":"7.0.0-canary.39cf00836.0","@material/feature-targeting":"7.0.0-canary.39cf00836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.39cf00836.0_1592938089237_0.5723092003358246","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/form-field","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.1bfda9e05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f79c5d3b6f751c6ff90be1a70f67407093a92508","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.1bfda9e05.0.tgz","fileCount":34,"integrity":"sha512-jKlfl5cHsdXpFp/Ll4XogGn6vCyMEAp7UnmgOY+WyShty9fCUiva5C9cyFDP2RTLNMNVxEEcf74SW7SwY9rMGQ==","signatures":[{"sig":"MEUCIQDyjXJ+kUZNKJ4eaa/GXgjBDk9407zpmTMfOAlMQKbsZwIge+ve5AiJLgL8UT8sQ0IglnpBcgGLZQNgIqEbPMDU6Yo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lFVCRA9TVsSAnZWagAAmPIP/2g9iL58dF6VEwMBiknm\nEuGP2EH/1dRDZQmWCwf57zgV0AxPXkfMaXTm/YfLWgjfqu+StZLPThV6jh32\nkFlH5c3l2SKZFansbSYkchLikzkszJyezpAVOjdFlXmMukdMagjFoPKNozVC\nmR3XJJtbUbdow+k0bD7NmfR0D/vph2N0GoIuGc00FxmLb5ZMApj15kDaJkQG\nUELFmuLBrxrPTa/ztRuB8wQ9c2JViI06fQNZ6epZOAIMBhaxD409ObjHLEqx\n6fQeEwjv7l7Mp0C2dCtFfGazeJW2SprUAOdfT/nXsBy0AwUnKICzLyl+3Rde\nSMfuD8u4ePKsRc2wqIl/kGIgXp9uzRPHI30b5ttbF0nWWNmj9Dlw+AQsXCli\nOylip5YQ7xru70FKKAhYweZsehBDdz3j8+9R9Fwat93C5RFYJMzUkQ/98ctK\nbOs2d4t+C/E1eCEBKndsy1hoH5yJCZCijKLf2v4nNT1PvtC0w0skaklPsOEw\nf8EcmAokIII6a3A+hyqfPNeHPEDeQlGbm/LUys4mVnBWvdiNQ2VdOZZBUOdY\nMzZBSRbyUJ66X+pkqbhjaZ14Zjxl4FEl+++7cLKLpRjJWmSt0FvkxQ2LZL72\n1i9gV5bc6aupttpt8dB1LKWbutgcL8IHKKi1iEheKOMn2NX4G7j1Njl9KdVI\nfeaX\r\n=9q4O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d858287d263a004329d22036ef43b63b8ec8eb08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.1bfda9e05.0","@material/base":"7.0.0-canary.1bfda9e05.0","@material/theme":"7.0.0-canary.1bfda9e05.0","@material/ripple":"7.0.0-canary.1bfda9e05.0","@material/typography":"7.0.0-canary.1bfda9e05.0","@material/feature-targeting":"7.0.0-canary.1bfda9e05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.1bfda9e05.0_1592938836659_0.29075215113185804","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/form-field","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0-canary.08731bd95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"103bffa56d58aabba828e1c66275920f312f5ffd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0-canary.08731bd95.0.tgz","fileCount":34,"integrity":"sha512-oITSgkFYU1mh8w9RLdMakvkxZPC8WZY2oZXQy8FLaQrYBRUP6sjIQ6tvkjbL2Pqt7qyZmTtwstgt1Mn2MZzQVg==","signatures":[{"sig":"MEYCIQDKgn1B8AM+p2dPyjssQGSghFtZSq0Pv9KLwV44UQdzCgIhANJrMkPIwA+Un1XJztYKF7+vWczk1I9kmBJZ57i/rLwz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lHwCRA9TVsSAnZWagAAZy8P+gJmbzUXP0KidBCEZcgJ\nyiZfwxhfS+TI7C/pnHkgmwL2aMHP8SUgPvIU1KEqYTlCawRyjMdmA6QRHsx3\nkO4Ucvp4buhZ1usl8Om2+KQOJpv0KgXqJFGFDYY1k/fhqeKn0a0TXLFa1RG2\nOg56zKC6nAG6NU8wwe8fgLWZFlWjkdGh+crMGETWkdb7F8VXoSV+0huzuVa6\nC3Z0nrhCqNnbXLLgxLra4NwO1UEaTe7s3Vx4ycsEdCSmgNkDUgOr1A4zw55Z\nQVbFAXzw62djCtaFWyJtuRUj3qFMaW0aPFCqfHLPmfQyjwZqZwz6ez4DB+kD\n84hBBoI+oi/YEW9mKswH/JfafkfFX73VAtTUuA2HVPe4oZD7rA97EO1KSG2p\nbDdzkDX4Sd8WirpPW+FY5o+9DJKSUtAK1bqJj5n5toW5TmHxYijqOpNtc4X6\nDuV2B7foXkE6ttoRjdvZ5/NRWStDcOntOxekXf03s5OzYKKKB6U4rUUOAlkF\njmoHFzyqGf5xXW5AkuKgnsfgaW0+aVwBTjrsmLaqdU6LCEM6/bWqEi0B3qX9\nYIo75mw2jRh6mZ1H6SfqIXWZ7gOpGLWUs+l6RcENTJeloAFWL+bJ9IiL9Vrl\niys7EYGEJC4S1rSRds8vyIneVLoc+MKCnN1lXeIr5I5neWcDJxw1SBsQn4a2\nBcMA\r\n=ZOiq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8e24a4ad4b32b05eb883e0de21ddbefd3c8f641a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"7.0.0-canary.08731bd95.0","@material/base":"7.0.0-canary.08731bd95.0","@material/theme":"7.0.0-canary.08731bd95.0","@material/ripple":"7.0.0-canary.08731bd95.0","@material/typography":"7.0.0-canary.08731bd95.0","@material/feature-targeting":"7.0.0-canary.08731bd95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0-canary.08731bd95.0_1592938991658_0.24793090234298099","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/form-field","version":"7.0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@7.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e32c8fbf5a947aaa96d9c5f8ada75fbabb1504b7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-7.0.0.tgz","fileCount":33,"integrity":"sha512-bx3klwE48FosNeqE6Q1jGkCnRLv0nBaopR+vkfijVpeIcy0JtLgDDgA7rzm35nEpXqTdyHTVzNaUo8GHRMYlcg==","signatures":[{"sig":"MEYCIQCyrhBJjlW/eSxQJyFHy6YeGGQ+c9Z8/WbTuBoS1rHYfgIhAITo0QqNBj3Dn2baVxfGAenrMPGp1TRer+PLwK9j3PwJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lO+CRA9TVsSAnZWagAAAP0P/2Bu5rm0IHWiWfFu91NL\nEDDjvHRhi0FATmekOPRgLm2qHqQsxVfbNGKDKzyw/t8kR+hNJWqj1DWPCuPD\nwfOcJ6mgAphSdTtzV2NS+QDSGlOTufUsEIcDxq24x4UqfeM4SNzZh5Euq1UQ\n/ra8aJI1py/MnJfvHuvWAWuRHKEoA2bgBq9+93/kzUMZav7C2Kc7TeLMlOXU\nh5A32I3XOu6UeyQgul7+vuf8OTEVhlWGtytPVDsrmJsmSB2hGnUVlCkYmosG\nCyg7I//OmV+tp/XAKCvJ5EggtCb0Rlhi8vHVxuAM/8kTsGSnLi2Z0nX/LRDI\naUPQRLH7vEU9AdVJ2lwhcsRD9B527IfpRB/s5ReohPqynvq5I482sCx7gg6W\nQzOfyavxdYrv3sFV+0SM0vY2ob/WYisY/ndoYXoSoG8tsAJ9IMUC72GPdDTI\nvDClHYhaIG3PXuKPT08kSiMZkmtDprH8vaKjz4Go168UKDebi3u9GuuDAKRh\nDe9EbkZwxOc6ro+zKwfaEOZx2qjk9uLAOUhcyobwlkg3glCGn7fSdPcMDreo\nh1QcAQqv1EJYYurp5itEgz2yXZHXhF3R2HATgC5XieOjFFFR6XC635yN7vgF\n8kNrAZlca1YtJplthhBvJypmMOejwPIyvL+QmzGo5LaYi/rXD22hS4Qrf0hG\nIDYW\r\n=g18o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","gitHead":"a3212b2099765947f2a41d71af2cd95fcbca4b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^7.0.0","@material/base":"^7.0.0","@material/theme":"^7.0.0","@material/ripple":"^7.0.0","@material/typography":"^7.0.0","@material/feature-targeting":"^7.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_7.0.0_1592939453112_0.35054042001376984","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/form-field","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.a3212b209.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7155955166fcbfbb64a0d1fa19cf2d568e9f209c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.a3212b209.0.tgz","fileCount":34,"integrity":"sha512-C1dbtCEiy3AOmUU5UULtw4hkKXkC9YX8sVdTHHVpHDa/mx4N8MUxcKp20HUUi3m8xv1DVHWXqtmQiYzF6DiEdA==","signatures":[{"sig":"MEUCIQDaqgADEgpYdB7UbtEvpxXkWfbsR/Hdj4P5aeAYliV/XAIgVjViAd76+Q2gyGmcIUJ2+1xlNsQiXYHq1cE9kJiyvoU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lP6CRA9TVsSAnZWagAAOWMQAKMhCaxgF/8Sgrdw0iLQ\nPdWT95obSwz2tq7f8y3eQ/Lg0xBLbIsBDzG2cO4ZvLzv5Va1p2uTEUt4jbTI\nNt9GKcPqDc1pJ8/Ztyhr/bRAc3g8NUgh9U02oN9TAWC5YRCQR6mEgRNEjDDA\nGfXiSOoXV0+fodcuLKvmdTtuPo9I6liW5P5ve3CBpqKWY99Qu0HtPYshMHIZ\n+m+U6L2NUbkl+r436U/04fJ+z9G77z5Bf1Igl40WPtEZFQRd8RT3octXtvHM\nH4MFj4rbEyMK730dMfEhRAykLxycrA1E3OCvAKIotM9dGi/lcoufedVGwzUF\nR5Et//LodEmBgUpXQF0SxmsD66kHlhj5hh8P3xwoyKI1O0UDFJlcx+uZ6TzZ\nOcA2kXOwB8W88k9rUB8VhSw9k4H77PVfLbAqGIRdvcpkeTnuxuLJmxSeKvEW\njUph6MQGeaD83L4JgE3MEtctBJS78z6EQ/dKS4bhsnmMXYgEF+bysSgdHRcg\n4LfGjPxmadvEnxeJp2R8sy6EuR+J9YRZUHGcJYykUQ9+ZxXbNbRA3qu/TO7V\nXv9yhIc6307gKMRlpaom9e6vnKrWCXpicIbL1EEA3T5u+s+aJyY5ZUuWs0Px\nrP1lzo8jfCGsRJgE7R5OiotszLQDL5AA3pLmzETA3cVIqwepXawiRqRDvhHr\nwOfi\r\n=g7yk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c48f67451e0470c28a2a044f902a31f9fca577d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a3212b209.0","@material/base":"8.0.0-canary.a3212b209.0","@material/theme":"8.0.0-canary.a3212b209.0","@material/ripple":"8.0.0-canary.a3212b209.0","@material/typography":"8.0.0-canary.a3212b209.0","@material/feature-targeting":"8.0.0-canary.a3212b209.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.a3212b209.0_1592939513601_0.6729141280937787","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/form-field","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.15e81fe98.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2fbcae6a16fe2c0372ca23aed1fb905ca97aafe","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.15e81fe98.0.tgz","fileCount":34,"integrity":"sha512-GaULUWQujpblYREmqFtBIug1XHbWBfyzGoo0hhWg8B5tWKOHRXSGhfWv/6iYtBQtvAmvbmF+u4hdX92Efvznaw==","signatures":[{"sig":"MEYCIQCtyNUcXAbbyhB3XuzI+1nnL4uhZ713vCrInMVN/p8fYQIhAPxsPu+Orzng2wxM2ZgREUS/CtjrBSiotM/csEbjHopZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lrgCRA9TVsSAnZWagAAtlsP/06HKMWih/EFzekaTf+1\n5pSa0z1B+CjyUo4YAaiDaFNSgTHxGrojJUiLmsOPoES5BVyoWNjyDfv8yc2H\nmG92bt3xdYfJ4kAleWbDGIkE+dPfTyzjPv2mikPRFxNVmMFee/zq3ny8PchR\n7kcCQCTcMbUodlrKTwSY+0I8xkWbrmmdN1/f5ljgUdr9TurybGbSNKOHhDwL\nw/pkowSqXA8iUO/bZmtgRCrJ+1EKD6JK8Kw8lYoJMv9qRQK4+51y9tEphO4a\nALY9yF/j407XBXWgJ3Ga3eZ1kHYE+10S3TlE+BDOGD3OcH1/pEUdFWubRKTU\nqpgyNKC0DIpsbsagVtqs2L/21SWQ42ercWMr+/9yZDPSygu3TMPCOB7U5sHX\nfrunYw7yGmz7QCdaEqVm6aYTNjxxiGnfTSk+/2HkpDfK9jNHklawf3LLJ3C6\nbOzfAVjtKrbszhMypwBIa296dv6fkFAcn/kvnrCmms9ml0ZfV2NI54GvyrRE\n3mCaGG6Zae+B8XCfjxa4ybwdZ7dU9Im4XUJLOpLjcK/yoTnkz8e16Dxvg/+Q\nrt6efIPXGaL0i4tGcq2l0R+A8Js7ebrkP4a5KdQ2biBBr4eTlbUT33TWY3MK\nhxZFbTtCG4tUKYh+4oKg4xlZhvQ5zzRlvrvGT0GHGV+UI+GLeBdHGc3K4q9+\n8A+r\r\n=BnVJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6c7873baffc445c3cff5a006913ebf1bf53617ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.15e81fe98.0","@material/base":"8.0.0-canary.15e81fe98.0","@material/theme":"8.0.0-canary.15e81fe98.0","@material/ripple":"8.0.0-canary.15e81fe98.0","@material/typography":"8.0.0-canary.15e81fe98.0","@material/feature-targeting":"8.0.0-canary.15e81fe98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.15e81fe98.0_1592941279999_0.24186875967901833","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/form-field","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.004c9d392.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"906bcad05e54860a93a8ef8db091fdbd8b924cde","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.004c9d392.0.tgz","fileCount":34,"integrity":"sha512-FCCwjc7I6r3FH3cIzaga8GUzmYFa+Y6M4YbdeKw5C/yZx/XC+jBLL5tpqgMvMIUvAYjnkVbNwnO/4DdfBMRgIQ==","signatures":[{"sig":"MEYCIQCaLHKi+rkZWeB7swGhcHt0EIfzpqEb1m0viWYEZ1nGXQIhAJKgmdor5WxBUjblVgjShpkQXSd+/QaHBdZzPXKjKvMe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oiJCRA9TVsSAnZWagAA+2sP/ioG47oFokKSZ87agjha\nVgAL3uV8VCgNAlPAcGcU0zCJJUvF2t8W+2YbMuEapZVhOjxJrqGB0qDt4XVb\nsyzxMZw9YzJYJDw0MA+z8yGr+WTBvgQ17n/TK89yVflKCF7qXsNulWTrUBIR\nmuHhcQVej2cX5pnUwmNnPjeh4fBdFctg/OTOzeMT/lYjN4LpbBA12fEexpxl\nNCK0k4qupRQszT11v6GbWZI7ryjaqyXdo0Uizh4zplHXGIDdbXIHupAA2kcn\n99ojlrBRQT1WQqanQda0Grj44ugpN70gv7ELToUm4keCtZtegbmGt/dgXCpL\n03mkuEy6pftejYVXXV7jSgsRlMPd9mbdl9mJ5FqEft9S6u+oDbtZR0NoALNx\njajCO9v/mdGyBXznOg97ZFz7o6zDWkXjtlVvRxOpoCs5GHcigbXSnS7D54+q\nIXIjjumQuySUkseMvs99X40wTHRdfVNFj9yqPTRqEOkAm7ZrNfHig0Fxy7nI\nFcgKqmV9K9kxL4ZQ1UNnRXhrMdPSUIe1O//n3W6361Onvb8EiMYefCxuUnEo\nEaMALSAHH8gYn0RAzgQQQbOZgg5WqIFmLsDbb9Vsx896f7XD+M9WmRU4feOx\nCPusSS6fCFMI8IdsnOtzlTuEmjb+OtRky4/ugNfO1C++fXE3rV+IamFpJjSU\n26n/\r\n=f8/S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"776ec8815215499686a6c5d2a13543285c30a7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.004c9d392.0","@material/base":"8.0.0-canary.004c9d392.0","@material/theme":"8.0.0-canary.004c9d392.0","@material/ripple":"8.0.0-canary.004c9d392.0","@material/typography":"8.0.0-canary.004c9d392.0","@material/feature-targeting":"8.0.0-canary.004c9d392.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.004c9d392.0_1592952968926_0.7913729836532437","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/form-field","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.03bde00f5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a89320c24c116b9ec997793708ae88b84911f489","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.03bde00f5.0.tgz","fileCount":34,"integrity":"sha512-yjbvdI6+xIYrXlLknHRYknW9fhk2dNypGnZpn/shiDdvbzfkiitgCF/NXQLLqkVT+T3/8mQxcvVpOSr9f0UXNw==","signatures":[{"sig":"MEYCIQDKjVDhDKkBHxye1r2CLH2MZ1k+03qiMc/myI7Ic5rezAIhAPpHTHRRxBhLjlGdS8F6PqhO2Rs3fNwvxaBOiZIToMAS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p70CRA9TVsSAnZWagAAe/oP/jPHpDgu9bgAAfNuxTlp\nmWl0Pyqhh1sTJPermzBUyrLXjDN8PRTjlI0LtO40aycPfojYTblCSY1dhCrW\naVJBytFB15XQlEH2xQbO/3DsK+TAe/jSkp2AWi4BA6bN45iQFpAW8e2VJg6v\nWUU0l49IL/ZvVD+lyGKEkDZVnWbKgjSqh3zw8Wa/Ioz5Yh37nKVvnxJCa+hZ\n5G5o77FKffuLdOMDQCLsBWvOup7MR+yZLkmR0xlUyYNr3yLCmvYTObFo4ahy\ntlVO37+WHsEKlcF7VrmSL10OH3pZUDVXKnW1nFUs81Z0ae8MlAPmuuU/Yvv2\nYTdpVDCfxtJ2qOJ5Jkk01sm2WA5rraIne7cIU9UL+RFMbQu1laf8M0CHCKu0\nShipS/d4JBAaE99uY5WR2ZX4jRQ8qK8o9wmvTHJynxc7H0DFMCq7soCl3aKa\n9Z0vHW6aXgLcorK+WxGOXI2GOU5Nad5juycT0sn+cSlozCfehh1qLBsJdizI\noMgF8wZmaNrxlMtvav72f+KcPz5io5XetvNbCKnOLoMbvS0/QAGtM7pGcnbC\njGkJRlMyH1+/k0Fu9kxureK6DBIqaXbbWya/zepbIfVUB1pnlOB/PoLEH9E8\nGB5lvayOHiMUN6q/rIpBvS2Cnvfj/jCJAoevqaGQb9270cNsA+Q46OSbzLqj\nTV2a\r\n=viSh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c3937a4069800a251640cebe987bd7911de089aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.03bde00f5.0","@material/base":"8.0.0-canary.03bde00f5.0","@material/theme":"8.0.0-canary.03bde00f5.0","@material/ripple":"8.0.0-canary.03bde00f5.0","@material/typography":"8.0.0-canary.03bde00f5.0","@material/feature-targeting":"8.0.0-canary.03bde00f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.03bde00f5.0_1592958708450_0.8565963171371298","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/form-field","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.599b8c319.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff39c8682b6e66847005a0eb4fabd9334d7d08e3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.599b8c319.0.tgz","fileCount":34,"integrity":"sha512-o5tYnbm7rQVXe+Hrk4frd8y01NXlXaGJ5U2btmC3L6Ievmz7KEQDZrKTtmo106QgjfM0hHr7tA3N5C6sXIhHnw==","signatures":[{"sig":"MEUCIQCifun0jgAhEgGP/PZ9CHr8T7l5l9LOEVgBwJ933e2/uAIgdxS8RVQX/1vxGXzdy8ZUwIh1DjU/TWw/HA+I2yISKUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82mvCRA9TVsSAnZWagAAqXgP/0K8hDOHybwkf+m4piQo\nxGSydMyQSRao5+A+WqQA+0fFuqklq5lDuXx7ytTRFKV89EIyWtsbrGP86Bj4\nC6TAnspshiSx0+SBAMxRe0yXodWIVmiRyRH1huU3XmPJTNQqML9OWolO8Blh\nfz8w7ASSFUsYrSa5ecjoy/DpxX89/LyjzchorIXl43hVeRPW0Qn9gI+JfyM7\nsnenbgf+/FXEU7KU9taOnivsHBatvSXE4sbbZ3KnL81ig93/Lp2q7zD8nYPP\nnPhum43Ftwo2js70mCxx0qCRzPNSXGYrPucXLEcNulv22HmRNcJ2WE/tmknU\nkZaQWGxI1xGGC0Cv5tbLjsZScejWM2Lwuw+PS0wBD7GOFEozwuJdq0DLofwH\nX9A8iAGGoFlSftbCURqvSB89YZZp5KBj1E5La3/a4BwvZo8UWJrcu41epw7z\nKUhGFlpetIxJy8H+P/p0oyn1HlKkijNtJnF0PHC8vXmgdrWus11x9gTR1029\ndp6SgPODrsCHMZ9AdmGXqCZz53sSAvdwsTcdFHrYxtnCNNAUMZ0lqHpqESO9\nQjHAn8fjV2Ax+dHGNIRZmHQtvPPa038AvYVkQOsNERLqwE6tvNs8zWK35M7L\nLx9aPT8IVgA2GtQgpQN1pbdYfbY8uaBKodfRSPQwkxQazCC3gMfI7itBovOP\nK6PG\r\n=HWGq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dc6dee1190cd8d60caae49aba599e9d7072433e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.599b8c319.0","@material/base":"8.0.0-canary.599b8c319.0","@material/theme":"8.0.0-canary.599b8c319.0","@material/ripple":"8.0.0-canary.599b8c319.0","@material/typography":"8.0.0-canary.599b8c319.0","@material/feature-targeting":"8.0.0-canary.599b8c319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.599b8c319.0_1593010607253_0.9108450704791571","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/form-field","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.87e3be418.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7afd1c5421928ec617e755b6c84ddf182c7e07ba","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.87e3be418.0.tgz","fileCount":34,"integrity":"sha512-t97NLnLDElom+6a/ch+/1M052ZR/HzALgD0T6VHSU9T7ZArmVX0nkYh4NVo/o989exC7aH6Topx3Tq0mxCe4wA==","signatures":[{"sig":"MEYCIQC2LSh85J99K+oCMJQebrERm46qRcdN6mDZr7upEyARBAIhAJI6Q+NpaShA0HhWTSjh8AK1Hn6C31be8d/vM0kupNFl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85MYCRA9TVsSAnZWagAAN34P/2/6MJmw1godQNsd+Oz6\nYXmP2W7y1qD9y/HEtrx2CQ60Tb3/XAkwltnf8Q1uTln86i5+6J9lsEe2le76\nR1GvXvi/5hm3HM4P7Ntu18qK9TqlASje1Vq1V2wck/jX+i+jUTmR6xVT+Lkz\nv+clU4nEjeUbfWBac0nfH7ik4qw/ER+m48qqCPr1hiGVRIWuifHsaA2BdxoK\nc2Aw1z8eNZlmhXgpUTLYITGPcGAQW+C+b2bX6YNZI/CQKAst0go6e/SIWkZq\nahvS45NtJdPL1041z8Du0fBS8u10Dz1wQppb/CGKzum5wfQkeHxpwTqESRV4\n8XN1O+KvRl6mLCf/EJ72oXFUXxC7jxgeMrX8vTFxwHy6fC9ugKqciM2HvbFV\nMDcbZonzB1VxRpcMkpkImh7RADV2QTsLLV9++anKbGmWEVH9j65Zhf6p9ZtZ\nl4gpvFokNqR04RsXSquuM7A5MxIkIaGH0BJbgwCJDDPHXZYCe+Ot/5Hh5J6m\nS0s5/iXQ385KDYG7XyDiyvwNZDLrpFobrNV+m27V+ZcDUFI7vg5AvO8a8L8E\nxhOYd+vPygeiTU9hykjbSGzDZ7t9obbgOXXJ32KOBrgimF7vhRtczTMLTMZD\nz01aDnQK88EgnlgRloEI0vQLhFcAcTYXIsy8IxULUrk6rDxRwIL2l+d+9/2f\n5v5N\r\n=36QZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4f20e6e641b48a8ec7f7916b83272bb1322a3663","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.87e3be418.0","@material/base":"8.0.0-canary.87e3be418.0","@material/theme":"8.0.0-canary.87e3be418.0","@material/ripple":"8.0.0-canary.87e3be418.0","@material/typography":"8.0.0-canary.87e3be418.0","@material/feature-targeting":"8.0.0-canary.87e3be418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.87e3be418.0_1593021208474_0.2995791484822521","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/form-field","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.035cf2a6f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e90a3e561c74ce09f1dca6e4d865ad0a307c06c8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.035cf2a6f.0.tgz","fileCount":34,"integrity":"sha512-VIBKBhBd4jW/6cL9Lnz5IE0AbwaGuifWU31NB5So9024sKv8L+2qxs4Fq4GKeUmKCFosSthL6kSz4oF1YxIS5w==","signatures":[{"sig":"MEUCIQCKlbA9TAuXE4RBjj/1pyq5jKAYpjRpRIFv/Fwxz7CNngIgFA/zVrPAMSsq1dxnOjr4tZ+ojxJrfvyKz+uWd43mJEk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8524CRA9TVsSAnZWagAAGMgP/i8I+OMQXi/fmTUab+CE\nN9/uUQwJfGoD9mChH2/LrUJFgKniVcccPbKYX3/2K4kCHIJt8n0te7Sx0hn2\n+Ojy88L9W83SA2lOO7uPKRMnvMiqIiQkUrJCzeH7/yYpo3eqbItegXvz6lvh\nxoVBliogWjLydLp6O1wDS6o6KnkQDI01fS5izg4t6P0FYeC1KFYD107R8aFT\nU0VrDsLOLMF61xscGlJf1dtzASJ7oxHC/UXwXmzBs2cglswduq7XXspYwRai\nKdUgzX68TuzOReE2uqv2CnTwM03D2LUncl7WLWlxGVyu4jvkVL9Zj6oYtNf1\nymCEPZ15oW9ecgaPO4f9WCiqUOQEJ0wmEc/TdeKpT0Xvu9viOqxkufmy3dXS\nUV2jZDdpeK8Yb6MQ5HvaNmzP8do0zFOKjsToOia3QjS/vo5XLeFfplbtNGFH\ngbOicvnaPtdzx6UpvKh4BKhPcym4X6QvvBO7yaYfUSeoIavsapUSsmjyc4M9\nk1TTKe6rdWmGHBhBrQIryB4RC+e2m0b/1G/Q0mQEb3QhiI33mtlTLSsIelCP\nb2LfpzGqhgeYnKQY02sU/etZDO75YqD0w8IKdD0gHXJz7jj7nJy0KVJGqKNw\n63Bzjt86bq1tfbUVyiov6IPOBXc2CuKbuQPAvDurPRZ1iYVhXhx5jha2Ede4\ndOrv\r\n=8WYS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b41149a9f9767b120dac2367ee34f615761dcf3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.035cf2a6f.0","@material/base":"8.0.0-canary.035cf2a6f.0","@material/theme":"8.0.0-canary.035cf2a6f.0","@material/ripple":"8.0.0-canary.035cf2a6f.0","@material/typography":"8.0.0-canary.035cf2a6f.0","@material/feature-targeting":"8.0.0-canary.035cf2a6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.035cf2a6f.0_1593023928248_0.3705942418937249","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/form-field","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.2fed2c12f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb7732e1de5179e2ecf5d0752d194c5943b77175","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.2fed2c12f.0.tgz","fileCount":34,"integrity":"sha512-LssHCy684ejIcelNmP6BS3QZjfgt32TfN/bJAU4Z0y2H/FewAhYW4r7xbhwcbaCr8PXtuXusxVEZ6iKRcen2YA==","signatures":[{"sig":"MEUCIANLUvr6Etw5M2Ydb172bgaksNeBuWcpTCY8SVPqVGtLAiEAlUirosGUjnBk9ihOxBpCsZGlqXZkdUZPz2Cb5+ef1eM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QK3CRA9TVsSAnZWagAAVpMP/1VP8deU3NjsxChH3KPl\njpm62dSx5AaKAhJOpFPYsqHC3AC0PfJ47Bc9WAjQ2eLIWLwLrOg/Bxk0lNSc\nbbw4myQd/bfd89U74e3pxBbejLxdsmIKz89GyQukajxxbudWtuc0htn9CVEu\niEMTH3SiZBt07vy6JKBBkAvQekMpLBX+jxNpxqCsraxpc4FU6rV+m8/15F4x\n8FKiRG/4gic9ihpNLXPQBKoFRL0/sZsQjunJMCITvAENcp82gZVtuE2XjnLe\nF6SaCQCgHBNBG9rZdAx+4DkM5UfSAvP+bG8Et3Gu8CFcuE1ZQUCtY/xe2xDE\nz/R6CGsLJooa2aqFDljEMAmVsDOhcmBcZwOcaRAeRhk25NDHI4U11Wt4cPu7\ncgULvV7lP8l2zreAxqhHXgOtD79zm9WwrOR14x5RcAjwCglaPqM5uUyy7/kA\nGfbQcTjgT9w2rYbSFhWijBl6QcDdkmHD3QbPtPaMV6IZfRSxN1lq3uHWvUmJ\n2K/5O2sTuZZMR63YGEWKI4R5t2ht4FmUB6knv1blz7yZ1bVaA5V4Sb/qUwy/\nBpD18kiJtOVFrmhg0R3A1kL9wran6LN56WSk56Jne89RomLGK+ZiuLzYRP4l\nnQFLsFiQci+FilHAUvFa6lfX9Za4EzML6gCzfpVIGyvSHVcqopNXRVVtdrF9\nl9x1\r\n=CkWH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9c7b4d7bb8c365a3b1a4408204f63c124455f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2fed2c12f.0","@material/base":"8.0.0-canary.2fed2c12f.0","@material/theme":"8.0.0-canary.2fed2c12f.0","@material/ripple":"8.0.0-canary.2fed2c12f.0","@material/typography":"8.0.0-canary.2fed2c12f.0","@material/feature-targeting":"8.0.0-canary.2fed2c12f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.2fed2c12f.0_1593115318929_0.5963467681257921","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/form-field","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.38197b443.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52abf2eaf60072f47e109e211846723716c36e8b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.38197b443.0.tgz","fileCount":34,"integrity":"sha512-oiJIAt9ZBVAUwufVE/SlN9bdKa5eol3Jc2RvrBoMfoVcDSPQ5ayp4XvWaq1a14L514x46+XkKH78vq5KjjShLQ==","signatures":[{"sig":"MEUCIQCCEprJLJ8Rn3x/Hd7nXyjy7evSiqeQ9LnetsEg6Kz6QQIgalAzRY71aaPxwuvb0nXHutxFZSvwSPQPqLBK0WU4fUs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RWiCRA9TVsSAnZWagAASkwP/jhQiN10MfoADf/p+JZ5\n07Lw44vy/uwcoLzZJW+iWjZGNvBANMUQW835XqYuSAOFa0Yi/QxwN6G21VX9\n6pzRvmA0ZMAI2GoGN2ZpRGvQi2Py8Sh8rxbLAqlw4i271pUgpjZyDLqCBv1l\n6FKEPYSDLjkvajyL7o9Qgs5C3P6pFsHUbGw50KwhVDpRwgasroS+L2DZuwCd\ny1uP5Uxn1rhNv3nuN71CzBwgwgpL9OlYe5HlaqCY54gAnXsQSDZ/hs9521Ry\nZVPYmBWvlQsLvVZGA3gHiIxwp/aYvtyRzJbeCgzRSKlNQgBHktfOpfUOfdMu\nZNnzqevMwcHEeGNKhvCEVw62TCSIpde0r2gVcg/YeJTKXHYPoWetWcSbyP7t\nAGdAAB8oz1e8g3D7v5P1vzzNuptTroMIRLabvhVbfk/3lQHt3GnkOXE01nmo\ncNvcfViCJlkF8NMmtBynTbbZfgxcaZep2JN0i03ffAVrTEC73XW3tmr1zytB\nbavWBFTYmniKL64Cf9pPD0rDsL/B8f2yuEB7efsdaBrtpCSjhKgX/hQAihXS\nZZawwmz7nlM7mBRgGi30/gjMg2rIxhE+9+6PAx0M0Y0PKsvi8UPW4fYaUIl9\nmSp7PZZ3Br2cx2TKSCqMhvZifpk7GPfO6PUHhD8P1G6+5mDLrsczpL8Xt0pH\nC7fT\r\n=LFjl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d5e18162ee3d69aeff0d489d4f3f73bb1cad7b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.38197b443.0","@material/base":"8.0.0-canary.38197b443.0","@material/theme":"8.0.0-canary.38197b443.0","@material/ripple":"8.0.0-canary.38197b443.0","@material/typography":"8.0.0-canary.38197b443.0","@material/feature-targeting":"8.0.0-canary.38197b443.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.38197b443.0_1593120162248_0.11404187636481411","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/form-field","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.69a35e80c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd1d445b459666b806dd2e0c7ef9f9cb1ce0a5a0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.69a35e80c.0.tgz","fileCount":34,"integrity":"sha512-vbtPTg+9TpFJZ0mTXWlR3l8T11qSAtqBOpNdTNOC8+BYhdT5NCzSIdJ3mirDMntc9OpGqeiLpQ/7rSKdLs33Tw==","signatures":[{"sig":"MEQCIFY+c3eOz7ZdA1HnZk8ejnH51yfylgU4x7LX5C5vvFRpAiAmHwquolfXfkVImI3y7gHbdAf5//ai+cs8tNyM6HVVOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jKxCRA9TVsSAnZWagAAApUP/234a1Sz2UDpr0B36yNt\nfVGjFtb4YUKgD9qkrIrxgnF+l1juK69nUD7sbWL+eD1ZAalj5oevL4uM7NV/\nA2XTbemNQIvRVfXxiApMlnpm4DzkuTAzXzRCl41aLpzAlsNIzQDG6XC0MLve\nnMF6ERcH6+2sI0cKoaizdnfeE520nAtUyPaqRbh9YHWCvhRCHSi0sC2RkiZB\nnY6wENu0hA301QeunLVMr0d89v/v4Tr7afJ+SiaOc0MEAvvbF1P3ZYdMIvbP\n/0kmjJphpEiDzDfO9HDxABNR00I9iMtcLBiMokOOMq2sJzHyCLTXCXmZxrY1\nwYuaXAmZUOq+PnpvQrMaOSuRKFtlyaHoC1ozAB8BpAMP+e355idqkSEGxafZ\n7+7UYDVmuSvQocO3Fn8+PFX24fwPNIPtTo7f4ivzlSV161559W0GzTBQsk67\nut7UV43DZ9OL6Z5g64Tz6F8figbm/tF+uMm8JOJUDgxB7DcaiQqnG7ea/NL/\naI5n12MQFCMtH4YDHYFRdLTu2YeoQpDRmXeE2JgnrONE9eOSdj4GQnZePv27\nMFZZBjCqnnwbiCz2yqZB/43KTPKOaam09/ELGq7gaH76CQ9FkixNJDKC+aCT\nHZZtmxcvcXth8ITg/Teiu9A+Ruh5jOGJs6nwrq1IkKAfkug3+i+jH3YzWwap\nbjQj\r\n=OCl+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"35bab77d7ad4b820da5ee4944c2cc2b7fe1533ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.69a35e80c.0","@material/base":"8.0.0-canary.69a35e80c.0","@material/theme":"8.0.0-canary.69a35e80c.0","@material/ripple":"8.0.0-canary.69a35e80c.0","@material/typography":"8.0.0-canary.69a35e80c.0","@material/feature-targeting":"8.0.0-canary.69a35e80c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.69a35e80c.0_1593193136696_0.6397921117184338","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/form-field","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.df7154fb3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76186a5481142389987dfabac56438bbf83b7626","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.df7154fb3.0.tgz","fileCount":34,"integrity":"sha512-GuaZ8uBqiX5NrjHV+DFQOkQzdKHc3SaJYrRRyv/ToHYG0Z4kUUUPg/gYMfL0OE5xBXdfqigAkTAp2EEQCS/Fwg==","signatures":[{"sig":"MEUCIHgu0ChwODRWh5D/c4yzAZlds07WbPL3Sc0EEZguwGaWAiEA1GXiJbN4LOm5lJd9HSejSfP49ALrZvTnNDWel8Mg/yw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9juaCRA9TVsSAnZWagAA6QEQAIEoY/sTNEWUCp3MILay\nmM5sJx/Z7+iZEoB4FNx0x/4Oh0OeW2szA9QXCZHgGrwuJTh6FzVi1gDX41TG\nU7t0LTNTO4AvzPpZ3TPirmFIFutDLzTF+JuG5cBcU6EJYzB2GfrI/HzYjdzg\nVMtRsV42wCUShT4LZYxiOtlKDs8u0DuPaZ6eLHnKjA1jAju7D422ce15zcpV\nI+oY0GPQE0LzbDdugtyLYMxujEg2FYLg0gJJPnQXykDvrVBPG3GSt25GuWeF\nfpvwZc7W03b/L+U0NUq49w8p5LlFdYzpVitHr9jpCvQgIMqg7BpbZy2tSfg3\nCUDSdzSMVaCadN78VvJZyW9u+aaF44bFkdiywEjhpqxDv7n4eJSYlP/TXKg1\nXgEYdQsjQWpV2Iv4ca5aypvldJqr6Jpnq+r0k1hj1EqdINGDfh5ogeqxhPuj\nLgbXnJvqaSsZW5RkB+llPUYYo0K3yw+1QUZ0PFdeATeZCIvqcLnrstavZXZp\nre96VMGwXGO6M8WQp2RLEbsAPb824UeKccchBO0vS0DYeshsWLFQ5oqc8N0f\nxCIsNn5QAZlLjKpM4NIl5v6e/7Xu5zOQovj1URJDijq7nPx/XPRqPyPo5O7Z\nlPGapvo5LkX7tWZ7BUimI/IZJ9ojGGy0Ymgoa2ONvRgjawohIkWzbfi2Q2Wr\nDJgc\r\n=IdUs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9081758d517c13eb6f120c62abd9689f1fa99906","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.df7154fb3.0","@material/base":"8.0.0-canary.df7154fb3.0","@material/theme":"8.0.0-canary.df7154fb3.0","@material/ripple":"8.0.0-canary.df7154fb3.0","@material/typography":"8.0.0-canary.df7154fb3.0","@material/feature-targeting":"8.0.0-canary.df7154fb3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.df7154fb3.0_1593195418124_0.474538027985586","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/form-field","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.d5618602a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3422063f5be9127e86f2f9a337af3979231bb9d3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.d5618602a.0.tgz","fileCount":34,"integrity":"sha512-N06XWlg/njfdOThK0xKl1g//6GKEM1ov8Fxqm7d44izlU8LkJriqN7SEVMFf1iYW9pfp7WxY25+zdFdag6GuAQ==","signatures":[{"sig":"MEUCIQDBihA4+sHlzfFf/n65P5OYiRen9bO+p1okLFRJnxz0gQIgbwfRIKzg+xaQZGyNV1vQZLi/BfedrBI1Pq17jvGPNyk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m0rCRA9TVsSAnZWagAAmPoP/RfUuwAKT3DLL1nZYjjX\n0HojGf1gL5GCo0rKtdR7KMojXI6O5tquA0hc8lAFRpQ483o49eQZ5d1L4TC5\nJ+3BUbcytcOtkqJmDpxFg29HdnsYOCkNOsSbAk3hs+yt3+4i7aKIGaVSUXCa\nESBzkTrwIRnmL0AahpayddYHrBZ0N1ISQSzC//amccWqk2P8ItIeWzsx8k3e\nIFTtzJeCxzwqyZP0q8ufGcWgr9OMJ8ukh52RZGluBIprJTTyISsrWMHth9EF\nZXoE4SnQsDjaeCN/qPpZwG0PxYG4y7vCZGeb836wKfEWfQdxZBMD4W4Ys7Pu\n/ENRamciRzrEiAWy3BWwajQ2NHqZBDmSbByEZ7h1SlQMq/NCsvD/AntntcfC\n3cs2xmh9CRhv6wt8ptxnPgN7/eBhjCyWpkZQdT6RPe1J6E5s6BNQgXZES+Yf\nhsAa6XZGc+8eQRZRdLRiTG5z+uaM8nEUeJJ5j0dqw8IiDD2rbHv60PNeI2Sr\nd2OqTRstLVoJQZIxdHTRIKNgR+8z+KviEvIgRpvZGfkwq2O5/hpfeKtz30GC\nbC4jqk7cAvpIystGT/u5CsrsoTJjCmFsRR7PI4YqDQRJF8F4QcVubYqlBbUH\nqzy5euc73qa6B9fI6Iarx+N8Z4KL5bvEFKiC/d2voH4lUlf+9NuBVn4nb4GN\n7scQ\r\n=coD0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ced8c184e8043c7ac8faa813b76b9661cbe247c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d5618602a.0","@material/base":"8.0.0-canary.d5618602a.0","@material/theme":"8.0.0-canary.d5618602a.0","@material/ripple":"8.0.0-canary.d5618602a.0","@material/typography":"8.0.0-canary.d5618602a.0","@material/feature-targeting":"8.0.0-canary.d5618602a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.d5618602a.0_1593208107425_0.13353694682544903","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/form-field","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.e590b376b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5411327560594283d99c9cbbf8fcdb7b3e0cc32d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.e590b376b.0.tgz","fileCount":34,"integrity":"sha512-9a98J914wspXsOW4TGiuTgGWy8snKm2GHyhJcb0Iw+95VqjKn76FG3deFl33EdAktMbi/2XDWlvjroV0qXLX6Q==","signatures":[{"sig":"MEUCICVw63rGtHTY4zhZ5eapaI/8x8RMWkLGKBgqIrMHjPDVAiEA+/NvNcqqsblvE7VBmXl77iqWlXIGLTCiNTshVMbXON4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oOCCRA9TVsSAnZWagAAlYUP/jIMVBE2uSbEbz+TDq60\n7YKggdDoLKGTvnEOrODme3dYy2+rkwfYw9rswRwNcdwa0Uk+GApqMy7VGI2H\njWsWDCMIAxES+npbqr5+NKDoVbfcbtiaZHQAfqFVSHYe/xcy5Z++XRgeFIdL\n+VS2xQGIi2r17kHK4ZnfX3T9MzsDfeQxUE5p4l4zFiQonTGjK4LbI3TOUV3F\nS+h6if0+dUdAmfPc8nUXqrNcGSf246zPR0e6/m1eSIhoT5YFk/sqhhHfTnq4\nFY77/qguKNkLDKxU8YJ9/q2JYsv80/yPDXTMJS5U/HCUIabFo+Dm7J7MWvHC\nPuDPYNmkaSuj2aQqIQAnaVBPKcP12tQuxW0UW30vKudxy2Ovlwiu3tORV3Zb\nKUmuSHBv9DCct0MGg/+c26jOQzuDQk+8GEoy7A/I708mMEc0pwrH0NCVJyMK\n0eJ3OQ+M6Mo5FFTABn6KtM/kP/kPQAexgRLtaRcb5ibcyoeYzzGS2LurIHgh\nYxXnBxtEdaXJXz9G0HAcuS1OULTqXV1IeYiGz+ugATVXOoMktduBNDPUqX0H\nGPWXbb0YB82V8DtEX4VkCn9bgD3DiPT6DC+g2TToVoyMqN9Tf3fQ7PRexIAu\n04a5ubKoTBkHfMG7eqvS0Jw8ljsCO8tRma2TC5lJ2QS2F3jaNYjtdRgwJDXR\nO/xO\r\n=Kl+h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0ddfb390b804034a98ec0b8e7741dd3f3250b5ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e590b376b.0","@material/base":"8.0.0-canary.e590b376b.0","@material/theme":"8.0.0-canary.e590b376b.0","@material/ripple":"8.0.0-canary.e590b376b.0","@material/typography":"8.0.0-canary.e590b376b.0","@material/feature-targeting":"8.0.0-canary.e590b376b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.e590b376b.0_1593213826502_0.8800178275541799","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/form-field","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.0c9d6bd2d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dab9f9d4ce927187c19a1dd9aaae61436c09c2fe","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":34,"integrity":"sha512-GRhfrO3tXuqFTjIBXduwGhP869EjKl47a6E3uxeSZLUscdL82FRg1aDcJmY5KZRqXBCKnvhmoyA408Q1blWJew==","signatures":[{"sig":"MEQCICTU6a1e6GTA+Cl4qcYDxcrmPzlx5pVqXQOmg/9lds0jAiBWxemNtc7jDYUO5qCT3W22aYoXTz3Dpj9nPXXcNYwmdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iGxCRA9TVsSAnZWagAAmKkP/igvtVQTuYqPX2CM0k4s\noU+riXd72i74rILnJxT9iHuADG8SlIxbY1JNujxUKEtkF7TjC6Juoj28R4cU\nF9+bL/lyqtB69c/fWtSl2iSIErSTrDiotNnZNd3tGiZImHawGCff8dippTGF\nkIPNGzgnpRFunS9oC5TCMBVqpvEyxOH2HiEtRRPF+EVC9nd6e8pKiyv++0Md\nOb0C3aNlsyymjt+XVTIrb1jQrvydXYeTDU3q+Y2L9nOJLyBHmvg7Dk+2T6+z\niFUtb3yyemT27Zw6j3Zyilb6XKckQQuXRJYQVLJ83E5XZucAClPMkiQ9O+dZ\nhwP/ZUf52Nt80o2qK9QrZa/jOlwMBPPpW1NZqxgssYq5PZnrlhPM6Pk5WWPM\n4lqe4FnU7GV7phEpyueFubJfmqEBfcMv8ixkeph+Xw43f0ud8PkTW8uA2Tse\nSM1s7C5V/JpYT4EWyVYJxy4r8p2iUYMiVtrANXkoZbwjg/BtobkjfGEWiZ50\nEOTS1m6zeyclFe3kfayHtfhHGWuckYdVfRLloQyf2KQ0F5u7XMzsi1y0lDl4\nUhsSR97Angtb/+L4hU/o/BOWIIo6PJh8S9CPKu/EyxHRh+3VY+8V0So/Bn8H\n2EuhM9AGDqo+btZxLaqsCfIZVF/EpLqEWjciqcYjNVUu/e00DnjC8oVa3PV0\n+5wb\r\n=+o4B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4f171433da859f637823aa04bc12d72783771f90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.0c9d6bd2d.0","@material/base":"8.0.0-canary.0c9d6bd2d.0","@material/theme":"8.0.0-canary.0c9d6bd2d.0","@material/ripple":"8.0.0-canary.0c9d6bd2d.0","@material/typography":"8.0.0-canary.0c9d6bd2d.0","@material/feature-targeting":"8.0.0-canary.0c9d6bd2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.0c9d6bd2d.0_1593450928977_0.41134111148766994","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/form-field","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.c1fec4246.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"baf93a565ed432b6fb980b0a7dd9d933137f1b44","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.c1fec4246.0.tgz","fileCount":34,"integrity":"sha512-/I62N+s2ag2TBjkP5Q+JYCjypfuSlmu8rl/SiUUt8VUBlKESeRD0BW21K6+SV7xW6Yv05JqgBb48rwqMI/PikA==","signatures":[{"sig":"MEQCIAv2ieNmWmgRZmQKzRfS3j29l78q32fMvh8znADXvVF0AiAKiEmwUAS7So/UbSiNk3xDTK8E5z2psfksmOk2Lts3Qg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iVOCRA9TVsSAnZWagAAo6wQAJhEoD0v+3mmNh6LWICT\ntGhZ6zT99NpxSKdQxcM5ogHxefQ+Fkv62bTIzUPzA3QkRFm6mUFWcemOLi6e\n6nKnhENxkYA6w7alU0IO4JIlUH6F94mtJoax+qZHOy0wWN6yFagKZtTr8k7o\nkqoIVOdnpmuAe2e2xsmUqu3rl29MLIqvN3tMOypMPESuxswPKS3rEzBUUDNN\nfYjcRSHlxScgRw7raURTFySTPqcEDZ61dOsq6jHcQjNiyEzkWuxN0hUs+/E9\nvCtMd4ZxwPSOBqK8ONZMPbUWDM12zNePpYJAHfgW/g2kHOCoYyhflrWHbqT/\nI4E00jke0KxSep2hyInsglTINBcKGmjhl7MXq4XGP68Es8lYZDX+vi+SDih0\nK7vAaDFQZ4DMlxZ1fdN/PN7JI61qTEH07h4/AgsJCWOOxDYHKXMuS5gBxuv6\nO5joIVavl+knExbUctXrnnA9/G0Xemo5JBiWF0fuvjTA3D9w6Lrs7vz5IW7i\nXwgdKV6r1skJK635TXS0q4GaK/aml8hKA5SOD0wozedr0YVv5ztWNK7vdJaj\nXYTTfrNBAk57O9oCI6kuc/my5mmYe+46HSVxZFu/pNt4/jbsrJScNocth0/5\nypzpSOHBDfbCseDv8cJ/8CjGGzV0QNOaX4a1ErKHMY2v4bP6PWFHvJj5UeIf\n6Hu5\r\n=g9/e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0a588e37208b314f42e946ab4add50d0ad1ebf7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c1fec4246.0","@material/base":"8.0.0-canary.c1fec4246.0","@material/theme":"8.0.0-canary.c1fec4246.0","@material/ripple":"8.0.0-canary.c1fec4246.0","@material/typography":"8.0.0-canary.c1fec4246.0","@material/feature-targeting":"8.0.0-canary.c1fec4246.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.c1fec4246.0_1593451853697_0.2289934406872678","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/form-field","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.c678a9d34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06e396dcda57e992a9c113890edd4330d44b54f2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.c678a9d34.0.tgz","fileCount":34,"integrity":"sha512-lVhEIn31IKGCVp5rjYVUMzaMjX0XRci66/+FJ+jAxZNZOjyE712HyBaSIn1AI//+urjf7kdyrDbLt+v/VpitRQ==","signatures":[{"sig":"MEUCIER5FgId6zZG6L8PGPs5qngEBaquJcTwOQBpb8orHkSTAiEA3o1xVviHGt7G6YRuGtx5KnMXHJqr/FCxEuHHd1cAsSU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+ipJCRA9TVsSAnZWagAAp50P/irD6x0ydMCWG6I7i9gP\n4AyIUuVDy4RCZkLGDeBGUD+a+bzp/IRLBRfu5ja57HZlWLHrS+1HKr8DaOgM\nhcAi7Cbb4PAYfC+27oR0CaEmN+2EwPvNT8ZkCHRs35bTLJ5R6DE8hza2HErM\nB3zqTVQl/+P83M3cxv16DdZYNcmQoLyO+TAKLOhIZtxW3eVkleRkiEQhBM6a\nwzgFhkgn1z9ClV86a0UB+qyOkOv6PS+bD+YItWcHHwdz2jP0xR02kz0KsZc8\nli5TMchs+KqMjGc1IKAbRWLwkuBoGxsV2tNnRIcQMAwaaHFyB62Z6bKcanym\ntlu6ODzyA8FtAZDx1dwXlroDIr50C8u9WC6z91FY2Y7wX9/FXt+1xtypWUJN\ncUxZGxYqUYn2yuNziFfgu9n3csf6h8NEw5kDT+64ceskIr9YmhtJ0Cf3agPb\nIquiM6oT1bZQ8y2mibJstNffHE8kU9d2C3cktEdgJU7YIG1y2naUpYUk0sBb\nBMabbhMZ3UdB6zDqWt2Loj6F3rj69eL5TMtiIVAqDhrabupDCoPdJHPMadiz\nTm9qhpqKyaw/pBcy97V4mKYfsMGL2d1pxdVXq2xNfYWNBg5aQa3/YJ9pj5u5\nsh12b3YjYaOnCf5FzohKmpAChyxtxvyqde44gqnbEJaQfb6ly/ATgVFAb5Tz\nhio6\r\n=s6J9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bc361f7c6bcb498f3a6dbbe6255c06a66b7dea5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c678a9d34.0","@material/base":"8.0.0-canary.c678a9d34.0","@material/theme":"8.0.0-canary.c678a9d34.0","@material/ripple":"8.0.0-canary.c678a9d34.0","@material/typography":"8.0.0-canary.c678a9d34.0","@material/feature-targeting":"8.0.0-canary.c678a9d34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.c678a9d34.0_1593453129401_0.6331623053647275","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/form-field","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.521afaf6e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45830bbda4d89747d3652e687f0f73775bc3d781","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.521afaf6e.0.tgz","fileCount":34,"integrity":"sha512-16ONLTPCXNySc8BT90qpNL8Pk/b73X+gqSuk0u/e3nPE4Kl0G/98c4DK7IxXCfbddN89QxHKbcIqQCBWHUE9mw==","signatures":[{"sig":"MEUCIQDdP7/ncOZvjBOqFXYhnbLIayq6XcmY9Sj/s7cVPtVQ1wIgJ477gRXOo/aEZ+GENvgCf/CSy2cxtvKM1h7ac3AtFO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1TKCRA9TVsSAnZWagAAJqwP/AvMV7+jgwo19KG8/24D\n8MMPLOceJJ7dJliKhIxQT38mN4yPjlT5l2A57R0Fy19kZx2r63uOrNYyp8lk\nEjXjM9xNRGrXK2vcMH58IuN0Mnc+KIoj/8vwjrZ9FsdQAItZ07059EqC71od\nBuZx6MAzwehRDhGd+w8OHF5VBeRzo7x+2PquCu9vLcHQ6gKM9pK61RPmsfYl\nfJNxPh6EVuRJVHoc32DtSjbwGI4pCg25NlajRTTnDQ2S6z7W0wHH/9VSReeL\nzkm4xipN6fSJ3QSvXxxtDZUwjutP7TIsRHCOaJDrZCoKs935sBMozMxUVpRJ\n5QS7wnhIkxRGt9Dzy/4buOIJ9zALpbgBqRtqv69t3qKwiXJj1MBNC/98ipo9\nt0hlaFpwtrnqHVrD9nKA+KXBfmrVtaNxq0a6MOhF8+CJYyAR3ONCXk/shWxa\njJfqj3jtWFfQrhJcGiCHQuqlpwKSZi4vTpJmkzl1tDRn3pZysMOxCqSpa/9o\n3wYjSReTh6P1AiyuMEZ2TXu5eA3751CpylVwbFahx3CTHT9EIWq+ra/obcZA\nqvkrtsrn/WxTIrNWEedpZcfTsIQOcamae4Ag9/UpiqVIVrwgTrZHgnAiH/1G\nBGJUW4KqEHio3wuNQ3I/7KC+w7kst9GIkNP3VN8TKT2bPtuMq6EoZ/OM8PGV\nzaZc\r\n=Rop3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7ef14e207a6031cf299541a4dd72c2eafba3ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.521afaf6e.0","@material/base":"8.0.0-canary.521afaf6e.0","@material/theme":"8.0.0-canary.521afaf6e.0","@material/ripple":"8.0.0-canary.521afaf6e.0","@material/typography":"8.0.0-canary.521afaf6e.0","@material/feature-targeting":"8.0.0-canary.521afaf6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.521afaf6e.0_1593529546150_0.13409321392378581","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/form-field","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.a2ad48839.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4714452dd0b67759731f09662f72c10b4f6c3f24","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.a2ad48839.0.tgz","fileCount":34,"integrity":"sha512-A7Vor1kF7W1+k/9c6Jcf+0FNwtHLzKeD4ciWlNGJxgSe425ghFOgoJy4TIQw8w6JGWOQY2dWt4FPP/Sk0t7T6g==","signatures":[{"sig":"MEUCIEIjEfAmshJTaocJ/RsIxY59P5Ewv+DrQT9F1HUMyG+bAiEAjqqF6JJxC8Tsp0v97DO69sUIjBYM+4dkCNthreqTk4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+48bCRA9TVsSAnZWagAAQ00P/RisYFlub3OQgTnJFkSq\nwyHN+VahW8IqRrkkbiEIcS098bn5FzjzfJ/TbM4BuRint08w3dHRboK1t31T\nSzDhcSBpSRcHmaqC/AThgbRDUBaqYBJYtnFSMbA9ItLvPMx/gBpgny5uMDQe\n8JBYAbHc6dzvLjYpS32RktMvkiH87zLc1yP/IPXAyYMYu+R5ILN2SLTLjel/\nN0ug/ONUIaXlUz8uzvwxo+MUklJeHFKjag88xMeX6GJuAuPBCNAzwuUopZaX\n0Sft26e7x0qN1eANr5UZI/lHb8OSie0rKLr2PLsLJc2Qf20GRYlhwpFDaUOx\nziZzQBU1f5UjFbuFX6PMig+qg14W5fMIEreuXGxqNDN+1q89ybZvrvRNQtUR\n78VCI3wmscFkfmp88OrDebr6vVhDpz4qw/23HhgnzS8ohwfNby3Xn/87f+/D\nDUUSJQqeVSpqLh7mrxf29vLIT59N26p1zoottWEsDVnNfcB9g3UXXORB2E/h\n/R18nMI+0LIstZ29mYQWO5tjYt/2a9xR3G0bKG5V5kPm6mYCQhqgDNmvJKZ/\ne0YYPxuUGMHJpqvw8pXt1roWE9I0IqKtxiSvILAl+lF0d8Kv27PYYZ6rpAWV\nqWmH4CiEAA5inELwCNj+DsbSQB+OZr6oIFOLZJ76NShfuygcpLOpCPUJgLPp\nD71D\r\n=PDpG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f7f949a98e604fd4cce2507e8d63c145d2f34e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a2ad48839.0","@material/base":"8.0.0-canary.a2ad48839.0","@material/theme":"8.0.0-canary.a2ad48839.0","@material/ripple":"8.0.0-canary.a2ad48839.0","@material/typography":"8.0.0-canary.a2ad48839.0","@material/feature-targeting":"8.0.0-canary.a2ad48839.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.a2ad48839.0_1593544474315_0.10117883869529742","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/form-field","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.ec2385881.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"399da5cf3e82f7f99c6ecf81364d2eee12eb21df","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.ec2385881.0.tgz","fileCount":34,"integrity":"sha512-aJV/e1i1jy2iLnOKcCvrVswgbCPC4cNoYRyU6I3IM5u66FBIwy30ES+WdJLVOp8v5LN8ypVpynTcuOynkg0CaA==","signatures":[{"sig":"MEUCIQCXxk7q8KjWUjUR0TxfBJl54QGZM4gKSZL37o2+H+VnnwIgEiI8AYmiDWajaa+ALOM0lwq+CzCTTzym+JzI51ViTq4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7LgCRA9TVsSAnZWagAAux0P/Aidlxhdk5JFGQG+Fq5K\nwOhr/Uig0LtKetqvZ3cSXMSiBy3qwLQAnJVumFvnV96Lg14Th+TNUGC2VgbK\nVvqIgnwkqwofJ0KaBc+CH4CTYheOwsX3VVI49THageHktL6nu7H+GFDc9ORv\nMvMF7fOWH3ZEvfHjyCaG9T9TLmB5XGClr/G7l5GEk2YWn3m4uAv9N9sxkJXm\n8aHnojpzTvbpM8DRUIk9yDedbcaPQWcfg1XkHwneAY1oe0aGkfecsV0ip5bt\n8xvpqT52SQI9wDcsDlKKmE+KywK3wAAbN27WWoD9AApcQAE93jdWJKgJQRVZ\nI49ZB5vYTVLIbNUCkm5M/kPmM3JOfIW4O3ElGG5Mk2FXTfwvJ7X8ZcVDUNrQ\nReGgOU9SiaqyPKTAdYIWyK5V7g+h4H/ovPIHWnd/vj9jww3oeAkY18onqwgt\nFtNtbPE9Zp3jktEYdLaiFEVB28hMsZTDCY/YflNTMJiyceGbLPxZwGyZbW7l\noR1hehQtxDfKJXxddhFzi5ZECkWDB3HGOwAAT22igfAvJ2IpFTnNCNcNJXZO\nHH19zjBPQw8sN9yEjjKwUL8sPoW8sneGZnfM1W721CWXT1/BOB0IkXpiaXXq\nQotPs6sbmW5AEllA/pJ+Xq+Q8TPB6Zi5olYFQKmj89lDip0vJmAsb/uBl+dF\nZ7BF\r\n=dWvc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0039d314b5ff29856a2f17a5ede426f3f01c80bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ec2385881.0","@material/base":"8.0.0-canary.ec2385881.0","@material/theme":"8.0.0-canary.ec2385881.0","@material/ripple":"8.0.0-canary.ec2385881.0","@material/typography":"8.0.0-canary.ec2385881.0","@material/feature-targeting":"8.0.0-canary.ec2385881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.ec2385881.0_1593553631789_0.7183116095504227","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/form-field","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.610c26c4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f57c501fc3ea0ed176676b4126e139caf895fe9c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.610c26c4a.0.tgz","fileCount":34,"integrity":"sha512-Ho0RR632ojWMUkCVywIs7WxNMXNSnLA/xCVoBn0dAH5Wr6zFsHypjEOHfp5W7fSsW4hx2kh1yzlyIqbkYzNt3Q==","signatures":[{"sig":"MEYCIQCGysxwbZx5Jeml0NOYrUBjWJiy04i/KQ8UuBuCfhrQjAIhAPc4NSKRck/PxvW11Nror7aqoiK5zZDHctE7UcwTI9yO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KQVCRA9TVsSAnZWagAA5WAP/iBjD1xdKYALZqbSUlzA\nTrt5rtfA9mhpUH3mJAgrC+CcC8mzw1W1OqjqQttfXYceC5eG54/nx+LjXwk9\n+o8r2UKgL4R5YUJpB5rcrMJzz7ipE9ISP6lfat8aLYIYNtLH8Jg4Jn81gIjg\npPYeupmsDjlb0oeVNozvQjkeoT9i6Zisn7lGchs3NckjBqDn7qce3FfyzXHB\nxdOcgDUPQr4gRGdLprebDXMJuEVtGcCGyEGJLJKa07vS3lvD9VvZ7GFTlXJI\nC7Es7T5OunkfqC5w5aNlat5UqL+75pRgOG7+ASe3lFPYKAq+WYvr7qdLT4Yb\nyakqfZBXBLdJcrMLTo3hzPKFrf6QgOu/529DglCYpTCYcqdoMVLO8cVx5Qy5\n0Smp61k6nFBA/bh8M2jIXHWUAiXNBqrpwxTkAjMH7CoKM1gHwHEPpTCwB7fb\nLPuNr9CVp2tvOe0MAYWIiEPMRyOLdyze4n619t6btuRkMUzv6KZU92hhH50+\n7Q5VYynnw2RSf7YEHfIhqEtjGjXGIfzY5SUDBWt/Gs86bjvFKkD9DOZuwAR1\nibDE0HHymNja4sD8mWDdioMgjrjAcKOPSIPLSyE0LtOkImQGpqRbJmPiS3Fg\nHtVQRltojueg0vrHlW79FyGhJGesMXnikV9MO4GDCOx3SkdRTMG8tYVYkHSv\nFp9E\r\n=3heO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"84352d6873c8f275f890267635fa416189f57a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.610c26c4a.0","@material/base":"8.0.0-canary.610c26c4a.0","@material/theme":"8.0.0-canary.610c26c4a.0","@material/ripple":"8.0.0-canary.610c26c4a.0","@material/typography":"8.0.0-canary.610c26c4a.0","@material/feature-targeting":"8.0.0-canary.610c26c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.610c26c4a.0_1593615380932_0.5743673245630341","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/form-field","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.e2ea4a99e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c221f4f72ab6b87a1cdbcf1a1b41f5ff835a834","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":34,"integrity":"sha512-Lv62h2e5elyZfCRih9ZD5dwlC1q1n27cU75DUt2K1V6fpBY9L31Ov/LYOovUBBvYKeTzOPbkzG+2b3eimbMUmg==","signatures":[{"sig":"MEUCICnO348x/dssgV+YpB65uMWVX5SP5VzvT91nN11Gd2BTAiEAxfXwNQp7ne3jKBgSTr8iS7tmzFObh/emF1uHbgF/5sA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OOdCRA9TVsSAnZWagAAWLMQAI3ADjfRX8LksZ2C4tQb\nAU/WX+Ule+XS5sedifQGotmmF43U9O3j0EUpIhBffmDDYVmT/0xDSi7ButHg\nSkKL/3JcfMZP7XAZWgj0tRGwoptn2HV0LlL504Dl7Uy+9JDC/+Y1loIS1SBJ\nnuW63R4Yn0HJDcVolt3xVTpeFcMe1SjVgytfTM3/kt2cWzC/G9VloG8pNssT\n9lmnZPIl9vYNo+Akdd1mk0zpKTKhvxdLOl+tDycxYKVzm1bTo2in3nTABBia\nqgad/+QRnLtZeYh3tsgEBb+aHbOc89L9eNFPu1CQ8sjdmXTHNIho81Sr4mHG\nDg8aCsFwDwlpWmbo2uYy9J1UbKfvn9Rasog0qPEmegbCg9JsoXvGOSmntQiP\neGpR60UP9M5mCvwU0fH0J42bj2mKQ+LOiRsqA5GFNK9HKgI0ZxUuoKVS/kjk\nrm8D46/idjbTHhXpCEW6cy40Gt4QzFRW78KN0NHLng3/nq6FSVC2Cb7bm7MH\nKagf+CZNSKO3A3UhlXeyceZgZqVaaQS/1xH+5n46BCEVCbEx8X2pOrDdZ5Vv\ndLrA9jlefVZQt8tnQmwswlTJE8BeklGxcbrKtjSPXYPJ5SB7X73rLZ4p9PUx\njhlWHBX2xHCjDrhSMzN14YGIOWuXwdIrGQC4faqT58crg/WPr5cnZ+Eit48Z\nNXFI\r\n=5Myv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"42e9f40d91c643a9770e5a563a204c7f36196a3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e2ea4a99e.0","@material/base":"8.0.0-canary.e2ea4a99e.0","@material/theme":"8.0.0-canary.e2ea4a99e.0","@material/ripple":"8.0.0-canary.e2ea4a99e.0","@material/typography":"8.0.0-canary.e2ea4a99e.0","@material/feature-targeting":"8.0.0-canary.e2ea4a99e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.e2ea4a99e.0_1593631644599_0.20400437789009906","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/form-field","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.a78ceb112.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"232db5ce9d76935524242a9ee23e6931257b1189","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.a78ceb112.0.tgz","fileCount":34,"integrity":"sha512-VIDXQjthFqk3S5w7IgziErin/3p+L/c6lnw6e0E/DiUFgf6gTUenbbzx1+9plBOGqCl67wTN9NwQBekHUOKxhQ==","signatures":[{"sig":"MEQCIEb5IKQ5iS59QSOtZbRWFr0gdmEOmeesuqFdCRXiudLeAiBzEuRuazJEhTr4dt+f33FjJJK8DchS89rO3hZYHe0pLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OZeCRA9TVsSAnZWagAA59kP/j1SDygjI0WMmWe92jaM\n+AfcvCvACHNNJYWerb51fnNb9NSc0Y4jufFoMVOb070BaGl3fnIjK5iDYFBv\nD4DM7RQWmpjGxsC7PbOO7y/PeIEUaE50+beJdXh1jbvGWn0id5z+X+WzBnQS\nqF0F1vrEClXvKYG7nE5YHSMwb12bnQXzbqcy8GTWcrF4aFHigzUk8D9pI31C\nPInoE0tXXIz+rPyD7kGRKETfdrFqDIkRPPIoDy/bLiNcTU0S2Cl2XP0uvjFS\n30Zmpz8WuzbL4x97pM1Zp0lhvHE3Gyt0ZGUmKqiJcBEJ39s8Oi/BtAk5+qsT\nb85Egk/qVLo2f0mG8fugL/YWVu8g9QexMvNZh4Mi2pF1yUD07ulNYix1dTO0\nc9RZrh6qo7EXLWj8dtSYp10MvziihGdKlkXY3vg2LCmj5PAOn+E7Xh16vQtl\nm+nb49rb8++WYYi7wJEUGkkh3bYUzlmiJMQAyAKr2sIg6M+FNwsbKVo4SzlP\n9SRk0mDWBnQ3hMnl1VVeQ77k7d0GdYPnUcIQLLUi9XJX1iYQzRyc2i9GmU3x\n2M9sXFun/aJCfTaVnIeKVUGnXtwt+gzUF36VKjtgk+paMu1EZb4oiFBdDM8m\nisY3A9W16t96R7tM4RR+2A96nPBWhW6+dq2+0oo8NJWzWdm/Z50f14k/Lxu0\njTC4\r\n=kmvF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3a38e39f3d172dfa99254185d8b0d4c03dcc61e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a78ceb112.0","@material/base":"8.0.0-canary.a78ceb112.0","@material/theme":"8.0.0-canary.a78ceb112.0","@material/ripple":"8.0.0-canary.a78ceb112.0","@material/typography":"8.0.0-canary.a78ceb112.0","@material/feature-targeting":"8.0.0-canary.a78ceb112.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.a78ceb112.0_1593632349865_0.6331014094562561","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/form-field","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.b0c456d33.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cab241a243de073ca42d1a0e36aa058aa875fdc1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.b0c456d33.0.tgz","fileCount":34,"integrity":"sha512-5016PWcEY32PzAXdT7KpHWJ9d8q0r+8iP5ZIzsJO0MTBviV1mQ+YO0ssttmZSCbl9kMEIHmFeZTk9pWtUUmk5A==","signatures":[{"sig":"MEUCIAni0f+5Zs4vf2gmyEJ8UqicIM4bu8ytkvyywiaEFDGyAiEAlwMZObK79PMYbAw/NW+VWXYK7HrR7A43yiE+TBU9B5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6ikCRA9TVsSAnZWagAAc7QP/01Y4vLRGeC+ZJPnQeGt\nJvLkdaWMckbP9akYvmSEB/ACm2YDAJfHtRrUPHr0NU72z7A6K+BeE6Hsw4LX\nf1SdUlCnpqvbSWafaYJ1R5Mhy+q9E8ZjiIuczole4+G7DWv/tbPSN5WIZua2\nxasEteBrRpiJ8q3yg1oNDiBoppsPiwxPkCQLvIDSHUWvkqGmUrgDxH7+a63b\nqFT/2CwVNpnVEVWoj7NOCGMKXLuSa3o00qWT9Y/Mgp9Exs7tM501/+h0Nkkf\nFm956AKoPOaxaM2hVPVl0sWm1fDWJ0Al75o8+28l/ACcnOQJZ3uL8ZJoSPVm\nhLR1Tv+ACxVdLrzskdiIuJ2l+YIl+xo3iXXlzoo4CtLjmYuFJsEM2Jc4l28A\ngvIBYr3nQBuUXmcVeRMt1wMm39RhHObcipLHPVM6QhTGjhX6hPutxydotScI\nqAX+qy1Mvz77VBDo65uuMJ7rQtJ1329H3+RE7doFmXur5upzssa7FO9SiBMb\njVW35paSiaeEUaRAqIs590DfpQLso8vQFGjJYZl1udQDc2Hz2SaE2oO1T72p\n14IjSdCtdl2p2G/hbIKeQi/C5AJ8/sIXE2e/Lz8bsc7iKaNv9rcnZk80yt9x\nFo5Sr7DgdChhG1sLZiJsGU1tc+Bn74Eu5Y6HSslA7orgSA0lzZAEK0n9maNs\n8hyK\r\n=Be3D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c9a540f1489e069a2e5cd262f5daabc034039d2a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b0c456d33.0","@material/base":"8.0.0-canary.b0c456d33.0","@material/theme":"8.0.0-canary.b0c456d33.0","@material/ripple":"8.0.0-canary.b0c456d33.0","@material/typography":"8.0.0-canary.b0c456d33.0","@material/feature-targeting":"8.0.0-canary.b0c456d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.b0c456d33.0_1594075299922_0.12746074862716728","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/form-field","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.2e5711e04.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c3989e349a15b2ed6cf9ee9452cbb23fb9d220f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.2e5711e04.0.tgz","fileCount":34,"integrity":"sha512-/kmgQucgoDelUYzigLgzT5dtHXvy6n9pk4RSv/3GurE3a034/dXPzKA7E7oU/fbOQGpxwinrsad1k/YTQ+mpuQ==","signatures":[{"sig":"MEUCIECeUTJFC5IGnyrGDUFREPDIWv7+OxyES7ZRJA6kZp/eAiEAi8t75uD9DJMCVptP57dPLHdlzLscD3GS4pRKRwHg5bY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfjWCRA9TVsSAnZWagAAFTUP/jE1phzq2Nhy+fWIbEMa\n95vnYYwy05Xq00W7aN+NBuDjkqokunmo+BenJxKgADRotXMoFZtVqtZHgO03\nlspdeYn7VYEBq4U6c51j8TUQrhxheabZSERK2wFEDNRF8FS7re9+UXxfTalR\nymxQrBzAMSnF2Dd8yYFGXVH0/lkcbJnmOur7EIdJQEyLFM6sqvLz/cCKaDZI\nC1AKCtMDAner9tLVfzeJw1nyh69FMmIHb8luSUhGt7N4SYV3HLXjrWKxf16g\nd9Mam0MyHxAK83mClNNFNTwmySDGoXwvdvvDBJ86AMEic409jXRRi6TuCg8P\nIXR72v4n0cJN05MORd3chfdsXXVQSufvi1WZduD7JehYJ0xY3gi3eSxG+dt0\n2CH+XQ/jJp1gLepaHUpRBwc9DvqgJNj+EyQm1XhFqdfFCdhCRxhoNLnTlegQ\n9NuwHNT5x3BIN/mGaM7sH+b/ZZablpDwqydL4Wz7bKQcS5HhO6bkMkJSZ1pC\ndjviDyj4YNXRAFCcmJfjp4wgEbooEJDKk5cqG3yXAOBgZoy6fBxFYBn6GG1L\nkgu//bJB9/nIneI/bTQJFF9Yh23NutnOAgPtfX6zIKbpdo0vEXuXTR/JCTg8\nHb7Jm1/VZgZhFJu6uHEtx+QAvmLb4dTEPmTjgtT4tLY7SPHd24urVIF+f980\nJ7N9\r\n=nlNL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4786b99e99bbd4c7b7f10a9111b884c165f1bc7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2e5711e04.0","@material/base":"8.0.0-canary.2e5711e04.0","@material/theme":"8.0.0-canary.2e5711e04.0","@material/ripple":"8.0.0-canary.2e5711e04.0","@material/typography":"8.0.0-canary.2e5711e04.0","@material/feature-targeting":"8.0.0-canary.2e5711e04.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.2e5711e04.0_1594226901814_0.1073727941242879","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/form-field","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.811fc5d24.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72959b753c2bf63ec6c1e47efcb9e424072d3543","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.811fc5d24.0.tgz","fileCount":34,"integrity":"sha512-F1FBRr5sdMpylFxvN1xrl/SKfFLay2rk7PgSd9eTxDTVrcaFCuic4MpWuGufIcmN+83Rjxrg+m6z5tPAMZIw/w==","signatures":[{"sig":"MEUCICWyYIZEUn+BpVfqgxIq7pbEgdguay07lpaDn69jI07iAiEA3RfEYGBPiwWdqnd1JnBeJKiDkouDuhYt0nWH7TrBpW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf9SCRA9TVsSAnZWagAApa8P/AldeXqKzca85puwDulw\nW4nQ/LH0uu0+XMITO9gFE/kmofzfc3pgEeQhNAU5yIEU9bkIgRnTs717F+ug\nVwpQ/MnLndKuOemO8bYHB/Xr19ZzsTCvQxON3C9bz/1kfwibsMttrKfafKmx\nm/rAfaRkX5VpUOGnuZb7H1JMHRP2o3x9SZgSwZlrRe9VlUeHStzs+tj1GTbz\nhBH+fHjTG4ifPGNblUAmJd4c1k+JeCj5Qnjb5OsOn7qZqD//gfsThHYEZUXN\nlB43HYsSoIo/sAiT/Fp+YAWcKwAj22rKgAlvWXecnkXmbySPgPiRcvjL8CvJ\nytPJRD5ls3HOGDSh+6AjtG1HVBGr9KvvgLD/sOZr5hc6jNdU/M3m2/8wWEL2\n+JkC/nfLIL0gDe28OVaJqE4Hawf1CrDVLN7gxwHZyWrFRPA+K+NIfelK5t0J\n9iu/z16FQlUzYxqkUzCKAhusw1hv7Rz+e4sSXTDgJukujBoKiHLbrkQd9z25\nYh9Ksl8PBWHXMR9coQYCD9utgSisjzgyp6b3QiB5mOYB3Blye3nSxA45bDsH\nr7DDlQXgRVYhaJx+DeIyCskTZCnFSvTpzIKMui8fst62/A8cXLl09d+QztaA\n/CIIZcF5DCYUvSUoHC3vU4Pg+m4ClGH1iJ59oxc8iV5p5ZGhgUEZ5wxOn6Hf\n9yAU\r\n=rbwO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d1a1abefb8800a6dcc0cb20f74923403ee1ca66d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.811fc5d24.0","@material/base":"8.0.0-canary.811fc5d24.0","@material/theme":"8.0.0-canary.811fc5d24.0","@material/ripple":"8.0.0-canary.811fc5d24.0","@material/typography":"8.0.0-canary.811fc5d24.0","@material/feature-targeting":"8.0.0-canary.811fc5d24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.811fc5d24.0_1594228562330_0.5897560961325483","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/form-field","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.6ed717ddd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b12b0a564395cfc20ac39915fe182ef1a0e9015f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.6ed717ddd.0.tgz","fileCount":34,"integrity":"sha512-8loMR2+It//83OIl2Ikzr/6j1XaXaDsZl+wIJks2y7p/rrwMO7JDc+CY1Zfgac0fLDw15hKBDz4jzUYp5c7lYg==","signatures":[{"sig":"MEUCICcSVbJjMC6AEEx3mVYA8L7xHd2D73xjdwQpA5tUuF7ZAiEAkXbtG9DhBuE2aoNBO0n7qNK+7XsLDlBoyobFup7JnR8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiIWCRA9TVsSAnZWagAAO38P/2mt7Bu5gAia3G6qQ7bk\n876Ae5EwF36qnzb42gy1f5zAtBEAddzfdPX6hJ5RkalNqb0lraisNNjCNgbz\nuMzzrjFuoUsaEG+B5uU5vsi17tn831HHSZARyHhmLTz/jJvw55kMYLqbMrUO\nTKvN/2OQEruuFsAB2XkKEtKhO9DHsO9WQYVYaOf7smTK+9fiBvmEf3y5kJYx\nQR2b3s4dtMZp1pGqggoWrtviLb9StYOsAjgW9QyYM+a6x4a81d6XTjeM/2pw\noaEZIFoMxXmGAlOjcfcJDjcZuKmiIeVeWAWcLYKRO+Rb1vykWOSTsOf4knjE\ns0gD2dAk9XC8wHPvtUhSlaLFQAvV2fnKcgi48JqiZi/FGc0PrTGhNXsCaLEt\nzS0G10m1u8zC3trRxhYaKtcI4VscIxDtafOlvGmASReMA4J7YvIoFWDMoFvB\nuQPt56EagZnQBDKlJ1af1Kiw0KbThc0dv/ilMU66PXdWCPxzfeTbQdS4fhA9\nayZQKi0gWMyEOJeuOGQtljJRMOB1rIfo1rvCBXGUaRyiV22jI5IbscsETYai\noaX0iNWKWp0EeCVl9dTAbWCBIq4rQ94Q6t3Prhh+EIUTpm4q/ntWSTKUolsS\n8VQfi9YzIRSyvmk48iUj7vHOg5/fwGqLrEQnV6jd0yenpYXcKxD1dgIpeGio\nv0QG\r\n=5XSs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7c9c6df731e0edf42938b11082973eba27e870e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6ed717ddd.0","@material/base":"8.0.0-canary.6ed717ddd.0","@material/theme":"8.0.0-canary.6ed717ddd.0","@material/ripple":"8.0.0-canary.6ed717ddd.0","@material/typography":"8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"8.0.0-canary.6ed717ddd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.6ed717ddd.0_1594237461898_0.7810724482919595","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/form-field","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.d850de590.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2820f36fe85a594a543ca55461de2b6f6cc08ff","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.d850de590.0.tgz","fileCount":34,"integrity":"sha512-okJcu6tAGwKy39YieaAS6JJwmSGnBhw5R2kx01sPzbx76tTLx5Uh9B/P1EmEBvOXtnF3mgCy5GYJaMWOXL/5Xg==","signatures":[{"sig":"MEUCIQCt+ZBSafmbHuwN/Gw0vVwai4YsSN1SPrrIFLuKKC6S0gIgPyj72Iku65MqkxhH00fh5rL4XS0CO2c9RP3f/yPggXY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1xzCRA9TVsSAnZWagAAgFgP/1eU7DIL0Q5qy7GynpVS\n8pn/C3ZtdXU1sK0uqykgBhESmyOjDgM3JdQk9ZUCwh4fOrIcEDh2kZcgjGqX\nEjRmgMQfkO+VI8DzzIMC0i5U9Ixa9AW5xXLj1Ere37R4uYXbUPx5lG9BZgeZ\nTwm7oquPIeCMuit+4j6+yp2tza+KGsK9jNo/2qSY9SHHQmHWMVDTwX3RAmXp\nre2/sUK/3enm+JyEVMEj0y7Zu0AkVf/2NGw5D3xaJdLEtRh8yWSI/FqFe/Ty\nxnoIvcFiY3cuFDZI+Gr5maLTFjs6h1RMsCnxMpzPUXq1rMDpBVdAfxPwDTA9\nIm0sVD6WC3KnsMgXM+b14q8QXGSl1S94Hl8qWBmI87XBOC1JLL7QibYgb62U\nPiusFYGKBNyFsRS8w/PQdIDqk8B9f1YaTm2YFbpZ5qF5JRT0N/8FAnDUfeUT\ng1ThxnWgZIjTQIIh+1dzBXoyh24BRcVpwnZ+14tt2YHa3uwOlozk900foBNF\nsEGfMtVmYfWFLcERDE/NW0n+mWTRA0RxuWPO46nk/Vfs6Rp60ztMg7l5yObc\nODxovTnItVcrdHcPSSsc1rQAI2pjzLPT6hvtB9GDjjRv8gSYlTXektmVoYNc\nAh0yeMPPIWSY0rz5mku30APWMv5q46LTBNw+7qU8fUzxqvbJFT/tzwAK4Kuu\n6dqT\r\n=X+sC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"85039ad97bde95db4d57918266320d54c581a680","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d850de590.0","@material/base":"8.0.0-canary.d850de590.0","@material/theme":"8.0.0-canary.d850de590.0","@material/ripple":"8.0.0-canary.d850de590.0","@material/typography":"8.0.0-canary.d850de590.0","@material/feature-targeting":"8.0.0-canary.d850de590.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.d850de590.0_1594317939478_0.6106214094271887","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/form-field","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.e07a70841.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09274c5a49d798c6598c957d37cb7f7861be064c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.e07a70841.0.tgz","fileCount":34,"integrity":"sha512-tI6tU4lIL3Lm2BFhkzwPDH8LlWn+7kB+vHPfvLp7bamwxA2bi62jYYm6q8FZT5RbLFqnhdGe1Wz/3FJPVYkLtw==","signatures":[{"sig":"MEUCIHSTwbU1/NqTq5h/8dr20J1uTmpj32o4YTuyAilnabo2AiEAwcTGoMSyVuXBxH7w42gUWybcnu3ji6dvT0xpoCsXEM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2NvCRA9TVsSAnZWagAA1moP/0XfpUwXPbSRgYtuKol1\nFUSVX/9lnARtSL4V1tFkhLCGcrZn1+RyFyRtCebKDApdNRZDjxKlOXHS1VH1\nMAv/jc3LHUF/bP3HYiqbAH244NcYcHk1bpgHP7x81rgumFxoAuq9UTWZ4Tpy\nLeMqUym78vlSAvfD4u+B3lu6jrjFbmFri1H+RoXj5vC9TK6cupCONrjMSQeP\n1YbnnmX1L/NdgR9Z+ACjpG/YhtH374iNota4sCftHoutV4PxChM7E/AnRzcN\nPsSrNdj/oETOlf/arHNt3iUmVjo62n1t4COV9NdQcOce0tqDZfTg2rJR+Xh1\n1EfbUteYrrODE74DlxnUtEbP5oqwZhSSu55WVYGHFzHXM9HMvDDAZe1FHfuT\nbyidagxavuzUk89Ui+HHA2tRIIyTcFc1aScEn7EOEhobJJW7byfWrS9wpSw+\nwufelSwS+UN3CRkl1Na8RgevmeETUw8eI9VNlGAlhldWD1nAt48aW2ZYpLA8\nVUXyUcziJ95uJ3PROyjCNgA++sdfRNXS5iNZG7oedRcfPdvz2y+i2/1JOS6B\nJnlJM1Mj07Nm57WHu6SRAvbc4RQfQ7xvpWEkBC82GLhYn4hgzlgbN+zH36zJ\nAkZ1XCjOor07I8tVY8syQzHuwo1FyBsAFRRhe1lfmtuRmF5Erg3o4WNDzEa+\noOn8\r\n=9ffD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"105e9fd32899b2c9a4309baf6e879287104cc0e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e07a70841.0","@material/base":"8.0.0-canary.e07a70841.0","@material/theme":"8.0.0-canary.e07a70841.0","@material/ripple":"8.0.0-canary.e07a70841.0","@material/typography":"8.0.0-canary.e07a70841.0","@material/feature-targeting":"8.0.0-canary.e07a70841.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.e07a70841.0_1594319727027_0.6784860458733408","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/form-field","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.37947ed6c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0a53411392535b8d9217aa8d469935c6620e09c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.37947ed6c.0.tgz","fileCount":34,"integrity":"sha512-UySAqwi7oPMbbhW6ZZRyzGcMte5bvJHSwoc67CVFeF/ifOwlud5wNnOVHU47KB3XJ8cBCLG20z1xT0GaWmn3HA==","signatures":[{"sig":"MEQCIHXCnuDgvX5Vlaa+LLN7il5zQ7WCp2ZbWftxVWd1nkuSAiAdP/Gw1LGj/BBOIhJyUs2iui/1uWULaLz5ZtQKyYXvxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3/YCRA9TVsSAnZWagAATLkP/3s8icxESofERnQNh6pu\njHo42ferNBFltnrL+HHUoVF3fU1veHUG+XHmSlrvb7fXnbdmnVm3j1w5LOMD\nQx5lnz0pPE1czX8ePh0lb08VuOsHoHveL5kHaWtxTTakZvPr4LerZKV1ZU+M\nA2cki0TMgvMGbVliyNbepZs+CuYoNf34/q9EKQImNkhH9MiqJmHnZmaHpUUM\nXP1TDUwYx6F5kGy3tgV7FrLH1W2efQPpJG9rTDuOk6prwwTNW65SKM3dB6aJ\nt6XwjcHZCIhBkZpoS0JXA/QIPm6oVGll5NDsDfzpQsANh3S53VzmcHu6a6+O\nNXcDKQHD53ANPGXhaPOA/Z8yfzdefRL2k3baLjjYh8/+6RzxJwl0Wrr3uVXV\nTZqOT57w+J83+kv1obrTxRqOv2MWKFvZJ5p7X2OCRmT4V1vjJohXBWShV3S/\nr4S9ekW0tD85EYbf38eS2KNdlMfCc9iz9cK04MnhY9j2K+Q5Wvs65phjuRPe\nq1WLpZGgTuz4Kp7ROKxyMSuGjL8fl1ZdzNBXopcpZ+jm/jhM3cfU59TF5fBi\n5Fj0ALTuGwYn/MIRR2aSnyE+uHZycpNDZSkq/cugc6oqYnJhH40Cg3ncao8a\nEHUdnWzuQPibozAsyvzd0/hTiX+nVYCDyuS08qhfb+oPE4RGe9XRfOnCBWiA\n3y0p\r\n=wIkd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"80c4a00e688d5a2b1a35ee55744d879b782effed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.37947ed6c.0","@material/base":"8.0.0-canary.37947ed6c.0","@material/theme":"8.0.0-canary.37947ed6c.0","@material/ripple":"8.0.0-canary.37947ed6c.0","@material/typography":"8.0.0-canary.37947ed6c.0","@material/feature-targeting":"8.0.0-canary.37947ed6c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.37947ed6c.0_1594326999931_0.49046878726794296","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/form-field","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.5d443afec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"721f2c13114b54340b5b9aa31943cba156a2a822","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.5d443afec.0.tgz","fileCount":34,"integrity":"sha512-MjVXVxJiiF4J2eH7PWjvKCoceVw9bMQn4qdtSJe3Ja1g3JxOeLfoRprPFZKdbwklDgLbW0SWfAj/KUcUzFeudw==","signatures":[{"sig":"MEYCIQDztDEpW2ke67He7p4agIG5YYiAzroQx8fKxOgJaimKkQIhAJgJk7fdNx2SacN3u9Etzp77CfI94pyDC4x7H9Y92fhV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4NtCRA9TVsSAnZWagAAEFYP/3+h5GcAq3jDs/1jPxIE\nB50dyPKwqrYE+PY4AxoYsfQPzjfucW08Hbv/9eyo+WcoPINZiWQigosND0V6\nRsuPE9i2d5llR3frv2X+XU0uKbekn4cr1CZ8e6kQaFrbd4CORNBb9HPwb/yo\nWjxH6GvPAl6oDF71CwLebWBwyHH9BWU2xb8yVMD+jaFzVM4XzRAFIIOaUPqh\n4x5eiKFdt4IZEJEgSXaeOJ+yD7+WgsAACru4tBxssQLccn3Jx8XxNTZOJFSc\nmG/A0ErMq+TPsuW9RZXoWx6GOAeOeR/RmelugMR6o2tq1Sx7vG7Qa0VNQ/h8\n4dYSjc+RE/0tqpU4xLBU+99lzRb0eEMtWenmbHMB1XmHLscAMxvizhVlnFvI\nOrjGAvRC13/lsj6Y2PiF/0f/bDhK2nO7N3kelMXKbkkcMAnZNDwmReH2Mr3l\nM00V7oOmLNAbC59ogiTBviNJcin9q/qz50Ax72E3LzzCowVPmkSZwLqfmFnM\nINm6qZchO89pToTd2JLNeZJjRmxUI2kb0EUCMZMloGN1VlmydEnzl+SykJ43\n3XABfTYyyBNtsBek07MVAr4nXhlEDsu2ys86K3sJzfXDVBMP8rVxdNR5nkRt\nvEvKj8hj2x52NYFB54zucHiswRdXzTxlbg0iS9oxIz+7zsQ4EKFNrcl+HwsD\nFKZS\r\n=OJ/W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5c493d15f89898617c3127c53145bc51e8e60930","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5d443afec.0","@material/base":"8.0.0-canary.5d443afec.0","@material/theme":"8.0.0-canary.5d443afec.0","@material/ripple":"8.0.0-canary.5d443afec.0","@material/typography":"8.0.0-canary.5d443afec.0","@material/feature-targeting":"8.0.0-canary.5d443afec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.5d443afec.0_1594327916723_0.9196659180774145","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/form-field","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.9ac1ed914.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"602d389b44c1dcec4091ea798d563b8a7395bf80","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.9ac1ed914.0.tgz","fileCount":34,"integrity":"sha512-bosVmAqC/fWQUC54q0xUUsnJwVvB54c6ZvXJHcAZX9/dDflWdW5ONIg5zeqdM3Gj2QbMwacBe21TwKmt92Y1cg==","signatures":[{"sig":"MEYCIQD1//JZO1LhHSSvuxG/uQqUmDx3zom5ZioIofs+Cc9v9QIhANrP7pas3whcN+9gH7MHoVcFkpezOJrEGGCYYvBmQJlG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4oxCRA9TVsSAnZWagAAZeMP/0K8S9LQroegB6zC+7Al\nb9Q09fqqevsWzHZ6iv5BHp9fP/MCKn+Cvx991qZ2L5fNNFlRjH+ePiCVmeGD\ncSBmQ8LGvpx9JwYl0MRh8fE5KdZQPNd10iFdmv8jt6v7L0/vqtSY9InD7sMF\nAcxaem0O+a2FU8mEMdCC10DhY2zNZylo8SJYj74fClUBuNF9tGJkkoxtZemx\nevTX8v75/H0UtG2AgmavnIIByatbKS5zuu+b6aGxM3fo/Fuowi1aR2vtSwZy\nnOfTNCIf24Mv4/AMREKf5Px9mlrMPE/bFnRLbRriVbJqOgrbJedL1ef/X6Tu\ndyMimQT2ffIUWyCxc6h/p84/9xR4EmsYyAlmLXLKqrV07rtgkbi/HhAokJRq\ntHpbwigHNAkjutLLprDpXIdAhrQG/izRD/VyoKAWTKMOSw1T46gM9sU1yTfP\nwR/gQLpc28mS60yjRzQdvXhZl+bnRXDdvq5ZOl7lLi3SSAMR2bQ6Jt6tccA/\nNInHDcopU1Rl4EFkWw0vlNEaASzLwcQMomj4GeRYg260YSuhZlBBLJVPRQ1Y\nHP1nN/4ZJUHF54QR5QClZ7fIlB6EPwx+IlL8ENkWyRi1Eb8LuJ4LR1q+b9g7\nD7jihUF0tNc2c6nY9Au11Sn8KQFVT3Iejg2gGfC8KrDzqc/uz+XDKK6j3oEm\n+zjo\r\n=WCg9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c08d3c600bb022db1bcb4efe520bed724e653a77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9ac1ed914.0","@material/base":"8.0.0-canary.9ac1ed914.0","@material/theme":"8.0.0-canary.9ac1ed914.0","@material/ripple":"8.0.0-canary.9ac1ed914.0","@material/typography":"8.0.0-canary.9ac1ed914.0","@material/feature-targeting":"8.0.0-canary.9ac1ed914.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.9ac1ed914.0_1594329649295_0.030946958360950516","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/form-field","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.1e7cb6198.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"394ec61fee693cdf7618d887396aad4e15edd859","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.1e7cb6198.0.tgz","fileCount":34,"integrity":"sha512-arZcbyGhIAuNAJhgqBVkWrwcGfhc8fy+9VydCCn2Yl94eTZK2hExA6VW+xaYY8+haytnQLbRPcYAH6vN8bztbw==","signatures":[{"sig":"MEUCIQCT7f0TSOpNVJtTKPVU06z8NRETQRCztb7OrcC20Eg7MAIgacW7M+5hX5P+cJ/ELr18qE/z8+RZr/MrpJ9RuDt274M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5ZYCRA9TVsSAnZWagAAnzkP/jn/ciTp/SBgStzsi9wX\nWvBy+Hfi6yDjCobtw/ImQfttVAAFEk2MZr/j1XqOaboDFaIGRGp5mbkEXzml\nlpOavDPBjNP7PzKTV4ciaQy/Z6xPhx2v85vO2PikYOfFNbcLRNDerjGWN3zv\nNzPfmV8+NovDooyJPL09LbP3wCv+79JTTtkMYta7SS30FsaC0HmhjahR6Abt\nS/QyvAfRV3Pi9D7WDTFD/0x9zGTa6ulQBDIzQaE/6oxh/MVOYA3r849sUK3V\nQ/p9F/RBJSLc7flRkPz4F4sAJMNUbGG7rAVKIGmrGS349T7T2L3k4uQ6/jv7\nG1+mCMHOL/99vyADc7eOhjreaw24rI9fPp3k59Z0Kl5qonkgAiHs9MoZlrX6\nE1b6dRuwYuD4uUWPcQz9WNTYYYAph03RP2TnXTUyqJo5n81cnOu3U8Rrt6Tk\nNgF1kQ+AWjndsgGTFx2ljqLLbzuQ5jAJ7R67g6nVLb1Vu8jR7mvqYpXt4XYc\nWIaU/+6mxhjZOTb82cpOl2jj+H3E4ukwljsb1XjQTWM5gRa7QAJ20eS0bo+I\n0ibE/XJfowQCzr9p05YYtPZ4fINdeDD1+FqbrOQoYEXu74mOwD0OQ2rfMaMz\nK2QqhtnYUhWf0KCKVpWJicgkT86ADFWyQ9qwdlGldqs9Mu7wLTd/qw9s/wHB\nKguI\r\n=vzLB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cbdbb55d01ed2f63aeafe8d77fffd1da5fcfc011","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.1e7cb6198.0","@material/base":"8.0.0-canary.1e7cb6198.0","@material/theme":"8.0.0-canary.1e7cb6198.0","@material/ripple":"8.0.0-canary.1e7cb6198.0","@material/typography":"8.0.0-canary.1e7cb6198.0","@material/feature-targeting":"8.0.0-canary.1e7cb6198.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.1e7cb6198.0_1594332759976_0.5003955530194544","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/form-field","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.843f636c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"475ee64d71f53a2d303402d7aace01cdd3d766c3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.843f636c0.0.tgz","fileCount":34,"integrity":"sha512-REA0ORyp8903TpZeVtTkuKXEnhDiPPNIs8wVDOq7C4Dkm0PGqobOG3UAFI81RzP/S9jxeUF9Gj6d4/9tonYLOw==","signatures":[{"sig":"MEQCICI/nsPWY+WJrme2xw0uCAZWbi2uO6OgE8gMvkQBw/3VAiAmNFKzt2ciWoyhSsM7AH9M1vu4pPo5mFBKYV91j6CinQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKieCRA9TVsSAnZWagAAak0P+wWfNWEwgRfXp4EVasK3\nFrQGKcWZVo1+xxjvwvouWEM49JDtJr86Zju+6i6LN0XkV3Jkp4rYzfN61KUH\nrF6pnUb0ttpjCulqv+G0StncS3+1iQlsIz4vJyHPhq0Ptt/+NVCG9uolqV6G\nqsY3lDhFedGQzf4//Ia8a/FutDVD1kGps/bkV3ar4ulikYP83qLgvB7TfDFq\ncdPK08SYiwnvT/xFn4PtTvpUQL/x8VTmZ3B+GvMrWZ4P0fSmR7xIMFwn0hRC\nS9ueNwYVIxLsPILLHMGmMuEjnNOlEJxSKitoQR9drjt3v3kypl6/2Ujc3CaB\n+4IAMLgEI3hqM+CPZAOwuncK+kjRse8L4Vju5waB89FI7CBWRnCXk6Z2uEi3\nqgyJh3TvyLlNsWuNbVFMmBr2fEmlh0cGY8jP/ZeEw50jWbmwBmVLwYw+zww3\nVCtUm/zFAVePSMzkK3PbM+bgl/EqaAGAymsiqrm9+S7VfW3G9L30PG5LFqJ9\nHAJvOsbMS502J5dfWQ2bTMT4bTjLyvXxXzvsG4nKSnnHcjqPH9Ajkk94F83c\n9cOR73Dn1jtagYXeb0eemd7RzwpEbuKVEJHSbY4MnSx8XUMKWxmU6lJ5pJlf\n3nvWqd34pas2oq0VxdOQpJJzlv0QSMmyo5xmfMUx3omSwoJ80qfmOFCxWF/0\nKiBs\r\n=UoR8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"641b40da40cd73b439cefa7fa18c86bfdf31e497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.843f636c0.0","@material/base":"8.0.0-canary.843f636c0.0","@material/theme":"8.0.0-canary.843f636c0.0","@material/ripple":"8.0.0-canary.843f636c0.0","@material/typography":"8.0.0-canary.843f636c0.0","@material/feature-targeting":"8.0.0-canary.843f636c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.843f636c0.0_1594402973727_0.3965009666802095","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/form-field","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.b2edaeead.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23109c9f0b196534efa2dbc24d52f30b7e9b80dd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.b2edaeead.0.tgz","fileCount":34,"integrity":"sha512-++01sZVc4yb9ocQv9Iww9QLd9IaKpZMD7mbabDsl7KAKOaOD775QMpdpXCb72x0prt/Or3Y870b5CPW0q8Duhg==","signatures":[{"sig":"MEUCIHHTowEgnubInuu9Ik+f68ZdEW8S0+mP/FHkB8id8DjYAiEAt/mSXo1E8c1nzpXdDLdwKBbV6OOPe2gp2yODPcMyKGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK5fCRA9TVsSAnZWagAAVYoP/3dS489V8H8Qy1md2m3T\nUB7oybYcDlbmRl3bWP+UgdHikiEskcRUTwWgqsfkoX/j9drQch+dxnXw59Wb\nmFnw648YvaCN1SyNOaMSdUFBoTBskM4UqVQdIrulxtYaC9Nk+0MGG4bxgsNQ\nv7suRgjftJwKTKfB0QVaeF+7iPaN5uwSTU4ItGUk0bt6CGhwCZ8LPT73K5hC\nnITPZv14w38H0tA/W0ArGZwuHxpLKTwfyt1cgQ+GiVa+LGJhRtwGU3V8Q7Yp\n1wEjTeSJPszbmhY5mF92iN+ozC2vz1pfzSW6+Ew2ENwvxpZP1+cXznu732Wp\nYZd/Vlbi526q/+hkK3LlGEdTb7amXtCy+p2ram/WdTklfPRcAWTp8KyU7fOT\ntQ+rU1coO7H4TANLttlPtvdYwtmimHSU87YvR13OzIMdyYm60MtGG4aFDWCk\nGxFqH5PUXHXoBggDqo+/qBL17hg7IqWAsblhJEk9JUbhEu+Zhvxr526shyZb\nKic58bP7HybM+uFEJaZg/uXNiq9XxoSTCLqjM5EgMv5ENBrgCtjD8ES4kt5q\n31K0ESngljw8yojpYJcjeN1JRBovXakUPdAr+1nqGmX584MCrOXWg2JtY5Xn\nL9aYFyASZ3qCoH5gLA4QB1S/7SA5FzVAFrsaTaEl36aSGqjma/ZEcKkpw9di\nlZ56\r\n=G6xx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"874d83aed6fef221001b68d44bfceb30072cc18c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b2edaeead.0","@material/base":"8.0.0-canary.b2edaeead.0","@material/theme":"8.0.0-canary.b2edaeead.0","@material/ripple":"8.0.0-canary.b2edaeead.0","@material/typography":"8.0.0-canary.b2edaeead.0","@material/feature-targeting":"8.0.0-canary.b2edaeead.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.b2edaeead.0_1594404447436_0.9551966602668904","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/form-field","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.5dac1f624.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d67a92e208d0f45fc1575e0e2f4e9385cf806aa","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.5dac1f624.0.tgz","fileCount":34,"integrity":"sha512-IDMU+aTxT9cq3laW9HvnkQmnKukLEolGDtOo0D/qPcT96KE4Ij1/LbbGgCEsIdk7jb6vp4mDgMfPJ6bPb47K1g==","signatures":[{"sig":"MEYCIQD15ONakZJMmc4S2d8mHK2FbPfafk5melJqeHZhb5a4+gIhAIr8CGnpOZd/TEICuFmCTXes0G+PwykSbcRTM6zu2xt5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI0WCRA9TVsSAnZWagAAv6gP+wTIs+ifNCNx7KHddFB4\ni6G5Iq1Ho0P1d0Ko1Q1s06A1amR6K+owlFwi6AyuG0Im0fdQzVuueipcLnjx\n8aWPZg3vi9lEff/Sd7y9ZRKoFbyrreBtRskIZlhyZYPpL8HiQHEphCjS0I0f\nWs1p3gDIJ2sQg7GiWhesKuOTpfdYoitHDG5m9m83M7GXsvOsuL0O02rZaK0l\nQ7YEvg/l+/x984GjK/Ns0W6+iTIHCh5j6xJBpdoRULh/5RFC3ZY/ftQIwgqv\nA7hPXcJOWV0ydjmdipXFGjCDU06FWYngl+QGyaYy3J5w10GGrbstk+5/OYkQ\n8DUX81De1OAlRwynhDlOTbvFN2Ets58+257PP+hLPAWTAb2HiblZR1uyBAoz\n3G50cA7fS5CsUgIHZ4bTr3IweHrZ9XsjLobBxWj3oPFTITg1E9cG3R/JTJQi\nNjPRAWLmaFPpTWJZfLtjjJinmncnpHyDLfwwLNtC43dFqXN96PBsN1ApZlDY\nsfW74/xFSK3vgnxemWxBuKPv1vtnbaURMsO9Q6QlphybEXfvxj2CYVyXh1Pd\nnLCQq9hgQXomJVYK7v0QNKdOmcE2RVkWObELH2iONQ30UTut/jpAyLpI+Aeu\nOhZXD9Ut8fVql+wUXbidRAPjPBd0qtVd6NwupXGSUvW+dH2fr0tsBkrGzSi+\nzC2C\r\n=px3O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3acf16b30fe876c0d319f5d1681d177bd0089cbd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5dac1f624.0","@material/base":"8.0.0-canary.5dac1f624.0","@material/theme":"8.0.0-canary.5dac1f624.0","@material/ripple":"8.0.0-canary.5dac1f624.0","@material/typography":"8.0.0-canary.5dac1f624.0","@material/feature-targeting":"8.0.0-canary.5dac1f624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.5dac1f624.0_1594658070285_0.8508829281960484","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/form-field","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.4497acef8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da8fd68085da14c2d74d5f6b1e7daccbf4dad8de","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.4497acef8.0.tgz","fileCount":34,"integrity":"sha512-jLUINLnhOeg0amzkRHkihKNZ9Z+CudccRlqaZR48KUug5AkXaErrBoDiTFG/6uQ8a4s4Nzsx9dA1490ZbYY/zw==","signatures":[{"sig":"MEUCIQDIEVXflyx4Vy6smQLdd5vEbOo0vcT0f59xIVfZNQwq0QIgESlezKN1Ajr84/FANDhNyO/maSIYAj7CY2HryWlhiPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb8jCRA9TVsSAnZWagAAvSAP/3q9yWr8ZY5IYNezU8QY\nt511wozR6JqxeC8mjl4Zs/zdxstwYfCF8lDjhfuJkSZgCAYHypIn+8Bx/fYg\nZdEZ2TaxXlEWHQTzRciv1DMMSa35vOhKV8HoLV8nl0hfEVzWh1w/dskfkZxj\nvm5G7KmYRJ+DbMcfBkis5kboPt1hP/ak+vDCES7h7+voOPO/Fh3tkqTHt7ok\nyAR/W+s5SMPQ+oupBQhJOnGeS3yAAaCP0mAG1JkToHCSiYmn66Cffr8bqZ+o\nfx6n85NAt0JTN2TAcCOGNWcf+PRll1fBZ/m0EhogZtpKTkTNBNngpMH9PRHx\n84fijuMvHlJ71YiQwvFihZl+W0IVUhoNTQ10yfgUmPfRgK5irtk7tGzg1yxG\nHyiNrxP0eHVqoIp5X7eSMoXwHSkygpyy+4N/OLk9HZ1WlZdgKEUVSXhYabjS\nSSVX8YuSXA9K57p4ra+AjLS5x/i1RaqsXqSGUj6mhT6gOsyvGDeqn6vJqn3G\nFqqtYDTQ9rY+6j4bC+w0/6VMWkLSWTLDSvmbzPmQNh1BlS704agSSKkHoawd\njIe01EGWMOKdBNpriosJBSx5oTCeKR5nalXwcIHuSVUztDgc4r+M8M7dJFe4\nLBF/naRcAd9NYb5KQZhQ/QgeAA40teT/Zv8HG12FohA/PL6qa6gDNCNN9ALg\nHibd\r\n=TYFq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dc90b63c1737c63427815af4f6de59841a57a1bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4497acef8.0","@material/base":"8.0.0-canary.4497acef8.0","@material/theme":"8.0.0-canary.4497acef8.0","@material/ripple":"8.0.0-canary.4497acef8.0","@material/typography":"8.0.0-canary.4497acef8.0","@material/feature-targeting":"8.0.0-canary.4497acef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.4497acef8.0_1594736419552_0.24715182749642906","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/form-field","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.e6e23019d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f0c763488a311d9ba815dbd3c7648538e9cc0dc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.e6e23019d.0.tgz","fileCount":34,"integrity":"sha512-mfGH48d7JbhPG0oaIwPVV2b72L5ruUCKImb2FhVHzBPOHfFZExGTclgLMAONMRs0xi7QwiZHUCQnpJSMccvEaw==","signatures":[{"sig":"MEQCICGN+HksSzoe48Vq/8jdQBe+GA+QnBW7btIuVe7WuIBBAiAMdVJxMd/itnZSuzRK+9qSszk6TQYnsi8OUF4rS5aDmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhFCCRA9TVsSAnZWagAAGlQP/RV6BXMfxLXzJWjgqbta\nk1uMl7HD29lg2l38EOzs4JZAbgwJBYOTLfu9XBNhIdXpOmsuIEG14/fZpjOd\nhyMSwXfMCif/JC2jpnzvb+mArFneUxt4NNEVj1E1rVXNGM6WtXWh6NhH0dJl\nNPmlhXNewN9YBc87JjhW02ZUp/FNzGQ8GLAhtZN6gmpO7Sn/ZUeTC9okY5MA\nVE6onlxcYKx1zTWErrJ1+ixmtJ4rJ1l/khzGMrdw9cJS96P4BKmuRgz/Xt3O\nytv5EC+v96BXX8iyN/V0huItgB8kDU4FLsGWM5uCC3Ffrt1jE2gKNR3DDHyX\nC9ivxkmiEeEI3FwCJszMt/MeLAOv8eDRbtLQuiyVzYRSM21/ndkv1PPtpvAb\nnvtCASHbTiPMPavCNKbUJ7wLDpyIDmHQVDl0O57cj8y0CBBDLrBEf033qpFK\nFlaDsntrAk3F9bx7uz/2nP2/A72LggHL8BmVpnVocuzXGCqPZihSeSE2VTnI\nFf+rtX8oCS3bwjhZ862K+4ikiwx/99eilk9j7aH9Q7EkMwTrxSHdy6uNOYk4\nclfhVCFGfsk4dMsZyIHYXU5r6UfWndOKA9VND62HN8Eg25hoVCuow+iu8zQL\nrODmIKDiOvIDOqlIW0uVkd87R9F1hzr0TgCg62VEYJvuPlA0O7vX3I+QkSo0\nQGUP\r\n=BCkR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"db31520d2bb46404d9d5c364a2db4e2bc564e4f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e6e23019d.0","@material/base":"8.0.0-canary.e6e23019d.0","@material/theme":"8.0.0-canary.e6e23019d.0","@material/ripple":"8.0.0-canary.e6e23019d.0","@material/typography":"8.0.0-canary.e6e23019d.0","@material/feature-targeting":"8.0.0-canary.e6e23019d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.e6e23019d.0_1594757442360_0.1691021495965035","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/form-field","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.d548d7a92.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9e4ae894128911a91e5a633b2e3b6fa5c0facdf","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.d548d7a92.0.tgz","fileCount":34,"integrity":"sha512-spLUizHm8PpCCbbk8spBbhy7yYJEdVZpFCfGjGtetBH4W6FrOXSAIKQVn36eLhb9hdEWQzUqcaTk3swiIpU1+A==","signatures":[{"sig":"MEYCIQDnqXMFRKIGmNG1eRgmMZYTHK96vj7MvdS2svXdz/dxMwIhALttR03xM4wXFwm3CPTnqqs04BKVRPvbwXSb8+3P2aD3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDh/qCRA9TVsSAnZWagAAbwgP/1W5HFWQgDzbkKRvQO7H\nnLlBfey4Pf1tBX3SEPZm9jOIm/0u035vMbKpIRWzvgMqDXPUR+7VsjmgfMWz\nP//eyolNnysf/iBgB/bJP9/MnfwgkMxoHzcA6mZJpBf4UErNr4zJpm02e51Y\ngD/FM4kIcnaHq+LcWx2IN+uuYlfHxXhfPrWo6GT/Wpgg+WROCBL4c0m5M/qK\nX5ivdcXoDCl/cFBi8wnbTskB4olQ1dqAxzCwca7gP+K1fIW4YzxWFU2pK3kB\nEpIC09eOYeA/aW7L/zoNMiMM/iFDewShTrsyVA0LZ873xSoobYsq8dm3e5M1\nNgHOnvSrRKk4Ow7sdI+QGJNmxsCGH8ap1b8HwqCjfVtFT4xSXGrSMyays7gy\nGqGl/F5KASEEpCJLuVjwb6Ww0HElZbBP53cjSqWBQZ+hX7JeTzeZSbNBf0r7\nEautyeLx97kNGYHD40zCeOx+j59XWGoghWC2PqGqC1CzoPkbBXZin94bq5LG\njCq4vxg7hiXR1WmLrTQ3mIA7m236GWRoutPFA9b+esqUuijvCineF4ZznAU1\nMw2iAu09Fz0kGta2NckutX3VeZlEK3ixmcX3DmiUPUpvf2Fikxoo35la376V\n5RCuZn6xIhta/9w62D0Eepz39f4s368kPjAX2w1klYOGA8/J50GzCFLicz+p\nqy1r\r\n=UmHu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9ac3956fa3f0b35d113404de60048e8aa1c1a0a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d548d7a92.0","@material/base":"8.0.0-canary.d548d7a92.0","@material/theme":"8.0.0-canary.d548d7a92.0","@material/ripple":"8.0.0-canary.d548d7a92.0","@material/typography":"8.0.0-canary.d548d7a92.0","@material/feature-targeting":"8.0.0-canary.d548d7a92.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.d548d7a92.0_1594761193674_0.2646472928738548","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/form-field","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.58ce529cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74f0bf88370690700bba1838dfce4c9977f662e8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.58ce529cc.0.tgz","fileCount":34,"integrity":"sha512-kwVXzI38aPH8/cdStNqwwrqhrZyjdTCAwgtsvQaZqHcH7Xp40t0qdTLL2XmpO0/aJYK3oNH5dm6HGnzRkuRYoA==","signatures":[{"sig":"MEYCIQCo2P+Ln68RKMX7gojzCo/gReWLbXcmZ9Azr/Ry1yvb7AIhAKVFzw3N2gjpV3lCsf0nkVeUahijg4DmfAaPHk1Qypxp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiBlCRA9TVsSAnZWagAAi8wP/ie3Kiv3QoA3C2ackzfq\nHJbEXL2jgyV27Eaz0w2Lmbl2ktFYhjvTcglfoSmvwxjGkp0liBAlTb4E2aj2\nDnw9l3dve9+00PA1XBBQm+m/icara7PBrjfu6arE+aVnoV6LdRZww0WOMGWy\nFRQpz736xw3VSN6NcRLg2CKycJKXsxz11WCoNtywX2JI53r52DAa9dZ/yE4V\ngeNCWoc1ONCydKDQ+7rSaqmpzyNxXGyWdYrLJKgmdkPkGGb9ZNXs4aEuKRVb\npIe8pdLpghNh/sN2EqiNYpoSdgHoFep8e+v7GECHJNZqITFZl/EDYg7fs5rk\nMDdX/DyF9PqPETWcCqEWAw2CT0qskYHRrSXEur1BOugV2bgVRPICLxnK3Cal\nAj4KWhZmrrL/we2tH4ejGDSYE9hE0C9g4and8ENtmTDB0vXDM8DtIIMlaM01\nC9x78VLCj8O7EsBkQUqeDm6XhGe5jVl3hde8poW7IpbyYG2bjsbPD3dQdrNU\nOxrUSzuYBsv3QlnYUHIEYefcv59+vA4ZwNHZBR8bdplP9dFUDPourVIE4sef\nu20ImKHg/ybuISb/PKNyX2Xa1E4dNl+5RQe8MydSWjutjHUQyG0QAJATKFeZ\netKYRRYTdhgFImILeFXuX8kSucptbFzAY45klTNntiraDOdN9xm+AXZrPRav\npL+y\r\n=pglV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c45eee764d94f6c07b8a5b3770c89c8bb4ccfeaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.58ce529cc.0","@material/base":"8.0.0-canary.58ce529cc.0","@material/theme":"8.0.0-canary.58ce529cc.0","@material/ripple":"8.0.0-canary.58ce529cc.0","@material/typography":"8.0.0-canary.58ce529cc.0","@material/feature-targeting":"8.0.0-canary.58ce529cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.58ce529cc.0_1594761317469_0.8887796346861063","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/form-field","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.a0f1202dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f9a3ad3f5ec4f24e399b5c670f9fdfa4b209610","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.a0f1202dc.0.tgz","fileCount":34,"integrity":"sha512-TeI/1/AtfYtxEBYdu3HwGX8Il83UD/kXCEhLbFH36iFBT8dQt+fWTzNbXAtkT4PVtFMnt2GQLkMRs/Vn3CmI5Q==","signatures":[{"sig":"MEUCIH5xN97qMYEgrOrMAHBtptM3hvCnhoqUdo0PK8KPhONWAiEAovJwnXpw4dT88u4tA6WxDHgV4nb0KW+QbG3zU3PLTqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiTtCRA9TVsSAnZWagAAVzAQAIGQXv1plTm5QKY4tIre\n1h/xg2F11oefsGgeIynxNz70Z+jHG7YJv4vw4sOZ0ARRHkcOfCVvZx+Xi7u8\n6f67zlkTZBsuMMme87LfwZv9U+TS4GGcQB00Jpapqq3Z6MI9xmKulhLT3Rz+\ngljrpDNRjAGYxK5yFyPT12X2sEMp66PKlnQKhszZuPDuPt5qt6kNpzrA+JXH\nBdd3qTSkhs8ZoLFhCdXnpNItbpE5IeVPplbEfw7Xf4uGp/50UiT5YfjPhtA1\nUrpFqhQ6FUnAbMKU1A/5nGIH8eWnxqtjdm+6KAnlvf58RdwJTeSvbKq8CkwB\neTxWWFToJQW8FWwX9UjJGndaLYFqyLM6vdRhkg8mJ/HjdbM3s8CFg9Fqonii\nx1UuWJtooP4ru59k00O5aUsVK7DHoZoAP9TyMBLpJmWyHK2fgjRCDX1I9IQ7\n4Z0UXm1creWOJJgcp+vxFJQrekkG41DlbDtl1PN+kNZtTZE6MyiXXtoFv6Qj\nv4P/6YCG+z1ZiHNiRtRHeBLaLsntAKj/8RYr+OsKaefNeVZIJ0neLdFCKhU/\nULH1ZHxiisdLGsMot3fdIys+a95mrsrMzJEKbVgzbD91fRouOg2HgNCRkdwQ\n+AsckipOfa2BYCMB7hV+0bEcv9A50Tn93Dpx7ag7TZwtRRadW5QHwbUntrav\nWkhe\r\n=uMHm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"93fc447a8bb5a55abbcf4b72084f1c65147f3cc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a0f1202dc.0","@material/base":"8.0.0-canary.a0f1202dc.0","@material/theme":"8.0.0-canary.a0f1202dc.0","@material/ripple":"8.0.0-canary.a0f1202dc.0","@material/typography":"8.0.0-canary.a0f1202dc.0","@material/feature-targeting":"8.0.0-canary.a0f1202dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.a0f1202dc.0_1594762477315_0.15175936083075547","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/form-field","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.ad4df58c1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efe95c0756aa342b7eab466c74d91004566d85b7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.ad4df58c1.0.tgz","fileCount":34,"integrity":"sha512-pVvOrjSUmy6JAyvuO7IHaz9DSb6uMxrzbaQEOBAo7sG/67Bx/5tapefLoxkgEztLZHxyCL/O3eHUzDgU/xv/LQ==","signatures":[{"sig":"MEUCIQDImPOHwpFCMmwnNSeXULTurF90qW0deiVSDASvoRI5VAIgYPfe6fZqh7vqTeWxLvl6E92KhwhA0ePq8WaEarIIRNo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDkk8CRA9TVsSAnZWagAAmRkP/2xeGjwAwHIX/mK0rBCw\ndtY8yZIlh856lgT0WNtvZ/bIIxkqX0dkix2XQcOGPw3Lu2IzScLXZyqWxbbL\nY7IijhTnOz32janSzW4jWA3M2dMmxXAwUyOVI6zeB/zqJ+EW80pUGcswIEKo\nkI2dlkaoEgEtC92PmzO/lSQLfAzEpqu+aKTcdKcv6pAmEnGlYKtjbELVEIF0\nYseTngsL/lgpxIzoI3C5TeW8v35e1wmvL0kvG7nH/fVmseZ2oB4BzM9sodaz\nKTVf2Tpl/E5x+M1i6nSH55eqcXLGYQcmp65K2y/JgbvZk5WvHzMuXp3y5tMx\na8Zb2hqQ/vG2+yef+AIBjZ7TuOK2KgWo+9EZlyOXLCz3+HE8lCJVGzc/f/9a\n7nMCHf6UuWwLvg/1QKpfsYUm62pKebwvH5fy/jTySvgiFg1ZFnbSMIzSCzqC\nwycwz9NxMm5IgQxaMui0fXsx0xOMjHFy7puWZhcQqax2o3zsLxcJaOrtYyTX\nWjsSWm+9VUQOuwI4vR37j+F9PMtGr/E92JSmoi5ec3zCHklt3n6D+aLXc+oc\nU+EORvigxnmWTILqmjRRk/U4tZOhHVKgpXXPEor6NNaYT1/hFrRa/DqPgK78\n6e/zMllqXcDnDjQzc0q76+F00qByc0nLoobf0xHTaU8egYSCSf4Ok7U2OvPm\nS8WR\r\n=xppX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f3541b13d081357419478232ca7ae0021f2a6b43","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ad4df58c1.0","@material/base":"8.0.0-canary.ad4df58c1.0","@material/theme":"8.0.0-canary.ad4df58c1.0","@material/ripple":"8.0.0-canary.ad4df58c1.0","@material/typography":"8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"8.0.0-canary.ad4df58c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.ad4df58c1.0_1594771771864_0.8364321240171859","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/form-field","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.01db89053.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1789e1b74514812f86bb9f91fb7ff461cefc9575","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.01db89053.0.tgz","fileCount":34,"integrity":"sha512-bOCA+M5MU9BGZGCygl3nKXKSwotkGQT+vkKJ9rJNsStZ/lwE7H0RZwEOzXrcqSt2A7t0kQQuwtBncWah9zSJqw==","signatures":[{"sig":"MEUCIB2ciAwdzFJtWc/fD7mlv4mDDQPb072y3rsu3IXo6bLJAiEA0biYz136CScqv0dgMDZYCxoqmcCFr07Jir2hQbE0+Ro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEILMCRA9TVsSAnZWagAAbWgP/3EF+iXaripWCZg6z5rc\nuNciEZGdjwEV4iyNLZ/E1Eim8DdQo20TVelO4aCM5AYzCrlgxIUHyq+ARvl1\n85rDLbgYYUqo7Hh7P1bZ2Qu+c7UlOCk/x2jBSSsnB2GFL5kbXBEhI3DbwbbX\nT8xbxBVUzIP5qbYNV0AQi6U/JES/DEs2HdDwAnH1Bo43M4wAcWum7xVI8ZXY\nGgYCqWpzum+hPeGxDPHHGJKgPdzSYXHzV1d/W26QUyb9BbSC1uCcdS3uSnsB\n9Okg6wxZIasCVlpdvjW8n8jIe3eMd1MIZmVsXJ5iUcgC6q2CWRfXyOfnfkFV\nLFvZufp0G6Ks0JasrpwZfWlrq+4pQxYMgellZ7VP188TiPnR4VlU5jezDA44\nUVDHAP33MQl1ngrnjw6wEl+XrBsuNsZwOk/IT0Arvs2vycjOyMbNWaKOu74w\niW98g9uPZr+GjBeVcgTi+cMhMWpNf67LSihaAvFZGTFdbrTiJl2GJaBxeaSK\nBccLUXK3DZqeIl+8+zVwCMWEQG6T0qfAqt4FRVp7jgCSe/Xv0Z7yKfI7qDyg\nUi+NUXCz+spntf2UG3mH1kvjeJLch6uhArmKRA25CGRxgUhMT8grwQg4bFWn\nG0UnEdLQAxZH8hNrGr7/SEdYUZnVINk+llIOovwpXh4W/Be0zNhZYahDzRH8\nDAwR\r\n=QOw/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8780c29a82c64caee37ec22f279b264af42412b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.01db89053.0","@material/base":"8.0.0-canary.01db89053.0","@material/theme":"8.0.0-canary.01db89053.0","@material/ripple":"8.0.0-canary.01db89053.0","@material/typography":"8.0.0-canary.01db89053.0","@material/feature-targeting":"8.0.0-canary.01db89053.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.01db89053.0_1594917580238_0.4962999647284274","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/form-field","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.fb5a4cdeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21688794bee274e9a329a3190bacd13455b79776","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":34,"integrity":"sha512-nfR7xYlc8Tah+KhSuvo3TiWXPXbAkTf8Y4jq322tNAMiPqCW9yIv2Y4esMLEuEJWt9nBuT9hZx3ob2fwP/mdcQ==","signatures":[{"sig":"MEQCIEYDrdvmxzYOIzU0Pljm1YEm9L509ODCp1AG+yIZWBsgAiA554QYb1VTHCU8/1A/N9b8+cBGiNYwFQEWe8mFp4R99g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe5tCRA9TVsSAnZWagAA9XQP/R/roF1ouTKR362zEAbi\nmzKrF0vLhlsPlti4n4i43cU5FWZGKjToB3jX+tl5SZJyo+rxH55VNJjSaz7i\npznnYJ6ExKxJWPQgc/esE+Vc2jV+6GiZCTYWRov4jAUeGnW5qp9Zlrxfd+sm\nG2zQqMkAiK41SCBZwT4RxMOXEbD0xEm0JFYzBsNxC4qNLnPFtkj9689d3NM+\nEfJEPCcZrKKcMDTCOKc4Wke3TeyWJuvDaoQ/JAVlxW77bjnFlhV3Hh83EamI\nyNk4RhKWybKoaZrOB+sh9f7xCUKgAB2TCtV3LwBrswDccD8obpj39/3YJcMe\nKFqaA19FNpCfNlcJwOU/S2I1NhOxAWqizcOkanEdI4vOwv2xws5t4fmhxMqj\nM9hlkcO9U7DWek3zAXZNI/7HwKl6JVi9kElRQhJVSbutDZTtNXP9OgQ+mqv3\nmJ35trBTCQay4jeF/BcklIfVRV20DsxxFt3lL7GLKXZPIJ4o30rlvWYMP+z/\nIn9sOMxsdUMrmwoxqIsAfvuuJ1aI1LkFuV6XFwiVKAxakYrnpbzBi6F+70uX\nZQfmZIyqfOMBMHV1U+0NEPfy5SVRo8wJPIMKCU1DUzIFJe19YTk1hiQgJTyo\nHG0f5GaVN1SDLPNfELvjNB9/ZNn8gSHNvHbYFu/vC0wu4M03+FM93DK41ZDt\n4aoQ\r\n=NwbU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8e80295b6b3e0ec36934f8d691b193c740458d1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fb5a4cdeb.0","@material/base":"8.0.0-canary.fb5a4cdeb.0","@material/theme":"8.0.0-canary.fb5a4cdeb.0","@material/ripple":"8.0.0-canary.fb5a4cdeb.0","@material/typography":"8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"8.0.0-canary.fb5a4cdeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.fb5a4cdeb.0_1595272812825_0.5245970473203891","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/form-field","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.8df0f517c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88a3f8b2f0d3c8f3ed3212438071eb3ef1ad4efd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.8df0f517c.0.tgz","fileCount":34,"integrity":"sha512-5iWpIGaYPCyy/35oOdKF9iIAHmiiE83iNJ1CaKrCMlluTyMALJARldnoCI68mVw+tymzyr3Ysq1uEMEtY2rSgA==","signatures":[{"sig":"MEYCIQDRM8tU0jkN9Kq5JxrQ6D6ESfzJAFGDLh4nEZO6zPSCnwIhAMxZBEm5675lFpWrd/HmWi6VTVHytPuaz4M9+jKa60Ty","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi8GCRA9TVsSAnZWagAAauYP/3kC3l8QkcUCqDOCxeu2\npbzsoVjClIOGXqzLgDs+VIjwHxAibH4QNlc848/uzd4BkERPfQKYYv3hP17r\nX+VKvCoJA9UIpRyeEYAa+NgBA5VpAJ6LnTDnuSkgc2kukQpnW6l8OdWOxwab\nKpwHEPMmUGR3G86R/xTV8TnUIjLDO9qEhy8DmOZrAZNfUd1pF7KAlMRwG6VM\n6qiJyhFXbI/ohDV5xm4qIWl7JmIz+p+86hw/drLeKLA8r9Z2b4Eh652QKUn4\nMEAglyujqqW8vIXz+xUV6vuyMEBm/OlxPuEDdbSqOx2yQ4RZkRKGGtU6572I\n2TbblcizJjs0OaAt6Q3CD8GurJlFZCd01lOSsCjdtaEyDVo08eg4Do0X43wn\nhYumEteYpcZWNn5pH9WpMfcnqr/jxtTOdOkYma3+VUdIgkijR99fasQ9Y0pI\nAusl2MGzRSX/zX0MZ7MnO0nwJtuctr39yVfIIHWIKu7x90MP7A8v7wJ423e/\niGuMlcPAz2ix9Cy83KVeilFQyXcAWI4aW7zT6qQVHRJ74otmoOnkWPnHJQ18\nRNwlTyHxhTLmOFeLK8H4AUJ1qWizjik/yu9buXKaVnRWA8qNHmCRTe2iFjk2\n7fqCr+N+B0bTUuqoAF6NuRcpZaRm5l8lXh74ul09RG9pH4qvQl05lPYOLDa0\nyrTQ\r\n=VvKo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5fca8679b0dad51628e898ac223795eea8e54d56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.8df0f517c.0","@material/base":"8.0.0-canary.8df0f517c.0","@material/theme":"8.0.0-canary.8df0f517c.0","@material/ripple":"8.0.0-canary.8df0f517c.0","@material/typography":"8.0.0-canary.8df0f517c.0","@material/feature-targeting":"8.0.0-canary.8df0f517c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.8df0f517c.0_1595289350269_0.472461352078845","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/form-field","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.abcdbcfeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1aa56e27b8461b649ad625559fab3c532f2a0c7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":34,"integrity":"sha512-Wk6B8qk4zYcLNr9WkEXKKVX6ktu2xMs+Fy5+BVDVSDYR4Mb+7ZqzFjBXrNMChpev5tGzVTaSkMfRP0EWW7Wtcg==","signatures":[{"sig":"MEYCIQDKc+yUkWBKme5FNsg6X2+Bhcl7rA5ttVkzVie3Y9uP2AIhAJd0pYXoVlacqfjg0SGGKRBhNgqkHaPmIfCbLSZnZsNM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjvQCRA9TVsSAnZWagAAunkP/3Z1wKmV1S5z+ngbv4kU\nOkaQcFwzRW7fQocWIIo/v8eBr481JSWAHvhdLUlafIuTKaMtAbhu2b0u7KyT\nQQRlGuNMaum1R2ywTOYzJklV8rPPfAs9bAXg1XglRRWDMG7rEMuCHm3xjpW+\nJPjJJOcOrXk0cKgE8UtYfaOZGVZn7AGHQGw59qWQTkgEXzEqOGxcN/nc5y1B\ncZXBTvkiHBzSOxfijSRX8pNXRpAt7kTBemLjDYDzuZFMcdHRuqbIkZQ2A7/D\n1F39yzJy/SiOpTsqBrgRbvuYnmxwIOdLJ7xZtyIq5eoFJAoE4W2hsfOmbSnM\nqd/JwE25LATZ1m6pn8c0pukzlaTjlF7lAy/WwlE3A5B5HWOjws7UhNDljl8k\n+rrQICG86JZ43kO9YCOAg/A1yV0YysMB08wVceAVRbvhYIywkfPeIm5LiPxA\nbtxC4nR8MYAm53n/w+z5yOL3v/scBWxqENm9EPzfQ8QuYW8VFLnBAloEaavz\n/9B8g2BIwWu8VQ4alfgnctmXnTvVFIl4Tlk7oKjFs+1Mo/vV7Perw//bO97P\n2GMWZee9kMFKwjNPd8qusrzxslywQAXSHUGtV3BFaTFFQPM1RuqM0tB1e0G6\n3X3l1RB48VSNSyVSjvCpNcdJjob2JQoo8G8nOgn7l6Ss9SMWSXg1/HIf7OZF\nXspY\r\n=BWnQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"946720776dd73c7539bfa072ea415124b3e08a55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.abcdbcfeb.0","@material/base":"8.0.0-canary.abcdbcfeb.0","@material/theme":"8.0.0-canary.abcdbcfeb.0","@material/ripple":"8.0.0-canary.abcdbcfeb.0","@material/typography":"8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"8.0.0-canary.abcdbcfeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.abcdbcfeb.0_1595292624127_0.5478050661044453","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/form-field","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.7bd5075de.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8956e1988b48a16c9aa33dfb1a9d1d54b67d91b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.7bd5075de.0.tgz","fileCount":34,"integrity":"sha512-nEiVc2vKx4V9sdO1i1w8AEAvVfmB9mueDuvVPt8Xczkpf2XKVJy2mpNDAA3GfTymqgq9dQeiiHB1ml9EGBfe3g==","signatures":[{"sig":"MEUCIQDlrPhVLXX96XRa53uor+EbDAzdGuAtGKMv4btrs5TYMAIgbKK5VD/D5pOhI6IDUK10oGcjPed75HrVqqBiq4iNzao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181852,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzg6CRA9TVsSAnZWagAAh0YP/2II3zJGOH0B1YGd71IU\nIbAol6MvJ0jDhSeZxjL9VZx0ZI3nROY+v/P5J58RzOukZSjQ0czbpj5e3d+N\nw5iS3xO70EKDO6tZcsUhhNUmqPMIkT+vEkZVJpq7h7cXmV5olK+1tbiqDcZy\nJLEnrYNUjurFo3TRN/NUuqCEzWDCDwe63thODsExAycWvMgoiv69kUBSu0+K\nHZgi0jFJstkzlNXvJvIovfU9I865+sBKDfldbdThgYt/nwH9aEbZ43g9Q6mU\nPZc11OQEsE0dFInjG/Lk6QLcTNDjQiA7+Xg1VonI7LmiKKZXm+wVYYsk9OMy\nQciEXkpXAYZWfqgsv+3U8G3iXwDtfaDEcCwmNSqs/SHB53K2W/rn+HVHyQJm\nJz7DrDC2wy00l9MExG619vg1mWoqJ7TDuyNPY8kh//5AmaF+EtwT8zhK7sRE\na4Fv2T5L+fbRYbfmPPOcJ4rkrbDa6JVHDHaFXx+k4wptKdF8rJkc/S8RWJ4E\ncWc2rdO1Uj6IiU3sh7kgNeOHK/MuY0CXU8x6MfPSIBeUmI9OcNrNgryRPviX\nuW58z7rS2SGZIIlDqWmQmSR1yDlHnWhwY2sEdrvK3uLOfVTUbKf6WynMgp+Y\nmo1uubSw9Mtk80KH4oQ3yk2PgRQg0SmScruDcpnSrtWecu0/OWLFS+ws2KHt\nC0SG\r\n=f5lZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5ae456e961b208e98164fa21047b3ff2e3f3d8e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.7bd5075de.0","@material/base":"8.0.0-canary.7bd5075de.0","@material/theme":"8.0.0-canary.7bd5075de.0","@material/ripple":"8.0.0-canary.7bd5075de.0","@material/typography":"8.0.0-canary.7bd5075de.0","@material/feature-targeting":"8.0.0-canary.7bd5075de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.7bd5075de.0_1595357242128_0.46449182164981484","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/form-field","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.405a29a20.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a494d2729ec1a858f5d7b5bf3094aa4c1cade370","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.405a29a20.0.tgz","fileCount":34,"integrity":"sha512-9jm+wUHvplJJJy1k7GnN1Q7SKmw/hx2udlOMUqO1gZAXCrvkCT/NQELHuDvrL+Pzxjf3/qtIy1K+bgVegxyeWQ==","signatures":[{"sig":"MEUCIELVu0y4IaCb5UwXCDjLYXMecyuZzQLGcGDyDFrTPFIgAiEAnz+5s2UKt45GpCRd/J4bvqVdogHRo151FhU/uH4aztI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181850,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLxcCRA9TVsSAnZWagAAtskP/jrFy+wfHJIRrDHbArWU\nkrZDe4agNCiktFqDq3tk7EF5BUg0P9LB0ut41gGJFNshNZkzp13qCVqbC558\noyCsMqymtoNTtrZqmx/eYvaRuOBbL3vZyt+OlciUDo203m3DIEAJT7tCwR/V\nGopot36rlvp6U/nutjBQfaHuUm185whBnIk9iWOD1NiU+fIPFsdVivMsNTuH\nvhAU/JGoiYUZs1nlFHrFnY4YUnB2iNn7dMMAe+uEujfjkq7DqAMDXlSJeba/\nY7Sy8RO7bSzLQWZWub/CG/YHFSg2ETCfMYx/oX4BBIxjPl7DGmQ4s16TJU2w\nD7vorq3XiaSMmtshnUmqzO0EBuC9U+GdU/aqDLL/kLUJowAYNUbUQb93lBxN\nL8+o2uj3R7CKimqV0CoL1JNN450KZLOD7YJ//X39G4D84HBqqv1Pnsw2G/FS\n694kf8CJv7vdx5u+YcdRz1L2hzPVpsGMiClrDWj/+f6jY9C4DnLQ1uqjcH5w\nWrZNvuifHtRRPkdOv4N7llJrIo8imuj+dVt2uGeAbiIczmgnXoh/JmV0mg//\n2xgzSXokuiVrzsYvS3Tpw16iwKfFVN9vrdzDZTAGynj3NKHbejaCjr8QjEFB\nxyJupn1gBtulLxzG9DmabRfMBXtSHZoh7+8gcY+vMfpyxOK2+7IoDYlWF+kQ\nRts8\r\n=fbFB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"02c4f49285e8229cf49d9e4a0df213ff914b949f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.405a29a20.0","@material/base":"8.0.0-canary.405a29a20.0","@material/theme":"8.0.0-canary.405a29a20.0","@material/ripple":"8.0.0-canary.405a29a20.0","@material/typography":"8.0.0-canary.405a29a20.0","@material/feature-targeting":"8.0.0-canary.405a29a20.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.405a29a20.0_1595456603723_0.6305786697432243","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/form-field","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.f3693ac4c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6959894be0b28001fa27a60bf237cad9161536a7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.f3693ac4c.0.tgz","fileCount":34,"integrity":"sha512-NsGfpgpeMi6Xb2mrQ+pX71LX97c9KpDU3K5nra+xDBfBT6qu3OhzrjhGXvcoXDkE4kNTTrTOZSW+NkMJUMXt2Q==","signatures":[{"sig":"MEUCIGohVeNGRSypqS7OCFtyO1RYzzFEjfmKpXKsmhUr2w1fAiEAllidz+wwaIAZm+BiJqOghBYnERgf5ct8/P8kqnwvdPc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL7YCRA9TVsSAnZWagAAIXcP/A6z04eOCvqgFj1adDJz\nMjrETyWCouBDPBRlXAFrt1L3p2g0OJE9OZTs2a3rhEvLEK3+iCNJ9RVckzCY\n2OWD9h6PCzv3IqgWR+etzU3XQQK0ZtlFkmKb1H08Dec53BQvsMOJ/QfGVhZZ\nadGF4bHplQ1RAR2MkskpYNHLJKs28melxyCIgSZcZGipWy30CILhPuSeLL78\nlUhoCxp/clqGzMShMXptgwE5xb9ZT8Lf8OtrNdLN9ePAdVfqilvtTGWD/ZIw\nHQjYRoK8jipUJBZy2vDJQdzVgVdM5jaDx6wIHXpb90eaN/8RuM/Wbyc56T8O\n+4OnLC9gppFrnOS5smb/rnzDgft2p1N7AN8Rlo0pA0nL35ocrC2VbwSYZvJt\n31TBCXUmjRB0VnShmA3tEA9NY3g9tpNkEdmszSqCfflTbQBbBwJTPFU2uCjF\nQrgyHr4xJR0+c4wSFrNmSxAubdajkCWh+liI0vp5N6uXOwGq/3pZ4AumSZgd\nDQgzSjLJ9GB4RSnCn0v9G4CnA5lq8N5mU1DUSlw5ZNr1fOobVoHdOgnp/RGE\nQOOv05fE2JMscLWxgDe2E0d1KMw5kj/RYXE57RjQ2LSpURSiAZ2g45lbML6f\nHevwiBVss0/AjjyNr9/1OlSZXAcNUHm4a1UPwRWeMtIezuUhgfWYVha5J9pi\nSxmO\r\n=UAR9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d3170e3936d96d26a6ca17df46c1febcfc33078f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f3693ac4c.0","@material/base":"8.0.0-canary.f3693ac4c.0","@material/theme":"8.0.0-canary.f3693ac4c.0","@material/ripple":"8.0.0-canary.f3693ac4c.0","@material/typography":"8.0.0-canary.f3693ac4c.0","@material/feature-targeting":"8.0.0-canary.f3693ac4c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.f3693ac4c.0_1595457239722_0.8372786239318091","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/form-field","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.12a109680.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"930f0b4db1a04f1a2cbd180b09dfc8ac52046b75","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.12a109680.0.tgz","fileCount":34,"integrity":"sha512-yR8yBHzwHyOeJ2oo/+Zsa4zoPy+v6CgNTz/W9W4dWbcBYSzY394idPiqaEJrgr3esPRQuWhKZkzDQ+fGSdQuyg==","signatures":[{"sig":"MEYCIQD39tVvetZFIXxOiXdAowIGuPDibhFEqh2SzDjXDL4tkwIhAMfnNT9pDqtr3WsQv4O35P6Fr4X4iFt5ZDU3uEh2Br5j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMXOCRA9TVsSAnZWagAATP8P+wZYys52TEaYKv4mZkCz\nNW4qgtxqr41qnxGIFqp7Ncr5hMmnzS5ZV70iJLEHYPBoJFniO5x7wzxGHysB\nba0Mh7h5zZNnHOSzktlKemvG5b7zEZsAOg4Oaz8/OhVcOR9ILGBLfhMHKT8s\nSyBDBkqFHy01S6rfSY0aB5Q+gTbEtrVrtg0aqlS4vL8Dxf7AnP90BIXVxbxv\n/qZV+4AK33lgcuavTBOnCB76mTtdy6Ufi9hZ+yXlDTlm8edeEuhoc7jjU/4v\nxVXXXJCzO9zNMr8tPNImKL0P0K+3wZpimcVlURvX5Xp0P0iKV5YeM4tU+EVL\n0TsiQdBONbPkJIzj6M/mfRXVXqUfqgA3DgbVG44TJhXCK8GdR7gNzdRIbPQR\nrKYMczP4sl2xaXaFIt56mtpOecELldU6dn1p5LOVdnFldF4HH2dYiHtk726T\nhkKOEPY5IsD8LV3RxDcO1UUSp0wyGPXMOJYK8Zy6WnExLCujIMMeoTDsWPfJ\nNlGYHZSldB+pRkKh9H6UGnpQSq9v8Dj5nXNb4ta1WWfmd5X7Yu0lkIPw2eBy\nP0tj+GMhn4FPkIGjn6hneqqYjftARpUtCNGnR0jwTKjk7+KcIlIn6k0gFI63\noPj8grz1AQvtYzyRHyD6OKjNQDMZTaWXnYba2ASTeWlb7KfH7apdgVTFWayC\nonI1\r\n=oDOX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a403e743d7da095028c3ba6d0a66ef2f7812aa8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.12a109680.0","@material/base":"8.0.0-canary.12a109680.0","@material/theme":"8.0.0-canary.12a109680.0","@material/ripple":"8.0.0-canary.12a109680.0","@material/typography":"8.0.0-canary.12a109680.0","@material/feature-targeting":"8.0.0-canary.12a109680.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.12a109680.0_1595459022350_0.08211991634127269","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/form-field","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.bbd06696e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6916db7726972419395f03d78b9051940d5b829","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.bbd06696e.0.tgz","fileCount":34,"integrity":"sha512-FKVvGw/vE3hm0cKaI7HeaChj+C0FamnOAxYi9AGwj9BxLb0ZPT7La3wJH45vjs9+osysOYBMWxygwiARZKCYaQ==","signatures":[{"sig":"MEYCIQDJPr2C8tBqA+dmHS9qA3GRVXF+CdgB1Z15r1bMhcGTZgIhAMcYFltWAkDT+98kg6xHW4ZlBAnXHn1K0PLXnTTwK1mE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNFhCRA9TVsSAnZWagAA2IwP/0IQcXQ3q0MOanu3VKLg\nJ3+SrVlOah2tbHemX5tVsD0zuY8TqnwEgWwqPBVAweyB170ltVnxbxUuFG1X\nUs20vM+6syEEQDs62VwZPE0qq1kZ0xakoO6UB8RJjjhLKAwuSF6zWji9X0IG\nc1USTEuB8r5GYfjmymVxGLvBv6XSutwzMU6iGGE472Qt9YcjVouN0cTIfDtc\nFhChDxVMPNmXwTokQhhcc9M3HlpeMFk/MFABLUQloinhcbgeJHbR7esgFbiW\nUqCWmY0YRlJI7mUZP2ME0QW6n7VKPWg7142U/EWnTMSU6vi3oGEkpbvtRWXc\nQOfvgrkBCyW3GzeIXbSt4D1ndqdM1IGFIWVoApDKk8zUmTCbPWsM13VflrZv\ncnzED9gatdAdxnxNzQ8XFMtOD4vufwOULL4hNSyZjJgaYFVltZy87p7l6cVl\n6fTx2CFU7TGtkG0+iALTashwwc7Kzoe00ya1PGe0KwjfwHQ7FVWCvF8dVokJ\n702tXoTDqEYQIARX5NAIGTOCn1VIQ/9bdSLfgNFZ4sNnOHPJ9ozCjAEJ4eB1\n1PvIuldZXBPPwU12P+3mh+crgAhGpdoQB2USoNCSgR90i1K5qINdacH3QGr9\n7wfK6rki5KC9JaWneB8LgIaRUZVDpmALYR6Mpf0jFIj4jxQa6x4RN1UWigUB\nAyKK\r\n=Py6k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1d34a386a37996e326b9ca18440ff1cda261f3aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bbd06696e.0","@material/base":"8.0.0-canary.bbd06696e.0","@material/theme":"8.0.0-canary.bbd06696e.0","@material/ripple":"8.0.0-canary.bbd06696e.0","@material/typography":"8.0.0-canary.bbd06696e.0","@material/feature-targeting":"8.0.0-canary.bbd06696e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.bbd06696e.0_1595461985042_0.9667852013528708","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/form-field","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.4951e7651.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9280992693e60021c277064406878dc9fc603e0f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.4951e7651.0.tgz","fileCount":34,"integrity":"sha512-dbZi972AB0WR+iCl3QVTIMRXADZ72wd4gEks07VAmkYTVlUeS8GKzvIidFJ+oHd6Wj76F+xTl1glZ/H2rEXo6Q==","signatures":[{"sig":"MEUCIDufKOPDZ/Fd7JHxKrQ5ceGKvwpsmNcUmodgvOVxaO/QAiEAo3ystNhg5/8ja8NuzbA2UPtyos2x65JKJD8MesN7BXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOzACRA9TVsSAnZWagAAI+sP/iBXd0vfjqlqvgqC/5TA\nb9TGynnvOzPcVzzlyJ4SSqvTM4F0ybjPUyH6ZihTtMlng2MlR4jRYfK6Jljw\nj4JuOtacOl/aciuK4+LTMn1MoTwpAhK3RFY7EtUw5SUUgQ4hnQy7i9Wk0jmY\nkQuu6NLAYc6fQrOapCvqVLkmvTpHWkyTlYUCxjq+mlcxHKzlx4jX2xxiNqd2\n/apgUFjyXVR2YIY2ty15KISbgHzJsa4E76c0BPtDYKtbNCcsvKPTX2nW9bxo\n7EktdOZYt4VSMrwphRrk3mKRgaMS7Rq5b1T5IGuxvIprWK+l4o/7VSmQYmH+\nqQzD9VoN8UO0ppeoiHOqMy3hhMUjGUXc9a8jEiTBLVSLtQ93scrK68vRxKHg\nfyvAnRGnOi/pgOLWCFuxQ/aA/Ob6igYRoxT/1AbNGkNYdV+kocmCxUgC6SkP\nrdw2V/yHUQjVkPPOqe6vf7Pd0um7uzqNk+D0QyVJMM4V9TsDUcojxAE+9qi8\nD3dKsZihaVxoJ9wCAEDYy/3ZB3R/y/sZoktg0SMQBDoYACVNpx5r3MnTtNdx\n6IAoojUoDKtOj2cVBztXXXTihyEAopyvJ07/EK9ChG61vx7clFhMiCUXw7jl\n0Fq0x/2RoBJ8wknIvHqtpNH771iz7IpuLv74aWj2RGagKNlC65COAC8aeaVo\nCAFn\r\n=K8BN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"32ca9cc0ab948e59f91965e96adf325a142b8336","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4951e7651.0","@material/base":"8.0.0-canary.4951e7651.0","@material/theme":"8.0.0-canary.4951e7651.0","@material/ripple":"8.0.0-canary.4951e7651.0","@material/typography":"8.0.0-canary.4951e7651.0","@material/feature-targeting":"8.0.0-canary.4951e7651.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.4951e7651.0_1595468991979_0.2747107023029771","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/form-field","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.75deebbef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9dd640f6c3bf0485047781a418eea6f73eaebe52","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.75deebbef.0.tgz","fileCount":34,"integrity":"sha512-QFJHnvU21qAeYj/4tNY7cfRa891EWY32xunz9tM1wMPl+p1MNBikr0pqSBT8GxrUXiWsEWaWqbnZcUjOZ1ysxw==","signatures":[{"sig":"MEUCIANkUXjcA4UeZ8vreisJatvhDeOssnRcsJvLF5YyzwyxAiEAv30fzwkreEAlpUhR9AMsAT6zxkoZsrWm2+dcSFKJKYQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGc0DCRA9TVsSAnZWagAABi0P/3D1hONHOaMrM6whnWbf\n6EJoj8pduwU6VoXPdinuTMfIAKvqWjq9IGzqsS9n3LjeL8qZkO5Y2ERZ3xed\nUYX1BI2tJgDmDD79no/AAXL0yrIRRPSIKR22XpOS9eAA4cpTVnCbSU/EC/28\nVewYAoIKJ2j3p9OsBw7N4pIH8Qkkvbai+gMC5HRv7mruJ88fwtfz4u9VaOcn\n1M/k4Okas0HvmZEPbfA503L9hO9ovhv1lYubgXgFAylH8i2ks02Cjf8WY4Ke\nNd5XCAXdHDrE/ojzSXHTgDbGV8n3Psba3ugQ4SFlwjUCSik0GjDyiHt44xJj\nd9+elRwtED9ZdDHxcX1q2X7NwRfFMM8mz0U19co7cei17N5KXJtsePH48taH\nWi/XOqpMZxQBSocqO/SUVYy8rYQZMkW/1M65C2yWxC9z+l7O57re/S8XSWEa\nca1g8r10efJHWAxvS63z2d+xH8fzNQsoZSs1bRE/ajgza5KV/nhkzx9a8a4A\nrm36OaTJKjZ+chZadu9wI0MG56eGBYUkNlkseUQDafEz35qbQxD3kR25nHp4\nFkzFqROSQHIP6qIv9NPXFH1Fz3zBSNzUwt7a92ZswlbEoHPebrfPI2/3zxb8\nCmvj/nntUCSfZCfcGesvV8sUq5op27/QiqVNCjGpqT4RzkEwKayw9dS+IuP5\noBwp\r\n=WvTL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3df5ec3c8a254202fe3ba9017528cce3d5d906ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.75deebbef.0","@material/base":"8.0.0-canary.75deebbef.0","@material/theme":"8.0.0-canary.75deebbef.0","@material/ripple":"8.0.0-canary.75deebbef.0","@material/typography":"8.0.0-canary.75deebbef.0","@material/feature-targeting":"8.0.0-canary.75deebbef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.75deebbef.0_1595526402977_0.8151502800675525","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/form-field","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.95aff33ee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4891c0b80bd8056b4e049702bad54f923ac7cb3d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.95aff33ee.0.tgz","fileCount":34,"integrity":"sha512-e2vHvQ8aq6e8vL8XcIva0nCJgXfn3tBERzOhvTdHYm7AXtNHyr2uh/lTZ5UuYEszmnTypPEZ6PMOONifCwp9aQ==","signatures":[{"sig":"MEYCIQChrdDs0v52Efce+80nImyyuIT+KaZa9D8JgiA0Xzgk2AIhAJ6IKbQT+/BYgYU0oTGtzC/MqjEaRqpwKBmalckcoWBd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGdtLCRA9TVsSAnZWagAAKOYQAJAy4TSiIDdVoczbsNfL\ngSpLN9Q3Za6YCkBuzxhsGSSlBuNyCvRMPn49HAOJ/OrUbXwJBf9wTTRHGy8L\nwA74uZTAVh3+fi4z7UBVykVe1u//h1ZKdb2CtzZMJ7RRLjSS5p/X8Z6GfkVv\nf9iX6jLltXoE99n7yKqwT9vM5xGQnGa1tVyatgKDwL0rx+w+VslfaDPGBvxg\nRtTg2/gY9Q4y4M/WRBXJCQShijriWKlkvARuCFQvdnVapvIElaJv8lCbv445\n7VFH3ScjNWjwMLgQjDpuZOxTrCcht22A+SW3rsOqe99eajNAExS9AbIaH3Jp\nGWX4vIeGAoyxhEDRJQtBT74xdCNli2GWkAOToymNPvMxHzKPYSdZMq0lJFSz\nmKzlknJI/UCOo6tgSy7/IHbePe0RhFohnXQSo99d934PL2vFO2FouUzb3dac\nne5HJgifguXmXtRqNeHPhjft8LleR414/ADof1uocoKUnFMGW+OjNMZJVLzI\nyj9hDk5/3FB80LixYYNp1zK05D9CUCqk0LEReBBFJGPq59ILFzp7IfeO4t/T\nmFvkBY1IjZR2ECPUiItB+C8GlsIyWcXfcNzdN/K+PAsXtmwuQwiazOU2nMnl\nGJTnSdaep6Vvh+2TEvtvCHZysIOG2fwh1o0AFfbch+4WIVyvgtrsHzoTToQK\nxwnK\r\n=oG1n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0343ebd62969f5d4315e249ad81f2837fdbaa096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.95aff33ee.0","@material/base":"8.0.0-canary.95aff33ee.0","@material/theme":"8.0.0-canary.95aff33ee.0","@material/ripple":"8.0.0-canary.95aff33ee.0","@material/typography":"8.0.0-canary.95aff33ee.0","@material/feature-targeting":"8.0.0-canary.95aff33ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.95aff33ee.0_1595530058599_0.21916637021801222","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/form-field","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.9d9f47473.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aace96b4585cd2a8af55f9d0af92aea898c44683","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.9d9f47473.0.tgz","fileCount":34,"integrity":"sha512-4LBKoUQsC2Yk2TXM8ltGfnw1CPBMv2+wM504hEVauzTetqfAG4Ex9px1q+JBl3ZQvgmTUsTJzg7kFEaJNhH9jw==","signatures":[{"sig":"MEUCIQCGEnVj5JcCxx+6UZ/lVZ7KZ/BNBxcPwpPymx60/aipkAIgLmiuq02kGRQ4BOUG/9eqiZ7RmHXFWfEqxeGCPeyXQBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGewGCRA9TVsSAnZWagAAgKcP/1RXpSNUIiZCedvOPKJQ\nOl4tDq4e6HV87GBoTSeBsKLP65GNtzSWrG6mcgHb2iw06i0/lnwCKh2VMKZs\n9JmJqsc17f1mGejkAgthfrdEqEsFqc7Mcfk8KuSAraidxhHy3bV260I86kUC\nIuChU/iSLKhluOKX4og3OiCR5iR6BvvFiVl+6qrgmJHv1MMtTTuExlDB2ZAO\naRfyh2BppibiJfFXabnvSjFpubfsT4ZfpQtMZhhrI26YyAIAL3doYaU21lOC\ntNwfNAJabPLztSVKO+TnkMWEhjnCzmkk5P9kx0fxQfJ0S2F/b6o/dDgPJdW8\nQEAraUw2t3CZkAR2Xe/e2ZhXSxB9GLi409dn5aTpzE02FHpzi1D28U1SuJcJ\nf9ECZz+O67a7pFrs/cS8Yx/qJwvyHJcB99YOdgf5OcswrR0ogjUaVTUzdLu5\nrSWOm1VkdEBFfk3vz7v1q74GN6qjkY/YjFBTPAhHWKwIt51OmKKEt81I49jw\nkHlKgphX3XQO6fNhj+YaBiLyWPGXSrO1Ii9As6Qm4T89zR5iR3IpGyYAbQmV\nMY7o2EzJ/jsM4S9KqIhq/REZVxdRrc4WwDOKij9qwdRmcXBD08wdUpjBv+6+\n8mXKP7K2/Dw/IZUAdZrth+k2Qd9vz2Ywo+HJTfGCimRQNIs+GiHw3puF9vPV\nAIcK\r\n=mkRS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b21be0611a45dd7df8e3b48a3fd0aab09d6cb236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9d9f47473.0","@material/base":"8.0.0-canary.9d9f47473.0","@material/theme":"8.0.0-canary.9d9f47473.0","@material/ripple":"8.0.0-canary.9d9f47473.0","@material/typography":"8.0.0-canary.9d9f47473.0","@material/feature-targeting":"8.0.0-canary.9d9f47473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.9d9f47473.0_1595534341786_0.8867497152556612","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/form-field","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.00dfbf6be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57b99f4d078e4281aece9fc2d68022bbb62287ff","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.00dfbf6be.0.tgz","fileCount":34,"integrity":"sha512-gbiIZp8byIm33Ucw1ekkzvKa465K8hFc+JM3IRKon6Y/3T1SdqLwgB7gshejkpLAe5tvRHIlAwzW5obPKTUzyA==","signatures":[{"sig":"MEQCICafknlQ5Aqqwb9cAhX7KvA1s9mT4u0uaYEJ3dJ0j9L9AiAz28g6UqWNRNKp9v9WeVKTVzMRWaHSdQ0tuDyPKj0adA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfpGCRA9TVsSAnZWagAAC6sP/RbPAMAkfwpxTh+G5f9D\nXs0vhPAbVdDI4LeaJPPCvgJoveq3uz2Qy1UkZU6nD7/c6ZdVYBZvvBhqvXie\n8enWh/WACb0Qi91/a3rcmZHmGKtVsVVJJu+urRgVIqM8wI5jFkrPDyFPUBAk\nFrgpoTivb9qRpilU7UMXKa+xg1u81RZVCNSdfeqHYF0gQIM6a49M1IkxcMW+\nUh3UiMuaLrSXb6FUovpDRp162DqZWQqlMW89QOLeZe27+wQSrQVyUDtJ1smN\nLgk5Irst9Do+bKF4tRsDGcdU7ZlVHNYbF8AJWFlrPNzf5kJWFeoWP+hlkmwQ\nmDhGiX7uunnwEa8zQLGdJam9cotP2oeQx9tRoiVBgARpSGp6mgxhDXndjwOU\nlGNgbyto4/+i7qovg5xnJAUS9o1Y3hWQ8mSs4VjqEeAL0zwa/Ain85lQHgWU\nYPhX3/2hmj6Ju2QwnLVQqx3/CNed1r2zTZFRXJkHS+UUaOuUXNca/26X1cQ5\nGF0lZn/Yf1yvFjm1uHzD2Uf1Z0F0NBQNCb3biArHZQyJN4HmBryIblcj4ZFQ\nHiD/LDzyojLA+sTOpHwD7PevObNwrwQLuMnV9L5P6c9Dt/otG1doRolGBlH7\nC+ll5iF6ttJqdfNAWlFXRDdyKcYGodbXFFB2wgu1NSqkbdVFyaql2Xg++CXz\niXAL\r\n=rphm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e4a97455c736fab77028e52beabb53323eb60ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.00dfbf6be.0","@material/base":"8.0.0-canary.00dfbf6be.0","@material/theme":"8.0.0-canary.00dfbf6be.0","@material/ripple":"8.0.0-canary.00dfbf6be.0","@material/typography":"8.0.0-canary.00dfbf6be.0","@material/feature-targeting":"8.0.0-canary.00dfbf6be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.00dfbf6be.0_1595537989631_0.14610756844256123","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/form-field","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.b87e522d2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bba164bca5da0b9e30a3f60261ec58065e12cf6d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.b87e522d2.0.tgz","fileCount":34,"integrity":"sha512-QEVsYcfUe62OdCcOSrZwAIPoJm0XyeoMkpvyGSyYwBhPk1urj34cSFdAOVwPn3U6GPSVdO1xfmcxsmdhUl9qCg==","signatures":[{"sig":"MEQCID5+TG7FV7L9/oTRv/D8/0kjEtutzZnroH8EgZqc1qYEAiBn/1KeBL6qHyg1nNbgjKIbebtCzXiMhJjeITMTY2sEzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGf/rCRA9TVsSAnZWagAAi84P/0qsI2x2jdVw3CaLuK41\niUBlPAjoX73Ah8r2BeFHMZQJwZ2VXoAgYIcg92xij9JLHauv1vkNC68ri3wa\nsU3iEtR7heYGaMXcmd4yq6ksg0TMNxfhJw3f82lYBtSAKPm1EbL17ToN2oy7\nXxTXeTeGP7nTrfgd92t1cOysbnoePxY5n29QqlqGtT8Jw922TokwRpJGuIF4\nj58wh2qtMeRodXNM0RxETnkirWJcp/t25TERvHEOp07zT1EhBKHI2Bspx4MM\nmcY5342CZp4+kg7tNGOTONnW2wT3lKOT8vdAKNYTNuTflG2YFu59hF5sgL2R\nB+y/zSUxFesIBTilsuv+GTwoSyhxVusB6Pw/M4qGKV2dyox8alfk6ozgzU/R\nOn9BEyzn7FjLzSejUluqSybm7SY/DovIWlSbiyYu6YxRDpKlb9QiIGXwin37\n7bFF7Oz88x34YyHfAS5fjUUdYAC7ttVwBsMpGIwM9JGtji2O5Ew1L3y6Wiyx\nKzMBIhY9TqFzi0TQhfDPEGQkXkYBz25YUaRNdhpqUD1Rq4NpL6WonrjjmB4d\ngvn9X6ag7wiNjg+VBhEZOidowuyNUNsCjHswo3HxO0e4BDLgOatM26D0E7tb\nI88sPvKoB2c0JlgUxpLj1zlEeODOtFuGAY5O2gV7u/JlR+93gQ+xtmkyr++6\nozH1\r\n=7Mrd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c6b4bba75848a4cc1d6ee29d1b67848ff11a8ba6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b87e522d2.0","@material/base":"8.0.0-canary.b87e522d2.0","@material/theme":"8.0.0-canary.b87e522d2.0","@material/ripple":"8.0.0-canary.b87e522d2.0","@material/typography":"8.0.0-canary.b87e522d2.0","@material/feature-targeting":"8.0.0-canary.b87e522d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.b87e522d2.0_1595539434594_0.14219944556186426","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/form-field","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.5b3e150e5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8d9d639d7af0a71fc6deb63ffc59ad2fd5e62ac","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.5b3e150e5.0.tgz","fileCount":34,"integrity":"sha512-OYw3lECI6UGboL/74tG1IIPo+xW7y14lL1ZzqAJmvonLMAQMk87hpRtTI4wePpAHImmlT0w8npcM+PW9Rbtlrg==","signatures":[{"sig":"MEUCIEsMrNfPnZDW2Rx5xZq0SzjuY4FuOWen7SoaeFqBs/jHAiEA2oeSogHSdDZ54uhwVTwBmS1Pgi9q4qrA47SnjHt4KFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjg9CRA9TVsSAnZWagAAvaAP/3Z63lctaPnyc6oG5kQ6\n1qN30TC9fbCM6shs72n4eeqI/REFR88REChWtRKHhR2+6Y1ga99TYQlHgECG\nbwdhFqiINlo8HGilFjrmqNjCFmUs/q580BNjdytYp7ra8BGigWXCJyRXvmma\nuugrLJKFmJJ6y340SHIYK7noyj76f7ycmedDdG1vzN/LkmpYbmoZMDSx4TbH\nXO4V5ehN4EHV3nBjC2/SIz64yHz2vydn77ey48tzW80ilASPig/ry4o7opqQ\npCtF9S/q5c7pv/JljNZp+J/F1jQGyyETusZrTxydfaT6d78+9SZfkS9vwt5h\nOk57rBZxS5+gTOvfmZwSBl4+R7BavgPWsiJMA80rgGeyFOefse8+EokbrEnx\nU9hjmkZhQxaXE4qg01OK1d6bgQKiLMZVar+LQXc78V5j5DzQBiYohybm97+W\n2iCsAncVROrX6vy/Dm0oKiLNW8f+u68Sc23gaO+F1D/PBxV9KCWHqs2kez5Q\nk0VBSQvSikvOvYhdg3ioqf0Zhe4NgO/CtVVMhmqCBzYKJVYB1z8xnhzwyNlg\nEn3ifeR1oyy3WAqj5VR4VYN1Q1/d5oRMFv7r8ybAkHgimEezYB5ZSE4isUbm\nOtZknKMCo2uJokA5oqsP5MMCEsgLrZbgGNlO49wizvptq6wpVk6kkR/s6PD6\npEaI\r\n=pU21\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bdcd04000450742ddf94918c2953ff0bbfdfe9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5b3e150e5.0","@material/base":"8.0.0-canary.5b3e150e5.0","@material/theme":"8.0.0-canary.5b3e150e5.0","@material/ripple":"8.0.0-canary.5b3e150e5.0","@material/typography":"8.0.0-canary.5b3e150e5.0","@material/feature-targeting":"8.0.0-canary.5b3e150e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.5b3e150e5.0_1595553853366_0.012229484018792203","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/form-field","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.f0ae11786.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e6bd4b73173ede08493ceda239fe4b5c1807a43","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.f0ae11786.0.tgz","fileCount":34,"integrity":"sha512-uivy22wznw60ZY8Vq5o4Ykpc88oADcnXPUDoxcsw/iHjb5hnnxwnQmpwBw7usW/M3CKLYQzby9IIFOa4/vuRzQ==","signatures":[{"sig":"MEYCIQCWS597xoIb2gc0Eb5++JM+IHGaAOSs9iltJKj2ucvVlgIhANswE1w9MbcM43bmZj1UvoSg0S+pMq75Ag9VW7zoNK1Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjzWCRA9TVsSAnZWagAAahEP/3VSPAnIueAcsI2XFBjC\nhdNOCgWSfSSGlUEr+HlXq6aGN1yXb0qjzywMdPFd2W01fQyGnbHoXNaqaR9W\nhL5ZP79nbsRXv6+hHAvtIOVx6sUIntHYJO3hpmOYiyJNryltXmfHUkILM8j8\nyzNzQT74A3k04zlhzH0PHNPudqc+OeqCIXoRuFWD9UHOPnjuvNUI6aycJXls\nu/6wEvV+VTsn1GbZY5/cHGCaLH5YBpomAzYANoWnpih2CPiSi6jwrf5/1nU6\nG+nsznOcPUKvsanwCO73bqgSgdN/QbY8h0h/FCpjjeX1HVj9B13lLiMNSoQd\ny+0bFBFbWNo411kwgD/7uvCvpPZQtKabzThxu9WU09D3cip47gpCf3EDXbzV\nK8jWaq8Oveg3ul4dJ/ZDizVvCES1rbzQpP2sKka7Kn7MNcwS2iJ16MCiGnqV\nGe7FCRPflJkx9/7neEW0P9revMrEMuyOxuLITpmpfprN7e1Num+S3EzUAwsw\nuoXRh36BqQN1khl62izR2sDAagqEB+lsi4nxEjbT4AweS8ItH+z01qCvl4ku\nFg5Re0HAFc+1C7Ef1TlbIogMkblfkhkTNKJeh9N1tkNhXnQ+dWzaOevkMyP3\nY1Mz4rbPROiHZbDFuVH4aamkD2DQOUN1LHWKYq7+bx1N8QLwBXeHOlbtaFNa\nuvkS\r\n=owKl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2f6df990a3e45b1985740da9e55bce17882e69d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f0ae11786.0","@material/base":"8.0.0-canary.f0ae11786.0","@material/theme":"8.0.0-canary.f0ae11786.0","@material/ripple":"8.0.0-canary.f0ae11786.0","@material/typography":"8.0.0-canary.f0ae11786.0","@material/feature-targeting":"8.0.0-canary.f0ae11786.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.f0ae11786.0_1595555029901_0.5370528928627976","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/form-field","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.fb4ee66c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0654a7bf1032aae8f94f505416018d298ab41814","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":34,"integrity":"sha512-izeTK6465dlsAkjZUL1AMLpIJPZ5ClD4XFDAWiq+r2B2mtF2ydUBjUPpE7KDF0QbC8M2neYC1Q8+GFXo/1tu2Q==","signatures":[{"sig":"MEYCIQCEJFN260dl8w67EB++3/UBq/HdwKHiEk6uTNe34cUqBgIhAMHk2h6zNrqp6wGCdB71QvSM5XgJp8elfgBp3Nh7/Rea","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkMzCRA9TVsSAnZWagAA5HoP/RdB3p3a/4KLo6lGa+LI\nf/Y2cd1EW674R+vwxg5UXguw3xqvMGQN++Ep/DQ/VRWmZIbpN/1aF0KefHQF\nA7n99Fdb0xwfLrvHast+CLYOoq6bUa7i+Zp/ug/AYjBtrVCThsryuMIEEf0f\nPMHYLe4zszNczPj+QwLp7wFreVv/h0NCy3HOYN0JYoionDHdTud2uUdvml0h\nybKMjMtEIKENVytC0IyL6VJlwgBGIfP7gzrzHI4p8KhQcUhjxIqe29PBymHw\nSv3sTfidVuP9rb9+XTPV84urua5NxGz8DzLeYD0N2aZL+O+/BYL2nSdOKkxN\nzLgMQEV6By/9Tj/wkttbjDEOSQEVw2E7a988ZR65FJ6woXx06+U4mJWxN9qw\nmXGQkqnoI7WmHDtHm0fXJ5ZFT16lpg+EANXg0brQ6fkvAlXSzyqZ/8kPtQkU\n8C5CAehZxGuhkabEm3BfvUfnBeaea6TRytWULglrP5Bzftj+i+TkWznFIoeF\nmRRZwi7dHVfxg9xIMQ2OWcxDye2i00LPpHzyQK1bQBDxgFJqiQyOtmZG2EfP\n2lgQlC5wMnc/BXdZy/Sz5A8kGobtOev/E6ideaDm8Jwj8nJvXPCGMS/0zqxO\nnryKANJu6qHPx/4vjJIKDymFuMZHcBJDd2hFX0jiUVXbFDUMYXEWbbeR3pLZ\nLIAj\r\n=ZyB2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"38a9d8f8bf46aca600cb4ba84272480ece6c67bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fb4ee66c0.0","@material/base":"8.0.0-canary.fb4ee66c0.0","@material/theme":"8.0.0-canary.fb4ee66c0.0","@material/ripple":"8.0.0-canary.fb4ee66c0.0","@material/typography":"8.0.0-canary.fb4ee66c0.0","@material/feature-targeting":"8.0.0-canary.fb4ee66c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.fb4ee66c0.0_1595556659056_0.3202608336191086","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/form-field","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.5511e0aeb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb34cef09e583e75d0cce53d68ab7f838b91af79","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.5511e0aeb.0.tgz","fileCount":34,"integrity":"sha512-uvFKnMDlz6azvDcdxxnyg542VQoaxuWCQgqMbCbF5ned02qxYsMkcjYuz+0uVhhHDE8/4zKggUXkVae4zzmE1w==","signatures":[{"sig":"MEUCIGVs0pp1yTY8wBI3kqXVwq4bfTJTxbEk82Id2n+1ITR8AiEAyUyZpiMdfR8Rx3wUIBuPH2YtB+MglsbRGR9c8c9PUIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxLfCRA9TVsSAnZWagAAzLoP/1v3szAUINDd9GVOTzVP\n8ci33EjwJjZBzUXKIumN7EO1l7JK+NLk32y7mt1svc9tE8RqPAy/0uu+Qip5\npz6jggtZaW+vsRiRbaB/F7OPsGmsj18IqdFVcrugXSRcBG23Z6BE/LhwFoXE\nwAcgucDvpnK6PEGhKeHk5GgRA5p9TKaLxAIsBUHvQkBXuy7jjiGYAeixCRgu\ngLQ7G5+WM5F1b/4QakKSgGTktuEFKm1FHkPYhveFgGOnsxTV1FjJsWl9jB1i\nBR64Z8lHx6bqLw54vR58vcXFbEBraPpfaK2WetF7Yd1QN2eYJwviwUPLIiuH\n80gTa+8PmR2EzH8S0tH8+lOX0q+BajXh4HbZTHy4ELjbf82jvRBRsgn+kRP0\n0uGqGk+iweEwpplGRmOEBU5y7NyO3yGbOAk8iG1aNClLRGn8aGGcIGFPNw6p\n5Z+8ob2jW5ORX33TXywMltgIaERUeMAzIruIW4cNv8PBNtF19Ys2yk4CD3wp\nr/A4g3lVOaAjGfAItxTkOahtSY59ogQZ0+4SY9YZfpAIeuWBwox1vZkRohGo\n3C0YmLveedZeQl16+y/pnLdAGAHa/7w9FW/Oo1uS1Qpb76uAtKJrDjhxlvU2\nQ4zwRyi17qLp/DCWTvqszDWYMbdl5WKCIilspa2KY7uniOiI2fsg12TJs4RL\nTjdM\r\n=Afk5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dc830dbf81ef9cb796c66b2d35b70355ca46a37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5511e0aeb.0","@material/base":"8.0.0-canary.5511e0aeb.0","@material/theme":"8.0.0-canary.5511e0aeb.0","@material/ripple":"8.0.0-canary.5511e0aeb.0","@material/typography":"8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"8.0.0-canary.5511e0aeb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.5511e0aeb.0_1595609823142_0.9807944825298791","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/form-field","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.8388a9bf6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f50853a2eb4f330b78fef5c94cc4c10f8a46264","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.8388a9bf6.0.tgz","fileCount":34,"integrity":"sha512-rCsBUeUxI+ng+fOeOYeomSjbK4ONQm+NlFxxZd440D04xD9qGG0NzwGrIJybch+E9aN9lYDwQlq1RbKt7KrAyg==","signatures":[{"sig":"MEYCIQDtq0A3X2aky39uf8kK1guopIcumqhEODaTdcYMnl0UHwIhAOYF9OHVnmlrnJ8wi0Fb39XTYNY8cV/oTr6q5HOpc3mK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0DsCRA9TVsSAnZWagAAACIP/1Zkqgu/3tMC1Z1Y7B53\nkn55JwEqiw62yeeDUtJlWNuLU3HfmikT08YSKGUOqNlo1fNeLrKafhNHs3mB\nJPPHwMYJWBytKgTdE3U4CG6PmrvTkuVL1TwRUJo/qgDUwWQ/6Bx5/1na8wB1\nFJueGSoB14FOovvxiL65GkORz4sXMZi3VkKZUXv3gxSClRochYncUI7rMMIo\nj9kdtEiTAVthJWN9Jj+ytgvJIfO6Ml3TGop8tPhOXgmdFRHStEgdw8oKk7OY\ntdXLlHE8eKXpEa7sHmyAhTuekSKHMVtE2OLWhtiwWOJLrrZQC5pXsWfgKyc+\nbqpL9PvlsRMTf1vkhLumTRnmw9kcXD3zEwf0QnjkC3YEGH2ZSah7Dl6TbnCh\nUWK8r1KV30asPp/8SSXIFpeYYxQAfvstU79uQn5QK1oqZq55V+ZaAJdFkMTG\n1s0Djm9v250qiNBPJ6b0xU4A2rqKdZMhV3Pw4ejRER8kt1u/kft67qa7lYPK\ngjkxBcn2jVUV0gEpeJz/TbFfaJ42OvWCASxRvE6TsWSFYJaZ+Yw7sINkIKSf\nHahCR/JNXVcAvyez0wttluQN9dLbQ5ubaJM+tylv4jxuL0B4CF6JEzFTUkYI\nB329P5/tbEbTRgBzOEBekHhjN6FPTx+70TYjae/K88Tek1yeYaCqbBnM/zEr\n240w\r\n=bVoL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f2188ad8c46b8f947761bceed0fcdfd08019e97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.8388a9bf6.0","@material/base":"8.0.0-canary.8388a9bf6.0","@material/theme":"8.0.0-canary.8388a9bf6.0","@material/ripple":"8.0.0-canary.8388a9bf6.0","@material/typography":"8.0.0-canary.8388a9bf6.0","@material/feature-targeting":"8.0.0-canary.8388a9bf6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.8388a9bf6.0_1595621611507_0.9264488725469975","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/form-field","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.ac405eae1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"994509bed388b31b3c9dba6adce180a8d22d77a5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.ac405eae1.0.tgz","fileCount":34,"integrity":"sha512-kE1Q5gYnFtKeDPybM1EWHwOjqJBjcuVclquVDU7fIJKIMGKSFyYLGwmBqgK7is2ANkxfrc4JnzQYwuAQK+Yv0A==","signatures":[{"sig":"MEQCIBPZ6du0PXi+xqAmMc7zc57pINIv/1FS0pMQHfc7wiu4AiA15vBpyOaZ7LWUo7/4yffnLVoMsL2TsIxhWAUc8SdxDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu2KCRA9TVsSAnZWagAAx1MP/3XIlqom5htFy0uG8xh6\ngvbjhhhpawaS8pdPKPdc+sSUT/ShUAtO9SA90Arzl6aSfet/ayx+upbvCVEL\n7VQKe7w7LEzqAGDDZBOs76eE+2S6sZHMRqJPa0mIX2kv60KaS35ntP843R5t\nI47slpfxt0NKwsf7Z1G2Kk/FxmNrmypDKohOLV3NvFZvrOPoOcI3KXMYn6Rz\n4/7EEUnuHUQ5OI/ovCgFnxEPyqfT76MLYNjLzHysmhtq3vhyBjKJaErcLoQ8\nmy5T1cRcTxzwUrrp+auHvnA647jZ5FdauHyMOzshRNzwU5nPWSHEr2eQ2T2L\n40wDI1wMCiHUT6Blp5JvTXwMGuINllWqg35tmVKwv6SSvgyRpfiKW5mJPwp1\nfF9R6D9vRKgGfnDJCKwYXiHRb+QuSIR1+8AN2TRPtGj/b/yyffuMtaX9a82A\neHvPse9polO/tLQRKI++U7nE1NfG5FAUCaiZGHy/oWxiXY+aU5ncydK9DvKf\nBRErtlqAQyyr75yeCMpA/47Oih9VV/GUkHKEE+7hIAFyJDt9WvnkWyfq5I6Q\nl3WnxvEc15qTl5pU15eM8GIl8ziV40W5uAC9xfEebwFBL0v7N/OHlZ+X1O7W\ntkcNV/y0too/ywUc02I5DUowv/NJdaeD89EzCWbSNXi+oJi53M4ylIyXW+dP\nZUQx\r\n=xlkn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c4f229736a36f17b97137adbdd4b59901eeac852","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ac405eae1.0","@material/base":"8.0.0-canary.ac405eae1.0","@material/theme":"8.0.0-canary.ac405eae1.0","@material/ripple":"8.0.0-canary.ac405eae1.0","@material/typography":"8.0.0-canary.ac405eae1.0","@material/feature-targeting":"8.0.0-canary.ac405eae1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.ac405eae1.0_1595862410330_0.20957907536771736","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/form-field","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.75553837c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f6d4a6fc7e23788edc84d76c42144bae037c1a7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.75553837c.0.tgz","fileCount":34,"integrity":"sha512-QxJhs4Helpz0zuEGgT7QSUSYhnO1FKhtTD281Nt2YgW6uezTmDaMCd+PfqQjkl77vedNlnktHJqQyeO8sdILTQ==","signatures":[{"sig":"MEQCIEQAR6cz7UQRDwW/gJ3fhKrS5c8ABiBNoi9UCojRfTbmAiAozMC3c3K5bcpVHUMSMICUkzoEVXyv0sbuk6S5mXIgRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu7sCRA9TVsSAnZWagAAbGIP+weiSMCLKtndOEDC0K7K\nFbLLHxEN0AccIvL/7cXyQ7MQyxomTaZosJWSzR6TnrOwJPusuRBsDNH0YGMp\nf98a934UxvbSKa0FS38xlHfwGo4SdivyOXlzSNtQW3bwS6JZZDCPZzYrd0G2\nkeiS5hNu0hixaCSA4X6vmzNdNWdreemlhBiqybzWKVeeR3QLBxVjt3ulZbl5\nL34zgnGpYiiSd/7MDWj7pIkZ/N2ENcEAeacVUVCxRBjvIXj6oxGk2noomaGk\nRinaVk6C3ayfzesqxz6yK/IaebLKSVtSdyBBjG6+tvaw3jmGHukwhF3medug\nYwuxbo+VrpoMPjo8coa2/GLL2I6EnTMCtDAlQqa+y2ST9r4uLq9aunwJ3xxb\nsDYqlvlx8tX2k4mT7qQ8NIUrvJCGZdA5V1d6JW4T/TILMebrnFg1jqXLmrIL\n2wlALewT0rHVk3W8j0by0jf8e/4vYsUMCB7SHQP5MUlIp/pt6OR9Gjh4yPmn\nQTJZCBSPs1oJzmlFDgPfHWXZ+xko11gkDkmL4fUPTW9nP5FtxjwkOn2AF+Ba\nujFzrgVj6n37fLsRIB3dTTcE5emULTLUJMbBzidr1mNtYrobDkP/PJwwlQmQ\n5/83SVa1F4+ksCi1QYgOpkmNP7A93oQnCm8xAF9RETXR+US12pYpK1HnWcCw\nOQ2w\r\n=+fWs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"18c0e52ebb63979ca614d6df13d96e2c1cc93216","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.75553837c.0","@material/base":"8.0.0-canary.75553837c.0","@material/theme":"8.0.0-canary.75553837c.0","@material/ripple":"8.0.0-canary.75553837c.0","@material/typography":"8.0.0-canary.75553837c.0","@material/feature-targeting":"8.0.0-canary.75553837c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.75553837c.0_1595862763616_0.5244037920741922","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/form-field","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.b96fbfc7a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"233e86b2a59fbd3520fe776ac913ce3c89f364bc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":34,"integrity":"sha512-uZwaKqVOrvZMeGApanWKrl9QG4oafnm184UJE7uxt5DyDMUdDig8dOBY9f4CZpwhoK12sG9Hp+H0AWL2htfpyg==","signatures":[{"sig":"MEUCIG1Zef4Nh72IXF+9B8uoeHitGAEdl1G+kms4tmldfb9lAiEAhWIZCzQXYmynYtKv1v+NuMKa8yOtBO4+6iGrYj1+Oyk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvTqCRA9TVsSAnZWagAA9soP/RC3uQjGRHjXkv8YmyHF\nPbcKAYbVkMDzymMmFjJw9E7JfCESTwwvBaZIyPnphHP/ngNuiF0Mm4IyNr2D\nYUBW52X/QGPxlwf2hafg0iwrUdCb31wZAdSaBNOtaNDYV/ckEzGHo20KjJyK\n1RG4brnODEfcwtMSvig60Zgl4zIfHLjxCbPJo20gznr7wJpZ5wajCglFauIc\n7aiBEWMBawC2/iaFUbsNYbD2YL6XNmzjYhIg2mFVg8pDuMZSPRFTGJRLa/qW\n7/xXnQ+M8kt8tGB5i1EkEPHOeS3tkqOz8mHjpyuaeBXe8pjTWkpFs7IM+pal\noDfCxlDr0JKUpUu4svAHLZ6sx7MVAIm4NULIoP2Sz4j+/l8A/0q4aaOvth34\ndMpWT9s8E7C8Jx32uWhDcm5ddmAHs8MbUlnezokIv1jeeVD6YhYsZrgc+Uc7\nM3nlC19uPhH9w8DymnZTjE3XWOwPgtdzXInwPMtu+qEpexKmpM4ri3eh2Igf\nKvH1VoezQ2xjSgtKMnsbue+MqJWZXnYCXtNUPUw2Tu8gXFIskhX2wVb71IsM\n+Rng8iH8lvBMNZrBZS43kfchZthyzljI4arfYIznm3+w/8Ciyunvv/BxL1Ht\ncqNjFoMW4kN5yefb462hZFixM4JsF7IMV7GCxqjmHbdCWLDj7GxUO3jvQcJg\n4JKp\r\n=MqIy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0e9c13ddacae3f3bc09bd4f168d276110fb5677e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b96fbfc7a.0","@material/base":"8.0.0-canary.b96fbfc7a.0","@material/theme":"8.0.0-canary.b96fbfc7a.0","@material/ripple":"8.0.0-canary.b96fbfc7a.0","@material/typography":"8.0.0-canary.b96fbfc7a.0","@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.b96fbfc7a.0_1595864297940_0.05586343917068404","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/form-field","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.61f1a8d85.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85d711106f07e93db7e0fa45e764cf7fec19962e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.61f1a8d85.0.tgz","fileCount":34,"integrity":"sha512-kqMwmRXRsVoafWPGH+Xh3d0tlCJM353wojVfAnCcXaGloHISDkkvjA8Dciy8bsbpr3oalrX3DcKZg/kTHNlmUw==","signatures":[{"sig":"MEYCIQD+VWNabxBBwKOmfo5TTdWebYJuso/wPlHyRycBpdf8MwIhALTfsW+oP5S5DQPIWBTiZqdMMaIW3lkJKqHuLb2FmGMI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvcICRA9TVsSAnZWagAA2D8P/idi8K4g31Pcx+h5TZvl\nOIRbKZb1AsX31JTBJ9aP/w5pXIx+u2y8skVEKTyK4GFAwO4s3480ja1nJdgd\nueGHFizo47AhA3oeVjxUuXtdOlOVV1BN+vlqJvU9ZXDEOBHy3uumJf17L9+o\n1ShDoOzRJx1OQdVRa9X4jddEdboMIAjAuvbGcy5mZ6RfRmOnslkwwr2FjstQ\nPan7VsPUNSHZWAYGd8iH8VI5v9/O3dibfPsPOC5+LkDfFhJnzXaQHpEnycxD\nLYvHk5XxCnVsERBVGc5MfheaYUUCPLc1My6gRkmt21yvBd6q39dJrmR9d/9Z\n71/MoRKUFmhJxRqaK+CLkSXkqJiOKHmRnD/QHD/wfQSFXZtxGwjofjY5RC+u\nvkL0/JIQcXTfuw+gUiAFp1OYbGCb1rHfHUcni4Bbc73iM7oUPqDTNz7oVIm+\nijGSHjW3bBHa7UCg9+eJFi3+wDzHPOgVce/rCE4Q3gO1PBaKVG3MC4kICqUa\nQWX00sOoyJsWE6qd1ndTkPW8AoKou7Xv4nsXgqX3+a7XcWHMjeKveL1SWxht\ngyaPiqqB7jnYQLcZT0apGZcj9blfZo9gjA/gcCjPHMaUW/jVw9HvC4LCsGpF\nvcYpm4lxQ7t6DS8fDA/47jy11WQt5SP2tzPgv0VPkRVCW6jXazO+AwujQGbj\nltJy\r\n=Rj7c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"71b0bdc987ed1b1b5ad827abc78149cd4efadb89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.61f1a8d85.0","@material/base":"8.0.0-canary.61f1a8d85.0","@material/theme":"8.0.0-canary.61f1a8d85.0","@material/ripple":"8.0.0-canary.61f1a8d85.0","@material/typography":"8.0.0-canary.61f1a8d85.0","@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.61f1a8d85.0_1595864839686_0.8978596177930618","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/form-field","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.81dc33377.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"196f0ceb49e060e1502bdb963a6440e3db2008ae","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.81dc33377.0.tgz","fileCount":34,"integrity":"sha512-1NQ/7ozrbCv6ogOE4NtUal3at8JuAK2w2oDcf4dU1Sax4xu6z3F4rfI0jic67FLMpJdmF3/bhKGoY8hzi+/avQ==","signatures":[{"sig":"MEUCIQDp5JlXG/xAjQZbRtY+d8scZE5K4CagZEDp1lNah4O5EwIgUpps7UDVat1Lr/YNXJLvPZYSNp+4dB8TLYp6npru5NY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvniCRA9TVsSAnZWagAA6uYQAJ5oDYQl53z1gzOkdxjR\nuAF/n9QDbpere5XyMpO6Yz/Ir05ZmElCMgz5dIb86a8phFPgW4dppoixykut\nLW6G+9qy0FymnbPRlLCmvuAo9ZA0g0YtcKZNqpyyAcU4UPUdTxzUOnfvkkcf\n3lFeVzPf5bbshPeRAasTyeZ76i6LP6AXCsfX7wgafyAgUwR8eX9JdQludVZR\nzRbCwF10g3bFYAB5DrjfUv02oFvQcI7RDBfKvmYZESS6wJ/lXRdHB95pd/hu\nfFTPQfOzfkYffPgyYHjp1gSdhOwQUgHA0/c0/q4Rn1/ueCtTWFZOySQuo8oh\nnyHMJ2NGyq4lymLALuzVg7s1gvbNAFqgfUwgHYBhVnhWTz9m2sjCoY0BzEGj\noB2XF6p8e8thmNSP79bxcMW7CoiFDOLMdfp5lQgmqM6I8rzJtmlr8I3GOU1e\nzoINUW+dVK9ERa4TWllcVd8FK4I5OunH2855tMloighMWF9AYai3bhnjqbN5\nTY+87wVVbp/99y5dWRc5VcX+ny1GOzQMYUaV265A+itYkvT/COj0nxI+UFzQ\no9nRWL7s9eQ8A8eO8W80w5X4UTIP5V+z/85qUCuh+yV6ZoMmMa2a8axp8WGI\nVrzcJD5NqZWXwmUNYCAtRaZ8PUHAANnNzljSePH24Qhdm48BKqf5+yisRWm7\nKAdy\r\n=t/yk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"14e4858d309a20ecb69620f07c8f427bda0821ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.81dc33377.0","@material/base":"8.0.0-canary.81dc33377.0","@material/theme":"8.0.0-canary.81dc33377.0","@material/ripple":"8.0.0-canary.81dc33377.0","@material/typography":"8.0.0-canary.81dc33377.0","@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.81dc33377.0_1595865570027_0.9748615115449539","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/form-field","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.ffd9ede58.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7856ef346b4876b57df96bba3b1d4241bab9b2a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.ffd9ede58.0.tgz","fileCount":34,"integrity":"sha512-XvDT7Ii7S9/wJ/v/NXUieVQnQggIUg31DKtMovKzNdwdzpBcXOQ//TVbBfkctTZ3QG34CP0fFVhMGYXXb7M1AQ==","signatures":[{"sig":"MEUCIQD07fT4AijiAvA2HcEiy0SbIlM0ULQzpOpXIGnAzITB3AIgQdoRM1OAFLbIkjdSNZfpH2QB4Rw3xraXm6TgX/Er4+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwGvCRA9TVsSAnZWagAAvG0P/icdmIU4xaE0C9oj5l8A\ngypv24BFw1wNPc/1VHo2AVucbFPljEx6lSRP8xiGnOHj5B/YgdWcHJX2/Yna\n/+QMvBs6TTBgAbi1Q2V2+WK3DyADLBrtxeOCkCnxxWr7CVW9MdX21ayx5x0n\nqpnTRwkK5PsLN5pFC6Xa/CXuD0okO6+AX86hEmeTiMAZhYo4y+HZmyMT8O1w\ns/VXCk8xHpAs7+mKyDaYzGjx2NhU2f46tVBXl7HhlevI8vh4By/sEj2rpfSO\nVGGEqTxgnxqDfNh1gJMNkOgXbajtImsWY+u2dMMawdQzNPid0cNYEfjNo5br\nS/ZG61mW/MaDgTXXFpagxRlqMEZmp9ptxJFOUv10T8cPymSoep+XhwPJoiUr\n5mpilhF/0WJo4wm5+zuIkCBkb488BDAZfNBJNsJgOH4OvE6sjPdyXOyITVqi\n40sakfPwOF0qG4fhcoUSYf9swN1c6yE8xSWUz6gGga4W5YJcxT5p3Bx9xgG0\nLluwzDzZfVnZFPwumHwR/od7etIl3/pZIOwUC/d+KXr+T9/WZbpTFeSclpdZ\nZOsu7GQC4j4Vrt+qcsHXY2BYYpEfrJT9c0dV+KGTKFFxwAP1wJmH3MbpJLFJ\n4CGLuzW141e1iSoIESAB/cGEJHG4N4UuZ7oIgnr0cT0YOhhJfP6uIc84C4tb\nukX0\r\n=9RvG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8a029ef9963cd4799ffbf7dd03908a696d110f7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ffd9ede58.0","@material/base":"8.0.0-canary.ffd9ede58.0","@material/theme":"8.0.0-canary.ffd9ede58.0","@material/ripple":"8.0.0-canary.ffd9ede58.0","@material/typography":"8.0.0-canary.ffd9ede58.0","@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.ffd9ede58.0_1595867566610_0.8048299195940123","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/form-field","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.52dc55acf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c53effc962b79f4901537971f024f9ddf7b7a77","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.52dc55acf.0.tgz","fileCount":34,"integrity":"sha512-YbtVPVt5cuxiSHsu/aVHGG8oxtMfgfnDGZ3DYnOuuJTp/WYEzlO65owXkykNLu2gBDzoelG9jAE9kmX4VbBm8w==","signatures":[{"sig":"MEUCIB4yYq+zg4SrmSPC6asBmMZIlAyqcF6HA6B0CLT7G/ybAiEAxCbnBlWERYWAE9JwcTCyMdRK26CxtMl79Z/S+11Vj8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwocCRA9TVsSAnZWagAAVFIP/2b9goSB2z+VjwXjgFJF\nTTbQT4vGp/Mi4XoYJS76T4JFfzISnz/KV6iCqVxbD4PlDCdjgnTrmtsld+Rg\nYc0IHIeXShduCJ+OnoXglg8WQpUWNiungNMjYrk4aBL74JtfUBW6sIz3rkua\nOitlu6Q3QYMi5UXh6aqEZ27Q4Lkc0OgAQZnfHVGVmFV52+mEGPm4exzSJjnU\n6Ch4zOjtye8FUwGvXgaodQbLfizGGtnkSX3C/XNPvdMgza/XpramlYahUWqz\nO6c9mYU6gKR1lLMqTUyRvXZ6peAGjs8AyZzI1pHsumXdsY2oFPUM27UL/gE9\nrGC/LXh8D+W2kQAEOz5SnRrCH0pTXHMHot8y84KzQASUmdTd/w7klf6Nzeyq\nT/QT8+evmmgxnGRRDTmbY4carDhrtHMEQCbUrjbLFerdmUZIQ4gy1fekj/GV\nxDOsF2IO1Awo2kwFhKlSNNQ0YBBG5MUPhDz7Op9rN0DvYh11z9d01TmBH/mw\nXqEfLHHvnB6Ye6bNC2gqrQPYJcZ6mSgJBZFw/fTtWy3zS0pBP/4feB/IQIGW\n9v3MhCy3FA74cZ2M6tWsLq0tb8ZogvPraEBnMtzT7qVml2J49dqhRQJFmRXc\nxX0UpFy2JWAX9NFTEu3YJ6S7C2h3PQbbHDWC/n5bkvdrAYk7p6/M7htO9GGY\nHGv6\r\n=KiG4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b5253c9af3b0721aeb0cd096ac48b4c113801757","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.52dc55acf.0","@material/base":"8.0.0-canary.52dc55acf.0","@material/theme":"8.0.0-canary.52dc55acf.0","@material/ripple":"8.0.0-canary.52dc55acf.0","@material/typography":"8.0.0-canary.52dc55acf.0","@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.52dc55acf.0_1595869724253_0.5495613938824224","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/form-field","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.d4274ff05.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b403f47c83eb575d3fb58f8de11452889dee9da0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.d4274ff05.0.tgz","fileCount":34,"integrity":"sha512-6OSqdsbQmBHXhiC1eDCJMIGmlG4AO2zC1qLD4lSv9ulFn0qOT277PqA2C2RGbRkkbxsb+sFOGY5UOO5hhG3w3w==","signatures":[{"sig":"MEUCIQCD/NXcOgU4v0xGajsCvEzWWFnKTzalw+gZ8cH7ULDLXQIgE8x+VZ06meaC+2dfKvOjNATuRZzaxZAZOvpU1cmcXAU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzBBCRA9TVsSAnZWagAAh3cP/A7rStW7suAueDSD5NFh\n7WCb3IMObJYkYECcTM6qQzFRbOKnxoZ+XCLfKEJ/eXfNuzWDJm/DvgavH2hH\ne4WbB1Lw//PCOi0rAKwfzEVBuD+Wq1HNcfccLnC70qYXz25Vd09gDxhvMhoA\ntoXKJGW0kJgSN3C9VR/UF8ZZv975vN1A7UGf0bXPZB94RQeZe6KJLAjkSQ6a\ndupkc+tCMv9s95rskt9532FJ+7tiz+JZVJC7rn4K9z5wmeN11uQWK7rfhzAT\nAoHi5/0/9b1l1bVr8m49j7d/nwg5Pi10IRaDaum8mpFDIFPlP6SXGK3oh5+c\nPcG0OgwoEDpme2jDVng0xNnoKQdQF13BIizWK9346bGo0dHgo9lLKh/wnCtm\nDRaH1Yw0emBbTiK8VUdAO9/bjwfJJKnPwPNCz2/vtUZEoJRELrFzesnyj5sO\np7KYqdMcy5/30ZD9b/8Eof0zFvBIUvOm92d21MezkrMvHBCfS8LNCv5Gga3S\nXNd/dlgNJEuc544uPzEEdQDQelAgaPbfd9fW4ZjdDr5O/lnN2Sb9/URprWbC\nLm/X3pZGJMn5nfj5ZWtryg4g6Od+0dS/jYCAZTX9CUnUk50/PjmXtbaCAmx2\nAZbGrXvkJpTXWqKIvtDiaQ1UG1RQ9NvFxctKvoJgKG82iOLQrDrqpPA+Icl4\nAx5j\r\n=3CqH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b4607e708cfd7069d540b1fd6042775c4599855e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d4274ff05.0","@material/base":"8.0.0-canary.d4274ff05.0","@material/theme":"8.0.0-canary.d4274ff05.0","@material/ripple":"8.0.0-canary.d4274ff05.0","@material/typography":"8.0.0-canary.d4274ff05.0","@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.d4274ff05.0_1595879488902_0.0005576614574684946","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/form-field","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.b82d0696d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d611c3e9726ab32845523823b481e9e54a0f9057","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.b82d0696d.0.tgz","fileCount":34,"integrity":"sha512-Ec/Gj9bMPd9e3IB6l2heQMNqA4GQRMFAcvT5Fj59zcju4KBGoK/QLJbb3YhDqnmPHIcGau1ClajtKnpc7a9EYA==","signatures":[{"sig":"MEQCIDXpqArPKu6lpqM3jP/wVSJlhMrjmuyhDw+TMtL4NN3cAiA2AtjU1CGkZlJMv1StTeZgfqsNlD2Puah/a3M7dG+8Lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzHaCRA9TVsSAnZWagAAIg4QAKDXCDwovh3k6wLgb2Wh\nNm//v+lcDqoeOdS+tx06jCp8CAzfADZ5vq7RJJHj53KzeLCnISdz/Wk8u0qc\n7loy649ZW8hm/dDlPRL8SvqTbwTRZVc4a1ek6dxqa7Dtsfi6rusadS20dJxt\nfY9vgoEr3ZFstiRTF0cEm01Udmtm4jHyhWSgUr+XEHwgSFpTg+7rCtMfpEQq\nCTZI1BhpsxHxOjAGcQTS3vnxab4Aj9XRqu3/x9XstKdmz6MfBdJ7obrgqD5v\nzmRKvNR7Oo+haNqZF2bsED+thlPCdAID/8yizajpqVL+JHFVvHYpHHhKoIBo\nHO+sfgWyvCMf8mQFu/Aev4yvaKFf7gMc3VJeEIFADKH5SUfmfJgxwTyLDWAQ\np2SBcrX4IU2sXWRv9qLcSzDfN3TlW3LnkczSc2qRp6pCyNOfhpW9aXKY3FMe\nojuIq8aUhLBBusmOWqo7a9QV0tqIUrjSpMXnbr4ANuUL22yW/how8mPOJSjj\nRBgzVSkHzHnMTGwic9ScBjpEmwtHKJWekdf7qG2hQCwIkl3y5oDbo450s3Rv\nH9qwWm3HH9RebnXkiW42Sx4ojcFhDufncChiRWJMWbZjqLO1tq/FZXa7wndI\njdtTU8rFhQJqAeizshLBhk2TcoyM1CAmkMQz0TcWxlzm5u9Z2r2wNXPdzP+f\nneDW\r\n=UH2c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"914e71226c9aee0625b5bd1fff56b887e3c924d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b82d0696d.0","@material/base":"8.0.0-canary.b82d0696d.0","@material/theme":"8.0.0-canary.b82d0696d.0","@material/ripple":"8.0.0-canary.b82d0696d.0","@material/typography":"8.0.0-canary.b82d0696d.0","@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.b82d0696d.0_1595879898345_0.6746223057256737","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/form-field","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.c2852000d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20b9b9fc62c752bc3542a6b52782c6a10293b363","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.c2852000d.0.tgz","fileCount":34,"integrity":"sha512-dfVrj0D5VGpvIYjslJOQaCXtI04ndy23bUdVRUme+W1GLho9dOyGUWBfCTuvEqWpAUzhgoS9cDKXefTQJmBw2Q==","signatures":[{"sig":"MEQCIFeXYEGlv2Ri8VCNoTg0x9YyzO50RkuQLvfM1cV7E4xxAiA8UHo9l5Hlt6nn0OUh2+YV0lMESYw6K4Hk06vE/90ahQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":181643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHz/7CRA9TVsSAnZWagAA8MgP+gJpY0v+VMWgTg69F8nV\nTMfluQp3yQJivTYoKR8WArquxCrCuU0XiBGaFqNLqHzJHj1Wt3NCIxpG2H2D\nSDumDgR5p22R27zMGAgIADomfODsExxiOiYgWDjYj+o+Ej4gV5UbSpP8aOkT\n09jUJdHa4AH6bF3YXwmtXxOePnUwyonyOZ1WQeNWIr5hBf9+Q7pKqxXCIFCr\niMfwb2Twy9j5p5LbBumlNNLrX9CGAKJIRTYCyvkRV8swKoK6Qlrtdy3UxmeD\noQXUIIEAM2KrS+rWg8hapjEjn0RJKAHsxwhVpaMEBpFpfKh3oT9TbsaOKxrV\nuEDL0ctG0tIN1MXU2eICt8lbsCDk8B3lrozlmtE8N+85sPowXDbDCx/8uJbj\ntc+CmKEWVHi6ufNO2iqYFdut/JrmXb8jpZBkSJNHISoqZPDhsumeUSvLxwBJ\nEErmSF6X51bF5sZlqLANIuzAO1xKJ5oZyeNHprfRL4sJwh7B/bLdX03yFpxC\nenz7i/kkTXToVuLc5A2dgJfH652pcJZPtT9BSrRBIySdvLMf2QXZFtEM6qie\nKVxD/yEswEpbSLKXUmVcsNbOwYRVMSEyNeySZBNol6H75Ww2DHs6qZ8YWQWN\nDxC1TUuCp8XgQx5NI2OFdkh4Htet7YdgwxUz4yybIFH8P9RRyvOEE3kTrAgg\nUulj\r\n=uInm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"53080ff99f83ab326fefffad16cd09e449e79f27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c2852000d.0","@material/base":"8.0.0-canary.c2852000d.0","@material/theme":"8.0.0-canary.c2852000d.0","@material/ripple":"8.0.0-canary.c2852000d.0","@material/typography":"8.0.0-canary.c2852000d.0","@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.c2852000d.0_1595883515493_0.27196766090480584","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/form-field","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.f86f83f54.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8caab4e95b07d8d0d8c55370f5fbfd118e2cdc6c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.f86f83f54.0.tgz","fileCount":34,"integrity":"sha512-DhPDDZ+1vt7305vWo0zlQA9kKAN2Z1lEgy3S51hSTBcT8TujVTHj6vBhHFL6WpIDt6I2bAyRZRllbTSHkLTmgw==","signatures":[{"sig":"MEUCIQDAbhZw0YH3jvhRIBcLdebqP7XjJhbmgceDB70av2XOKAIgUV7xjSsVFzqhRNDOikJ/Q9XMJga4PxD5rEs6HWBNt/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH00JCRA9TVsSAnZWagAANNMP/jnTc9o56jWZh3jP/+RQ\nHRVeQzjjoNBVw286Ktsmte+tnrUtwiDwWfc+9P0FWbRbj2wSP9TC8i8wjPjN\nMkrEjytN8wwaZgZr/fcroJmef31crI9byeGKQ0vYxEnGj5SBUZfzUPRdaDFj\nf58L7PRvng6qO+Ope38yNhKJ00xGnCtIFRj+m2zUJQNQAcZjOWQPG4jcQTRn\n/qoYVAJgtr5k/EirKQij4woCOG6j8Gp8o6EAIcDX4VhaWdjNQ9faXjKBef8M\nQiO8/j8dxybR3iY/Q8lXJGR3cZnFdIbc3BxQNcBK2PZ8EOck8x84NdkzHZuR\nbLigVIWiTt2Cpd7y/vJFzGqfmiqhtMSdpHEQ8C/x6Agkv+hSv5WbO4DBScf1\n08e76Z5KguC1CuLVLk2rhjq+31CesHAe5R6p01WBByM/pBzzWM0DmCOpC9jQ\nqrU1WJ1NykIUlLQRZnKWb4dLaV7GKCLcaXjv7qi1Mz6TPon8XhMg3nn6/Jr+\nD8yUq4UfKZC8Fd9xcIV1uBXcgsik6n6yhHH1Bn4vCBr1re6NXcuJ4jT0p5Ns\nFsSZPPjFECwafOUFSL/3G/nISsGE6RWATN2PhxmC+ve+4oezvceeaw2F7+Cs\nZ/zSDJSz11QIjsLv81qCMgETJbdpZlfXjvHk8GIpV5JB3/QVv8IPS4AO3kYX\n9Klr\r\n=Lzp/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3c8abc334934dd33ace7aec681868717a4e26d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f86f83f54.0","@material/base":"8.0.0-canary.f86f83f54.0","@material/theme":"8.0.0-canary.f86f83f54.0","@material/ripple":"8.0.0-canary.f86f83f54.0","@material/typography":"8.0.0-canary.f86f83f54.0","@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.f86f83f54.0_1595886857151_0.8121584883229702","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/form-field","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.41eb1684c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6df06db1d2411e9d0aba2be96268718bda387f9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.41eb1684c.0.tgz","fileCount":34,"integrity":"sha512-/yOQTAR+5AhByNZ6z7INo2sP9YOXdXwZ/PkM8BNmBDNS2VKtS7Q0peXP5+oVwXMSWv/SeF4PKQOs5BQmIQDszg==","signatures":[{"sig":"MEYCIQCcA01Ahb77Jsa87a9JUT+/rZc4yVBXhLfoJR4kfxmWvAIhAP/yUlNzA5QiCIfZWAvaZSfxRc2C1QuVT0vYkRyeu4LY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGVsCRA9TVsSAnZWagAAjNwP/jL9Vt2JgSYyNrQ6DK+j\nUXW5Xm9wfrO3L7GNjKt1n36WfIPppV40fih52/XdKxSbub10Qgo2SQy7NBNK\nXLSOzOFruzhwH/c9CjCO9C2TXjlahtHyUEvHufhiC9/zoTbhYJvNrjDSEJIq\nApw9qV5Vhnu7r+QrZb8e5Vq6KgkbfLLWnJIEJBFnTIFMUnyPxBVD6cn8893P\n2DeZHE1Pvym2sFcE/oPyaawuVNSPplXCY+5bibZ85bokjNWg8RiraJCUFhTR\nQCKMr4/qqKtXnr42CpQtiIuyvN0S129wxZEO7NnYu18VXJ3Ko4KlTuh2ccWr\n21AhZQsvRDcmp33nW/Q4DzKW4gqxDFOH3Isi93nZWzIm2cHdsQMR/vZAK7Fj\nWgPqwpcWbAH5pA8SfIz42QZFX20npOs4P6s+TnbZ/aCjZsRgRDpB6X4yqraB\n7zDzoFJDelVWhxApSSegPhJpEZeXs7GhUuxrpqpA7fdHACDv6OJZEtd8Kq8O\niOhUeLVEgCJtKpoUr/yAz3XP73Q4SyTdmh4Zkr4CKl+dVqKidvRBvWJbuYKF\nh/ZxX87MrfF/ltT50g5hO6sRs7MK8tw7PfjYv8uZ+Jf0a/tAC8FNmE2Lyxp5\n0NQNa8ObnOk8IoaPjviwmOEwpeVomorsaes+aWNmmQRY40YLqW+QishFszvI\n7J2+\r\n=ZfFM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ca556c545f0bd908ba57eb0e24e99d142cc05b1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.41eb1684c.0","@material/base":"8.0.0-canary.41eb1684c.0","@material/theme":"8.0.0-canary.41eb1684c.0","@material/ripple":"8.0.0-canary.41eb1684c.0","@material/typography":"8.0.0-canary.41eb1684c.0","@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.41eb1684c.0_1595958636443_0.33452992132160775","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/form-field","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.9e2f6c450.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"985e2c5499e3b8ab1da6e7505a80d2f885e3c421","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.9e2f6c450.0.tgz","fileCount":34,"integrity":"sha512-44GUctt54fqjN3kavBcYaMdfmomCDNiXRjymmdxtR3nNAnr/Cb7x7DDjMjvJ6r+t9XOSszeBip980q8ZH3JtDQ==","signatures":[{"sig":"MEYCIQCc7+vmcMeqkosrbSkI/RQETXI+n+XXuFhglgZaUk+KNwIhAOD0VwduCsqdaslAMNkVZcaK06QiBneYm/fAzPzc+97j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKkfCRA9TVsSAnZWagAAMloQAJOMCYKvRetjbws/uNgH\nU/CJH0wmr0S8+WzV6jpNi3x3VSJnJ5D4Fxp6dl5W9DwvjJ0HCnKMt9NuZOxW\nqv12aI5XV7ogpenDjwvxFNgPhZRyw+aXQwM+vR/n1Lc8A8rv+bbfkJ+OA1kS\n71Nxr6sY0nPxhR/eIUvNDTRuXL80ck6JBJ1SLdfauZi9i60NhEJM4pqJkSu+\neMk6Bvc7hxnlOcczBt0h++IBrhDRhFzBZXj+xr+M1lXUItKM5nvHAur1Ao25\ngXTZ67EmkF6zB2flBXXcYvKc1mE7fQeXnDSPxqI5Fjy7bdL1LjNrIWF/VfI3\nkFlgZFHxc4QMLV4PYkIWcr5Uv2IDr/JBr76bY6ufetg9IRtC5LVnhdSkQ1yP\nse+LIoNfbKVryThcwFtmjAhg4VsC8rx9AFqnrcmkukLsYOKRTq724m35f5kN\n4zJ07vIHSPDbNDbPJEma/dHMEy3YYOCs/h0fRlhicUWFn6VaKoYk7s4fXj93\nvI6RIeCY+a2gtpsoMFBUYMiieWtrf/5VXAGboSLDO2XibvzUqQ/EqOLMs0oJ\n0qx4p8G5wp3ADtky///LZzSVXt6tgOZrAjrTAVN3RWTZpB8KCTXAOgHkowIN\nQyp7dIDaHwGnXR17W0IBD56UTAL+iH4V9e+G7QCr8bGiWSoPioR4SqsrMVin\nfrqD\r\n=QTSx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"20a3870f861650ab884eeffe1d7657aa376a8ee0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9e2f6c450.0","@material/base":"8.0.0-canary.9e2f6c450.0","@material/theme":"8.0.0-canary.9e2f6c450.0","@material/ripple":"8.0.0-canary.9e2f6c450.0","@material/typography":"8.0.0-canary.9e2f6c450.0","@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.9e2f6c450.0_1595975966696_0.23457038861074708","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/form-field","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.e6950b55a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"684d079a8d8cf413789c87de869a5b0cc93bb3da","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.e6950b55a.0.tgz","fileCount":34,"integrity":"sha512-Y2B0STf+dHB+Ol6yufzr92RTpGRw3Bbm74PTosfs2xs7BHAAljeC9KWWsOkMkzRIrLtBYfRBtjIxKlH2ptwd0Q==","signatures":[{"sig":"MEUCIQDSoiC6d0kUPiqURrqqgteRsajuNbU1UBFWVtbTcWgCWQIgDi7sbiVL6kca5tcFfsCYXKKBZLeM06VEidhNQR/JdQI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKw6CRA9TVsSAnZWagAAXzQP/j7QKvF9hzdUyNJLHj0b\nGI43oEiJ2sO0XtGQu9VJYcYCMGvfYZPl7nWucfmLkZ1TMH3H6rTtveaWMYF+\nLZXuLy7KZfQgeM54vOgjhSTFV1Fwl5pn11q8Xo2YKlknKFZqT3eix3a1vzCL\nBsixjYXf5mkfzH4W83da19XL0da/vv81s3U99gWrrvmPuHDVI9l3IgmtN/Ch\nYy91xP4vpSPidl7iE3yQZ8/iF4vsX9S+qHoavtwPfRw1NiBOEHBIYQYTr9mV\nhjaYo8bWHtxpt0JG22lsgLX+AJ5SLJ8mEOKhtjq3ZBnPveRZF9INaiMEMY4f\nl0k7PSATOlpJBqLFqa+OblsaX2vhOfqjmUxpccQ+5A+BlZvyfkqAtSrlisGV\nXV7TOeqQG/u+L6v/B5y/aMhagHV8HWir+5tViWuuZH+GN7DOjV58hQt0HWQv\nv+J23u6roIrj9JKOevyBaVlF6sVOs4LLD6Fe8WsBHlKATCYtT2WYlpbGspbn\naxoTwCoe1ihCK7JEisOTE7U93J8Iqu1ji1RumAIBvarAgCM4Xz7//Wj2NPjh\ngDM4go2+g+DhVcuZI3bl2+v050aVZWiVcJvlhiuc0Pqivg/amfd0ojw2UNFk\n2a01DkKHJfyaYj6dglCzB2yjlY2EG+Xm8cKteVl+nFFKe8cLrWPOnUGpXMi+\nlBWH\r\n=pxKk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c71461d7d95f313de3fe5609fac67c2302432c36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e6950b55a.0","@material/base":"8.0.0-canary.e6950b55a.0","@material/theme":"8.0.0-canary.e6950b55a.0","@material/ripple":"8.0.0-canary.e6950b55a.0","@material/typography":"8.0.0-canary.e6950b55a.0","@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.e6950b55a.0_1595976762354_0.42576110742908857","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/form-field","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.5e51ee38e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7677522176e5d3301a1a0208d7df079e90e37cf","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.5e51ee38e.0.tgz","fileCount":34,"integrity":"sha512-euR0NbtkEJEIeRxvZ450PwDB0pnZkLDwMYlbS1xA3VPByLR6j6BI48UJIXmkwkA6ybVsQYvVDBd17kYMe4ho3w==","signatures":[{"sig":"MEQCIHar370acPS3t9P9y37ljYA67SrsSnlkRenNUpjU5RsUAiAHwxrQS7hfgxX6hZTgG/+4Xpx3UwLCgnbcE8eUB+9CUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILHBCRA9TVsSAnZWagAAvOkP/15/5CXrU0nsWdlp7Trf\nM2sWz8nI9QZ81tm6ahNH07bfbpMNmytNT2a/6gvJ4lbPB0C8uFDW5WchSB07\nAaLEkjFICpWaE4lCyFcSz7cpjAhDzNmS4wShWaZQeri0cxhV4QPj8Ay+BuAt\ny4e07J/vtMT5nwq4RzWCyqLD4qb4Kvh1MfuWK7L4hE7HlaAwDGVyU6XK0eQF\naQjveU6Tr4s2hVUYVfsdyDdp30G34tK/Req+t7qlb9sRB1GTnkqkUhf1R+MJ\n9WxDX41vjryyybOun/pn0yv3Ed3RFPxMI+IpQbS25su35yrNKrA/dtBAjgrr\nGth9JSZqV84/N82UVwnwO8NjFak+NN/0lMWjwLcahRPz+Ah1H+gm9bTATD2Z\nsYA3CFdTiiB5DlJPSjPdWpmQX+9bEZ9yBk4lijHVH+7G3cRRDWLAcPjpJQws\nJzN1U1KAMYU88zovbJZftF5PztOBs18lvQ8QuqJgrUQp90ZyDQWQYSbRtdEN\n6p1gIqx/q4mmJzmGoL8jfugfG0YnKBI1iHR3FLHwRBa7/BBvLMQzpi1MZj3O\n7jodDDfKlnpM2uU4UUe0Voxt7aPJWwQKd5MRZTyaFy0UFIKPVMdD+LXS0f8J\nYNH+CojcOypnJqyBNARMMKdGSzzpsIU3156+p8P0Bbkq6gHDdpmlZgG9b2h4\nXrcF\r\n=CWwe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a7ac25d06cd849dbb8b1620235e913c46f5d7849","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5e51ee38e.0","@material/base":"8.0.0-canary.5e51ee38e.0","@material/theme":"8.0.0-canary.5e51ee38e.0","@material/ripple":"8.0.0-canary.5e51ee38e.0","@material/typography":"8.0.0-canary.5e51ee38e.0","@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.5e51ee38e.0_1595978177297_0.9106698031791236","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/form-field","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.a3898ffcf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d7b53c081776866119c21f6838eb31fbb9e2855","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.a3898ffcf.0.tgz","fileCount":34,"integrity":"sha512-p+Qt4xbBq41Q3Cl9pkbRhAM6ipNKSFpph543baOcFZI2Hv8BsVUqIU3lH81LKM4lf76PijtoDHxbom3uMO7SpA==","signatures":[{"sig":"MEYCIQDCH3igwZlO6MrC4lfDJUduGBVxtUpEIIaJYMqJMxaDkwIhANQE+1iazKQdrtrDYMJI6v6hrRltAASvXHlDglcbN4wY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMSUCRA9TVsSAnZWagAAGUIP/jKJm/iWHRgydZe8CD0u\nD/B/mWUs0alvunjkEOtRAC7DM4wmCyDq2w+Y2A9eaDqLN+irMQl7XiF9kMlE\ne00Hv8fPso3IiwpTBCSPeR9+JJL0x3uc323QID6nVwy3DFDj0nqAQrouOrlL\nvHVtp8w1hQa9CQEV1hcOmpnXu8BaaOFveNDLilGM0IW88TidQqpVWusgZTWz\nLZOGGYDP6jrCDWc+mObUCmvPBxMIOBSKszHJteQrN4AdbV/ZmEVPSx5BGZBh\n9c4LTQ65LrpbS+F0i4SbPxquUEhzDRqxHjQdmJU/+Tgp4oBZOczyzmTKM8Ta\nM3SAijeRshanySbLHE6reEw+nmv1X1K5NnCMVA1Nmo2qo7rAyG0cKx2TD2Mw\nSvWUNAUhjo+mLsC+KjQ0QkbLOPWN3B6BP0h+yJhicXJfhn7f/I8bWok4/0vl\nD3H+pyvhMZtwo/21ClYrs9qSTHMqkU4w6hOiiIHmMIzJ3amuNxIDb5I65y7j\nSbDG6+t1pHJQQ/D39acd4vMWDVGcF20LnGcMUumM/WdvLXOd0hca8VpKDBDv\nMacgtoEMzpeRS0PzfY3/2pKKg95mS8g+L2odVj+er7Zuy4UOOROVqL/fO/rN\nIBhZC/7IiWIsuDkX7hj0O5EVCd4FsNn8AgMxowtx+HfpZyPhbnleZATh6V1o\nNRer\r\n=y/Yi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4382580dcbfc3da31d5107a92231aa87122f3f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a3898ffcf.0","@material/base":"8.0.0-canary.a3898ffcf.0","@material/theme":"8.0.0-canary.a3898ffcf.0","@material/ripple":"8.0.0-canary.a3898ffcf.0","@material/typography":"8.0.0-canary.a3898ffcf.0","@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.a3898ffcf.0_1595982996193_0.8151674736594365","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/form-field","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.bc5cc6c96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e51e9c06bd50a4c59a2099ca3b0865480513e557","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":34,"integrity":"sha512-SEhFL5Qf+2DDhDfBdHuvdA69aWrrjCVcCtuydk7CD/5ICiHJt9YPLZGFDxLUgexhrl7sGi1WEgQiAlwhzyT9Lg==","signatures":[{"sig":"MEQCIFg24PLuXgM6jvI75KSeCoeNjNgjzeaAuxeVWi+QUJG1AiAmDpNaSW2x2e1RW66FGBKgdqfgaSgwXQ0vc/LItEDPqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMeWCRA9TVsSAnZWagAAg40QAIyZtkISyz6cuADB3QD5\noebdz/jgDXxpVilZjEufouRG4SkDk+HEKY+sJ5xbb97pwbsh6qETxbm7znQY\nr3W+bAj49en1vgnym3k7WkuaF3ELwVdN7FfcS+9QNHx64EzrYTWBD5qgxXj9\neUzTwtdE1jsQWtHZhMSKMSJxKKdKv2saxR4ZbNyMjJd0efejRMIuLuFwNzN6\ntS7bPbbQrFKC0mlMj+a2auDKBqb1q/lCdY53+1A2pGH1+4TtGidCFizBssEE\n5bIBKswAHiRnCJTkQ6iYbfr2a0yQu8K+9E6BS0vjh01OWRDyMWMtEDNsb3xq\nbtbIdsB7JRB1kkii//SEBs2Ai9vOYstHJ4U1YvMr0Bygl8R8hCnGOdrVQCnR\n8qnietBWZ8HjnT21vZo57bnuJGWFhgh4mmlrCN7MjgWy7hs+IE88jGkoNXm4\nW7E9gjjE/DJGmATCMp2tBntrYgdmEvpuNwdzkLPxU0Pc2zCyCisyzG4eX2kn\nDZyDOwr6TrcKaP51eEoTjjzqITRAlyKMtdCjv0mk2gUAFf/iNQzWkwpA4/fy\nh8d8ZLw6E2U7EZoIGLsXv0oE5eXd2uCfRn/AabjBO17qvlwiG3vgjzxD/i6P\nnyEw6/jOPyjn2CKJsQzaF7wDeG0XqP0WH8a/IUJ1fAk0xBY4vc1miIsl9QsE\n2mKp\r\n=RcVK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ef5b32f85df29f3c19f5f6960f0f2e58025012da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bc5cc6c96.0","@material/base":"8.0.0-canary.bc5cc6c96.0","@material/theme":"8.0.0-canary.bc5cc6c96.0","@material/ripple":"8.0.0-canary.bc5cc6c96.0","@material/typography":"8.0.0-canary.bc5cc6c96.0","@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.bc5cc6c96.0_1595983766066_0.9248468329274646","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/form-field","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.9bdeaf928.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a07a675f3054c435cbb2ce1661e241399ec4d29f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.9bdeaf928.0.tgz","fileCount":34,"integrity":"sha512-Dt/85NwjexvbCjJY27cXImJYZKIXQKY55pcFW89ziY8ejDTEd7duMvh2eAoBQwEHrro+2fs4qs1xTe3xqMA70A==","signatures":[{"sig":"MEYCIQCkYKpIX2XdxLFjcck1NeaJwtoFOu+tIkx7qDR/6DaIlAIhAKHezmHsT2JquFDQKdpRqfnYL7HH/f1ZHeFQbVFrgB/E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM73CRA9TVsSAnZWagAAd5EP/08e/vGpa4tQ+PCjQ+Vl\nGjbINi7X7AEchzvcfywRJhtgcxluFY5zT5M5tOeBwoUReplnQlFXwIbbtdkc\nrZ1+X6tbBXcWJDraFeCW6Wi0Qzyc6bj9B/bssA6vdFKFa4syYHnOTRephwMU\n3F654D/UUGh5NnykdtQXncFZZuuRQKi/5IT/90zKZbfqJ79iBYRAEVoSKVO/\nMr2ubNv/xY5CcbDGYYorVFQPRNcvha6mazWXE4xFgn+h9jROHxiz7JRWXkcn\noRc2D9SVeIkuvwxzRh8GGpunQDf8Dc1CO2kg2agcXLjketND43iV+ORCPNgg\nw/7Y98RJzQeVeQg8mARS2uQFOQqC2ICFzmXkNiaPlEEyTnnuGYOMDPkmkaiF\nT+TnqrCXy4QvTQ7dN/OLTLKpN8960D/ufAaydKzGnG4H2/z0nZOnwwNo1RZt\n4KycrPpftBKVWjoE8nNJJWBlNz/QRCA5WTqt1P98mCqkdtG57heEJTkZ62/+\n+zDQBEwF1Y9uXNmrr9LS0UcgGdPwB2fB2M94M2LfTyQUwEPyKwixxDYMzKbh\n14GJWfUpv8w8IyB363lUnqaO/IUmKKc4oSG4d94olEG526Z9ETuotfpO26pt\nnc67LAfeloQ0O/JXU28q2ea/OgoAKTmlOaifq5CTi6AD3s0eaAATNPlaCi28\nw8R8\r\n=9y27\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0fd3de7a6a462365d56e724dcf32c2c1890f553c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9bdeaf928.0","@material/base":"8.0.0-canary.9bdeaf928.0","@material/theme":"8.0.0-canary.9bdeaf928.0","@material/ripple":"8.0.0-canary.9bdeaf928.0","@material/typography":"8.0.0-canary.9bdeaf928.0","@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.9bdeaf928.0_1595985654953_0.013736952035994898","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/form-field","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.fde2c1f9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23f3c43cb8dc0d0fa49044c3327454412faf3697","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":34,"integrity":"sha512-B/bWmOzocVikwxFGgLhakrJd+mBHgdVgXK6BpmqNhSsgeCIcYbHLxRseris4f95jhGDJUyD+VsmSSkxE+Pvi4w==","signatures":[{"sig":"MEYCIQC6rSye1Bb2w05P2H3yEcPmppVZt1JErxBcGgVAF8YTFQIhAJql2+HT/kBKaSsbM6v/LzqlD/O7W7clJrLZc2YPphJo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINJPCRA9TVsSAnZWagAA/NIP/0BxlTrlzM3NuBlXSfeD\ncO26Tnx8Q12ttBkHcQWMZlvoTlf0OMDxI661xpCPEuMVlwfscb5pgLdKKrzy\n/gwKmAxS5MStj3f2LXACsHRHNQUGOyMhpqSbe3j4uvMUhfXJ69oL5cAZdNZD\nrFnp2DKKzSqS34KigDrVemiVrbnfTyWfZi8S92a+V4qWnBeFruXHcNqcZqgY\nCq+jrAd9NGtPLS4jF4Zs2W1FD+wHOSYrfJaCNdYYCLvYTVG8PYOMho7g+A/h\nJiyJNH8dF+ey+mOfieOKkinEk/aetKVhAeSkmlvtL8I3xhsefhPqrbkz8RDF\nfy+xY85n6RwBbAwaEAuNU6TzXwhEpPsPBFGv+H+6sjZVaaXCuhbh1DQnH2Kq\n0N2dlmCbpSHz6QEB9fU/vKasyn8EOMDZyd+b3sSnywloGVAb22g2NR8NU6dX\nDdjcHVNOsi2OVL8XlycySZWPppqmtiRHtICF1fp+b91HL//J0w86oSJino/R\nLsXpXGbsEkGaqwh24BOuR2Gdjfw4kmDF5ga0HVqApHN95gvWsTQcdnU4Jbyr\nVtyppGQZg3dQINXJNhZzqZzQhxFpJ8VRLxKoOB+vF2fyeDUnB5T1SSs7I24C\np0DXItNmA2h7oNSOontM791guoxDuL/gsTpYCkSkKJdvaRRYEd4SBuRE/ECx\n6+gK\r\n=pzOx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f2de51610533bd781edd8339c8555a3c03546e3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fde2c1f9d.0","@material/base":"8.0.0-canary.fde2c1f9d.0","@material/theme":"8.0.0-canary.fde2c1f9d.0","@material/ripple":"8.0.0-canary.fde2c1f9d.0","@material/typography":"8.0.0-canary.fde2c1f9d.0","@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.fde2c1f9d.0_1595986511087_0.5626429118573797","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/form-field","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.6b3876d5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86abf892ba564c4ffee7d7526949e43ad2d095fb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.6b3876d5d.0.tgz","fileCount":34,"integrity":"sha512-RpINtiVa+S6OvqZVg9gpizvqOeXhhAwMRMxIxWeB7EO2vjKCRy06q6Gs+OUwNseA0V9fmUJ9gIIuUaTvwEX//A==","signatures":[{"sig":"MEYCIQCj0j7aNKnvPdCkj7vMJLxdD7Jhg5ggyqsUAIVKKT13vQIhAMlugQW5ZjQMNmaPiqxC2KHtwOPDlG5CFLDBXCRAg0oM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINM2CRA9TVsSAnZWagAApsoQAKPMfB1WYda+WOtDa9AJ\ns6hjvsfR6iJ0H8Hl2G2jwSVF/K9plGNwdLqEuIO+IFIPjlxQHv8zB8xRWZMU\nXRipEUY4aNYZrJfcybQRHigTOgOQRMGuRVAP1bRR6uNi2QPwQU2O7yjjTnx4\nIgO2fm+Ds06Vpf2P35l7el+pfhatPKzmQKhqvnBXTO7ILsmlAKm7DMnAWvQh\nu5KaZXgWr00wMRa5yZsK5G8JDOAU2GNyW7uXMq7e8FKjGdecKrK4ogShQKoV\nv+Yg/PO/JbwK0ZEQXoOJjHgHFRvEYbrGwLOMrN8CBT4Q9e9YRdchz3YxyAax\n5gN7hCqqa8Njss7nP1eq6RTnWvtjTIhxNrZzQNFCwNXikyon2CeikqpdZByO\nyQdWjL5epkEoaNXkB5HAIShP1TRoF2XE7RBUq2n6A6FYsDHwAFoYquD/GQJa\nOhJ1lCdd2mPJP+/FSDZgLIxWsLgdzRhKyf98cep89BL7u/X8jYGVp8v/ILzH\nJW4N2AKRkJL3VPi3OhNxzu3u/Bo4esmO3fdV3Z2VKQyPnMPzDaJ13eAA9HNL\nm4JrNxNigJ2Go4C1PY4uvRQfPeDF/RGOKR10lOagoFbipgEHH0XQzu0J5SSt\nTYHmMzuzCvdqPPBmwz200fXs8D4Uas4dCYYPKSJSsi4Pz3FO9KRVv+CPKA0j\nP/Um\r\n=XfRF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3559342f661baeb39f2e70f1172040aba07dbc1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6b3876d5d.0","@material/base":"8.0.0-canary.6b3876d5d.0","@material/theme":"8.0.0-canary.6b3876d5d.0","@material/ripple":"8.0.0-canary.6b3876d5d.0","@material/typography":"8.0.0-canary.6b3876d5d.0","@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.6b3876d5d.0_1595986742142_0.7957915164277709","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/form-field","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.30ce17873.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96335182f89e6694fa0d873e2f78fcd5345b01f1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.30ce17873.0.tgz","fileCount":34,"integrity":"sha512-G9RPd7IYSiRMMbquPubfETxsFZKbF/ehl3K9LEF3asPnex5ph8xu/5AJVe09XOSUqe41WJt/aUOUzvGp+F0GSw==","signatures":[{"sig":"MEQCIGBxUZzrld8cvdQhFWyOReFByUtveCtz5ixbDb31CdWaAiAqhuxHxiWBYVrDNRJHipUFsjhzXeMa5Saksm2ijCRzwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa6XCRA9TVsSAnZWagAAgeAP/0XInCm1JpWsDb5kAFMu\np9ecbnf2QNFHdHypDrqx8BoPDFMeDSMMzneGwhStPS34mPKZsSXy5ul1GH0y\n7AjwqZJvRi0gwEyP7kwKWkO82sOeML68vKFJ0fdcob4FZB65kik62556s6Kz\nX2Uaqybcvyx98bPrsl7NwCGWuxIuFStmHhuof4VJ7ew66M4xQb2BUK2LXLmE\nqcMrlpHFoA+e67N0guLQ3VUVrvQKpul/NhHTtmvFKfM04Wn9m2lnlAVzlV4c\nwBtH2eW6A9ZmSI/+6hGoueTnhv6G0Y1h5xTyc6w1sySFjRHdXyRvUzOOXYeD\nlpSB97YWEoJQMn2qYpaihY3/dbI56Li0dR7Xd7xs4KQV1GJ+Q1dMDMIjALYU\nipnaSYS1OVvj8k9r/+L32s5tMRjEWrkMlobKwuPbN00kakCl53871O4x2lFL\n0BI9XBv5rpG2q4t86RIwUzLUY7brRR8mKxlicgYdN12VUKn6YpNEuUNgkGqe\nYf2maq6v42QvG1lyJb5CuqdN0YYbVfVFvIGTh5ZCeN+O704z/fN2bSv458T4\n62f+/1vUfwq7EW8dVn/ooPjoHRy3UX6X7ZUweQNYMw8ftMS+rSK9PRYg/UvD\nx6sqwT/3t2HbiBSAuATvJ2UKPzR2lLWOubBgfS7+FViZz9h2S8vZ5mwj0DzW\n2qTy\r\n=ecyB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"88fa0309b6185f09fffdbd61d0c3e16f53c2530d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.30ce17873.0","@material/base":"8.0.0-canary.30ce17873.0","@material/theme":"8.0.0-canary.30ce17873.0","@material/ripple":"8.0.0-canary.30ce17873.0","@material/typography":"8.0.0-canary.30ce17873.0","@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.30ce17873.0_1596042902534_0.16351854943619126","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/form-field","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.f6bb43bf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07265a7f9f52ea25380872f3f89c383ad1621e9a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":34,"integrity":"sha512-9qMES36dQPOUMUfxeNkp/ssq9cgv8FmZzkaJzCIbJXIM9oLLZDu9BdpEt4l0rqOp+s1V3sgYciPhg0TMQ+9LHw==","signatures":[{"sig":"MEUCID7Llm1tIp9bMSWxozVRvh/Ocod2faFcKRXjMyd2ulbNAiEA46HYuXW/Awxq/MoNrZ3ATeEr4ZvstBa3zL3QJ/brNB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb8lCRA9TVsSAnZWagAAlXcQAJz+6Rl9X0XjwlNag9CF\nwWar02Sh5uH/jT9wZi3FAy20JRVstW1YQCNOIVJZ6UfB74V6+nVUd7ZfWFvz\n2o1bVhL3+GRw88GIuG97QYVydRz68Y0GlndWbxj+YNV3MKXdSeUwK8v30eHx\n/LBsavljkZrW/iKlsPMfHy3ahemhgZYcCC99OmoH92HC+75QQeeeh+bhDYdd\n1GUJsEJM+2iI2msQ8Pdl31thYCKO9IUt2h2NJzpnfm2jrCNUKY3HXcWJdX4P\nxsnrgvu5ma6WjgisxUP/soONFaKlid+NnBeu4cC92jLXCYWLq8iA3fJcGd6F\nog1074f1ITb0ZoshYM0VqLJZXoo4RSAv78NhPQXHoBrQI1OonzT8JPElkGQd\nZj8XBIcNyLe1erp7vEyqlQYkCKSFx+9BGblsAMvX6x2dP71MvsqM8SLOjcBk\nMiMbfL2jXOKUImZemmhKUHUQTr08Hmai8GRGV2xuwB5lQXYZQ0JJhEhRUOE9\n307gb9chkvJ6oLWUxIJnCEJjelob0HFbCVUVYstVT/+iiu+TA6lHn4IQxDgV\ndXj+FwgeP6LUn9ureG64X+45lV7rfza6Bqjrl6JN1EiI5ynCAQBuE2lGrY/J\ncEfp9aKwvWKNmQdcfqSVYwSs7pEsp9eI2ibNvuDvvJ0czt3SuoeMtPAe9QuV\nTUaf\r\n=viwk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d511f86ad9ca4460730b732c04ab497fd558d515","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f6bb43bf0.0","@material/base":"8.0.0-canary.f6bb43bf0.0","@material/theme":"8.0.0-canary.f6bb43bf0.0","@material/ripple":"8.0.0-canary.f6bb43bf0.0","@material/typography":"8.0.0-canary.f6bb43bf0.0","@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.f6bb43bf0.0_1596047141339_0.8172487125970822","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/form-field","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.6af75f6ab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"820ead1d70e1217dd3dc7f2e655b52f53dccaf70","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.6af75f6ab.0.tgz","fileCount":34,"integrity":"sha512-l7q+vXrejYqb193NcUgwD+Aczoif5P9Iz+ZWe8Gt9lxd3p9FirAk4HT/hwtCTK3OhXGhblA/dFE+mTBIaWVEqw==","signatures":[{"sig":"MEUCIDgIQJ8j69A94SGNoPgWFLiSlotMsp0ShzRl9Jide205AiEA45U157tTCh0d6/NoDe3alxSxgXopmWVcwVAvueWGMS4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg3fCRA9TVsSAnZWagAAd/wQAJEiFF68zVRX0ch6epvI\n/SKcJFnBY+6eqiwgLYWEFVx7IuQDEbf/UK1G+VvnAYVvhNyZGNYPUEeqbYSx\nHkl8gPo2+SDALUGUyRVX6LLzDj7o0cQnyGYZFH2UYVt4en52kERaf/QyvCub\nVaFZuMfp4bdoUCfxgAMUHxWej8WtRcvg6pKLNwQHW2oYzRmKOTlPR0IpGbg7\nVdhS5zwW07IXLODKFyQEoT/FReG7qMYpbQrm0KgQRK1tepxpc5kClt0IY/ZF\nIMhtejqG0GyyKItTIcp/wv6go7hsTT5L8SG2HXh03UQ1AakIEWlf+FeY982p\nkPIxfp7P2y+M6ZnApzUt0itKQClD/lc6fU84AXwlld3cXoHwvWEpj6G0xk8T\nqst7u0nFTCI09B2l3MEYS3++P0pBvlLYCvq2bKrXiVip++DVhZOVqwG/d8jr\ngX0J4M8m1/stInwl5C+uN3cvamcudB0dqXLj6QM1jQ2HHdpbnpkmX7AUzmEn\ny2XTbas3CcLcRfemR9Wljh5OmD4KA0McwGlccWTy/HlbV9evbIQYTcl+XIfK\n+KRDwsKHX8UxJn4pqxOODqdV0CVb84zFLYjelVIUtjrif95uIT80McIExfK1\nM674gpJQ2rCDmuLejfszH/7eg4+VD/Y2D/R8gV/QvdCu+ru6ZzT8wCG51B7A\n/LMv\r\n=Dg71\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"44ee60f895715b8f7c0a7da67637babfd33452cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6af75f6ab.0","@material/base":"8.0.0-canary.6af75f6ab.0","@material/theme":"8.0.0-canary.6af75f6ab.0","@material/ripple":"8.0.0-canary.6af75f6ab.0","@material/typography":"8.0.0-canary.6af75f6ab.0","@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.6af75f6ab.0_1596067295393_0.9799464343990103","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/form-field","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.42d7a65aa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24030f7dcdbc456adc524ffdd1ebe094bc2d2c6d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.42d7a65aa.0.tgz","fileCount":34,"integrity":"sha512-lsjHmEZ+hs1uSLXe++77L+rvNhp4ib5RhAoycXfVpCHqxGq3ER4K2+c8jgQFIpYFeO5uEor9cAikZVO1mB8Few==","signatures":[{"sig":"MEUCICX9dUdG41gl45XWkIa94Y0Zs/nZEhPsSLAwjNUFZfsMAiEAn9PnW54ZP6DRLSu45LjlrtwBFHEBMauGkQsjDW+e8x8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg/+CRA9TVsSAnZWagAATzYQAI2lyYcRoWzWGqsTF+Je\nLE6jXGhNCtuW18zCCOkpDGioVA6zPxxzksnfeedny0M2orUxgcyMApIFfxOm\nZiHGH2myD5O0p3FKbwazJ1GykBBHtyEoNCc5aiAsmNcTatsrXyvCjZob3126\naE2fHEtkgBjVAiPxRTF3aC8J0FUJIPaPvvkJ4YvzH3Cx1D9TdvtPXs3vJfDe\n/sAcY52oo1Vcf/cFjMqA06y19H2iD+AovbNkki/bITRkZ+C44Qx3itANuydC\nkG1XZKHqcw+hoLZs+wsA5SX+jy+kKkIywZkMzL/4HMy0QndMkxS5qn0rrU0c\nHIItEgYDqwqXVchw6aVXtxKR0hK7q2ta/SyuY6LTeo+ET9mADxXxSc8YN0NZ\ndAohZB0bkD9NvHyz1EUf+Mc3sIYjyMxBqQMT5S3E+qVSLwEzA5nrcrH+Q2Gt\nQnjvLbRjRcG9lWVmQxYMdx+N4u1DrXsyfKe7aeoQV4xhdIclMyiy2A0X/Bfm\nGOwFrNXX3SvrLHPULFd6F4RMUfwr4waRe3obNxPT1gI/afhYY2juYotLAvbV\nWFswKf7lKNzXbxjHWfHLrTcgtsFSDoduLZ+NysvVRN8QRoTUFbFuR2Sb9CLf\n48bXWwpt+2ZtPCs+ZcQKqigwNN0EVwNgn6NXi2kltB5nPsA9+2mJ7t37ShLe\nqEKn\r\n=dJuy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b6645573c0460e7bc8187d1a21ef306b674e1017","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.42d7a65aa.0","@material/base":"8.0.0-canary.42d7a65aa.0","@material/theme":"8.0.0-canary.42d7a65aa.0","@material/ripple":"8.0.0-canary.42d7a65aa.0","@material/typography":"8.0.0-canary.42d7a65aa.0","@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.42d7a65aa.0_1596067838220_0.4331044714709549","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/form-field","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.85abdabb7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce1f542bf46d7aa2ab3f6b8b70295bb084eafc40","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.85abdabb7.0.tgz","fileCount":34,"integrity":"sha512-s1FKudMJYINCE3PE3ri1zIwW9Mvgq5FvVtNu+hh8eaCdxKFgh0ZLbflyQypXZ+LMKY99Swp/L+UemHVPSWYJGA==","signatures":[{"sig":"MEQCIEdLERoVlCfCEPOjNscqvRw1yJAaB6HPsRRM9SNBZgixAiA90T7jlpIlg0aWmT2QUkT1izptx/6D91IWiHkvY5qxdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhEkCRA9TVsSAnZWagAAwPoQAI22pRBPFIM4EKQ+EG5o\nI+cDOYwVlwn4gsw4csT3eCU1NnhWbA09WMLIK5uUJ54R3lyiSUC9+NQoomfZ\nQLFBKJJWoZDNdi7QS56Lzwsqk3uo93TVS1hskJwSXQ4SPDhPszo/52B4Qb/z\nxNTwUi59XwWDpKAUZvdRsaa+0dwcqgnQqwJcZj8qn/tkiKRUnhn4ggUCIWp7\nOy+v/EB8uuuYWCuJZOo0RBlFN299Se51gGOElVeVo6eU/oqW4inJdM/CjjPJ\ndoobAdrPOW2e83y+vRb4ZrBufSu88Hz5LktOA9VROtk8YcoT7mIORkrpY/no\nKbG60rUa+dhnxHyxnfq5E/oKLWlgJ8mF3WRZ9rZGQPBB36FfwCJ9Z7tORdXN\n0OXKVFIfTtiADrHo5bqzPShx5eXCleezEkhMo6dqIWQm5KEmOqFCsx80oiLE\nJqtr1wdWz6r9at2atFhjqbP33yCEqSerQTEx3wxEpymG6Wl1RCgLekq8GzTb\n+NAE4PghpnHUZgFT8xWgw3S7+mVzGBY60CKajE3ifgzeQL+3KuxnIKQS+Ihp\nL881+SAbWE1rqmCMSg9NoG7mzr+M7YXbBZj4I2yLBF4ViVFejUw270viUtih\n+r7SCrxOIkj/ktnhm4hAqWjuZLidtylgTx6z3fNsLfm4Mo5xnwHXsv1+iEG7\nScp+\r\n=itmQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4686052ff6039efa085c0d360393374ff4b2143c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.85abdabb7.0","@material/base":"8.0.0-canary.85abdabb7.0","@material/theme":"8.0.0-canary.85abdabb7.0","@material/ripple":"8.0.0-canary.85abdabb7.0","@material/typography":"8.0.0-canary.85abdabb7.0","@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.85abdabb7.0_1596068131706_0.09020325083620229","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/form-field","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.49fb20ca3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eeb0db3712e10e9de071a5b71193ec8fbbf79d35","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.49fb20ca3.0.tgz","fileCount":34,"integrity":"sha512-t4IKXzcrAFCb0CN1Rdyo5k5KbeycHTMHzt3CQel/9lc65Aie4k1P8DkwxylJR13CXZ54+k3/yAR17XbeJgQW0w==","signatures":[{"sig":"MEUCIQDJ/KyckXvpVScp7dPbeIpHZpu9CF0nk2nDukui3ba+VAIgIubkzk8YbzWqTfRQZABhOFJ502RlFrr5GKtw3fobOjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiIWCRA9TVsSAnZWagAAdy0P/37JHtg4LvGPdWamkjWJ\nJw37Vw8fyg9Jown33i9eTMwx4SEq7tS4XVm1NnhVenkg69q/fzEU8AKfC/c4\nM3B0Mu1OvNVQPMJhtaPMk1fNlSrCYK9FwgQMw957CVfUm1p7Yk8qRoyQNS1E\nzlpmwttYRMYBcLU0lKQ68XZDAa/H9Wm1bYuxUEbDtOGNz6aiOt5dYxFrrs5B\nd1FYwbDEmmOQ5t6wIf40hW+qN/mWrS7zEtVnXPLT8vLp1YLcgKtSjJquCn1L\nZU4+TGasJTFw6KY1dlX4XW9bO9swvcPeFdec1AYDYJPhYieKpGaw1AwtNayg\nO/TSk0uzSAb+NQ2VD2p87Um8P7H9UWp3O6OEdo7C3d86nrv2X6cLVyOrmhKR\ny9+EfHVTI95e+JS4QVDjve4DXEMjZLPghe5XnfvIUiRJBFg9ZJk/HAU7PC/5\nthDkIZ8RqA8nCTnBrV12ES+xCutO3rX66FUtNItTW3azQOOZpFt4Vt/Pcg3c\nCQRnbmgX/oUnGkC2LZY2Giv6J42tMmvqbYAVyTi6Eq9ee03FKQ8QRHSKPpZv\nAyfVG+y95Ab3na67iHsJ/Hd2XbbGHZolsZrXRgtEqZjMNiMfCq8qdFoQwTk+\nUy9QLT51cdV1ig+UtsUrJLCeAy0e2uVIextsPnSiUSnaJwRMkpxM49fZkZJa\n+ysd\r\n=+HR3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9c66ae7fdf6570d9cf334102b5004c5a04b628fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.49fb20ca3.0","@material/base":"8.0.0-canary.49fb20ca3.0","@material/theme":"8.0.0-canary.49fb20ca3.0","@material/ripple":"8.0.0-canary.49fb20ca3.0","@material/typography":"8.0.0-canary.49fb20ca3.0","@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.49fb20ca3.0_1596072470250_0.5420283876500958","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/form-field","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.962d4abbb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d509cea33ceae7a07720560bed3fabf903a8c53f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.962d4abbb.0.tgz","fileCount":34,"integrity":"sha512-64Zm0VSMu7TdSj8jbyTZFYZdJHCUv0fGDyjhamQsrp1t92cxbeFOgKiGkor9A4XwP9hTGR0Lh24iKae6Cow5hA==","signatures":[{"sig":"MEUCIQCRTuckDXzUAkv07Avg8f3dFqVL46N9nZ4M5pl8obq19wIgE2fvjYO7g5GW13K4YCiLKIVo/Zj8mqolgS0B86x4JZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvDzCRA9TVsSAnZWagAAnsIP/jpHb5TjbwYGeVlJB3dI\nEAqdkcYEf9iBHNvmhVrmvRPaHsp2fwK59rtbp9nH5/5CZF6kFa80/XA9LhyV\n+ix2udJL0AFWh6ETATQ0a6l/WECpa27bSyrp560NYlyNixjh62ig0s++7Zw3\nLIVM+4EiCqALwRRNI3UljzLVfWGnfsdD4y+HMCCtTtMBJW8+ANnjfAHK8GvW\nd5su6ru0AFpkxqlyTzTEMCR25Uu29HTkpR4WmHf1KopRgabNLZQy2+L6ObYd\n3fa5EQZR+6VV7q6YqgdjPVD7CQWF7U97MCqwGpYdO3xs7+GJQERw0BhaKbLG\njjIH3hJpMw1EOkcDl4OiXUisYNevscD/4qX21zREIKLo7+fv2oHmBcA6Dawd\nzaQgKaZxwI/sXgkRfVTHytuKKYrG+CeXbb0qSIIDlUaxW0r7hurKiumpPs9d\nVG836n/nHhaf5jM/Z67XQPFUkg9+YWSxvpvywcPEjsPgqQdju8goEvSwcjFZ\n7okr43yb7XOUJ0bxeWEUP1Rl9qebbFFvSXP3twlcyI8RZsQFwmKn6PBp7ayh\n+JAyR3tuI1+aff4NBwnOWhbGLhacggVfqI6CaVIcinXBYi/rrQaNnWfOdOZf\nfZvIjyQ2nUQ1WiTFaUeCDEhmvwJJ9kCpREwGXHAA5C3Fo3tjjctj+toZq9Ya\nKaIw\r\n=BNst\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d373d2867180ff5f61fc4d7afb88a8825cb5cc9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.962d4abbb.0","@material/base":"8.0.0-canary.962d4abbb.0","@material/theme":"8.0.0-canary.962d4abbb.0","@material/ripple":"8.0.0-canary.962d4abbb.0","@material/typography":"8.0.0-canary.962d4abbb.0","@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.962d4abbb.0_1596125427132_0.9369885555037376","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/form-field","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.2fcee40cb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afd461f61b234c8374fef962472b79b9b7221f5f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.2fcee40cb.0.tgz","fileCount":34,"integrity":"sha512-nMGBCYPhXx/a0qJXS+cctTPX41ifILu29NPRK8yE1BbAkjk9k0A6gaMEFIYTfPXJSKDGHIksKLnterwDbws/Fg==","signatures":[{"sig":"MEUCIEOR1l2jWx/hZUCUAUTm+rXcQYnVhtaG91kPEoFRe7YEAiEAnUHl7JXv4UtsttDNqOG6mpGFYTmSPeMbqKk03cL4VyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwGpCRA9TVsSAnZWagAARTAQAJnOnlxsR9Y9bD8suksA\nch8cjtTkdZIkHTNL7acUfKWlorJtBVzH7w+zh0rRZzVNpZT4bZeFP6DuAw3F\ns+S144ZOXIgsgXp6KLds6cVeNH7tQtOBLeMuCUcDlQdjSltOmMF01tCQvQBu\nBd7frMPeM55cJPlAJv3neh1ozfNEtH1tUhEdfeqNFntd1wOsjxkKecBc5h0i\nHV6K8eolneETsmzOIWcvd5cYsBbRUFBEb1ctD1DVQofDCN8G/xwo9nnVksh5\n65I7fzvgjpefAH5gYaqP22dYkwJmhzjPhe49dzMqvvUH2RnYGVyf0FTjj4r9\nVV9iVqs1PcuOmr4bsNJnyP5zI1i9JD4Ho5Gjkp98FlbgJp8mXGOVHVI8guDh\nOFLsgnEPSgDjHJb43Xq1LpuwGNwNYcms/bPx/YVctbLxiRQoAoSBXKoeczNO\n366l1yKAV3MM7maWGp3zeft4pvt+WeJF/WuHcEH8kgZLWl43CSX/t/LawsRI\nAh0UCxbc3Q195NPzKzBT7SW5LIshT0oQuTFmbYIhybKhy0hYayxO2/ojNcrS\n3AgxyMF4+XRxYNOCWJkMXn6K5FnXJ0d4bBFr+m50/0O52St179jBNnLu7NMc\npMt80i4PfMuL2mB4WnxpsK0wwrFPxlSZJFRteIond5SlhJ+W+rZ2XvwaGjFL\nre4s\r\n=RrJF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f769a8a60e9cefb9e0e6306a96914e8e4b4c0c90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2fcee40cb.0","@material/base":"8.0.0-canary.2fcee40cb.0","@material/theme":"8.0.0-canary.2fcee40cb.0","@material/ripple":"8.0.0-canary.2fcee40cb.0","@material/typography":"8.0.0-canary.2fcee40cb.0","@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.2fcee40cb.0_1596129704858_0.610756559811642","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/form-field","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.bd5987f5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56c971360cb274e61a0be74f472a3dba9a750a55","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.bd5987f5a.0.tgz","fileCount":34,"integrity":"sha512-Sn1fPcU6kOVTRB/G0pVgmN2GVXAyQwUezIFHKCb2lcJAPDH1p9831LKB10yCXH5e3/fTXNnIaXdCo9LjkGj7UA==","signatures":[{"sig":"MEUCIQDbI/RNZp4ylYLMmFp1RP6KVh8eLX6Pnb8ORmd50B+RPQIgJ3ZnuBtaqjNsA/PyPLfNHHorm0X526b4TncI0KH/P1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwduCRA9TVsSAnZWagAAEj4P/2t33MhJSOb83QGaoMFd\nYUX3vMPtCSxs91qXkFQkDXoa7GSn+PICxOCWDNklsnnRKyIVgTOjp23BtNbb\ni91826v0uds4kkEMvkmOsO1JA9Pl1lwiPTrDFHOVat4pIrP/76+7AX9eBHS/\nHD/bUSYbPeEwbCSMUiFdSjYohKyZJPBc+gFs2oj0JBugL0k+OJNj+awg37iD\nA4wUCWFej5KqXzNc9WYPAm9uayNzgqJ/p+6Ee+Ym5QauuQmzIzpsCbN4KnRh\nM2uCplVSKs7QI+uGJ5YKjYlD8cMR+KrglBntA8lH9pOMyjANqJ4lqRWIIZmG\nhTLV/sy/uuV0jf2c8I4Scya2W6ux5kGGpxSLoe5qO3IFD6il7ikz48w0DKZR\n3Jq9p3xbxwrJcN/o/Ud4nQnJPS7ZD9hwL0nh6MlwKZOLCFzeR5OIkmEp7ml7\n1pNp2oFD1p1cd/htQ9pVdzomSpeCQGW0nKbbnhYtpCT9t97ucsv85rUs3JWc\nYB+56V8Gili7biUxi6GCGwfuHEGAuvmyEmc6JeYRNwhLoOX1tunLh573rxn+\nIMkQffNr+/jYBqveUJRRfJ6hsGF569zEOt3tjIyF4tU9NyQjZcsJhVIgJaQR\n3odR5uRCD9fllZE5qtCDbHXikYP9qyKidowR3V5CSkpNkRYvfpeSCNcVHbjL\nN4ei\r\n=4J0H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7825c698a6686a8ea967272c1f150363b3845900","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bd5987f5a.0","@material/base":"8.0.0-canary.bd5987f5a.0","@material/theme":"8.0.0-canary.bd5987f5a.0","@material/ripple":"8.0.0-canary.bd5987f5a.0","@material/typography":"8.0.0-canary.bd5987f5a.0","@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.bd5987f5a.0_1596131181490_0.10588363623144659","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/form-field","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.005e86a9b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0be83f1b9c3ecb9a6e7fd8d304469ee77a6476b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.005e86a9b.0.tgz","fileCount":34,"integrity":"sha512-eXTV8pPI7wCgxkRt+SjLS9aUHThR/uk+QNdavUz17XH9IiVL3+HathIxF9z840DvrXgtqNIniCei1NzWv+R2ag==","signatures":[{"sig":"MEUCIQDuLoV1lHxcOOfst9BzusQk76YpixvqJZy0bbeE51KoGgIgUFQ43bKO/9h4u+e2aqwGRWFOt4JdFA042g/WcwDKtgg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwqsCRA9TVsSAnZWagAA6nQP/2bG3ItEu1upbb23Zs/R\n4W3MwQQfzu7AxvYWqKs1qqcbt7xUeOapbnbaVqvKzaslErlYQUxme8CZ7tN7\nHJW+zR25N0OKYgygenLeFwxQRkutQJVb9ELg9tXSyKzQ6G7fEIVyaweZbmIR\nniRJUzbjlpUZN4cBxEBGsB0h0aZ1Laf+8a134qNnWummh7F2cMOgZj3r/eMO\n/0yMUsQLqkvji054+gnP6HJ8AF+nfQUuZl4KZk7RXjrE972q4UgaSnkAkhcs\npV3B9b+8Rbqx4jYgWyZ9NwBZ6laLrDhViX4Paie4cgUNJNVzJUCHGNKvQyCN\nTnU+USkOkAYeXX5c+dLUwjz3F7DTygufsQUpMTrkpSNcHyQNHSPHao2+JFWO\nu8JY+DKa5fKmRAe8kudWlxd3bDL7TI1k3xAO0zNTy3+vW8LGNEUPLTD1d+xF\nKwZ7d1O96XxawT/fcDmNFfNxgyWMrkaNZpkmyJy0qLRz/u1nTon6WEcv0WO6\n3n3/pQvr2Jw5xweW/WgIr9Ae//j3P7h0WatRyLNGcSIZAvrQyDYj2VlpNOPR\n7TfsdydW+jUH5GMqxg7D+F/C1j08JntIQxHGmpune7xgJlmsHkutC3/EebQa\n38iz3GiIcUKJ5sBh8FrLmiEulDWgdUwmPQzqSYUsMeVmCsUTjAk4CPmBorIv\nV1fs\r\n=PnEY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1c429f861ddbb35ec8588ea55cb1845296ab0218","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.005e86a9b.0","@material/base":"8.0.0-canary.005e86a9b.0","@material/theme":"8.0.0-canary.005e86a9b.0","@material/ripple":"8.0.0-canary.005e86a9b.0","@material/typography":"8.0.0-canary.005e86a9b.0","@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.005e86a9b.0_1596132011676_0.7813142711051331","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/form-field","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.e309c7c68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3f944bd3aa9091c7eeb584833a1eb021f6f8daa","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.e309c7c68.0.tgz","fileCount":34,"integrity":"sha512-rh7lE2S2DvjT5HfwBOatRL5NgB/JQJTk67r/NrLa4rHn7A+ym8wFJISZQtbjPB6mbdz8qiFnr6VjnibkBBa84g==","signatures":[{"sig":"MEYCIQDXU3ImFHkSBEVT2KX3OQaos6hBcEzm7+x9GZKREHw/1AIhALWXV5P2vAbr1uwOzncyGam/zKh0SENQF/gI8bdEcjW8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwzJCRA9TVsSAnZWagAAHMUP/R1HnFmSlD0QwIyMog/D\nlH7ih6eRlY0clWnsyZy7/MzFxyXcrEvYGW4dnRNz7r0oKwkzD62CyvemZcOz\n9Gx/GoWNn4pklbYt6m54FZDaaZAUIwz4R+yx/5UKyeLMIcZ35DS2dHQ/3NKv\nGzi/fm5O+P5cwV8xoNkPWAE5ohB/ZHeRoyndVCasOubBEg/LYUI2yxLvlQzN\nE21hySAZTY5b2zwqrYIVS1SklTB8iUXGw4KPgASWfQwyxyOXgaSuW/3hP7Qb\nMYK0EWGHVp7/Fibn6o6Ji6eX8+VKRu4NysDw4LRnkYakOdeRY/TLWVAz47vu\n7YJ0QQbzMdzNg0Fpxi4LJ4ECq7wTUbw6JWfc9N0uUNeRADVJdxe/l8iuJOfV\nnc07dC/TY058hcua1h26P5bQS/Vsx6mOYenVJV4/nGA2FaFlbfbQmPanxGhO\ncKKEoAKRpSKxRUmC62IekJ/UzA5J2U6+Gv4x/I4ohRzFbFfWHuJRn/AjShRu\ncv01QZ5vThgidQgBQtHmYoknQ+A5nLQYUC9ODTtQN77Zw4OsnK42W66ol6SX\nu349489/LIopN9pSOVvFU71kPPXvRzibU/96HyKoFeGTyja2HfgFcYBG4T+J\nVj1tYH23WPZFuaw7Vo158A4lq0H0+yR0qPZcJtMMO5hFwtUSljsrFkDhpx37\nXNqS\r\n=f539\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3ea460933f859061781daca3ae127802388c28bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e309c7c68.0","@material/base":"8.0.0-canary.e309c7c68.0","@material/theme":"8.0.0-canary.e309c7c68.0","@material/ripple":"8.0.0-canary.e309c7c68.0","@material/typography":"8.0.0-canary.e309c7c68.0","@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.e309c7c68.0_1596132553324_0.4878038453526399","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/form-field","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.935a51cc0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13807601bbf4ab4d1dde04c31a63fe5f19336e79","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.935a51cc0.0.tgz","fileCount":34,"integrity":"sha512-0N5IBMhO7+Mid9j/rKHL8hJEip7R6Pb3+0WRVbFTfbaIt2GxcCqf5oZxq3Rlh2SCEFF/nF1unhNL+Q7rShkJQQ==","signatures":[{"sig":"MEQCIASzM26KY+yZKm7EBWbmCjAd8RdwEaqk2yoJTKJaOKFYAiBfkRa93iEXOgD3howER/yCKUYtWTkptdjClQOOwBbsRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw90CRA9TVsSAnZWagAAtOgP/jLUPaG72nW0Q9tH32Rx\nOP/XMmxGwKUfJhJeD1IGH37/4lUeoLmwOhh1BmGbdchCGV26bP58Hr66Um9r\n4VmOrxToII7D/3/bzob2E911U3kTWtWj2rQmgSwQcxau6Gt9UQ9+/t/hZMB7\nF2TvzH5YA1aybdlLVMrjrZZmm7L2OC3rXtR70UJBicTxJ+pmxiGTsWNVmcJR\nTsjIioZ+ghv1tqecOqo8j65v0kmGM88ciS4nkYUzh/UcNo4vWBcZtlWz9Pbm\nQIQ9HOtRjjU5a5kgluuxWKeYHqBJJtANdnt1NaKuwSXgVXpPxiQoXqozumbK\nkS3wRobhdpseEhKCk+YRmlkVr269iyxoAfDf8QxU8taawMs0jeSlU+zWYlPM\nDRQkw5/KDd8sjbFYDD56PV8Kj4Kj9LyGEV74ruagB3BEkm7N7ni6Wpypp+Tm\nSMVoWLpbb/RqSwt2fng9ivdM1d6TD9HmNGlkjWTbVWP9QlAFIMPLFjr2b003\nF9EAhgqj7naCnPrzhL1qHGeSeXWedNnZ3Q3djz+wJ3JnQTmR1KcFxpseO8g+\n4483tXT0WC2dSriP5yIcyYhxWElUFK0SWO3HW01NS+BoWvifXTimKsRXeqEZ\nHB8Vbws4Inw7Tq/ZLoVam/u+VWiMnnjPHsyX91zEHyhUsOk7ddwlzE54KjA6\nm41j\r\n=u8zH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"79622070723d97d5c4052839435f92189e8fb6e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.935a51cc0.0","@material/base":"8.0.0-canary.935a51cc0.0","@material/theme":"8.0.0-canary.935a51cc0.0","@material/ripple":"8.0.0-canary.935a51cc0.0","@material/typography":"8.0.0-canary.935a51cc0.0","@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.935a51cc0.0_1596133236428_0.986961796914035","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/form-field","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.74839da7b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"084a051aa22bc7ff56242739f4354596c160c9ac","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.74839da7b.0.tgz","fileCount":34,"integrity":"sha512-XIIJLdpg9ggyc8vf0ysJWDVKeJkLyVpY8QrbmktQ2WIU/jcqAk0OvJwauy9a50fm5mw5xJaD0KXN6OQ4DBDzRQ==","signatures":[{"sig":"MEQCIB6oIPB+ec4fNqFL65q7JzYvNBMrEAOBSEqH/2QqupR9AiAGJw4xXeDj+7CfZn74Al2byWatfRTNnrAuo31oxYbrEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxILCRA9TVsSAnZWagAAwYQP/28wi5nAY/USQUAtQVFh\nzbT1RtWTvNceYZc3iMV5WIW17NXRAb0cYN4RtPCfgscLAn8neXyEQZjYZcOU\nMsizh9Xp+pbwJKezZHcXyrpGmqPtX240V4t5D6aOvgQ7ByoT+eCwN3B8kVNp\nD0PhXjNZrznoIps3Ib6U61L83nQdOT6i2kALbm23SBdPEBhtzapHE6gsmUuO\nHtxYSv+FkRtSyJiHG6ljvKG4tqp+YjYem9/7vyDOPHufu2129Lml/co4uVh6\nFe7oVUWJlJTwSNHd3Bzf7mFyixb37gVq/bnADuiyqyB70QCu5KwgMlK6RFM9\nAO85WGdEPeQ7Mxsv91A1xbfxuVJhiZXfx3Pj01FL34D8vPI2KHsA49QdRydb\nRFUQIvpBwmUq+sDjRqLM0WjLHsMgcnNiJKFzdzDYMWnGp5IG6P/IFVeUh9/m\nII1JMu5uLNLvA4IhZdOr9nTxvH1qG2gR/6PoE14HAFdxALzFbJpF3sNRZygd\nuwa86QOpLvfbFKKH3YDut+bMRUlHCC+PiEoF899m8PW5aT0hvjAIXfDyOz9B\nfqOCXyjnh8QZlMoHezBFMZfCcwiDUDhr1cCWXyKsqx10bZQ0NemsmMUeOJbC\n02bkeT5ii6GiAyovjAUadhJq9TYGF7fptkYGH8TT4fuXuneYlfMlwccbSVmv\n0hR+\r\n=Xw1f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ad186768bb65467a86f70e827e74fee089e25811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.74839da7b.0","@material/base":"8.0.0-canary.74839da7b.0","@material/theme":"8.0.0-canary.74839da7b.0","@material/ripple":"8.0.0-canary.74839da7b.0","@material/typography":"8.0.0-canary.74839da7b.0","@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.74839da7b.0_1596133898539_0.07014441901522339","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/form-field","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.f041a48c9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa96fd80a761b6188249b46248020ecccde3e6a3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.f041a48c9.0.tgz","fileCount":34,"integrity":"sha512-Wk+gv5nwHN/JYV5B4gonOcjWFqryHc0Cyl5HJGyaD9K6agQ7eJAfcyTfg3XYROfuAQ10GlPFQDtCeDT4DAFBNQ==","signatures":[{"sig":"MEUCIQCq4YUHU3lVOhFhWv0Ugp8SxjzM9/dc6nwVrlVjWjt5rgIgSZx7Li7d61AwtmqbMGVF0iPFTkK+QOK7kpN6KL9RnqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1DkCRA9TVsSAnZWagAAO5QP/Ah8htgLJfJgjPT9xEnh\nLlrCt12znRtmwmH8in7dkXe7foGsCLprPnpWJM1Ve66ppJuqkNlnFHPqS3uN\nqILOtjskIaZ7q73R1mw230vl7lcmcSQBCGZrKwvC72xIDqPwvHFkrNp43ITU\nl5jgBifTq1FD+/sIJosGk4OK8WQtxCx1VWa9Umt/7JPyfN0nTRY9R3qNWE3Y\nc2lolFc400ZJQD23/ryJwOqVvEV6DIEFIw+K6VKNIhiRvzAQowbVvtdRi17M\nST699LUiypMtkxeGSYH0RBKVr87/8RU9UWA26oSM0VkEbcuNyWfHpBd1dq8w\nv130eZrf6DnJUsbtCtsOJbobKBHl9K8vwFQHIqz72OUz/QYK3l3mCpkonKLj\nJptdzXN2JuR7w2k8G74kjKM/gv4Wrf+g9GQn/kwUT3SRnRHqcfbIZzfHed8Y\nliUIhBn/UEv5s9y42pYkxFMmMwFyQDGLlZm3aFAX/z+Sq+vhnRm6uYNPwDx7\nKvKoRcRx27URrNUrKXz0HI1TeLQMHVlPAcDourT2bfcJjoILqyv0OF8bug8P\nl2FU5GqtkRzkoa/03EqcBFGSImc2RjudtVZEuXaePBhgtwCWGzaMhTJQRdGk\nDf8UR15HopeTrOqJYIfj2kHiQMiHnRcpG7OMDEm7itoScWyh35SKvv9wnXkR\nf2F/\r\n=g2wq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e37611a41628785b7c1266cd53abdd9da0208c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f041a48c9.0","@material/base":"8.0.0-canary.f041a48c9.0","@material/theme":"8.0.0-canary.f041a48c9.0","@material/ripple":"8.0.0-canary.f041a48c9.0","@material/typography":"8.0.0-canary.f041a48c9.0","@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.f041a48c9.0_1596149988053_0.6619963392077493","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/form-field","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.fbb1381e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c5e6b701872827d320f3b4060bfbc6c449f216e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.fbb1381e1.0.tgz","fileCount":34,"integrity":"sha512-OoU8zraXV7fD1FQbqMQIpMR0+5gh9xv2msfMe9QB05JxAEOk9rP6wF3OmxSxGVByGaYSXGncrIwRlwpbMq6wTA==","signatures":[{"sig":"MEUCIQCvmKIaHw1zy5w5RKJiplaA7Bj6u0qwXuWIMn0TTKdWIQIgZkkjD/1ScdTqUpNdT/3ZDsljVdcVFQJd9ksntsoF84M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD3QCRA9TVsSAnZWagAAep4P/Rk9DBkS2trzekWCNb3B\n9VQvo+ELP4TcxMVYUuwAj1jWVFnJFEukobLTPUwdVkfoCdyBV8CeaezAON1L\n27Mw1DlKas6Wi72axWCw9oTKdUTgioMrqSQYOKRyePBVFEreEbDjOKuus4NN\n9fggjcDLnC/7StI3kUOgJfQuqU/BjvE+S21zrt56FefwkCIobELJWcBNKGWE\nmqFK5/fvBpEqaNW3YqPccCDN1i4Dx7FRRGBYjgacojF8qA/oX8Fny0SQNWeM\nURj6ldqPOt2w7UVjOcL+FGT4aejdRSYibbkQjxUhu2Pky+5MPnQsnQvz18RV\nIZixu4ct2nsNjn1Yq9hu+uq7MI/DWlHTGj/bnpknLG/7Eq//uDDLFhYmcBml\nO6gWpnT0BmpIZv07z+xjgQDkMr8L/BWEU2kNqUZqmeOARZI2EqEKdCk/i7bw\nv395NR251H/yJjoGNVB/lh5ueXVAFMndOWBZfZ6kSQdvIhtZv9q9aJoQuY59\nS6576UyB1qfO7BjZdwEXVQ/TCiJ+EGwUIK0kfR3up6LVIC+hJKkL/aaKY+df\n+b6CGCIm5fT6bWzq6io8FjtDApWLmhHxz3M6HCpnUHHyBTyktQbsXAIvMnwK\nCxHkryHLc8j74d0BRAdp7UnUz2cjlaq1Ip8/IPcP6UlKBAi6qanT3/hBkuTN\n5M0G\r\n=KMxe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7c42a890f9b5f1bce3c7986f37f806066e6e30bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fbb1381e1.0","@material/base":"8.0.0-canary.fbb1381e1.0","@material/theme":"8.0.0-canary.fbb1381e1.0","@material/ripple":"8.0.0-canary.fbb1381e1.0","@material/typography":"8.0.0-canary.fbb1381e1.0","@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.fbb1381e1.0_1596210639952_0.13834413885011276","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/form-field","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.7f61d5785.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55fd041c8994c9f2499d72884873def3f0fa7d9c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.7f61d5785.0.tgz","fileCount":34,"integrity":"sha512-sgvt7roWOYYn0SF16lV1csdoc+a3qpARG44eSo0GQatg7DDGJn0cXDN9DIVVpvWQnUbPwT0vBfMKfPQzBAfsfQ==","signatures":[{"sig":"MEQCIBoRcl7R6aPK3VD4wJ8Jeq5uhqLo5ouRRgmkFSbqyZRwAiBqlYxZuf1m8nKK73SMn5LJINTDE24urokaoj11lbRvhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFOECRA9TVsSAnZWagAAwt0P/A3wvHXmnwbN7gPx8Z8c\n6YQI04yjQun9EaoZtjeTeX3mII5yviwTUswbSEDlnVknrWkWHj4dVnPuyoio\ncY41iK50zDUj8epSug8nb7qMY9tUG8AcAWHvq82o9UBW//mMsotjhsnot8at\n9GvjiW3aQsaUg724Bn5YtBBgppupl2E9fUZ2hTULIt9wGqdosDCsNzxvkOnU\n0ncGZYMsTwEds2T7hwoZmG2Oac+J+1KO3porweZj91LqgMEYwsyrUsrPyBpH\nWxw+bkQ7PNs50g/OBhyfLe/+sUYktkUCXrAW04G6NvFIyskagtoX0fpOd8lv\nFVy9S9hlYTmwGlVZj1Fbz2O9FHIqHsVlMLH6cxpG6Fh/NQsYCEGE79lbK91a\nYnnItWHe+UMG/hW0VbyloTvCo91WO0kJGzsLVFW0adC8Br7IWCExxuUhJF4q\nJKM+CIaQ4D6Bq0SlvfUSOJ4ligsUUcpXwE66vbG9heyy0xJY/FZ32ug4B6ME\ntUM0Utc4upTlg6TNX1edA48lAcMyNErl5xc5J65LV8SvGMjrsM7kxFB1nYMI\n+fDjiaXcb7+R+nRxegSvNFPsTQtSoMwrGL8f72a6HcS3DoUA4wUdckj0vggz\nzogxErK47Rl8hRTdOLReXYHF4FEulAm4PIq3GtiuFaF1td6LYvn4gNOhHgId\nr7bt\r\n=yYMG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"beb77eaf7ccf3f03c6d830f96485010ea9e3d47d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.7f61d5785.0","@material/base":"8.0.0-canary.7f61d5785.0","@material/theme":"8.0.0-canary.7f61d5785.0","@material/ripple":"8.0.0-canary.7f61d5785.0","@material/typography":"8.0.0-canary.7f61d5785.0","@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.7f61d5785.0_1596216196077_0.916353767180812","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/form-field","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.e1bc84d10.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05f985a4f17ec577a365acfa484dfcf68bb2960e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.e1bc84d10.0.tgz","fileCount":34,"integrity":"sha512-d/BGByxXjFOgQeVIez53Ja4d3dcCP9Ozq5UtLO3yW4aK187ddYYD/kJtuVLKEjZr+uarnp4HsfW3OrwJ6Rp5uQ==","signatures":[{"sig":"MEUCIEgCkwjbvFaA2MNdR+Ocejvsf0JzeywG5LDj2Kn5eN2EAiEAz8BIpmdMETf0YSVih/7dDQDjP2iLlddoFrthq521T1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE6ZCRA9TVsSAnZWagAAB2cP/12lvox2Py5aam/kPI/v\nskSaA29Or9n/g6kTKaCTCLGikziHvjOZnGagLOghSJjzHSwvnSXDEn1eUtYD\n/9P+2+Km56ur26iP4Wa4oCmU+Fmj8NY5DTPWMhBArUv7nloEJ3n+BpVUDCVu\n3Ymu7ub6G3Trq20aurVGbl9YNXC8cOYKeu0cOFlqTo2vqPfY4j75edp2kuzM\ngjkIJC5WhmoGf38vpVs5/6HMibsiGi92VTd3xWKdRRnPQC6UdHoILPS+Eaun\npco4HUi0uRX6Y5A1IxFcRHtPYLdocQXcdi+2zBWJGLLlpq9LoPK+6amX5Qrk\n7FE9HF7j2GK5L34mTmE/zfeKUEUTvlMb5/g3uidj1b9f8oHXGEjoSIgGMQrw\nf/lzIHqe+3ZzY79R1QKIYZBcmREmYl2UGAsm+zqt3vEyjMRMrhvVo9b4qJoq\nNuh9OfB1BaYi7ABdHHxqC7HjSRHyiLlTZqefVy1zVFbzBr90wGRLXmNTGxxn\ngHl1uv+YqLsmJvgNWzXjabz7ykYjU/lQ/7VY5/hr/G2d+ShPVLyc8dpJq0hy\nbApVPlEkFApNtJK9sbjL0iZcrj2SjHDsbIvbRUVvdsv7ax97ApZbdUbLDqz7\nI8ajNja/f7M3qPqcKJtCjlXXG/QtrBc24nEvAWxSyfs5Uv5EQfr36r8qSxBs\n9Ens\r\n=pe+T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4752dcadba6adfeb006ee3689e295db016f4bea3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e1bc84d10.0","@material/base":"8.0.0-canary.e1bc84d10.0","@material/theme":"8.0.0-canary.e1bc84d10.0","@material/ripple":"8.0.0-canary.e1bc84d10.0","@material/typography":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.e1bc84d10.0_1596477081376_0.38401673789821067","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/form-field","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.096a7a066.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2aae19d2d6fa60903c617e5acc85d79a1cb8fc39","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.096a7a066.0.tgz","fileCount":34,"integrity":"sha512-sJaTk94ycIv4b08Wmm31zI9/Z/BxtXo9OS4dbtca1wCR2lJEtFZWMMZZyfEks0IkET+aTHkqoqKZaitm0ZV5HA==","signatures":[{"sig":"MEUCIFg4s25UuSnr2QhH40onbm51AuYhAfb8u8Uh8nTCWd/wAiEAmdqoVHojo/Wwtw3C8PTHrFXOABxQNFok9Ss171krY4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE80CRA9TVsSAnZWagAAStsP/399NRBSWR1Qvs0qxKzn\nIddx26AsWCrteAcepJU57VVoTBS032n8KXC8hVggDOW9bQq4KMuyof/sZMMj\nF6LfGiNy+AL6W6Ja50RWRob/Hnn0ghSbRso8HrvHck0dEx6hAybA6aLNrJs1\nKEg/7sBVP+/Ou4BBSS7RdK77DoxbOQVNN/Vxov8rmtO/IEghsOIOOErypJGI\nPbkASxXDXkNSXvgfSumpBalVfV5GwLyE3vwDjn1W/UD3jCojBwlKgcDO+CUe\nHd29tBWCPm+2MqyGQTd3uMAJp7C54vD0RHp6hbT0Zoa1H0rLRXgHhVZOzRzg\n3QwGtnUVfH+NVwaqKCJ6cjIzdkWGSbZnYYNjkOWwWRqnU4CCUUDDL+8K7WcL\n7fc/4WAEkz6FKeecpg0zIR0jXfg9h9q2dNm4ksm9aLbm96A+U74mGcGUFaTP\nbj3wQJwTSE8LCE46Lwp1Q1wDZSGjgGFm01/0PD5TJ+AYv1qipoLqV/2/FhK1\n3u8StawE1NnApZnssuQq0ZBaDiivDYcfxhAJQXInpzoQZBJJs/TyVJ2oJShd\nttYYIf9qyvOgqTNzO0I3JZzUFfcQLk6NfKBEybhJ/ezq9EcvlscTE25QPEE1\nBhamGf1h4cv63+mxtgtEwUwMy3QgU0P51T341r1vbvGJa8rvOg64G+AlLOR2\nq3t2\r\n=pz/q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c1f4491c464cef40f62d03f687af7b443805fb7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.096a7a066.0","@material/base":"8.0.0-canary.096a7a066.0","@material/theme":"8.0.0-canary.096a7a066.0","@material/ripple":"8.0.0-canary.096a7a066.0","@material/typography":"8.0.0-canary.096a7a066.0","@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.096a7a066.0_1596477236281_0.903015047225425","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/form-field","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.aa3a3e5a4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a42f4e2728d404eb75f889064af90f55dfc07a72","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":34,"integrity":"sha512-lZVoFt7mpW68VctO08AfzpNUIFNlOihj+sOWQRC+11mEoql101h31TNv3Rbxhl5dArEV05ssptftDaU2W27gPg==","signatures":[{"sig":"MEUCIQCrbxD1tlu0+SdW/s+ehgLG1x82mnO3VZXKO+zSf12uEgIgIEKiJJF7bFDrthjyrZopx8MJ775RNXANLedGlS1cugk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9QCRA9TVsSAnZWagAAHSwQAJcDxPFBxduCW+cx70lb\n9JqU6E0ymEMuN5FpidCCS97vDmfoRFL8YSeRIfIuLjTO+YoIKBl89DhmiugO\n7/+69ZeeSwh/06q5kg01df4/JOgeHJl8SGqMenJkzm8sVBsXMX7p1+mZwMxM\nTiEpcjCN5unoCNMCPtDa87YoNIJbVLy9cB5+f7D7TPnBWL3XNbwCHw0pdX9b\n3NPSJyuXpOfcEJN5z+MScRANl3vmYNWOw4oz3B9ioMLXI9+Vi2ZDasE0cuZ0\nM3TqOPvKRBkIY0qK4L2oYUfe3miVczWtaM8gw6RrAZwxm9kRWQn/lUbnk6z0\n9DHMe0MuLA45u/hkHxk9DplZK8JGP+zJcyBOFwX17J/oVcKOhR2gnbtoJRt+\nK05GpREcxj71KV8LbNqakqLQI0IaLEewSWXAkyeGvCZCF8nKf9Xn1gfqN1Ch\ny99d2fbWCHWILkaV6QKX6h2oT/mGtLMAl70OVAe5ZGsv6XSc8G8BZzeOASgj\nXdcwoeZxdx8gvoqG1nSPs5zuyPIMFAldjAFBlJWobBOaULRXzn0NhMYvAcsR\nTlFHfSdAlyU7+qypQKbkHaRxmn/+PFSuCGEAhh6o9ReY7b16cmlxT6G2OZtS\nuNwpQ2FuPw87HRjSzrfLC43kxdSDfLGBF+vl3LI7rFY9NVBkwWa6pp6jYpLP\nmbIF\r\n=E6S8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8e25515e9c171e19310cbb58630a760408b78c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.aa3a3e5a4.0","@material/base":"8.0.0-canary.aa3a3e5a4.0","@material/theme":"8.0.0-canary.aa3a3e5a4.0","@material/ripple":"8.0.0-canary.aa3a3e5a4.0","@material/typography":"8.0.0-canary.aa3a3e5a4.0","@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.aa3a3e5a4.0_1596477263504_0.3180638051532487","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/form-field","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.5903d39af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bca9cbb0e23ee283768b1fcdd2cdc158b113252","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.5903d39af.0.tgz","fileCount":34,"integrity":"sha512-csScARPEg1TU2qodEUrvIN/U3yudtdGO9gZZeiz+8GTtCWsq/UT2wNDvnN7EaPuGRccQse21v9NMORCo7Dy2EA==","signatures":[{"sig":"MEYCIQCYQwu/ms1O1Q08YpqwTQZiwwQa2fgptLLvqqG7RaY7XAIhAME240Euq6UhoLrjzpWgbN76z8EYSivNmlserMys6/tS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9kCRA9TVsSAnZWagAA7D4P/2wJeLnkzbsSq9VqpyC+\nwJlSY2KREJkNPXd7/6qflF97u+v4G9P2BVwbK+mXq+rLTdfcbL7adFQMm6Xn\nNmERGZArMrrClhL3O4n5fKam7TTFLQA22a35dcYFVSr40LJHfwGr9CeWcyOq\n1wRI8Rcf5inH2uMDG8Y49DdNhYf57W2W/nQepQJ9scbXJkw4U0Ze7ycrzRIE\n+NYLvp81YQvyypNfinwwL002sZCceiMnGNxGDsn6sDtZ97gy25dsEl2M4Gfv\nCVtccbtJEuJ/3CUBLkV2wz17cgpEvRFr9rZ+2fEKmc9uSzhehgqhSwD4U9B9\n7P/YsovyaX+JiPJq9I1EnhO1DZ5p2Mzm9HiKd5+IGiBDhxBSALeiBYXtkKth\nD/0tFJNeDAZ2LsQBtbyD2bW/gXqan/Aqt+75MGZJFBIg00c3UhjEpTCsCXJS\nYr639c9Dg4COFzxRlYBAefxOq8V6+UeNncwGNxhLVtVOmW8nkQ5uSgxjMedb\nuEbP2OeIw+gt89Q4l80bjWKTCxMu1GvO9cabfg8QZLIOZUBN0mmnSH85S0wc\nxMQlUzw3Tm7cYjYyKftmZPby0V6F10wRgi5GVQfWpFKiTjjC1lCpZVQpTsPH\n4pxVoPmGNCc4PkJ/sxEv6sczTJm1+vk1B9aiDL1jL9ebzl11zkaO0W4hVAUB\nNvsl\r\n=ACyx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8a4f2eea8ac8483e7e0a1c93b141ea9dfaebaf4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5903d39af.0","@material/base":"8.0.0-canary.5903d39af.0","@material/theme":"8.0.0-canary.5903d39af.0","@material/ripple":"8.0.0-canary.5903d39af.0","@material/typography":"8.0.0-canary.5903d39af.0","@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.5903d39af.0_1596477284042_0.5417392778225683","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/form-field","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.72258f898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"412086ede49e55111bb4399f96c4e18dac0e1428","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.72258f898.0.tgz","fileCount":34,"integrity":"sha512-DteVVvAEkBav7IhjYJN3Cgmdr9L9Gq9soQGDm67759erz9HVdzxQar2FHjfGRJ46us0MbUCjtriijKJhQOc00w==","signatures":[{"sig":"MEQCIHjOGKb1UQFCAi7Ehl+Ud5svL8UGv4ujPmVaSG7p3mgwAiBSlb9zDDpLtoowO2BLCDwYIAyxpq9cKHvCHneyhHqeAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLcuCRA9TVsSAnZWagAA+FkP/3TZIAg9FlmIqbvRYG4G\nLltDX1/2MRZXYbhqra4rHGtEKMRldhsxn2UPo5R0/Rm38MzHtf0S+NRqCA3R\n3IkR+qmn+jRMqJtAFA46oscC8svsxYjWD+OcWlP7WjMgFnGPajdx5vAC4TeE\ntZljkcaCqx0V2qumuw4dlb2TDwcfg50QkYAApI0VbN6PdNCdHfQLfWhqe2GT\n6K9LK1KEW30Y+AzIthRzow/zZBbR8xUemURXuYyhfK47ukWv9SqyvcbfT0y8\nmZOpr4YoqXYGk4i6f+hpMkkiw7DG+s1e4aZTlBWbmYGs6b1pBi+bvAaAPzc6\nrVcB4FxjR1VarCsj6IrJH5v6qkIR3H9kGe+gYUibcBtncNSgoh37uWrD3uij\nmvc/mqDffFRSquC4UcdkTiOCXtJQoeUkZ8jWMuZCqwM8bPRyfWBSGkEfc/Rx\nJSwVgQwvG3HBXod1y4tHoHl5tXUwsQOeo9KOel+OYoHUfxmyzSkL16CVmHn5\nZys4aThF4FIpoRvYW/PyIDU9ztrlijuGzKV7kDn/xg9r0m0TTBPFW4uuUXLL\n7DeU+af5XNCgCX5Zu8tmXVVBKPbysOMAGtt9wONImvpN+5HNN/u3a8oz9El5\nurRtfYBMLhukSU+uO70Vu/TXEM7qKwqtTostQtwiT6bqJLOW/8QLgeD02sTa\nCfB4\r\n=1x9g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ff2c64799ee2d684ba36b9cebd15fbe0d0ed17df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.72258f898.0","@material/base":"8.0.0-canary.72258f898.0","@material/theme":"8.0.0-canary.72258f898.0","@material/ripple":"8.0.0-canary.72258f898.0","@material/typography":"8.0.0-canary.72258f898.0","@material/feature-targeting":"8.0.0-canary.72258f898.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.72258f898.0_1596503854431_0.303056852551177","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/form-field","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.1b44b43c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64cb0ea32feaaf4d65716b87c05b4501b8808399","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.1b44b43c8.0.tgz","fileCount":34,"integrity":"sha512-KP2PK4LMeTr7Tt1LHDDfWhn2FvTSGycHGYRONpcgMHcxpzFSoFOFVjncVg+Iv3CtUZAuiyEb5Cgnfast1rXGFQ==","signatures":[{"sig":"MEYCIQD3MAPsR+y6LSqx0hzhIzZF381DrIH1OTTzd887Opt7pgIhAMoRetK/EtvkwZwtgWjB/LMkXFaahSk89wpZdUkBOASP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZFfCRA9TVsSAnZWagAAsA8P/33aJ84QjZchNy9K0BND\nlr/VxCf2jx4Af7+Fq3eoRjsVlG23mCsqmJEMzlKdHNT094hBeUnQIT2rXdrK\nNdllUlUYnqUYSVbNEz++LpYvbfi2Tpc4KcKNs89OL/vbc1kjfnU6JKRr4Rly\nRXb9I8p98yMwcrpGFikkTw2O/DOJfPLNZ5emfmQkDgrC5q89+qv/tGsERY0k\nEJKhJDd6L1hLK7sKB+/r19Ut7N26ZHb9hKZ4m5Cdsv2n/sc+Grsgy7oV+PWf\n8ZTgfbKM3q1seIM1N1t9H+ktR+RK8BLhgyXuS6gfb9OcU2xo/TUCrtG58B82\nl4u3iLaENWqHurSrTWkVCaPcv45VVDQ0hqPlGdDsMbgSCgDyfHAX14l/q5d+\nXKP4eDiXW1e1iUz5VE5mabqcc0NcgzKdhAhRbO707vQJWTZlqxFP38ZLFUKp\n2OcXtu5ohu920VGj1iQHxZougdfGHTJwI8iIWu3IE8jz9ptVIhbWv40zA+Z0\n5HpmNI676vmOngmb3uJhJL/nxl2fPpysJPm8rxPvPnH5m+CiuT6gVGQC8eHh\nDpUUuh+x6IkrDmm6PrGY97n1uhYtp8whOv3nAoC+7ahMeFOVstjdu1ckJUmj\nob++UXgL3y0teibQblZAesfbrC9tyUJCf5qcBtL1FBpXj1FVge8IQt+gc81D\n3iSo\r\n=GJVt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"69ee70c646249b45b57e59e958f1ca6d8332dec7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.1b44b43c8.0","@material/base":"8.0.0-canary.1b44b43c8.0","@material/theme":"8.0.0-canary.1b44b43c8.0","@material/ripple":"8.0.0-canary.1b44b43c8.0","@material/typography":"8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.1b44b43c8.0_1596559711299_0.27820109550575145","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/form-field","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.e9d2e2f96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44496857eebfc3b481d727371daa96fc465b337b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":34,"integrity":"sha512-dAMWcNTQUQhqB002FkS3TIgVq3ewaWRnhXsAl72l55E69cyfELFwfhwKCN5R0jotNlGbV6xhz34DshjJWvHZGQ==","signatures":[{"sig":"MEUCIQC/RT755oPgejhD/1yHGHYQ36rDYb+HYQURJnpN6Bf+kgIgSvwkHRFEYYRLfzMmZC3gRQ+0lqKLkHeWtyiLHwCsOJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcP5CRA9TVsSAnZWagAAIOUP/0QOfEq3L1YvU3RQnU78\nJJJKo8f8zR0VRBJjbLj2ruT7coIWSXa+xOSbq80XOiTcrk1r2YKK4HYyiCun\nU3qow5+0apGGjMeblXRNPRKFjG8GSIraAkYh7Jb/35dWQiZuGAQ89JOes33w\naHI7vSFq1E9pZ4Q2RtyDEDAS3j3UIN+wkbdkIg5j56KoCByPiXMdMwIMDv+Y\nYeBlg8josHg0o9f2qVzlmjhMO+EMAaBfsstBqXdTNh+bSYvSOVXwZH0dDdta\nkYGfFbEeNCgkJZcjylquqjeeXjZRTXhdYwe8+PDIWzg3xdIOi3Qbck3fv6ld\nyqCDCuYub7T9IX/UAl5G1OqRB4WorwNJFSGPlYHglSP2yOQeqEqP7NiAUcHv\nFhyE70StJ4bl9jwmwTd9PjnWbc43rpxzLOaNnbyK+9L/YXXVkX0z/FvAr7E7\njyAgLPiJSJTW/VkUz+FU6dPeCd9vxdqyjH6UKJJiJ1nuVfGWZCDoOn0nEIXj\nCrp6nJvsUPCCU5XuPkBRtcz6iUrto/ug9I4ITcA+d9D7xJkdDsQqExL5u6Ga\nko68IGzYSauCkqTRE+cZRR0A3JRLI3LmuFFj/hvlNZI0qR+dH+FpC3p6pBpX\no94YHaxeC/nrUb+NK3pPwwWKnKaWF+NRk1Bs2qo8M5qupRKrtBrfbEACmDO4\nln00\r\n=C6QQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f6bf51788bc1f39067fcceced79dcc12b2c59caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e9d2e2f96.0","@material/base":"8.0.0-canary.e9d2e2f96.0","@material/theme":"8.0.0-canary.e9d2e2f96.0","@material/ripple":"8.0.0-canary.e9d2e2f96.0","@material/typography":"8.0.0-canary.e9d2e2f96.0","@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.e9d2e2f96.0_1596572664696_0.05955038190780848","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/form-field","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.b9dff0a19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dea531d6cf2cbc96f6c93de5d8a90b986efcecb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.b9dff0a19.0.tgz","fileCount":34,"integrity":"sha512-v7QHBm5wb5CPsO+UKqql9Sthh6KXD+jcTFTeji+NmFpKyCX4sovoAqer0HijLSEofJLxtMcHQncCRxOqXbpPmQ==","signatures":[{"sig":"MEYCIQDvxwwEmrXQm0u4wpjLETFT/MiIg34qwFjCfMlXNIleYwIhAJ9M+WyKj6tKGK+mUsk3CS7Bs/S/+QLA574/YjmIq7WP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiwtCRA9TVsSAnZWagAA6W0P/0THSf6HNHKn/+fVgiwY\n1Ol25AfUCeaZbz4zu/nGxIf+k7KgjPJvvyLqwP9K1wRruPG3ghNTrGOQSIoN\nonZyyUC91Nw3xvcSXs5awGCl5K0R/4PajT5CVjvrv7Blw9kPR48Uym/RQcSr\nc0JDq87fKUev8T8GkMwcAA1PI7oURQWQ30OYfuxb2njibZL/XAtNx6X3qdgc\nXc3FoBPNEAjbYVEImNCGUiXpszZvDSI7+4vC9Y2aBfNCXqFK/uf9qsmf8ipx\na16LXZ9BpmydEbxSyGlv/pseUnkVsyOJkfwjgV60Kx2/SREUjO+dtQ6Nvxku\nyC6kUO37fitpE27VSX/4UrTec8X56IFrIQmoU3dsjbSaAipR7Z13uZONzRD6\nr2SFAtb5wqofIsYTp0lidA6bJ9/SpnwJQAgXSppYWQvd7O4dzpQ1dV0cQtNE\nToFLGnP25EZ2RCqXxS5RcYTwvf9i4G4rbzNLcEoEdohsKCrwaEkMNvqHiLgs\n01HzRzXURPpKRtjmlB8LIEU1clhGwO2Mzg2hUP9Q+SId8axUZVKg/mYW9QXh\nydP7K4LFm5lNxSgWWDb91UwzNFg1GgpbqLMPB5g8ahrx79wFL3quZbhG0C6C\nPQgEkX72ECbRM6SNj64HLWOfeOOkpJ1Kff8EY0YD4/zeUhKJXPHNrXSgTwur\nukUc\r\n=wDOe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dec2f9fa4c83e98bee860646fc2a65b134a7900d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b9dff0a19.0","@material/base":"8.0.0-canary.b9dff0a19.0","@material/theme":"8.0.0-canary.b9dff0a19.0","@material/ripple":"8.0.0-canary.b9dff0a19.0","@material/typography":"8.0.0-canary.b9dff0a19.0","@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.b9dff0a19.0_1596599341249_0.6897393323413734","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/form-field","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.2bd09a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03c11aa793a7c5e3a49439a8f2f48d9a6f20dd6c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.2bd09a706.0.tgz","fileCount":34,"integrity":"sha512-zO00dRMfUP6B2STfln2HCoaolsKfPliNZCtIvVYZeWOQOalolqDTD27LPQ6y9ZbBrG+lrYZTY8YpIPzoz/Vc4A==","signatures":[{"sig":"MEYCIQC1WV0IsBT+Cw1Yo9yfuXB+R4dq+eIYc49BiMNQrb3MNAIhALMdm0OnQL+kojDUYZNGI519cyXEjHWtGhEAeig6rFvB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi1lCRA9TVsSAnZWagAAovcP/0n0cPYE+AzosqvSLXVk\n3DJWR2S1MHZSpzKprxnPoEl6Ed83h06FKmGn8MwCVKDRtND3gduXLD6eu61w\nqMZWtVWfG9rrAR+SjGhB3uGw1QL+5uHqAspgzIt6wG1PD1oKFz85N4h+XLiv\nqQ2hw5mkrph5yC4A/WRqV0c31Z4vmn/6KzsMVhv6oZzkJw6RNDtyLvRjdEnd\nTJuMtiXQCvnkkkq5lEbOtqSIHkFY9dTQuob9cJhi5JsnGhMJVmqzJBqrkjMI\njHOeCBpECBYHIFgflAGiPH+4I4bVubCtzIJqUtLXz6SsQTbWoYoqGZoPVP76\nCMp95QGerJk7hOU4+YHG5cPY9d9tbiZmzfbOzYDDIgqeuqecprQsbaX/3mER\npMIPDQwsnFL5Re33qcA115412mM9oB0tRbcyixI9y7Bf7EW0lbH7GO/6l9rt\nrtnP3CZ/rp7slvXpSPzr90og2jLJVJhsUWvlx77Pl3TvfJPRFnPcB1CWwOlR\nntnJnq7dcvT+wc/KUQEcFwCNCJ9ixeIjfyFaoemLzBPBVwwEZ7uKQyFDKHds\nvPckEv0VdQpfuRcOB6xoYor6GTf6IBcf5d8arv1ecVbRXu46xT3WUeRlo3HP\n59jXRBrvj2rEHc27CNgb/yH/c58wlxkrwD4arJz3SZE8Z+WwfzuEjng+y611\ngsrB\r\n=iCEP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c8b061f3fa8ffaf5214e79fe44f6c575216a1808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2bd09a706.0","@material/base":"8.0.0-canary.2bd09a706.0","@material/theme":"8.0.0-canary.2bd09a706.0","@material/ripple":"8.0.0-canary.2bd09a706.0","@material/typography":"8.0.0-canary.2bd09a706.0","@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.2bd09a706.0_1596599652972_0.38384231756818243","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/form-field","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.e0560522f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76059c3f27ff76c17d56813a1b332d52f5a3ccdc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.e0560522f.0.tgz","fileCount":34,"integrity":"sha512-uv1vXVQClH2rd1XC7t+bDDB54lzWU91y9oB/HKnqeTAK3jIDDTBoEeCb9n0a3NWUOMtUfX8t6jONOeh0Rq7m6w==","signatures":[{"sig":"MEUCIFUXZbNaTyYWoZXI/rIeu7rfCiJ78YlFizEVe1q9BUzEAiEA7xg2ZzLbuW8I15wIEUaUgCR3V+JB8LgQUepWRFm4xnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKupICRA9TVsSAnZWagAAZIgQAI+gWCxU9QZ1LvHQEMXk\niEYnGW3MoS4g16ZFB4ZskCkJpUtd0xlBfKx6WY4xHaaPB4yvjPdHYDYedOU9\nADRGhRQTqryhiGLW+qQy8ZTPaGKoEcQcFUDDl6ONImqNUPRYgYrHjU6rG0Lv\nNk9eFC+78gquiHBrQwyIyrjYMVtTD6oEGG1Kg2PzwQqcEU85PS3ny3YWmilF\n02hShOOnez1hcbJWPz5bmhNM0h8Ndw7vpNJv9KSgVcrhmoLPRp8wKXb6+G+K\n5/nFjdvnkXFQNNBvTWyfjAJmNyy1Y5FzsBeOcJShURyKcc0jKW4xsoPBpUhi\nrGGkuMxNo7cwbmgx5mpFKomPvsDbpX7Xkb7MuZqDE54qrJvRT6JgdmpAHsoG\nMUgx9mM8MdC1t7s5DspT9wXRhZxISTeDhNFHSTzgpa99+RlgDyqgJOZ+ww8M\nRUwMMlgsaEoy+X+ufQYSpx9H3dRgZHJV6ptstRWmYqaCll4rDRn0q0r+g7OP\nKsEbXuEs2BhpoFROxhq8xTa0nhsibYFIvhdBZHNw8ikc6V32CI1qXboKtv4H\njk4WaCcSa6nTV8RY8CxmLnX/QGJOrteNUk9UjolkAAI6uUITPUMn3QtO6HjA\n9sD7EmU1K2CkkdZVKl5gwXMf7u+o7lMEZm5Ri/wDJw1NoG4oNTKVD8++NWi4\nZRnQ\r\n=W82l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f4f71f168da3435c5dd1bb74e7ae0c54fcc45746","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e0560522f.0","@material/base":"8.0.0-canary.e0560522f.0","@material/theme":"8.0.0-canary.e0560522f.0","@material/ripple":"8.0.0-canary.e0560522f.0","@material/typography":"8.0.0-canary.e0560522f.0","@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.e0560522f.0_1596648007469_0.4055498100236452","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/form-field","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.08ca4d0ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f1d7bd44cb86aa4159651965ad48ed6f4ce7174","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":34,"integrity":"sha512-XbeAtq7tC1QjSwirTuqRNOT5WUm6I1TmjRb4nY+yuYd9Zsf6UjTJEa3qk2A0zu1dH0uZJp3esXGruFxSngM/Nw==","signatures":[{"sig":"MEUCIQD7BHF/QE+zFGEFxOLfaQCid1TTLf2KzpINgRRRpaHECQIgIozsCdXH5erZo4vGLU7fqwLlVGUJD/qN70wYEB4Y5Oc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu7ZCRA9TVsSAnZWagAA4s4QAKAig5XKFnukbqOlIK/c\nbzoDloI9bwyBXH0cEEKGl7nCylGZxjm7sdCqYiV9ZfsQS0G/ccl+5x3svpus\nE6xIxruTwQylGC7ZYdyx6IoczM45Cj5OYPLM4yVxMo/W9NnWdK2f5aSEuMbJ\nz8XxAJmQCUfi19ueqd1/vUQ5+g7S9eeMbRuJP4LJi8F8VdjlenaaDAAYepRJ\nQPMFNoTj8bcBRmSW733gCymFXIFqV3qxOUCOglRSL1n4BMWbGgiTN4qbJQtq\nJ6XVjRBNrsTXMnJuBbDpHPrrTud76MXwsz/yhDphlUnV4iqtIEmMvp/LbSUE\nCJWXT6nkyBpcPOy+QpDnZHCr7RCX4G8gMHz4+EpL0CghsblpZnWhOxVk2f7J\nmEMfhUeFeSM2luXyP78vLJcYLr02/6TFwSQHafKy/jXwYCMiL1TzpDNVH9OZ\nlhpcapiS9y0OWBYPorRfjKc9pmLRjfghIF92mudOYLQps/kntUFHWee/MlQ2\nmVRiKrwos9I5UiX8F/Rk4UTOeU1Sou6bVIYvHfihf2xTCAzjbqMkPHRLX118\n9eAgNBXyIQh22xzRT34s+Hdzb5/xD9kQ04rRrKUOlJ7qt3f6r/TspFr1rauS\nAzI3tNJ7QCwn6MnrG9fBmDr0TObj8zt0tHA8iS1tMeaATCLfUli5le2yaabQ\n3ZnR\r\n=Ir4j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e525a44ae67401224e06885b43f10017ae70f9af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.08ca4d0ec.0","@material/base":"8.0.0-canary.08ca4d0ec.0","@material/theme":"8.0.0-canary.08ca4d0ec.0","@material/ripple":"8.0.0-canary.08ca4d0ec.0","@material/typography":"8.0.0-canary.08ca4d0ec.0","@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.08ca4d0ec.0_1596649177229_0.8746749923406578","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/form-field","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.08090126b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe698b3a0cb049b8f44e3bb35e042df44eb47a34","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.08090126b.0.tgz","fileCount":34,"integrity":"sha512-gA6TEfYgu4iJ8OBw5DVhaaCgZ40kOKX2FoCbq741wid6/nCx9sLnN0AgYMAhtC+Rc4Q0QWAtV/0QRPkM41zEJg==","signatures":[{"sig":"MEQCIGU+m2AbuXzw3rfkpltnj9j0PAp8pmIaPRBV/cr4AMSOAiAY6dww7x7GDmT8YRPZ+QkZ06Grcwh8DludIN219s+snw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFrjCRA9TVsSAnZWagAArhUP/1umAWay2vqnoofjbTs2\nR2r8sWZCBAGADiniwZlrmfrDMaJ/RdsD6fOgNFWIWJ5GEnAkK66SP4Sd3zuE\nHklk7/3nLibfXkbnGJ09/DcNLd4ZS7h15jaxgTYFOzQzD3Ka/+rLuXx76206\nZHqiG6RLOwuz/YdAK+WeHtDSzjQCUYEsL0Sku3uFkl2yHIoawEnDIze20JWZ\nyO9e6o+yZKHc0zsSyesXM5qXPiAvKRfXUVVz0OoJrBx5UUX4IbFzRxlLi2Xf\nS3XsZSbRqBwnZz5uOQ2D0sa8/82W6kp7+S9ApIpHxfxrtFmsKZvLjJAWEogK\nLRHNpWrOhHqZWN7BNO/I3mOVSJhssK289zf/Nrvoent4+wrMAZKGXXorJCQd\nPuZe658GDuUCNaGelHPwe5sEf6SVfBtfxQ/Xiizf/gLqe4guBhbKfluNhVl1\n2MizhRMECu7UN+zm1baO198gg5pYFGuyAj+qdkk07Guz33KTH5zqSLSOMgIO\nnBGMfKim6SDNd5DqKodiJAbqun5fx/kuXafdrjC6R5mAuHSx4ATbvQpoeCUH\nkK4XP4m1e2it5MovIrgcKhmXnyFv9Z8dmBjcVKWtRJoZ2/2V4CwcACTYokYa\nZ4t82TtwUYlpdIRW+E1JRmk3MAYANN8saGdVnJ6ouS/PuFrO3fxVJhG72Asr\nx1+k\r\n=O5Ab\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"92703c0a9dad96887725176e28a4ac83640a3b34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.08090126b.0","@material/base":"8.0.0-canary.08090126b.0","@material/theme":"8.0.0-canary.08090126b.0","@material/ripple":"8.0.0-canary.08090126b.0","@material/typography":"8.0.0-canary.08090126b.0","@material/feature-targeting":"8.0.0-canary.08090126b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.08090126b.0_1596742370931_0.49297497467617823","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/form-field","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.e8bf5b2ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a44ae0f2f944bbd6f4963d4395be574fda833cc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":34,"integrity":"sha512-OKA+pDy69ufKBz4dGPd55S7JET3sWPzsR1igFN46qynuUaSKCPaXklQeISq3ItFQ70o3rd1llR2Wfjbiv2QWzA==","signatures":[{"sig":"MEYCIQDsQawHgKXNTTW9/yrOkSft7JYfb0kG2rKYZhAgeFC42wIhAJBUHJDy9IYH2x/sG80d5HIvZJ5K23PK24UXxbi4qOS+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHsUCRA9TVsSAnZWagAALo4P/iDLilbu7uWIFqj/gg06\nN/uUGxx0MeAnUWaucX5xVkh/bKLOMkAUget0WzSb2aGkvATw1kb/b7Z6xiC5\nkSg9+XmIx4THKOD9y0szwjM0AybjapsB/zW1Yf0LI48vfs5YiXK/9jdF9Rbq\nw2sbKbsB21FDKqrPvVcxItTZlgLOCaezk8WhPTJ+iijJP7htO4zOfrswoIfp\nykOK8qSXwsa6MZlcIsCZh1t0XmejogVYZx0j2OvtXsuiVYRu6vX4sq6GOsKv\nJXysTWkHIm4qUyKhBb1TkQsVbg4YEWIrKaRufWSIogJwYqOVpC2Ra84+bky8\n1x4MajLEqqbgYkF3blYrYDuO+KQaMXaE7Y6dq88lQCG0q9zgLolvjoZW84QW\ntsuYlI6IdCCJ3tzoAW9Bdo8y3JIAeTr3dkz7kVe9ga7zaV6gEijgKTEXC/d1\nvzf8bdevdbLbilJcfA8tl4Ijgq+WIuDdEGc5r0HimDtimxckS/aFkUN+mie1\nCcVvnHST1hQHYHjn37GLS+MztBM5ytMSHTvh8SIHrOuLO/PwJzJ8MaweA+xc\nQF5XDkiYoVm2YQWj00xbqjv92FbdCfMHa+oTDSfAu67jbgOxbMLFpBzw9LXX\naIHl1ynJ2S4GGlPe22c9eeYZhssbAFuNGyywGcc3/pnNYlRGqyulwNbTH5DO\nI5zF\r\n=KHz4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d5fe47cd91dcff7cada8ca9b587eb8a924a211d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e8bf5b2ac.0","@material/base":"8.0.0-canary.e8bf5b2ac.0","@material/theme":"8.0.0-canary.e8bf5b2ac.0","@material/ripple":"8.0.0-canary.e8bf5b2ac.0","@material/typography":"8.0.0-canary.e8bf5b2ac.0","@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.e8bf5b2ac.0_1596750612058_0.4038720118549488","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/form-field","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.e3b746208.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ac924272f0c004b93f7a5ece166952ca586bd79","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.e3b746208.0.tgz","fileCount":34,"integrity":"sha512-LdeJA6R/3axMUvXK45xEO5Vb3r0gTT9Eu60A9zF8D2DDLLfYmjO6FNsp+XRn3XL7o9oQr5u+tuD22xQlaolyLg==","signatures":[{"sig":"MEUCIEj8a+Qno2c4f0wSzeiWYfIVNjG90N4ShHtFrrXz+cL+AiEAkjoRwbi1Jc02K5g8h9ERDObZZfHtddTKvOguJdrggbk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIOxCRA9TVsSAnZWagAA5xQQAIwRP0sXCa++R1l+v87X\nfEbF2hILQVjwGFmYPhgdodwXWAV7hpbiO6c0xNWc7vPWCrvaHHiGKqnSkAaS\nCH9jyhEdfxu0h25dpRN+IJFDqegwJi9RbHfp4s6YlnPLMs6SkE7Lr0fwOMoy\nXyC6xo6nfRC6DUvA2xID71k1Wl5ZxgHudt25xxsvx/+33KdDfT/27dT44dZw\njd4jtRERxn7IlDOGm3EVJbNQAEMIKRQSwq/ChM0ZDPYblBQ54MgSafwUc257\nGITYmaElTigEVuXvKX5SYPCKsIKugGxDXt8cm66bwgzV/sAUdamMHsYzZYVC\ntRj32baFzpFq9YuG4ZV3JXoFREfe1siYAuIVK62177g4o4CkpfSNRBvHn2Ha\n3kg9RPrT1c1kXZ6MrQ7L5jBcx4eYe6Lf0DXX6IyNDalW/CsXMLCDhL+9YAEV\n4OS7C8DUQel2fsJJqPrB1YsWYO/VqL3zqYIp4YaODUZDlzj16TRZJis8d+4i\nn5XQLuJBUpXatazTsmrHf34pNh/AgwZRzpVIgLpVXz/cF2hIx2soReRDoV0J\nEGosG7C0PF82LZuUCZD3lBCyFEbUdkGD0WoKmFxQybPrNdeVl0t7+WK++Una\nNdRFM3Q/a1G9PPCebO3OO0H6s0cOac53yH9cvNw+u0VrARkHHt23eEdyF4ND\nMriX\r\n=ui7U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"565f03445fdfa2cc653bce8f5c730176a406e5d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e3b746208.0","@material/base":"8.0.0-canary.e3b746208.0","@material/theme":"8.0.0-canary.e3b746208.0","@material/ripple":"8.0.0-canary.e3b746208.0","@material/typography":"8.0.0-canary.e3b746208.0","@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.e3b746208.0_1596752816601_0.052285576367080866","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/form-field","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.96a640534.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f1f8bea5069ad194176716a4f5edb6d40a954c1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.96a640534.0.tgz","fileCount":34,"integrity":"sha512-9WN/BiGd3lwE01m0Ga7YD9688qZbz5g4C8POcEOmsptkGSeAEnFJMS/QZrsDaUCsuobRy+YOf8c61hyOKaR0oA==","signatures":[{"sig":"MEUCIAukeGzxUEECe2EAS45UwYFnx1H4Q0l52NRZOy+YQRuEAiEA71pfjExeqO/T76ZzNQ4Xv9pWUfIFWXFWHXBN/qvfbCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIclCRA9TVsSAnZWagAAbXcQAJbPb2YHNoTbIHUfgSVW\nsvTb5QtEtuWe8pR7xR4732lr565LZc3JX0dj7vnBI0HX4Tb7jn7k1oa8S6Wn\n9J3q2bp78c2IHwCf4h95Aot6CKbVath44NY6pYUKknvgo+2+CExagwdoSlNJ\nZ/XhWe7OH41DUjI9nbz9VKKKiATpM/adMrm43Mj22cSNAVPRphsuCQjA+QQD\nSLpP0EjCRHE3LoSwmeM42NbJfde6HRcskJT7eEr2oZKvsbGQvS0/BwU0ifhy\neje4OAxxioCg1B8FLZU6/24Dz4xKcRtlhKSt1hB3tDcK+4xdVfjMsUAD2/WD\nHjsmqY3qsnNEh+tFSYicjfvpC2R1XLmKJQK4y4fR2L53HqoIq/OGrU52twtv\n0ztZDVnihSRMy7zzJVRYzsF/VnyEDfHg3DM7ayg0yAT9crLaX6reGTgN0t1h\nwBcWMmKX/Amm855M2aCA2unMM0DrJ3WrGdHFmpcR6C/tlBhgCqH1mqD5fzj4\n/T/yNuQABOAIID6qdv7zxHxtNorgpZtG88bwxOdnBRosgwFXz+/kKfMH5C9e\nPslYgEuWC2UOvoSt8Awo1w74cEaNWUEp6XgvzndSzH96IBQ7+n61BeGK6shm\nQ6NfN1lkvWKrVTx2Ke/joAhYgTAx4gauMRiN2qGc32DcKvJh6OK1GV1f/zZP\nc+yV\r\n=KKrL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3363a6ead1437d646dec8eb21cb2d5c5323e8986","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.96a640534.0","@material/base":"8.0.0-canary.96a640534.0","@material/theme":"8.0.0-canary.96a640534.0","@material/ripple":"8.0.0-canary.96a640534.0","@material/typography":"8.0.0-canary.96a640534.0","@material/feature-targeting":"8.0.0-canary.96a640534.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.96a640534.0_1596753701307_0.43971952301121386","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/form-field","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.9f9aac825.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"999a9d7922fddaef89a85149f0c840f6ad650327","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.9f9aac825.0.tgz","fileCount":34,"integrity":"sha512-/gs0BzTIzEXDHI+3A+f/Un9+zsQL0eiRWiZNY/6eo+OQO9+SUGcgYK6mpck7agXBH1dIcvvYNIjpO02JKriwkQ==","signatures":[{"sig":"MEYCIQDQIH3OJRWgDr/Nra+JJXp1bs09UQ9a/cxPIBNo5Z4DBQIhAJ2FUhJx7AL+WqFOFxTXgr6+huF+Qq+4rI8r55QPwYN8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb7WCRA9TVsSAnZWagAAaJEP/AsyylMB8vrduT8OV9PE\nN8gcjQBfS2PxFcTZwlQGhwghVc1mkq7MWlj/Htxb3i5INWcPQ6nNIoueNeX+\nGp7gQenC9l2E1kj17CpwucJtuOpe6w102MSPHCKIQvcqKUML3OVpLX231CKg\n87NZauTi6ov398za3DAvwy7BNA8Sl1Huue9Ved2Z/RtpPtyoG7yQzqubhMBD\nKTH9cRW5DHJEp6PVX7peAoaAVA4bTarBt1U6BIEJFs0AYgZWTJTT8GMBmWgp\n8+1727BIGi1AulMZHIpdgW9YCzlN45xrG9kgsgDQzsrGpI1wBxmpKaOMuKjl\nXE/gOOGoVz0qj6r6ZxjmC4OZqBAmfvFXAj+zXiEGu7dHBrI3D+YNA9BLDU8B\nIk0vZs1Kq/QNvxiTdV8bLFTxHXC2zOQ2aXxMzXdxVPd3pX3WUYODxmol4vsK\nvGyXUYEZST3Q5+NmIL1uIoIeplWrc+rpfDiCQBoaUjAC6l4NazdNZ9N+2rMx\nZc7pzbCAIfL8fMOvv4BNz3/1q5Ude+4XmWK7wKhu7Hv2MbW3DHjwBZsHqScQ\nEvc+9P53OSimRnSoh7JVB42wHQwQJpHLB4ROtkt/v4KoaNZY8/OuBjmT5KRZ\n3FqcAT9EUf/GvzltTnOiNBN2maheEQkjFmWQR8/NxsQ5fvcZfhhF3cpgtDhe\nogD2\r\n=L2Bx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b417a722353dd60a63448761d24a06d325b83f7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.9f9aac825.0","@material/base":"8.0.0-canary.9f9aac825.0","@material/theme":"8.0.0-canary.9f9aac825.0","@material/ripple":"8.0.0-canary.9f9aac825.0","@material/typography":"8.0.0-canary.9f9aac825.0","@material/feature-targeting":"8.0.0-canary.9f9aac825.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.9f9aac825.0_1596833494238_0.07830811356995526","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/form-field","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.fc65fd00b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a3ee5b20527324d37156afb87b7bba478a249b1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.fc65fd00b.0.tgz","fileCount":34,"integrity":"sha512-WB2nxbN4HZmu/O97src7IUMCJvatfwX5ONti9Clg5BZGh2Rqg3j7Samk4TPj+DwRFJeDIVQ67TqOFBtSaMSeZQ==","signatures":[{"sig":"MEQCIFDWyzkf8wLxMt6LAfuZYd7S3G6r2lIdo4sFUTQ92BiaAiB8+N60yPy7ZEXdlSDWSDpdw50gOPFuAhas/UYHUW5lKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWXECRA9TVsSAnZWagAApZQP/AtdFNgATzgJpG+LNXvf\nmUSdWsa811MXs1QVhDuPCSr5Uh+2GccEWjj246xkHo8d4A45xQ9MVjtDLoEA\njTdY1++X1bdAMcG6WLC2YdEAIHaJrZpxMoswuc8a2wdosJ9Stpxd9fOXQHD2\nJ18H6dQnVsSDu9uMnBLba53IlfkrzJS1CohEgwnOzJt1EIK6USzCPnI+cVJK\n+Xk2sErzAdqILwgsgq24wdIJPXfdNyxpeetvmkEa6aLWWyUSnaiW6uu2oLQt\ndUhJuClj8QvN4a8sMAcdJFUt+YGYpEb294hce7KlLhuLoZkrE/+a/Lju9i7t\nBGWREPmNxMpFpngL5Vl00Xx84sfSFC2UUsbCG065A2Oi4C5MZSL80iSmDSY7\nzvcnrw2Y+ZV/PqGc8KQNcmOB4J3OD4QlAvfhZ0XHY2s0SQ/6VmY+OlDeMwlY\nhUTopi+hvLSkTbY/rE16MebXgMbuZuGGQkU13ZyLz1pjUaK6N4Dk/1aN7KbV\nicy+5kLk41UAZKLrI9OblrO5p56cv0hWZPJwyxgk/pWV+Bf79vPEX8hj5ZlN\nA4KFRT1BJI+TXs5QTufwrSnnZXW0y1f2VH1jrMF3v5ipNu/U8SdyCnohshvg\nO1do/kB9Uc545Vs2UvfM97lgQjPcE6+H8Fgv762W6OmrvGYZ5t5B+Lj/gPVS\n8mGo\r\n=5MZz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fa39d9d1e753796086537bc71b6fa2d2aa21a3c5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fc65fd00b.0","@material/base":"8.0.0-canary.fc65fd00b.0","@material/theme":"8.0.0-canary.fc65fd00b.0","@material/ripple":"8.0.0-canary.fc65fd00b.0","@material/typography":"8.0.0-canary.fc65fd00b.0","@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.fc65fd00b.0_1597072836204_0.19874557495140488","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/form-field","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.02e372c5f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb7f3b8771463c2f5e45c7b9f98e355990f4d34f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.02e372c5f.0.tgz","fileCount":34,"integrity":"sha512-MjOSdwu50mI0dF0DP2383IM+57CzsPP/eBPuwf9dvelDGT/JQCmu0mkQU4X+C3GlZN4spkWwhKn5+QR9LggbBw==","signatures":[{"sig":"MEUCIQC+tuqDaW/c9YkRHfz03uocBHq/S37sCpdImdXmxdmn9QIgAI9CmO9pWlNbe1uFdte2/1sjWnlVKmWMgWsOj533nzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWxhCRA9TVsSAnZWagAAV9AP/jtjGDoXVEBs30VznQHR\nEKEqG4IA+Gh/dyAVh1f/lwwqzy/DUU6zrps/8WEzKWapbCvaPPrxz/qTrnH8\nGkJpUDaZXiYR3O10FuYd3qsmxstGgG8gEMKE1Yd0T/homdH9zSU0FobcaDdC\nkVlokoEeT0EJBVtRpxQKRzpgnyHO4DaZbyf2hl0InPcefrvMgY4vqj8WOKAh\nIpm4CefcFoY0TZm8/SeE69i7YlW9GqRdXZy5vxyYPSwqQTF418c+FYqo+ZzL\nt9Ww/2+BN9+fv5w1zINfeAfqi0rQJ7rwohslwhXC8X+KvaGRjDVWZQujpn7r\nMPChvoFDlBjc4e9fBJiq5Q2wVkzo0Y3hNoVYrj368u7o+2ToxtP1hQP04JGb\nd+6AP//9iQEYXZuO9Kq9p7oWPJSO81laRMaIdiDPosNqNraEi0y1UnAsCw+5\nlq4noeQmchfRUrIcPm3S+E+d38ducb35AbYR1K4IIu7tB6wzHzH/Wb+zt1dL\n9olp+8PHV728EbTWYuF1VenxtNvreY2gP6sqEwWd0hDA3ARSA4nam7zAVQrE\ndFJQT1BfYVXCphyx2yjUptVnv+xZrU7YEiYImOlSVaIzo/614cIXzqii1kx4\n0MSysxgocyveQLNxg3BJF5oLvxc/vLc5aq+eclxcq7EfeNWox4ni1srSkXgE\nwbtY\r\n=Q6NM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b765f8699fe12742bc2032a8df7cc23807ec94b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.02e372c5f.0","@material/base":"8.0.0-canary.02e372c5f.0","@material/theme":"8.0.0-canary.02e372c5f.0","@material/ripple":"8.0.0-canary.02e372c5f.0","@material/typography":"8.0.0-canary.02e372c5f.0","@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.02e372c5f.0_1597074528867_0.2366473759213521","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/form-field","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.66669e3b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"157b36bdce3bcf10a741daa1d0137e3137bbe574","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.66669e3b6.0.tgz","fileCount":34,"integrity":"sha512-K/ZFQOSiVK0xdNa0vgPBUn7p7jRteiQvV66jASy2jzpXHcTix/6j2dyFQ9qm3vKCP3KPRHPEB/sRPPf6Nb/OMA==","signatures":[{"sig":"MEUCIQC93UGYZqi3JESpo2Ou4PvsWRxoUd67vwB3OArGpMn2aAIgbbi6IhibAvEH+w1PG/gptjYzsvlDZvJxa7znB1A733c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW1QCRA9TVsSAnZWagAApQ0P/3xcJclXGhuM/qvtGMaX\noTwm/VhfbUNFwlfYD9y9blYt8/39VFES/DwDN+f4Ip1/bQvDEBqUfDyeQP49\nT9+4elDQfkM0R5lMrwqHbqKEexjwhSynZNRpgAEb3ZrcDD0Dk05wmiRMe2uQ\nLkKAFquLZILz6SEDr/JjYqPmOSNMEqeIhtAbq81QROisUvmzDR4sYVahuD0d\nJHkGpgYlIAIBGrRbp4Kz5bNqXY4dJF0cNx2JaAiT7hR+h89yC2Um8bc4of/k\n7nGPajXZyvw7astBxDtWYI73YbGiMTmqouwZLOb1gS+WD5FhS8iHt54BA+SN\n9Ebpvi311EXUnYcIOAcjc6isqjjdU9UaXBEKt8LxUPQURemDPZ6CL/htske2\n8U6lEG/VPsv0Su9zvwJ8+3c3gSJENEMWNI8F9rgSETUe0SvJkOvBACewWrx0\nK4FtaZgApvjDBHHT6p47Jy+8XkooKHjW3iYN1aJwqiMqZBM74AYGQMcEAyvZ\nzcEGptXuVgV5P+kvmrAsIxbBNx+9hIdz+HewJj2ad96UPp8Iy3+gxQeEMbG7\nwoloda1+fmKHkGYsV5kubzvXCjr+qYCLv3MYBRMa4oWyQzqA9EcGLBo9upgP\nQ0gFsRq3W/mfeC5UscniCjDi2isyOfWhEwztcfXpT5L7A3Lhg2zUEZ1WPRrB\nWicL\r\n=Jnf4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"96a6a7d492075777ad5f7692328b3bd50153bd16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.66669e3b6.0","@material/base":"8.0.0-canary.66669e3b6.0","@material/theme":"8.0.0-canary.66669e3b6.0","@material/ripple":"8.0.0-canary.66669e3b6.0","@material/typography":"8.0.0-canary.66669e3b6.0","@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.66669e3b6.0_1597074767476_0.20441614273492625","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/form-field","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.6d1ea9761.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbed66ea18fc66330d023cb816b404bb9f10135e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.6d1ea9761.0.tgz","fileCount":34,"integrity":"sha512-5GYImQ4SjcFFZg54QzpIxXud6QEuHN+ub1RjiHIs/AqjdETDfOYxsN6dLiDqRaWQLPBWyBQlm1rR4fYE+4M8bw==","signatures":[{"sig":"MEUCIQCFlMVscNc2AclUiz5QfncyJj5FVTemjV9jnZ56Ch1LnQIgLEaTowvlxhXzEE8gJn1cxtuOWDVL9GysHQz9BgM5ueE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMquqCRA9TVsSAnZWagAAWVQP/2+RHzq497lsyzHnvDRE\nWNwlpfDjmpityF3o02lGt3YONWWsfrxQ5MUZfu5mN9ulHhrphiwSbfeoYXb9\nRAQIukRT+akNVTpK5v70Qus5BZbCBglXjEBzr2cXJMAs1TppJzo+l6UaVPv1\nqIxzNOuf3Opc6y9YpUyvLGzzxczbSLHH3hJVHzMQAU710ymkPs6+vj5Mu3e4\nyH/eoKWEBGfSOkIHn3U+R73p4xQzJlvvSVdE0LLkRODZQhKxUzDs2n8PQWSO\nO/lPVyMRvVwuu/UjbpYEYz2NT+5tUlXZci3rJ62sCuejsuDCPYhbMK0KJEW8\nceZZXTsf+ncC3q79H7L16zs6C/s3MOx20DQe3GR9oRQApypY3VlqQQDErGD+\n9p2RrLnPQe+H5N7/FYSU2f+ALWVIkWpkl7Tz1zs9mrJQBdglopg0DrbY99Yc\nXOn7dAsi1m/jYzV3U/Lu4Iw5BwMYXH8JsambTBW16yTVseabHA0cwoc78Rv1\nEYdk5+SEaOqIOWRJbhxARR3uGZolAEMWImcUA6m/VmpjV2opArmbOSYHHV0A\nyEOhcOdvns0GDx1KoUGZSa/BP6hZhjExcIKOQ7Xy+iDstkS259FDeO7GLk0N\nEa/A5pBzCL+A0Gjb4s0ZOno3E82ITrN6o08X+Z7NDAnIgfq+/cMGAJAA0ilf\n93RP\r\n=IvKq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2539ff1cdb03aaa0365880e59b2705e6f6ff4229","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6d1ea9761.0","@material/base":"8.0.0-canary.6d1ea9761.0","@material/theme":"8.0.0-canary.6d1ea9761.0","@material/ripple":"8.0.0-canary.6d1ea9761.0","@material/typography":"8.0.0-canary.6d1ea9761.0","@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.6d1ea9761.0_1597156265802_0.9476132634429648","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/form-field","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.79414bf9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1d589d97e99bb2f77d601536970917b70c6338d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.79414bf9f.0.tgz","fileCount":34,"integrity":"sha512-i6neJKMJwwfMqPyAcf0fzKnVqPmOn5otrY37eZuB/wsjv5D8WXxUhfe3veFmwqz4HgeU8k3lOkOnkSxZIhVjmA==","signatures":[{"sig":"MEQCIHf5jk/2uH+BgBeCSz3j40Tru45NcXsGCjzwDXsCywyHAiAsGPsXNVF7bJHzllVNkrglfER3GdmLkoJuYTwxmapi2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":176717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMusuCRA9TVsSAnZWagAAuaQQAIYxP4sh/pEINzNY/bma\nxhozNbd+5fKZDp8uCsloUkJ0Psxp3FMWYTheM6CskCwNE2qo/PXAqcbkjakQ\nP9mWftPele2bX71sAUBN1nahEhHfo4K4A0t57kzoBDUX9aUJx0l+421AQ7h+\nA1X8YxHZvXkD9fPyA8bLBihEEoaNRodL6DkzlJVpZWjleRFqUZ30w+EonD92\nhx+Z66nR0wShQ0oQdYKMyVBrXspV1AYriM1IpaUBhkb8NmoMZigiE5R0zw74\nm25Oc2bO3MywQZOQD19ln/IAS0XVBw7ihDk+0v6PhGcChOQxV5lvfeimi4s5\nDeUBLHOEtki60hlD+I4HqYPWx02zvXM2lO6u7K4sXOiBEqyWB4fFs++Qb1Vs\nyK6TfUJXQZczKdTU+ViDTz+D3Z9Dd9xvlPxAaBII9rCa+8baLgiYD+/Y8+RL\nYYJRuthOo+jg/3kYG7fbB+Gfvpsmw3Kyirv4NJq1Z7vwOOS/vh0ESiJ4SSP3\nfYa1iteRH4v3sf+opYnL+p5nZ+iKn9Ids+Ui1j0/0KrfWlwRLRCmvVXnrb3V\nMeUDKzIcJSBQOD2ny7HwMWl0NHfoSDii4oYaCHLaIc1neYI7thizgcEf2RT0\nhqsB/Mucn0Y67I5XjxDfH+SCAsp2EgPdtKcWn6DWoyUgzwQ+0kaghp+IGA9V\nTIpn\r\n=kCvU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3101c6ef84c1ef8d9afdb44b6b6b3067c2f5723c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.79414bf9f.0","@material/base":"8.0.0-canary.79414bf9f.0","@material/theme":"8.0.0-canary.79414bf9f.0","@material/ripple":"8.0.0-canary.79414bf9f.0","@material/typography":"8.0.0-canary.79414bf9f.0","@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.79414bf9f.0_1597172526046_0.4037592337057405","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/form-field","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.85a5272df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e67a5d0eb8814bc033a926d8ecc521a431f69e41","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.85a5272df.0.tgz","fileCount":34,"integrity":"sha512-+VLrBnTDl4iw3XSlqbS7tDyuLQnzawhvpa+C10qtqFOFhB1cxdlKPPYW3ZFBWMUestKSJU3XhxdJliz3visXEQ==","signatures":[{"sig":"MEQCICObnoOz6loE9cgf/kunj6/kGPGRI3x31veVrr3gYoCIAiAwj1vsTEz9UgdeniTjJ+u41IfLT/UTy787Ur63yzYHfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvq6CRA9TVsSAnZWagAAtuAP/j9zPG9JftTPtEXZ7Q7v\nJW6Yvy7xwopTDlaH2WVVTEUSkqxFNYZg+zLD3YMYet3/wc86mgZE4mNO37df\nZsjYYweH3aTAlPp05UJtDerVw1pfZNCFMH0324wcdnRO2zr+K8XbvaDW/mNq\n68dk5ilMLsKpoxhw/V1vxltbp2VemaLD1tTKaRCiSpkCMsMjvcEFbiBfqT0Y\n9GjleCFLU03tiP1LtlbI/g1TeDcC5G2IDm9fRzyi9hjr6VQCW2zcNDoFc+Nw\nKH+Ust0hWqChz91vJt2rVLVdciTG8EpplChvXKF0dxFNWtgyzLdYYpLR7Oq5\nG1bV7HVjkkQjgfUWgjGmjVmdb1Hq4dObywpi+Tcn36Lb/nCC4B50EUMEAcvg\ndVhX8n5WIZQuWMHyd1hAHHZ88t9tq+ikaSoVQ+a5QyGPCM2tKiPw11WUZbSs\n6ub7NUZgFQ/OxMFhFsG+j2LTJk93+jqyZIJYVVVobuhKHP5Ybzz5vEdLSweW\nl7+83q0mVhmMNcyJjI8gEC6Ghia9onRz5CONoZElzmtkijBIK7m0Xc2KpHLD\ny7YXNSY8eISykShCm0di7RkSN8YFUwKJIIr4MxEhxgVP81xH3xw8UCvWa/lb\nZEXMK1bDoZ3ufp/ua6cgtSNtiX+5G4VQejmT2oUkahWeRPWy6NNU/ync3BI0\nNpyi\r\n=6SyY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"070016d39c8d62feb1148d71182053d37bc35fc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.85a5272df.0","@material/base":"8.0.0-canary.85a5272df.0","@material/theme":"8.0.0-canary.85a5272df.0","@material/ripple":"8.0.0-canary.85a5272df.0","@material/typography":"8.0.0-canary.85a5272df.0","@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.85a5272df.0_1597176505607_0.1622662985576706","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/form-field","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.fda053eb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"990ae14dc72223c8e44920bcd61e145b96fff51f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.fda053eb8.0.tgz","fileCount":34,"integrity":"sha512-2EY8SV8hzT++uKUIxKzsHEQihEdD3CPi73ruCiDR/TLAHHM/Nz8MZeAS8O3zwFOnBh3uu3k9SawSVdE2kMpCtw==","signatures":[{"sig":"MEUCIHNqQxpAw/3WEGBPUsKEJOdPxMxpiwTOpWpK4DB4MklrAiEA7vEJXXjPhqg4iRa/VdTL3XsaNmdtj0tKZHlDnRBuNwg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEtHCRA9TVsSAnZWagAA7xQP/RpPefSjDyYDObpjJnhV\n+wJo2/Q+V+42RvM876QMWmhQa5G/V/0wHvntT6wQmQDycTCig1Cq57QB9XkU\nQL6OFP0FelqpRuCJj1uJeXX1d+KqluaQq2ptEAan/kbe8OMLBJapeDg1opz9\n3YzWtY9sVA4J2Za0on8+VF2Ic0i/Un/VLar8RB5sfpGMrZ3RhfpknsunlSPj\nFWMlRpIcy9+nDn8T21DWgaGmNfuRS8Yisss4VHn3Y6aZcQihWxdr+9M3XL0J\nkBJcV794POUgTe4QR4gOXd0bPJ5bv9FKG2MKfy1t7bbpYRxic8SxVFhfJogY\nb3lLtROdnI20rjYDjXS+Ws3l7jOYmFpdnDfwx1R+HKsSy0eRY+xxB7wZ7iOr\n+p1e+FrhwOGfk+73vkHzhUWEhK2eyxaMGb8w5ISCvj6uen2Ry6hyOVa/v9Lp\niOFidJClpsq33QYt0DcWOVFtJT5oJVL2hp8bQo+tItqr7tqTNWLg58micOLL\nLV2zS3zxEWGFkJQ8VMYa0wSoG0FvqSA23re4h5t7vFtKIEynVC3H4NoRHiVo\nBlmZBUYr1zBq8uWP4K9FOMx8ko9ZG6C7eLTFFCh6ZypBpMEKGN5ezVJSEmni\nDVbSXvmfvpgCv+qpEn5zGuwKTiUCf0guzwT671iYkI6pISQjzh2SXaJ168Ql\nVe6l\r\n=wwfP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b92b594784940e2fbd248c33d60198f7f2e0ff71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fda053eb8.0","@material/base":"8.0.0-canary.fda053eb8.0","@material/theme":"8.0.0-canary.fda053eb8.0","@material/ripple":"8.0.0-canary.fda053eb8.0","@material/typography":"8.0.0-canary.fda053eb8.0","@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.fda053eb8.0_1597262663181_0.5259754007124182","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/form-field","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.760873445.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d29d58bacb3312262a2fadc87c6062a911819676","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.760873445.0.tgz","fileCount":34,"integrity":"sha512-l5Z9EGUG5CDTHroOFGqocfl4HBWJ2YZRy3/h6Ufbm1JwiRzlrL1zhAEaWq8LkT5o2mp4Pfq49j1Bd8+pTQ8WdQ==","signatures":[{"sig":"MEUCIQDINqVPAMcvBeRDGXQxI8maGq87KsCtUQWR+Pavmv/wlgIgUnVWOKAdlUrrI8Z4ZWfpIguLZwZF5lM7SDVBnyx9akQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGKCCRA9TVsSAnZWagAA044P/2Vuavo/+pMt5rVzHWsc\nxldDpeSpjotvSFtcomiTweR3eRunJHnErfKPkt27mj8utBNutQyGj2XJjBMZ\naGnXo+MeeXzGWkWWKZBFq+PQVrlcWe1UHNYUq3hgORfzmx2bdkTHzZPTnOFJ\ncOj/oU2G6y8c/g16FMbYNBDMiwW22zhWMfj3437X3f+gIvXtC4m7TWFhCjgF\nSw8T7J9Zv3kCRwLFEMIMoP1ZiAZHwNHEInPlG0pgweJ54y4/NpTDkOSNWNsS\nogSlhJ7jL3CfrtmFFQaF7HXaso8CqCy24HKeL84EzorQLRKTtIlmQtqD6Bmk\no5etpn1THsp0xL5UkTANCK48QmzC8TT6xUw6J+mRBXZcP8dC/3aJCeln7AcU\nJ3/hVJw0Rv/tWKY7aI9XHuvNcyeDVUi1g08yhxH0+RlgsPvcBMzWZhVQZcKg\nEfqvozMNpQDpx4W+mVueLnufoQ3aS8fh2kXG4TeDBKIY2IXRCdTae82vIZFp\n+bRMWa6HnF3MTU8AVIuTYVqVjYQAKtqm8j8w3XoHiH1LTj9Uc7a3tZUtaxWM\nwE5orygDPOhPxuTIb4jyKpIOWVnO4nO9VMN/8fqhWdCPvYCq/H6i5CrT97zU\nMFHqo4hUI60Bh+sga+c6oPRaMVjanzDfykCZWfZ10Z9g1IP90sb7cHpCs8Al\nXdKE\r\n=dVv/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a830629b92051950e9e15bdd288ad87238b7103e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.760873445.0","@material/base":"8.0.0-canary.760873445.0","@material/theme":"8.0.0-canary.760873445.0","@material/ripple":"8.0.0-canary.760873445.0","@material/typography":"8.0.0-canary.760873445.0","@material/feature-targeting":"8.0.0-canary.760873445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.760873445.0_1597268610048_0.6719061612908026","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/form-field","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.2f4711a30.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84b96bb7d2c809248d265418c795b88e3c588a8b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.2f4711a30.0.tgz","fileCount":34,"integrity":"sha512-3GOF9CW6wolAdYswJizR5xh44jZJZPVrwScCOY3nuZi+hYhiWqzXCHOmHEx81ho6zNTEi/AA+AlOSQFPlMGdjw==","signatures":[{"sig":"MEYCIQDW6Sbo/piuCVxqcOededjVc8TX+GBCdwhtqVeqxCtppgIhAKAih0dYFqEJKWCJjSFTrg99X06K3how4WmzhFnOQC/6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGTXCRA9TVsSAnZWagAAoS8P/jGpV0E/6kHBtQQmw1Gn\neHG/nOpXAPJwDwi/EpFaPJXlaBuykh+pQqLtw8stGgXk42OI1MDlz+WGbgO4\nzfXoXimOpzyrfnu5TOPgyz42oE7eIflOOsf8JZUwNd9cGFxjiPGZWHIrMMsJ\nQtDaYEWVPoxt5HyRG8HIlGNd2nIZCe+XC05aRduKyYDsYt0uO54dRD0Z4Wzb\nQ0cdRT1theVC3HADWo/hxNkNy48OnR7sDmwEnK3JrDqng/L4p+a2fTbuPlpk\nkO19q3kVz54fJ5Yf8XfWbPe7ccRVQTiS9r6CVMpkPq9r2RriQtcincPcf0fk\nuwa/CnMWPbuUYLvjuHY7G8+JkDoczwLFlAoqw0jxe0mRaQIA7v5rFuqnvRrY\nPMEzGvhl/KgvWUu0ivo7rtnjyijyF8ycai7GboYrN5imhBz31VB8i5DSnM5T\nCGQ9jae0SswqS+iL9Z2NaiVuq5tzBCRyU8Qw/4XgqbhIf/UYG7bBJhULxpuD\ncITH0yAzfAcUA44dlqyzlL3r+MPj/3Cq4afkDMxytlyzUmG1EIK+OnnKBVk6\n+joD8ylhDPRuWgMjI8onmclBSysJwYC3dqaovy5p+YaunMr9hPW6e4+usRSz\nXxAFUQOZX+yl6Rgj1e1ExMwJlxeD9NmiBnTQrGG5b2wvyKnP9qA5PZpKGUZL\nVoj+\r\n=KrL7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1347e5c15ba848f3525dcbd08fd0b11061e94116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2f4711a30.0","@material/base":"8.0.0-canary.2f4711a30.0","@material/theme":"8.0.0-canary.2f4711a30.0","@material/ripple":"8.0.0-canary.2f4711a30.0","@material/typography":"8.0.0-canary.2f4711a30.0","@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.2f4711a30.0_1597269207237_0.1231818386709953","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/form-field","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.2d72f3659.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7cad8fef49aaf6dcda6209814a5761b27c0b000","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.2d72f3659.0.tgz","fileCount":34,"integrity":"sha512-yhOW0lE6JFc+14ojjCC7oMb+KHHJPvBiW5lPszujvcgmAoQMjrr2FiD8uunSYP0ZWPfQEfGtY3aj7rF9s/65aQ==","signatures":[{"sig":"MEQCIE4EJQ+oCzThqj2QRiP1qXYMf/CLuFrtJ0wt+IUp6SfYAiBnWBEs+q5VA4iMzvHLu2dpxWaz3BGZhxlrZBvr0Vs9Ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGaYCRA9TVsSAnZWagAAhkQQAIp2cNqOVt9v4IqsG7yI\nx7IGdROz6c4aojephefNND/tR2ZbqS5ftLoTB43m8vpLaW9W8IGM/SsTJh2u\nS9gxnS3D+GP9MAPZJt9OA8Kd11h+chRJIe5/3vVH1Odhwea0JPdzJf3BPQWp\n8tLRe2pkS6P7n377yTVppR1y7vx8PHpgxccIX3t7Kr1D9scNwAWGRvps9eaZ\nVpB/aHWz3uo3negF3G2JsIitZXEs1BszOv/v6sjbrQS3Xzpe+5qfkqpUR0yd\nqxm5a7wIqTc0OCZDvdWSOjTSVX+QN5gPzqZGb0bA591Ly05c775iFs6mdKee\nhXffrbGH3kG/WWNlEy4cIv2F64wQKXi5AKcRjQzZLJ02xyc0HVZ4RQ4AdtXT\nIQzDiC0rZu8oSOw7B24SI32RT/5rLPhWMt+auRouVIN3y4iccfNfHl/TFifU\ndRldtNLH6pLy7u/mM3SxlzLG8A5LoWuJlgjCsrVoTKU+qmIErtljiCCYP88X\n5XMBkbROcPWA8Mhf7x5OS9XvX5wVIE+VRlE/5EIaZbOYuUoHQjcF659oNKfK\njhU23JecpH5cXiJI+TROO2V/3Imc0XQNQuJc9djSX66GEAnscq2LDDZm7Ypu\n24/0MOPxlXnWnqsC6BBDzEMt0duv1HKp+fwvos0rJC7Sg7YMaNoMw24SVU1e\ngFi6\r\n=4Vp5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"de40c24a4d850a3bd4269dcebba821d972e01c19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2d72f3659.0","@material/base":"8.0.0-canary.2d72f3659.0","@material/theme":"8.0.0-canary.2d72f3659.0","@material/ripple":"8.0.0-canary.2d72f3659.0","@material/typography":"8.0.0-canary.2d72f3659.0","@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.2d72f3659.0_1597269654178_0.012283110419224696","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/form-field","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.1fee70a5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de91fdf735bca6a78b3a17c7aa8af6fe6cfa3322","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.1fee70a5e.0.tgz","fileCount":34,"integrity":"sha512-i9t2gcHKD8kIUCWsMLLzvr9M2iOk8pHvyRi58AtgtaG8p+ZBF2XR/0KLczgRABxe6Yes6W18h3GcHk04h7p8tA==","signatures":[{"sig":"MEUCIACLeEkbEVfSRLT9O5//4kfrkBa/+UkQC77LkT9FMZMXAiEA4HCN8JyKDO6loGEYkmu6//dBkWBbzggeBUfd8V/lR7g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHs3CRA9TVsSAnZWagAAB9AP/2K2RZi6hHwwtH1auiut\nD+MeLhh+iv9aV0iCg4sMZcZeI5mmFEXaBAPzxdmXfS9HXg5jHQrH+2K4fbcQ\n9Mk0XuJGV1tlXjSm5iJXp6DrG28TL922VKGx92QAnU9xVDMQmKXVMkKbSY7j\npJ+mVhp3uNi3BJgBP0L623/OUMefb8qqyV1MvM0gTzNDSUBYkX5XreHV05jJ\nK/fppO0bOnxYux30JVA3S6lYNG/3l32lewzL1ANrkwYFlSCJ9brvnMXxoc58\nN6G2RcqSIS0wfTACOYSYccvDIDNoi0U8Zu/0bIbH6wNblBbiWd537qTEDbB4\nlBv0eYPnqiNc203AIgp3ZfHhOCh5BwdxVFRgH8KtZXUJ8ueA9LHz22v6x/8d\nkuPgqm9+JsSjA7rvPRk6vs38LY+ygoujhvWlB4+Q+S77S/7UdGTmuKuNxj6V\nRO2dDLq45Z+yUQBxGJbSeoSTj0KeC23orCuLgVHr2Jdfd6db1hSpBs/rYPjA\n2I2QsxY61CbxD+BIGxVSa4B6vgmlmdwwDTHP/ioPzg2X99Jr7KIxgjdcQBSu\nArb3BLdUycgiar0jOUFK7vfhOGqy2wjzxq7vQmTie30/z7JdO0g7cr1JyQFD\n7BbP2RSqNlkcZORtG8QIdJztUfzV6DdYxV5EqnAyIq+2Y5N1l5kSFqkxj8Ba\nSgbf\r\n=NwIP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2e5eed4b73395e9cae47d93ed6f34f0dc0467c28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.1fee70a5e.0","@material/base":"8.0.0-canary.1fee70a5e.0","@material/theme":"8.0.0-canary.1fee70a5e.0","@material/ripple":"8.0.0-canary.1fee70a5e.0","@material/typography":"8.0.0-canary.1fee70a5e.0","@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.1fee70a5e.0_1597274934410_0.13663114099747187","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/form-field","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.023f3fa34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c61cc12d0731421636933a48b1159a403fbe7f96","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.023f3fa34.0.tgz","fileCount":34,"integrity":"sha512-u9btkETJLLF5YQ65nJu0KEZGcuON8Wa3ZwYor4VsuR1PTMuFvYaO4WePHjJtopvyXVd39pLElfZWrL5wWrj+vg==","signatures":[{"sig":"MEQCIHb0dQom8bpfRt0YAQrIoxU8MK5SkZYUiFYySsmJCElfAiBal3z6Ob5neReDqP05kwjIvtIsNapy4OQH/gPIdbMU4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJOGCRA9TVsSAnZWagAABZIP/1qCAzhmRuU8E84izDD0\nOnlkJBXl5zXxfl72yQdSC/eSypyU9s16t2lCHTG6DIjtiucF9DEkBce3ihnu\nJGb5dBQoI2GzvcT31VN+quM5uZz1PA8dJwXzDPKE98fps7tIwF3FJFU0z2a1\nBlcLJJ2ciLMnJXoSUu2WftFZHnTJOfW2fp7bSM/w05I13zVSYs0pGxrM+SVU\nTjn7w7NUoX/6Xxhkc+yjzRdjcVfI3E5tUSw8VKRfsm/2BLmylF9jnUh3duM1\nMnKmsChNL7UuRJO/2Crr12rOLZ2ogmGIGn61Gqv9cuFPeLUbMLikY5sxLpfl\nTNSmD62n5KQEU8gys5uI8Wd7bMrgGNqdNY9As2kYOwfZUrvIu2KnX56cAphM\nyF1VLQELmyomLpJOopqYWanlmPKKj0xAZkH9lF1+QuP1sHOegdwfYqC1t9iJ\nDupPLGNLtORpdUtBuzoTKR38VfYd5rha8BOmFT6v16xCYM5peOAprISKmlus\nKeASijItWq8g45unZupuueiNRLI/lVPi+AIJs6uNltJF2ALM4TTZTe9ro636\nUobSrrVLuB3/Ulp+mO4j+dJseMUuOnGNkeFJocazqUNPKL3digniNz9v9lAA\nrEG8EbSPQuAo4i5vTcIW6G/IVTF70BQsvPx6TD8EPCg46/RD+Tb4N4P/uovw\nB7jB\r\n=Jbwe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1a6538d0b407fd8e7a7de8e39b4ed51bcefc560c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.023f3fa34.0","@material/base":"8.0.0-canary.023f3fa34.0","@material/theme":"8.0.0-canary.023f3fa34.0","@material/ripple":"8.0.0-canary.023f3fa34.0","@material/typography":"8.0.0-canary.023f3fa34.0","@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.023f3fa34.0_1597281158273_0.24149343158030634","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/form-field","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.80f3a9e5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6597b82ba4d6190ca63ba9c3b827a3315657a21e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":34,"integrity":"sha512-8RlgS/uO86IBB0JuTLM+sSxaAS6qMDFOLfYrc9av1RaWRvGdO8g2m9OleSaMLNdJRWC6+px/ajEvPcS4qdW+kw==","signatures":[{"sig":"MEUCIQDi3FIAxlLKojTcd+ByaZck+WvhPRJQTbd6I1mhbz0lOAIgcCAvcQEYNnJr4cGEnivalRvms1OE2mYesKfk+B+COO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJdrCRA9TVsSAnZWagAAMxsP/1XMposAJmKJbMayMk7S\nn8loOWgb7ixc4STovo1om2PXPkeikCoTQUIen57TqGnzjXpmYsDk66BgBFCm\n4HRv0hHMzjEeOdVXfdWrZnsfdGCo/sQbScY5UpvscbCT4/VtesAnSylVNYpm\nn/UjnPNESkuGwcCt0ZJeyLZHANxXp4vG4uw+PdwukN+MRBGvDDDvoR/fu7aJ\ncxtTSp3Q021OOhznB8YszDt/N+Tn4vmdsbHMsBipEvQ3Hy461QFLv208saiQ\nrQjVM61xZSFgUUmC9TCV14Qruc8WeejX7WaZ7B+Ht0E8NRDZ9lL0xQed2JY9\nwfbRnEjfA4OrquXhgGyL0FALDaCA+BVhcAzB1tBoaiuwuDKPDQlwDXwAi9gE\nsncjh4igSwfYQ5Kwh5xYec1pXnit8UQwObfHsoPhGEbyfpSyw/i1mpfwVcHh\nu5kEL0jANNDcoB0nQZiQTzYMhm7TVLAdb0rnN6X8D/M4YDu7QiunAQ6xDoxF\namJ8A7Jx8FTM6D6O5C8CmB2z11FQOeF4WYQlmhzez1Uk5Z4xlw2DBIZGXDx7\nuhShxXMIzu89rMO3+At8eHkQ1SE0/CRbTchwbjl6dlufWO0e+jruDgj28jMK\nCsM9QmW/wrs27HVav4OlRuasyaeOXPIJnRCEGQv4QSI3xupHjxAGfMBgvDv9\nwlwn\r\n=+bbm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e47018f239b51581a67186dcbea3f4167f5ea3f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.80f3a9e5d.0","@material/base":"8.0.0-canary.80f3a9e5d.0","@material/theme":"8.0.0-canary.80f3a9e5d.0","@material/ripple":"8.0.0-canary.80f3a9e5d.0","@material/typography":"8.0.0-canary.80f3a9e5d.0","@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.80f3a9e5d.0_1597282154626_0.6574464204395514","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/form-field","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.a1dcfe97c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc5c018e6334fbb6cbb3664f52afd7c147ec47e7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":34,"integrity":"sha512-HVocRb0xsHCh3e2PABbA9mII4JZB3hXzWsh0BntYDh7JRYwtK0Ncm5D+CztJej0cLQofYrsyquxssA1eyb0EaA==","signatures":[{"sig":"MEQCIEfczoBejTSAIOSSTB1UGtQPS2t7Lcxzfk8JBJqnq4/SAiAeQMjfUfYn/QdFJQt+ILoNgBF8SGVCyoRmmtA4HFJnrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP6/CRA9TVsSAnZWagAASOoP/A31CtCvahKdbDnIIXVk\np6Mj94tMVHIDkLJ/NS/YtdH6TY7ajvPm7S+O1kOaecYK/sgTqwlJNufpds2Q\nOpOqAsvM8oxKLffQXpQorQQSiPKXvA86SBCazxeXLR4DfIuV9kxwxLObnbHQ\njSkzTHnrzDz1CfrI+UggcBTyEC2mmspIw0ODjUzyW6oYR1x3v9fU8HV28GrY\nY5LE20WIHiUWk5degClg7ls1mmWAjx+9zlpMboIVoBo1QqATUNECCyIDt+Jg\nQc1hg4JV1W+2LuTSOFlBUwnfGnoyhCQv0HRuIRudKHpm4qDlZ8mhXvcKH79o\nu+5+QvbHW3kC5nrKd/JW4QULiiOni6xbPpq2VGaaHiYkXPtznfHMWy4fQlnO\nw1LqPqWwLQwDVQoFk/rCzpZImCbViwxV3l9/JOOMvqhIaHXLLkdeTgwGVsof\ndqEjDG9x1WugXKpBLzJviwbtVziEJlyQ1xPDRjLZlOfEN3Qz84+Y+Vsdo4GB\njWySle9j4lCw+XHcBPuvDcHI7/MJIsydoklIf4rW+uqD3ClSeHFyq7ZMXYE6\nnawcTHqAxiBKoAIfLEuvO82p0PTLncYWQgYHoxJyPrLoGpnniQssXV+ZVgC/\nAReRg73WddKg26oAETqi9mmX72GsavUuxs4WMqM6nFAFUsjBccq+cDdLjPE4\n+04g\r\n=G1yq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8ec1483dd23463f0239974be9a65ec22a6b54715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a1dcfe97c.0","@material/base":"8.0.0-canary.a1dcfe97c.0","@material/theme":"8.0.0-canary.a1dcfe97c.0","@material/ripple":"8.0.0-canary.a1dcfe97c.0","@material/typography":"8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.a1dcfe97c.0_1597308607242_0.7645484634221613","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/form-field","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.af332d5be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f23c272e627c2b58c8225cc846f040067e24d84","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.af332d5be.0.tgz","fileCount":34,"integrity":"sha512-of6g80k9oWSkpWcYyJCS6HH7u7mxubo3/j4FoOHIrl/8WmSYfQ+U6Y77i0iXYTEwaE3Kzh2LLT9Vsqgo9Hqy4A==","signatures":[{"sig":"MEUCIQD+LAmDChxL7OneuKNoWpuUMJG+l0s+oXFwBirzlTlVNwIgItl/7nhIyYHQnsDnv2OQyXZgGAGjjgBldBy9ucXXcIY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa3xCRA9TVsSAnZWagAAVqgQAII13XoyqZwbp71zmb/I\neUKqxw/TCuhkS5retyzWMT9vTpA/7CI3JCMUzsEWJlPTJkv5LJ9FiNkQbFbC\n0dIDnk3b2MQWFKS6QKsNqJussMGX8WhL7/BZ0P58sbFPRrs5YO3t7xTObmsV\nGaKKXax2iAx6iddkdpF20qh5Yqpejs46HXEQjiryuvQrCdgdNZTVRj0xDRph\nAcW0FCxSIagSgR987HMCMXXnSL1mqV6dVWSdCQAdgFhJTNO25mOQHwaZD01w\ncUTAjtdLN2RCG2ZY4R9zkmpsw2jsFhpdHF2KKCmAoI8UrsbYjfPQ0hVS0sut\n1TOeYoJhOqXiy54QPaVZB653z+gmhgDyrF84yuHBdk6t2dpAIiV0HnMPAK8T\njUF4D0wBiAT+J9QMY0p1WANUTDGKG9FiylR3EQSoVUMSHXE63LHlkATzj4sg\ncUhtBso2oKp358+zZDhcOrppbUuc5R2B9xPgp41ou5G/EQ7ciywQrDye8TFk\nbbizf5VrHdYycIhgt6Lwgu5Yb8RwbpGrPNbI54dFUICf2D8UhQ52kqo11rO1\nnM0w82ZHDuGGh2lKIS2Foo/B1kULVq24nvVbXUt1cvPxilmoZAqcr8a0lBdG\nSXA9rlyesC1kgzuKDbazF8RAyun+dGo35vuf6zrTb8YWyEec7+bVjHoiZp1Z\n9tTL\r\n=HE5l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ecb675d071cb76738aea95a2d43ef88a134275be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.af332d5be.0","@material/base":"8.0.0-canary.af332d5be.0","@material/theme":"8.0.0-canary.af332d5be.0","@material/ripple":"8.0.0-canary.af332d5be.0","@material/typography":"8.0.0-canary.af332d5be.0","@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.af332d5be.0_1597353457041_0.3143481394571601","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/form-field","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.7dd4567c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04d5909347cbfa9d4235f0cddf47c9df11ed2619","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.7dd4567c4.0.tgz","fileCount":34,"integrity":"sha512-Q+/nvjxNy3kZz8mUZ/jT2Cy5rcuaqbeAlpGUycd3/AZ7jhED+RaLhnsZryln/RNC5IeHRhho0UINrOJAU7mRRA==","signatures":[{"sig":"MEQCIBXrk3mP854ec5nBC6TY9ArugdqDG81AkK6GaqRWIPuTAiA5DgfAa30obXt7U+sF14F0hffjCYZ4A87RH2WIo2IZXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeACCRA9TVsSAnZWagAAq0EP/j2juATcYN/Pu+HRikIY\nwk/hJa2GiEHbTT5Aey8nAmsKbr+thDyX/pe9qyLzmfW0U1On+CkWYBSicX7y\n3IF8hVsg5ULhNlfLVVL2ZGTx2fe1sHa96Kie6kj7d1ewEQOHu3S5fJlFaa80\nujdrSPAIRLsUiRZXpPScBfvWUTehDMTdHraNvT33jTayx8faY4Nt73SCzovG\n2vpi1KtYxUmhwYVvkaxewGG5IU0KM8KggzpRTl0zuzB/k9KgnFF5KMP3Ac4U\n+q8UJwWFuZYqmtSxVLQ4cc2I+3PJ5iZt0ignhrT1ZXzums1Hj7XF7sdFNl9v\nPvgd/8iUcME1g20TEsD4WSQIsf05VjhjYCEz1fLUI1siEwhZNtCGnaV6Hzpy\nkTMQinv1GQJJah2fPXyUjJO0ebGp5y3hqfMFNA6/IgBOUE5u4JAx50SmDL2e\nAR0qR0oPHKISGN/ii+wq7PyGkDPFmRd92wvOGOmN5zLdEsaAwn8KvliI7a7v\nCloabc5PBL8/hYwyQqNGO+Ei9XWK/99DBcYGwX/BgLaXnyaNAGVrB/SNYSwC\nZGlBGK8m2bEkmOmwXzlzbTfThb0dm9mKXhzMiA/GtbZIgD1VimvsGeWIAlE1\nQjBx2fUHiAAQwhLB6E/A+JLy5OXQYfM1Ba/y6abg9YZpdGWg53s8L+pkNomw\n3dFE\r\n=MTFr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"515ae143d426f0329f0a745e0ad35113761376e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.7dd4567c4.0","@material/base":"8.0.0-canary.7dd4567c4.0","@material/theme":"8.0.0-canary.7dd4567c4.0","@material/ripple":"8.0.0-canary.7dd4567c4.0","@material/typography":"8.0.0-canary.7dd4567c4.0","@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.7dd4567c4.0_1597366273548_0.4418799802670237","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/form-field","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.ff870005a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2afc8fdc0c44d501bbf08447dbfcf356d3e2d21b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.ff870005a.0.tgz","fileCount":34,"integrity":"sha512-AYfbrzkxnKDJUPuG5xfHEAC91RJQNW0KAO+zy9wTHPx+mD+C0qy6D4VZpNs7Dxkfw4RqrFOHkjqYuX7XscAWig==","signatures":[{"sig":"MEUCIQCtwDOY/svR8XyCvV1KJjsoDH0kNBWu/IihqBFXvZbCIwIgdx9jzcr/Hc//GJ7QWb+d0sH9KvvJtfk4njU+PT0EDNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeXoCRA9TVsSAnZWagAAoUYP/1mGvhI1Xvo5dmWwXfLy\nuJ1brEcwGkt/rXF1X0pMpSNOkkesJqyCoNPl3hH6uo6iSGnXWgTdoPQFp045\ntBa9hCE/6Tm/4L2ExEdPunC+efFN30i8awgQwNqWuQCyq4Q3SG5a1Upf49Lh\n0tr/sHmkI8pFHLZn3SOp3M/311t0mYTwJ62IcCUDKFAu0nJzsCj4AAhRteLe\nsyWFUT5nAf9gpct2GmnLfaYkgCu3GyPUsqONt1ogPDPLC4kOjASubDcmH/DY\nV5GmeMjURYz/EAQ5XRmKPTQn5M8BnjaHxwkLnLvlu+xbbTTJTQNgEH50y8fa\niBRP32zLFXOhhoKS/N8GW4k/zyAumFKa6swidtJy6xNn0Ifej9kfKT0WC562\nJTtVdPBAl/VU5Iat0YNJ/J5Qlkig8V26twgpk4GH/xkfSEglIv9wLA9hZhBo\nQj5kbWN+wKv3NFJniocxo9fNE5/sieD0vXyhMXlwEokJ8RJkQ1Suvu8ZiNCv\nCi2Vx/qdWO3WWmDZKcxCeYsbwm9rldAJuOGh/yp1C80GCWGbQaSDRe5feFHa\nBt9vR7imqn4N5fPuN80EgG6T+kS6yk3+YPfK/wVDTASnbgkCqgAojBmyeaFH\nIlRvzAVfJsZn4QuscrXSjRpZMIckBA0V94J1AripU2ocXJqJahVD9R+HLyew\nHKEh\r\n=OJVD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"885c1d5e1cf217db1bcb8176917a25d6c74575a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ff870005a.0","@material/base":"8.0.0-canary.ff870005a.0","@material/theme":"8.0.0-canary.ff870005a.0","@material/ripple":"8.0.0-canary.ff870005a.0","@material/typography":"8.0.0-canary.ff870005a.0","@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.ff870005a.0_1597367784454_0.6048888672601529","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/form-field","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.150f427a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06852cce73f9a1b30591d883d1ac4ab98ff67659","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.150f427a0.0.tgz","fileCount":34,"integrity":"sha512-VPtM/rnzK+tO+OoiCXFZ40FegDZJgfuQLB3+DdE7b7n6XBRyVftO7HpdiYTyMI7sgfcOsl8m1aTc08cIPgysSQ==","signatures":[{"sig":"MEUCIEtO3n29fcnaT9X/J2PyV+/SXP7/c79ywrxYNWI+NioSAiEA+CFnaqlrqYjoMWf0Y3qByu1Q/9RlLOjuzwo2CrO8L5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpHTCRA9TVsSAnZWagAA17QP/jzTQNa6mC7tn0basyK1\nAiQIdZP7U1xSmywAiduhZBycca2uGld/LSeXiqPZ31D9ioOMrJzpJxsskZ27\nXCZ/GPql1kQb6My7s8hUR7WFlVs6Fq/DOdQpS8skUMTNqqDNNO/EW7Wtcw4l\nk7bfc0f5IIpt2c1fqSK6BbTqvtnFnDSggvm+XBX2sN031Z8kMJ9Ksbly/RrR\nV8+zRXpvVw8b0KVqqsIGfR+K8J3bW9o5PpLPN9Y2o5ROWTo5ZPBpY2YYUybi\nELU908wZCIxKyvyefgPu8zqp8rCGrzb80oPzl/Qd+VpICeDYlcEqMdUJriNm\no/7dAJd7fWw6VN38fE9HBrK0tpL4etJSs/ZiSK+k9S5tBNZfFT9ASeHd97np\nXb0N/MXjv3WptN9KahFjpjPMmHmNACPL+KR8XBYCDi0Cxaqb/6N69jmID8Hb\nBj2dAFlhOCgkTrZGSVGLijvuA+H/WG45ENVb0yvFYjfmMwB4uS/I16xcNmKq\nN+Ee0isLVZXcsQ7XZp3cATLbN8Nkae3LeLyvvGVAZPOHhdu3gbQXTt3hr3bg\nN5mow1thpL40L+x3NYw0X+1b0Dq4k/Rt3vW0Gf11rHanr3n2F+iWEIzHDefh\nfLenVOZYqlz2OeT6+9pHVv0tunDJU2b2UKh6kYa5bsL8ZU8C5EKpAJl+IkYI\ntprI\r\n=SQ/d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9250d38c39aaaa2210225133bd9fa4da3739df3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.150f427a0.0","@material/base":"8.0.0-canary.150f427a0.0","@material/theme":"8.0.0-canary.150f427a0.0","@material/ripple":"8.0.0-canary.150f427a0.0","@material/typography":"8.0.0-canary.150f427a0.0","@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.150f427a0.0_1597411795066_0.7206800935658895","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/form-field","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.bcc58290a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff6865b63efea324e115a9b9de68dea92387c0a3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.bcc58290a.0.tgz","fileCount":34,"integrity":"sha512-hM7i8bFW9JLk0/WP/f3XW5aNrr+sLb4Kus34Mv7YzSSo33PefS7vZgq4KYGmpRdJBVt/AfQrwmL8E6seWzswJw==","signatures":[{"sig":"MEUCIGnFk2xLTmJV/QvqhskxhFcDotmz2hAFlW0esoqapjuNAiEAhjTcDXOk6LHw/DMjw2BoD28eL0q+/ieFXNHnlhKWx2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxzDCRA9TVsSAnZWagAAYhcQAIr9LMCFvy0p5khRHotH\nTPOkyeXAVr3X9oSyi5HKXK3d6IaClahwnUBofNIY8fJ/MdVySJeSLSlr82go\nzXAWoCAYdjgh4kPcnWLCVAew+s0yQYoN8EMbkBrBeZFKwBY3AUQpmzgQaBvz\nbhG8Vbql4dYyiskwr2kjVP4JGIeVx+cGLSd2w6lxVJAqJMyl1OgQDQzhSCox\nQg/sUgfztQylniOjMcEzaqVofjTK0XuwYWXBAop+x84DY1Q4lCWxs5SMiVE/\nrusdYNrQhY1jjs/aIoYs2P7p7zymkALTXxiYxeMVjQdJVFsZUs+i/HidQd96\nElrU7u6DEBt6mYOnw/Uk0uUsj3UdTEzqu4FUAkVS1R3Im39IJVqhKv7ikMFO\nO1Mb23z9DNH6LFnRVqW7LY2wSaoCoXFwxObmpWlHuA/H2kp8sbPhPe7Uvgy5\n4lNolYtrcmMgDoFCcgv4O5SIAqKdsSpcuop6jX3dUWITZl1mqxbrlK7SRRK1\nHSbVJTtXRNtjpRROxZyvWExF+D3hIVEvRNEe5jdH2AiNkwgGO8cby5JtVyWC\nj/QcOC43bNF0fkRZ78g+L7xCAJHhxobeoGkIMmzNMWbvkEaOjMV3xpdsUqjl\n+mR6bu+YM4CCgvXOo6vxKA8dJMHAI09R1jLtLIWfCnrh5XNHEynyc4RWL1mh\n+cqi\r\n=T/4f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ba12c8e781c26c6169e16b167798237b5ededb54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bcc58290a.0","@material/base":"8.0.0-canary.bcc58290a.0","@material/theme":"8.0.0-canary.bcc58290a.0","@material/ripple":"8.0.0-canary.bcc58290a.0","@material/typography":"8.0.0-canary.bcc58290a.0","@material/feature-targeting":"8.0.0-canary.bcc58290a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.bcc58290a.0_1597447362563_0.9636829081732365","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/form-field","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.4f55400bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ffa0810d32393c58958e2cc54aa68bced3ce988","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.4f55400bb.0.tgz","fileCount":34,"integrity":"sha512-XRwYxHMtlZZczfmmBlSQp0shCTYPFhzr/27/poSswPpVWiYLqTQSwyUpMHiHonnh8WeB4ag28+t0hh8y/fZiNg==","signatures":[{"sig":"MEQCIFi6K52x4dFmMvyU7QGg62zi9/zPu4SOCFXUncFo7vjzAiB/dy3EnOzAqKEp+m9itoBdIT5dN5bX9stmow7wiLwE3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrKPCRA9TVsSAnZWagAAZXoP/3KOE2okBeXZvbZ7vLmT\nUpNvz4Xm27MQf464nlxbAYq+7lovPIzOUPY7Ux5TdXQvHvHCc4xKsi3r94Bf\nBAkGlaJTvjwokW/RbyMYmk01aDTgvHY9Rs+NmUWMoULhv6JXDc4CFcLseAve\n26bdGmHGZvrIlNHAvHzTiD+wlIgPKrTxQ62/vjC+i5mwWTuigkkfpZ7XxP+c\nLmyaqyn2EEXyRxQJa6PQ/puDhwWLE8mNKd1MYENSvYS55Gfnmm8I1byj9YCV\nNX9Jy719hXb+8fzKltDsHjA9CVrluwOlV86TICJ0RoaWkM+fFDJdqzPBSqnx\no7+i8smt7BDJpIcM/EBkl+4CB5lsAWaSJaglwyvdJX/ZKeDT9fRbo1zSQKyk\nTQ+/dyUMfZiY0MZY1nsdGoK6iMmMIL84+qiVllisHOkNjAyJeYrDKgCkVLwG\n6JiFZ8nlEb6WyYKnqm4QkW2B+uND9OWSsk+fkCLUR6O06KBwS9UNJbG0lAr1\n/n3a5cPbPsTuJD6MQBgMWbuldj3+aDi+WXaLFETzfGInORgoWKj960ujVP5W\neBNQGb0s2ZFNMYBx8/OPtJbt2z0vz/OFlJTsgB9CEkdAG5CF9qJJgn9XPuzS\nRi2i8D0vXe4EF3UUbUdqoOR7uwQH84d4gsILVF4JSSE5o3ea9SSRTc6NEr6x\nlWpn\r\n=wcYI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a9eebd86aa2e631b994a71291827e602b842dc36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4f55400bb.0","@material/base":"8.0.0-canary.4f55400bb.0","@material/theme":"8.0.0-canary.4f55400bb.0","@material/ripple":"8.0.0-canary.4f55400bb.0","@material/typography":"8.0.0-canary.4f55400bb.0","@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.4f55400bb.0_1597682319378_0.634986087784027","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/form-field","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.000d64815.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42cac9f6ba78885a30bee4a496d1224d4038eb52","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.000d64815.0.tgz","fileCount":34,"integrity":"sha512-TAbEm0pPfjJQce6bju0gLBKgnLtYEhbZ5nQcI6QbEfpJW7WKLu5Gldf3mmwJ5V+7PzbDAzFRMOw9HrZkBtfG7g==","signatures":[{"sig":"MEQCIEYsONHOHyHHxzKzHZUbFgpHAWP0nzsdvff9OJS1EYLhAiAkwX/5jqhTrnRxlnEiBYRqxWwKExgMTVxZrch7I691vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrifCRA9TVsSAnZWagAAuP0P/AkTvesXlW7rmAS9fwWm\nTgvH3eGcU4Wd90Khc8+ekmyIapoPabnRuju+etXv0Cdv0r5w9lOD0aHZ8R7U\nGrmOg72YXHafyrvfJm/e9vJPNH2dCIyAc29dyhqJfkn9F7LIhX1KK3arwW6D\nJ29kaNn3SsDq/jICazduqz35EMaIHgcWONMTOZ6LJ8gFzssryDTcDBn7OrmO\nX0+mhNLLTZaFjdrb1kVldEVKVDZDMbAWjpw2NkZBHKu8OH4OERIj7HDqebUT\nkBYpgxe5KaSpG8V7JZ0im+U4WCF9ItD+AHrgGPo8LlRAChaF42iDY8uGVnt0\nNFYqOx8vSsxujxinXCqbFJebOyaPetZ9GRGAxkrDxEEzhq0F5V0Mi7j6Kw71\nG6/CjRlgSx7OlhgQaIwfEnI73pwXN+iM29BNkt6wiEFigyLVUavsfEyF3Mt9\nu97TCEucnhbZBCLUpcWRczohABthddoF6AK9MRKauxRXGP7+KR1nPSOL6LBD\n7wu+VpKdAMuwkOb5L1b0+0eRAsL9BYSma+6LjbNjqhlFr/2bYwD6RfX3tJ5F\nqaxKzyaA+8SXcTdeRrhREl+BjERf9CPqvuawf5Ra/JKECnIQ2YymGK6lpe30\nfsh/u6ccjm+5LFudjhhqEVIj3gRFACOLL5Cb70+yuJxkXEU3RsUAYmIcv5Bv\n5p7Q\r\n=OhzC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c8a69943d64e6f468c2edeaf1fc6204d372a9fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.000d64815.0","@material/base":"8.0.0-canary.000d64815.0","@material/theme":"8.0.0-canary.000d64815.0","@material/ripple":"8.0.0-canary.000d64815.0","@material/typography":"8.0.0-canary.000d64815.0","@material/feature-targeting":"8.0.0-canary.000d64815.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.000d64815.0_1597683871370_0.7013800306644351","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/form-field","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.defa599a8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce1939a4e316d87836093b0b04c1cbefb04ac09d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.defa599a8.0.tgz","fileCount":34,"integrity":"sha512-UuLqxhUZcT3V7oY28uZA3s951yhPpVA2sH2WofjYf38gYVto+ya/e/mMCNS9RLzKxNRGg5fJDOAWI6Hb+pd3Rg==","signatures":[{"sig":"MEUCIQC4a83+t3Qy3KiRfh+etKuRe+hYuj7l+Y1kEmXLg0k7iQIgQ0rDLDrwc/WjvHghlNlLvCm4KNBjibgCeS+oU5E6MPc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOulCCRA9TVsSAnZWagAA2IwQAIErPa8tSSLyw5jJX2+0\nZhSUJGivOEisbnGVPXSCUc/SalnWuF13K/2RM92pYIn44fsq2WKpzaW+mhkv\nooI1k+dpep0aUWjUPTiBj3lYH2AAL2RVP+MDRaqgp4j+4KOWY2SdsHk4fqj1\nv/X2Zu2i1yGjYZIm3lpE4QP406xOiGXVUUgRT+GpvTxSM9CgpwbBtMWRx9Yh\nXVhpR5cLgdqtPZvOvdZZ/qUqmfqFdfK13fyxM57x4pUJ7APpHWYg9eCDNtXf\nHB6aFRkUpIwBF7vpC/W0mz7fRlD4mBE6JP+wURen4VnTM6U2rCws0M6lMNA2\nzcrPK6tL4/2pOTdo5rJhUnW3QqHRKm6zdytMVfSDmVw9U8MZERTQL/BEbAc3\n9rPvxEsa/+vhuDMLJs8SLifoX9ik58x+jrTJYxZ6QmKJUH+52G0gYyjM5DPW\nnjAvmpoen0jVWvrPvTNhvMOHO/CxVmpKyJCwzFPdoQmw4WJdzvEf/J8QD3Gd\nk3V3jJkFgnMfuWJ+rM6gxLlQGWcwHXw60WZVAIF9vbT9ARdJsL0ya96ZFiRi\nKfJ3596ohngPpriCp8zY9/sc7KjrY3KdARG4+NMV6borAvZjUGEMbKywK3lW\nS2DJQ1b5n6JVHlUFbpvpRooqgFB/sf6nCauteWoLDO7UlBCzEIpEKSEshORB\naGsC\r\n=YdtQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d3ddc8cf9af988fc4a02f26feee3e4ca0184dbec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.defa599a8.0","@material/base":"8.0.0-canary.defa599a8.0","@material/theme":"8.0.0-canary.defa599a8.0","@material/ripple":"8.0.0-canary.defa599a8.0","@material/typography":"8.0.0-canary.defa599a8.0","@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.defa599a8.0_1597696321807_0.030232258717433957","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/form-field","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.66b8ed7e6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f764a3423fda9203c6a4b3ea5dfad4b840acd10f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":34,"integrity":"sha512-zomeu+gbM6FQXdQbPfSPKdVgEVGA5NDiFaJCHXKNbA9LblsESRAEmqggjpbHo6hQZnDo3Tpxa9DhFlXYLYqUsA==","signatures":[{"sig":"MEUCIFyDy5hF85RQCKyufXLdCLzd8w5syWg13wYErMP2huTdAiEAuBlpkNoXuBaaI3JwAGKULF2SybP7iLMXLxM39EvjAsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPB/PCRA9TVsSAnZWagAAXAQP/1cMtkM/lIvTH+7gNt/Y\nFgxpEF6tYmoB7a410aD3SA9+5HqffxcyDTo4Su88StPvKzr+TcvgBGiHb460\nXUdjqH1JC26dukfWqNG+9k2HdKN3EguDSYCcWVaWTPfA34LZ/Hqzx/eB/hvP\nhXiSsk2EudFmNnJYVZ+dHfIkHcC6CmIgNEmEEpvq93NDhNSKmXUJDZreKS3F\n0BYyKJr8TrIObN1ztgewywnuWozA4+3hRiAUqVEAFH1Gh6BepA8GR6AGx5oW\nGP6/wDeShNn7Mw4IZDrXYWRAWlBUfwdFLm5l4ZFBiMpezuMYGJnbwrnEokjD\nb2K8PFV/rLPEktQIFo1cOJf4DlgG55nCN24PXypPObBEqvqAJyj1Tl7DHqjK\nCaNcpGxLZVMUXD8fkhMuD9yKSC0I0BoZei7fc8HG4cwTv7w38yezhvrh1hYv\npHuEMH8gvq2kjem79iz410QdMHItlCcEkCYmkzEOLEgyCLtENKjPd7iNAPc5\nwI3g0iWB2RHi08TptUCA3vYpu+v9j88hSbAiPcDtGLPb+++g0bnOeOReYjJd\nw6SmyGcyzOQSvBRZIps9RP7+w20qIG2ppCoSCVLY/COMBcctdggXh64h//5d\nVsySoGt3FVJbvJvfVCfGqrPdLb3Qb0hL4NsrB+AOOQTems796pdOBv32Oajk\nqLYg\r\n=0wBh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c23c9dce18363cb6806c169d5a516da2a0fcf89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.66b8ed7e6.0","@material/base":"8.0.0-canary.66b8ed7e6.0","@material/theme":"8.0.0-canary.66b8ed7e6.0","@material/ripple":"8.0.0-canary.66b8ed7e6.0","@material/typography":"8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.66b8ed7e6.0_1597775822575_0.6690040688198493","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/form-field","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.e2b1033df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"301f49fbd8cdb9dfafd477a38b74488faee4da35","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.e2b1033df.0.tgz","fileCount":34,"integrity":"sha512-uhipeGfhooqiTTSc+rE/PDc2+U4xUbfJeubUQ1cGXvTU8LVFmK48+L0e8iHYNDjNUGO0a0GFF6oHGoJFJUxwYw==","signatures":[{"sig":"MEQCIBBYnKyL1wShhYridef5UqOFtfCVRSkSBmNUU6zeRQlXAiAT/lD8Zsp7wyttoORPVgYyfUaExyiJzSj7qvs482I7mQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXKECRA9TVsSAnZWagAAEN0P/0uWyv4V4Wuu8SpM1T1F\nb2+BiO0kuXg8rtpdJoBUo/75V9EF9+kevmb8S3IR0iyyIK6FKfyiIC4dv4jd\nDNsCj+eiNlMJj6yOC1IpBJZZLmyep8FHhFAgxgBevVYJprXxmyySOIp7DH9l\nSe0Ahrb1f186ycXKo//9QDQEhcLPELvKK2Nh4iosEVP4RoYcWlY1RBtfP/+c\nd2ivyBOjNe/rmngaCVee8DBYK4rLqS+WpS8X3bw/Mzr+Scc9L4bqj4ycLazp\nUtuDlhj6qWm92Z7UYczD/fCqs2ukTrU89YA8ajSTUU2MEM9ZhTA+u6pe9vVt\nye11eDdPzKe41AiuI8eGMAMf2C/xBSIma5vq6ZmVGc5igKd+stRPqsYqiNa0\nN5rb6JtmDj+oNbutU3ORQbTBsbkDPJ5soKlZ/t5Lhksu3o+tAW9sscPXLaCv\nboUVIW/oOA1wlH6B1wYi5rUZOmF05HW3oFCEAM08qdcmRpnv+AFbkO/hEOHT\nIVjDf7ZnA0ltBtcXwborBGMDp8f72QryU49B3BmS2Und4SW3j3ZKvYrcp+wE\nMBuaq1o4yulAMwLuo9588Uxz6wddWqev0ro5PsjsKH2B7VoHG1l3xg3VOIew\n4Mk1gQrgz8u54qlPb/DtTK4lzN2BYyrEExNDB25vTwdnixFwTY4zy7YkZeFX\nCAsN\r\n=jpZV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"763ba6b73959bf0639ed8d0c9656a53b18e30c1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e2b1033df.0","@material/base":"8.0.0-canary.e2b1033df.0","@material/theme":"8.0.0-canary.e2b1033df.0","@material/ripple":"8.0.0-canary.e2b1033df.0","@material/typography":"8.0.0-canary.e2b1033df.0","@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.e2b1033df.0_1597862531949_0.5749351629400288","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/form-field","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.2e8c3dd2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad8bda591f66ab614420f334f6c5f1ca0748a882","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":34,"integrity":"sha512-8NscnkBYiXFyL/+Wgm4oFGpPXaN9cQSF/0UI/m4mRoYWX0blENA8bg5mm8rSPNHu3hB7X4vdbC263SNAWuHWMA==","signatures":[{"sig":"MEUCICjhxlPKY6teesALF6Y8X82jcm21lStPcGitoSqlvbtHAiEAjir6BeaJcbaF1GyLes2aqdovGE5m6xmjNWLAFORJ3Hs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXxaCRA9TVsSAnZWagAAoxoP/1ur6qYRa4DcKUmqVHza\nbMOCaYjxfxqefz5GQf5yiqFdSOsT/aXCPJr4zzaxJQqsyAeCCUgfxcZbKq+b\n1j9/Odo8l3ICtUS2nuFFNesp/GK1XbpWvvX1Ph+61+/5wSxADZ8I6g60lubK\ni1UkpGnkQxmBMZITRqxejxdD8vCYSheyyh5Yrg+HIuSj9MA/VwHe9GRP8YCO\nylraVgXHZj8qfrm5gC7Gg3EStyDnko/EujA+2lL9ROt9Uwynh4ZYDCF3To5+\n+JvGVvaZy2Hms1Ro2o0p9SERvZD2kKmbQIBRVZgsajxurgcN3cYoBNEQcwv6\nFsp/SrVyhELbz3r8av5IL8JtGi4EzNuQRogrtTvrdMuNx353RK5jfbSR8RxG\nJmiQvNCCoVuxM8bK3vjAHagiAwSHsbVBVw8l+N/VoiAL4qe6GllnwPDM8ANW\n+XAxvOst+CJDyVizGr+3aQoz3RlvRcrFJGcAOyOj0qCebY8jftcbBlHNbEEm\n9uYYpk4Yh/JA4pNvmsVtGMIauZqv5qiFLRu4nWXwDJje6Rlamss4/WvaPA1s\nZ9L6uP23W2CpqLbZ8rP52zCfWv5uKrbxA3SIBQmcEgxKVyPxiJnxzKJ4Ly/6\n2KqSyZBDav2e7MuSuI+C5pBxqboySAJ6SdrSJ9jzNi+tkIpEisdtrYr+kOZX\nvSDr\r\n=Jt10\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"237ca1e061b4efa53d623ea5dc9c9d670d5c9da0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2e8c3dd2e.0","@material/base":"8.0.0-canary.2e8c3dd2e.0","@material/theme":"8.0.0-canary.2e8c3dd2e.0","@material/ripple":"8.0.0-canary.2e8c3dd2e.0","@material/typography":"8.0.0-canary.2e8c3dd2e.0","@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.2e8c3dd2e.0_1597865048930_0.3097222240287827","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/form-field","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.b2e80a5d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed528a6da2f7294f3b0fecc8efc94fdc1ea77e1b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":34,"integrity":"sha512-gHosFl1TS34wxKSVXR6HouoZYaFLNF9EIfuZJudXcMOOLqbobyaUlsvculRVN95EG5YlYOWd3b9XGHig82wCgQ==","signatures":[{"sig":"MEYCIQDeCxrjzpOzgxDVIjPP5H79DQ6KaqhgM3HH4kyCyzM3HQIhAOWlJd5wHsXnvzuwLswr7G5H6v2+Wsg17LFDBWfcfUCh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaXYCRA9TVsSAnZWagAAjKwP/jqp5bfiDC7bJ8iC8+yb\nJUkiRhayr7Sg047MbuodKRmJEsalDC6+khlp+upxCqBKLniZtThG6qhgYl9X\nn7doiCWajOOBVYvnnFIQeixJR8FLGjeT67ZdBuuQ33Ex66938aBGeUMcpN+3\nS0bZSZFYOACUisZis75yYBkFlp7TvzD83V7W5+nVFt1e/IJgfbXzBp2jzI+E\nh/B1gK70bCqOOYX/PYZvcE9Jyhv7JHFup16Bwmx1fGf7GvICKQeM/qxEfPWW\n0O1kkVi7vDKHmynRTv5gS2nNIgFiy+UGQNKF42BNWym+nOlGvn9OI037NhTv\n1lwGf/YgcIU2VCmNIgJD8tSNIUMWHhNfBHEAoChPEQWy7WbJEgW+r2uESoIa\nHZ54qijmAv6jIvZ/V1Uthdrg+LueJVJ0DrAjrKydzMkPDnQvYZUWbx8OZQlV\nvYryXHCW5plEmSp1OGuxvH3PCk38ihmo7zuDkhPsjvVQKFlXGAtoF8FXGQqb\nVDPLwKEIHZojgcImFByxKWm+H8krFPYemqX9w1Gg0E/SPemCRFWhuDxgHhjU\nkwO3RIjzuBM+fiU+xn5WRFFKlJvKCJeY7GCKqf0VYXcpw8VrwbBvukjwW8p3\nNmMtA+f0aIcs7XuCwu7NNpI+J0a34eAEVqU/n0yJKQIVzFnCQpjtNF/51S+2\nKmj1\r\n=Nsu5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"84085f6b072572fb6b09623a5f0b35bb95db6fca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b2e80a5d9.0","@material/base":"8.0.0-canary.b2e80a5d9.0","@material/theme":"8.0.0-canary.b2e80a5d9.0","@material/ripple":"8.0.0-canary.b2e80a5d9.0","@material/typography":"8.0.0-canary.b2e80a5d9.0","@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.b2e80a5d9.0_1597875671924_0.12785232866810436","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/form-field","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.ff88df637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c610c45c4dd208c4ed701e87ba19944ddda88e4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.ff88df637.0.tgz","fileCount":34,"integrity":"sha512-3jjeuCK2544Cv+7xHUNHLHasjSWlh8EnG2aizHF3IwHApIHMqmKj8HOlPmv5KBBxcFLocil7JompY+4mKfNS1g==","signatures":[{"sig":"MEYCIQCOsuV+oe+MN4QocoLKw6EDcMLYC297u85VQyQgEfVEKAIhAOUDFd2WM1sPDX3/qabknvVphFYMAnXQXzKjS4ZfnnDx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPainCRA9TVsSAnZWagAAOycP/jG2bVHZ4WxqgbPGEAih\ngNDvpgxkpZSdj+5jQiIoq46pgdRDTlDd8LG09sDxDsYzSQ7lzd5y2OGDOzIB\neACnl3THJCA7Sn5ue47IxQBJJY6MuGSBS4d7AWQ61kXykajPd+DrhpKWKl42\nQyvfdI5LhgomnVK3Lt5AYTGtH8v0VbAJUrxmzJnUlD4tSWOt4L3bOZ8yIyOu\nZXYR38beaWMHkAyoTGwy8FvqS39nqQc4hxqKjTZEkOJCe8XOnnYm78AdwDzp\nB97l8mGeqAclYNz9JL2fCB3IM3zvXUFfRtTD4N/nk+MkWkPEWV25mSZCh5z7\nXKaZVvOxJdDAHf+Z2X0cl3s+so9shj/2FzwqUxKlxSqv6jHASFUSL78B2ozs\ntbw8CFaRk2fQSmrA4/t1K7AHf9YeyqQAh0SVgxdguLCcBeK479wM7eCyp6/o\n81rNxzYsyJ3bj9PP3NnjuQYujnnsDNSkuRD8AswXDNk74EcEBvWcZlHQNA2z\nK5qObkYDz0NQ+cJRyFZ4Is7A0po6OyGz1T681poMpP1n4zCE7OUYS7k2D8g2\nH3OIf3R8a3D/sklWgJKIw9/DizGmB4HcefUESfUT3jlj5y1WYWHMjgT0AEGB\nIJKnia2tAEvIWJ7U4cFHkeGUOUSqapBXy7+T4rd1HLEIzidWbE7WK54gnJMp\nGsez\r\n=ItiX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"36ba8daf061692c2f915513485e71707d8eae239","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ff88df637.0","@material/base":"8.0.0-canary.ff88df637.0","@material/theme":"8.0.0-canary.ff88df637.0","@material/ripple":"8.0.0-canary.ff88df637.0","@material/typography":"8.0.0-canary.ff88df637.0","@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.ff88df637.0_1597876390879_0.9916151172929002","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/form-field","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.32fb314cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3495648e5ed0445ec843910400b3736b8296befb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.32fb314cd.0.tgz","fileCount":34,"integrity":"sha512-0vm5SWj/8kgwUqWwVUWtP8o4Bi7OZ85MW8l3iTO8Kc8ktCF//sfThwM4LrOlR4Tv07aiXimWGzJF2h9ONpr0Aw==","signatures":[{"sig":"MEQCIBVd3aLG8hRsvne2iI4xgHb9f2V5LP9tbreb/PQd/sDHAiAlMgClzeq+kI1AsOuH7r4p4r3SvHqg8qW0vTAfVLsEzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlJ9CRA9TVsSAnZWagAAyGQP/3GOr3TR0mOEjjhs5znn\np/PP3Q7p4vUHxAWSnPhBvltNMMlEBJ8SWaZ9tuHKydq8w0k9WgE9dVQkD3Aq\niOesZWs6oYGXG6XTdAIeF/BS1IfiiHPvTeETWcrCCLUel2jyKINedQpCqJ9J\nPEg7w2DBkAuu8Fi36h1W9JKgqlRDyGFEdb39LDuM0UvZC4/Z6olhrLpihahU\nzBt+RvbjtsGOh5mQJzkBJ0YbBCratAE59AYl0ty5+xG0H9lVCAWQfs/nWygQ\n659pnX8GOsYBI7ROBNsI8LBvhOq6ugwVCZBQHaJblKu207g4gdlN8CQgkx2V\n0mRhh3gQf/tJ2MRW2GD6R2OTByr24O/kNrPCSYHYusjjiGr5VEOC+TF6bJaN\nHC0D/nmWlsWwigaTBPrDRCXpgOEQIgqHeDoBFUXiEmH+uMRGRTNwBbdb5SQP\naZrNuwMnf+c2m4Aq+fogiWV0wzMnne+TjhCpYCPU8eqvdf4jzo2uzMRuw8b3\nkliYUm0btt76W2/iT6YhnEmTIJDiJM9ddSNdfRoEMVg/UeECYp0DNo7Lu8Gv\nZJrvGI2BXK5jggicDNDd0hJ4ERJlij5kPirOv9XJEeo1YTZnTYFSHDG3zCcd\n/xyjr1Eo0gutLiuEkq4cZGhjNCi1S9HUlw8KWRk+Xtcn1ISLxbmYWcr4HWCR\nT41c\r\n=yh6z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"61108ecdbe311b101b1b87763e8f3283dbb9dd50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.32fb314cd.0","@material/base":"8.0.0-canary.32fb314cd.0","@material/theme":"8.0.0-canary.32fb314cd.0","@material/ripple":"8.0.0-canary.32fb314cd.0","@material/typography":"8.0.0-canary.32fb314cd.0","@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.32fb314cd.0_1597919868506_0.11706234457343201","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/form-field","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.546277d32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"969bbbf543b74ee76aa89b87b58de420319b677a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.546277d32.0.tgz","fileCount":34,"integrity":"sha512-QnKGnHtPtzWRe0ewL9xIA6VMroptOu00+b3NyytfoVGbKFts2C9CwKtMHRWvMF35zmvWhGNBVUFGBypdIV+0Vw==","signatures":[{"sig":"MEUCIAad4Y5vEsKXDj3J1a9f+2G2rT86mcvHjzxxREBnO0w3AiEA/ncp4turqWqpTfouFEpyEcz/sX2FR8tlSwMNUuvxzNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqgqCRA9TVsSAnZWagAAaNUQAJD3/u5YfxuEXZNjw269\nZ5oz1EhN4Vt2gvAbhTc6tixMCu9ywsr5xQMjrO5MaAo4ExxH2EUiONg3+rvO\n2oiUatYFTzmgHA90XSx7MUyPGzUH5fd26ol6XaG6cUIB5bskRmR0pgBgowUG\nAEY5oCmQ17UBTMUBnqAxlUhGrElisIHIjZXFo1bdP1K0ZMNd3z7fPhXRCc8x\nOOA9oNL+wGeylNbKc5Ds1r5/kjuwCI8cWPjJRI1b9J8nDpdYSPHWDxNHgRJV\nhA0k/3k8JOEpBtpIWegXn4qVzRWjaDsQJrdfP6p5xw4BvSrwXu52kt4Go5yi\ngmUoFKAV09+B5apF2bkRtYCDpsa/+DWmFx3vOyRka9XgqWo8rl7Wizp8CrTI\nsIC3BBTgQC9IiamAJZy5SSAK3X32JWOUvVoEOwn89k1zENcMYRLZs1zV3G/6\nOTodLq695LSDCqOdFnbDpbWSqPvN3iicVc0mpB50RPxt5LIfi86J1HeFKFuE\noU0BbNri8kWBURxejUEvhFhOJri+dL6QkscBbKPwc4LZlUiEve3LO9P5JzYQ\n54nra+C6Qebeglbrrp3O/FNO8IcA1Qq+PXUCzo9BESWpOI9+Q7AZP/6jl2ff\nu/u3DC4M2miOGDs6J4kbHZZAm7XoQmKoAE5p4qZXrNRpOTKAB4lmQ68VU2Xo\nUs/U\r\n=WoEN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1d97622107fec59bf3261ad4f1f3bbe21fb1ff62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.546277d32.0","@material/base":"8.0.0-canary.546277d32.0","@material/theme":"8.0.0-canary.546277d32.0","@material/ripple":"8.0.0-canary.546277d32.0","@material/typography":"8.0.0-canary.546277d32.0","@material/feature-targeting":"8.0.0-canary.546277d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.546277d32.0_1597941801466_0.9136575226778891","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/form-field","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.da72839f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df0bfb7a07555d13cea1c30ed8d5173664c49317","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.da72839f4.0.tgz","fileCount":34,"integrity":"sha512-sCQzzRhPe30/1I8sJL3msMv9MXy1iG/Fwz6uF9V0twcxZ/2TB+Hu+L6cnzfZzliecnYYwllGduGWa/GIQr/RWQ==","signatures":[{"sig":"MEQCIGFLGqtQTpoHMr523Q12cz9wV78gjQSDEP8IFpD0ZZlsAiA5LN7rAepdT3CnTlAQTOP2UVLoIGvRH9Zk3tYkt/TWcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPropCRA9TVsSAnZWagAAyIIP/3tor0SkaCmCv36UhZqB\ndiE+//Xb2gc4rAAImTPJ9p7Q8CLi1uhNdvKc7nCk7+tRz+8SCtpLjwGe3Wje\natgOOyYUaBwPMhn1xprICFsmjYlBZb2zgWulji6sjaDk9dUiC/FNnkXcJ96W\n698BQMz/ltUoX59AMhar7HH5+Nrp1zzfJ+TgxItHcQGmRdAIoyUAfvixAUsJ\nILqL0m7fQzYJ2jDBjL010U2qKNXzOOTlo/yxL7fU6yXtrWj4RbC06kQhS3Lb\n9p3C9vnz5z/FNk3ex7nUnXLJ7eusL+4UDi7I+PyXk5Q2WnsmT5Po/4kMGjTi\nybquo8Yttx+qKtttRGOrmLQMBAtbrIlY5lDKb/+C4YFMrBZCTaPga5QhzCko\nNROmz3FAquMRhv9sPohLCnyhdHCPQxs+nL657sVY35zuG1Jqgx+hoCp1Ga7O\nki2ZC0CQ82KGZGXK4M+k2IEvjO1+ty7g7RMHOw+v/fcfgR5QRn990EcdjwjM\ndB1Daz5Jbsk0uiywGHmg6KFzX0jwuGfR4pLy0uC4uB0JBmLvm1poioYwoQK/\nIMKkWklOiSUm3/GbizvPOrweDzUHFk1qPFWRxMDzPG1EuJyZLa/nBeDs6z1Z\nZ9V9jdwsgAM4lpUEEm66KIRwIvSoQADa+X9VrV568KuO4zFsFGsdTHrMDtvj\ny9Jz\r\n=02pf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1b42b69de51cf24aa95c09d0e08ae1e644c71335","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.da72839f4.0","@material/base":"8.0.0-canary.da72839f4.0","@material/theme":"8.0.0-canary.da72839f4.0","@material/ripple":"8.0.0-canary.da72839f4.0","@material/typography":"8.0.0-canary.da72839f4.0","@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.da72839f4.0_1597946409130_0.2936303214691314","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/form-field","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.346069ccb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbb83d9d8e3fe8b20550a694f848520486a2d049","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.346069ccb.0.tgz","fileCount":34,"integrity":"sha512-ToZaYJSMzN3WEqFQNfEB301yilQwubC6jP+jy0oKkFZrJrR292m0ZwJHyx3+X64G5bqj4kJ0D2kDCgFiCq/e3g==","signatures":[{"sig":"MEUCIQDqaF9xvVZ9UubTZYczUQ115bnWUgHhT6s+94cz8dx1kAIgY2+o2ltBRRBTFQ6SEGwcd8Qo1Ugf3ERrQALLC2rUp3c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr5/CRA9TVsSAnZWagAAilwP/0lJS37YzgabHrlONEsn\nwTg3krss3FViyUfmxozMfjyQtwU4V5mxESM1qDqqeGXysQDWqsNeu3OCnAjl\n4Ons642jscL1yZvs9XqX85jSnVnW16S0EfL5BprsKCftkMOm9nfhfN3iLef3\npXV+J9rsvboAKDGVep6JKdmC0O6benlTTbbDV8//cQKPiiD/sWjs13u3aqlu\nabIZRfHWPXLTHTgb0sM0htCUBtZ+QmHdj3wuHwEEeYERXdNwtDx4GhTpbnVP\nUNP3Frn/XYxvE9Rph/bH/G+PXrBKVdgXlpKQvsdV2lyktaoL8zK7RUsM+U/G\nNL6wDfLb+leLqdrh2ABA39ipHTKekuwp+p5j0BZqQ3bArnUnW6bR9fIamJKV\nN0D9Y7QAhekQYukk2bnLI9++haCpq0xuDXm7QDOmt2TA+OLLEVzWb540jAGo\nIttg25IiZNY7zv6ct7UWp8Dd1jj6t8oaOPiGefDWmrseKH2neBVBL2KNZlQF\nSWmT/z6i5PkC2bdGZnu7uoZHOCxV+KcSjPeYIG2+SaSdpYZouB7lzFKnoVvz\nCGIIv3zsjbEpd35XBXXUqQrAV9VK0brEoj1ox1vYSeSIY8ilUDcpYnfhTR5N\nQygA2OII6Fz93uBmw5xn3VZ7y95TLd+eBrGCT97rw0EenPdT+7y5blb9S8hZ\n4GUx\r\n=Uynb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cf298389e23ace16c7e4682ded1e492e489011be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.346069ccb.0","@material/base":"8.0.0-canary.346069ccb.0","@material/theme":"8.0.0-canary.346069ccb.0","@material/ripple":"8.0.0-canary.346069ccb.0","@material/typography":"8.0.0-canary.346069ccb.0","@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.346069ccb.0_1597947518802_0.18699488625296778","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/form-field","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.e27c5802f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b4f7a995d70120870ae2d58fc134c0d3a5ff98c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.e27c5802f.0.tgz","fileCount":34,"integrity":"sha512-FXIqR4VGXHnhsKBhpVbn9LeMbsUcXCAHrsYOmQrRLdA6bRR+BIAW8WJ+eZ8zRZ3AkIZOVQyYF2ffXWC8YI6nTg==","signatures":[{"sig":"MEQCIHjlSCYHmHJO1ftTKxuHgZwv/OPMGxYIqNThefFwJ/5AAiBbrwhqLNNvPfmAJTbiw9YYBKycgbUf4o2k4Kg8pqGqow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsvJCRA9TVsSAnZWagAAPwwP/iEN2OeEN4FtrqFkCQdI\nPBuiIPRrlWI+XmEqpveJUi3dqBheoWHqzKhOL4x35gpB5djdVVQsl+V+Ngcx\nx8+4bs/EIFAjRUNBI80siuYHq70S4uhK9zmMxPnbqk9/t9hAV8c1F1P93NBc\nzzcHAbseIjRncSi1TucxKdX6q152RqTlkLcFonZ+kLkJBlAzU7JHo6rU/K+s\nrkvsgfEMWQYxaXSE2BrudyPGw7ru7ftJya3D7QRqOnmUlgFgLGf6mSyWb5PB\nqA/2kqv2bZRi5AYOW8ry2Y/ixhZewYPxxBgtPT0V8VX/rL2o+1Xik13SmRA2\nju5/+cUmtNhwcUd/oj6Hhjxkd4PtzzzBep2r88AN0wcOubJbNaHz9tuwV1vo\n2s1fPEOQ5xg2tHqjHv9Gj+LNjzMGTbKi088bneJ6twMWSadG8x7IUs9gnrFS\nESJPC1nocp5wt3bW5OkHrAaIBFppLFCwAOm96jvZWU9bGUG1KFOM20VikHxb\nYuH35gcIVX11LQAPMcbo1cFG8ct3OIUa/0ktsVeN65JvnrCm2EpenAnjHy+H\nYksEm7M5/PRADjsH5yreu+P2Oc4T+F0y5jikqFTnQG2dJzeR/tFZU7+181W8\nMffqPAyGS8MlTtXVqb6oMqiinp0N8LMMRUJHIo3ArQXvV/ys1OKb3oLEFj0R\n5Gtp\r\n=88Cy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2c9246ec446246e8fcad54982848f7cd5839f69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e27c5802f.0","@material/base":"8.0.0-canary.e27c5802f.0","@material/theme":"8.0.0-canary.e27c5802f.0","@material/ripple":"8.0.0-canary.e27c5802f.0","@material/typography":"8.0.0-canary.e27c5802f.0","@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.e27c5802f.0_1597950921194_0.06403097466122865","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/form-field","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.f4532b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74517d3793ec2c0cd669c44c22e755e3dd4320f3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.f4532b9c8.0.tgz","fileCount":34,"integrity":"sha512-X9YQ/yzbVjQEWSnCNWiFcvToikhhON3OgrsrhgFbe7fZUam3hNDqMgyzyZ90BOLGLxQJQRji9t/Nr+K3cRs1Iw==","signatures":[{"sig":"MEUCIQCh0K7W4wtd2mcj79G5LBeglo0YvuEzHWylhhVTRnmJnwIgXLtUPn1wW5mp7KsHKiPHUnz95tcvsBWGvMs8JTHBPFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtXFCRA9TVsSAnZWagAANNcP/2uvRweDVMIgS3T7lBbr\nz3ZK9R2nvmdEWwbp5ieb/Zw3McP/UJMKI8ziDtqqPqzyFQ113+ojQWKH7SJg\ntCzyOlyyUXuV9fBn3vlA928XDJnGGyrfo9iBLkcI7vnJnJnXzzKYuyP7BVI2\nT7f0WDH7TwIPAQwOZGlI3BXFuNytF/XUxa85tMUoteeWNup5yp39HomzQ9EQ\nYqDBtFhqgIjIR+7o0yBBxnIynA8xRaI2blyRUF+g0u95OZuQdxyoPhgPvInP\n702hj21uGduVY4PHrkuG32Kv1hfVvBmBbx6L9FOm6L4usah6fPUZi0qAGMqu\ngwvZPmDOCCI5DU6oe4f9WM8tuT50lBCjvH1FO1S9KnSUaI9UPiQHOsl6KSka\nP2JskFuAPE54cd1ejsGAqnUUNfDiIXu2tMWhHlc7YA0QEouKM88qBGwqeCGh\nlVtzxEE3zV8Yzqeu1haIkgJ65zn3F740JbvyRWLBwFEOhhbIMYIIWpSne+S8\nX1A8JNlRWq3VoBVOkK2+kI/GqiqjIIrCY860viTFjnv7eiCrz+GvjfJVz0Pk\nlCjbqtBp9vaxrmz59aiQVO+6CRX6Ux7QKCxcAia+wjTIpdCi/DUISQUTmlJ3\nRUhZAMwmcye3nj7QD0d8533Vu6PBYroCz4wxyMjTZVnaDViJ+/CylLNX8NwB\nVuam\r\n=KnC0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"be56493a06963f21f1f5343fc6db3accdc74216d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.f4532b9c8.0","@material/base":"8.0.0-canary.f4532b9c8.0","@material/theme":"8.0.0-canary.f4532b9c8.0","@material/ripple":"8.0.0-canary.f4532b9c8.0","@material/typography":"8.0.0-canary.f4532b9c8.0","@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.f4532b9c8.0_1597953477211_0.6057535095734048","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/form-field","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.fbf73c2a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d789b45c08a4a7a13b6c9860891a520e626e59fa","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":34,"integrity":"sha512-ABMziJzmwUO+aTFvl/piVmV9ZD2Qpdj80lWwHdOZoA1oLgImYUHQQnmXbsjntEhjejK1QItR9PvRZ6jmZ9659A==","signatures":[{"sig":"MEUCID1BTkBXeyXm+G4QAySVY4gNModj+qzjTQKyymUtnQOQAiEAsR1qGgtd7ifBUBnSD23XINE5fx3qM8zegzgNI1Dr7K8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuXeCRA9TVsSAnZWagAAyQAP/iHBb5UrjptSy8F9M1jv\n2CiPv9YOLXDFx1MDo+DK5L2wHfRrKga1GDlHvk/3j1271fPFzXyuv4szQVGU\nw/72Vv2S4NOu6smCjFqXOwGZjXgHG+Lu33SwLBrxt/D+h0lz3Y3FBSUUZJ8y\nABVS5mtfrCG3DRuWlFZ4PMWnAXC8D6+wEG9OY1Ecknmc/LdCtqQ3RqDYrPEX\n6umzv7a+/zbbtdWRUNh7j+zM0gK5zG7VTW/530C/VkjLR3MJ26HGstRxIxeA\nW2/7joMjv2N7QtGLEh2PSl1tGRcFeAaj2gqrMxkx4XcHXDV6ST7JQfZO2ekn\nkvQNdzCX+Kku0P8D7MJN+jeA9PCOxbTiSNkNpjAJNvdv8M5+G2rAVaUlg0Db\nCX23po6kFyfNivQ9TsZ7jhBROB50f777VBlCYYkJWUnqr5iiaQWrtXIfkFfO\n43Z43sUN+zYbrw2kMSmd+awJR9kzguFPZpfBXM3BlIU4v4h9Pk/hHJ9NwWB8\nSyHXV/YwoVsi8RI0aild3Ljb9wTvMX87p1rp0S9WZTp0W79fJvg24aGp7fE3\n3KeBF9sj9j8Q1AbhIJ22CvAoCPtkzNGMmCTVGiTda415ykztp432V5CuFHE2\n4bJhEyjOMurO9zGk+A3oj+26X1mCSOvtNKmhs3Hgcx9aPTZLhm1KDNrtgy3P\nitZU\r\n=gEXV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"64db59647b6d726098d0871993ac5c563d92be26","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fbf73c2a6.0","@material/base":"8.0.0-canary.fbf73c2a6.0","@material/theme":"8.0.0-canary.fbf73c2a6.0","@material/ripple":"8.0.0-canary.fbf73c2a6.0","@material/typography":"8.0.0-canary.fbf73c2a6.0","@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.fbf73c2a6.0_1597957598032_0.28950746531770477","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/form-field","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.cf800124f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03254c531e8aafda2aede6511837b1980d68b8f5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.cf800124f.0.tgz","fileCount":34,"integrity":"sha512-Bk3v9pROkLEFFbRCOvyzkg8iPSlXEB761ppFa4wYAO46yryYDt9tmymdokxPbM/Z9w+wYml/2Dydqk9WY3XqXA==","signatures":[{"sig":"MEUCIB1AHm3qkC/PorsQFRP8YAlFlr8sTaYXefrpFyzXAwlXAiEAvxSreO5U+ODMKQ3KvmGm9aycJyxUS0KS3lj1yrO/pYw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvCxCRA9TVsSAnZWagAAft8P/j6N2wCBA/K2OLkyl3uR\ncr+aL3FbQKrZKKp+4LdWI6W1x1oOaCfgo1j95W6BmH6h008lDoe4Jxb+6s/h\nyY8X35C85aZOGeKSXs+suJCqGr3kzsNLJbpqLhYcgFFlQhGFRAccqNr/m1K1\nGVn/ydQIrHwRqyw0VzrYKdJG7O5qPJsuEcmRBN9gBBQiek7hMmLtOKx1RM0P\ncamYGyVsKN5eFD0dlv5OTelBS9hBmTvdPyj4fXtVaJxQNVKb7t9EaNljtkf5\nvjkMUdZtKLqhZ2JbJ47dgAEoyUThZc4/gSHNH4RHMJsJHggmNZGmc+8dbMir\nLwBMeG8HFWUolxjv3BqHHbA0zhDm9UaWHJ3sTygNF4Ji4QQssfbqegoCwO65\nCGCHFNUFiAp0cxQpUBPBay/kv7rEZSSHQ+GimpNHGE1o8KGMWC4O/ob4o5yT\nqIrGSAQu1oMO/Xf4v6EtecJr5N/EKI9NmzW4NLNzwdaZXMJv4QAwhe3g14Xi\nk+PorjOPbm6UsbEuJCnG5dHizy9iZmpNF3ICePqfQru2kSZXkGnWAoA/pIZi\nQLz2eFpq/DCDAtTkOWkeK1EmrS4dLtZVpKw+r7yKoPRRlVUFT6zmKimuFO8d\nlQdiLx1OsK4TK3lx2MFA90jEhZAbbu8+xUqwEPHg6zBUXA3jy4dKXnxe2sOu\n8oWp\r\n=YRyb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b15bab8ce97a47831c29a3b0acf1c34e0533b8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.cf800124f.0","@material/base":"8.0.0-canary.cf800124f.0","@material/theme":"8.0.0-canary.cf800124f.0","@material/ripple":"8.0.0-canary.cf800124f.0","@material/typography":"8.0.0-canary.cf800124f.0","@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.cf800124f.0_1597960368803_0.29763067521737474","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/form-field","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.95e4eeea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2509cfd8e2ceee473e2b3118862e020ee402c7e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.95e4eeea7.0.tgz","fileCount":34,"integrity":"sha512-A6Dg6MphBvpC+8pfH1fOaAY+cBs1UA7iqre1k/irSj2h49sLBJiFyGJD17l8xwZESGp87A9tRxWyfWJnOG/FOQ==","signatures":[{"sig":"MEYCIQCrMxWH+ncGxODj9suqPieESsMn3T1NVPDFh9I+8gfshAIhAJAXOXsy6acNyrxCzMsDxFDR0/i4EyXcENFrXV0sUFov","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwdACRA9TVsSAnZWagAA5WAP/iOjkzvQj8FQgpogwCE7\n+BlYHKKTGZoMKtBRJVH+wv+4LicvZtefsuMYsQi5BBOrMWNoJtFv2ZKnb2ks\n2lVRO78w3EDu1L2p4EoIOhpePp0H6H0nUejHLbZqjXZmRgYU4JYURsMuSpi4\nvcWyG2pdGqGNKNqt6WCjEt2udTFjFmfQV3nBUvIpqg23KEIqeKYDMg14jGg1\neEgLbB3uptCGpYgZpQ4T56uasbfV44WpRhmsn4+7kawYisGxxlTgKbh/M/N9\nqOzkuupC5iTRFV7IDjCAZkTHeEmv6kZXLr9+yJM5ojLAjL/5BX5FQSUFT/7u\neyyZdmUbgivMGYfWj4QvDQaxd1GIAjrlG+kh21nY6Vkju2jG1JRqbWDe+Qao\nSPtLFU1i7A/V3H8CtuUMuYYpkaSOaNPJApgdy5t1Jfgr1iTCtcYWqIi5FLzb\naGUOFFuq0l8ZilbiRCOrsrkqycocoW+aLEpl3udRH8/BJE6f3cV2C4YWQ5Lb\n3IypfWRo+j/a7GuSl0XsVO0JJsKNM47hD2nJjzkS620kgUIc7AhCarSLPgU+\nNG716gS758N8B9M7CFpCN5QpQpzkQB5bvKfMkdMRoOYS3DvJhaaROXC6MCVw\n+1c8IYuyAl6MSDSlC+wM5gGPyW6gMz7E9NpTE2qL53ithY9AimQreycfSSY6\ncghi\r\n=YUJf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"be1ca8dd4a02de91f796aff6f2a9fa745f02df13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.95e4eeea7.0","@material/base":"8.0.0-canary.95e4eeea7.0","@material/theme":"8.0.0-canary.95e4eeea7.0","@material/ripple":"8.0.0-canary.95e4eeea7.0","@material/typography":"8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.95e4eeea7.0_1597966144223_0.9659080859317206","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/form-field","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.91ab1c62a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c937bf68cdcf3fc61e0340c58173207d23b92e3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.91ab1c62a.0.tgz","fileCount":34,"integrity":"sha512-nADAgqB8J/BYUcN6JxYzzsnOmS5jgpHfj10wAUghjG8Bbjvl1TJJIqQ1U3LcGZN9iPa5FEs2GfFYmxr7fWJqEg==","signatures":[{"sig":"MEYCIQCwain2y5KVN240HW4e3/QXEqsUhG2JPngeJtYjiAW+hQIhAP37vzkD+xToybwt45Ae0K+32JVF5pwf7BaUP39JU0Fp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+Q+CRA9TVsSAnZWagAA0NkQAISpq3xAUMKhPIWNiWBv\n0x+Fxwpp5NhPyzQ0627J1hraQE/XuV9cciU0fRo+g3hyo+fntpbdGh9TuCgE\nP8GRvpQ35l8T+nnV2FdYZEBCM/EuU+9GWImKrWLukMY2gEeTyq9yMscBJqqm\ndYIWcTsHFhvSU9EDiAUeba5u03Fyuxq9h6U08u6LTueXC3ojEsf+cnognLBW\nQANry5xMk9bkgVRvEHaGriCer3ubQzN01Ic1/N1ggcTHTQnJi2z5Gd7L+wEL\nLN+Rw7Z5rHsvIvCXagyluIVr6zKmD1EFM+xPG2dBqyJ+cpvU7amMVXhs+aox\nU11FtMJbmT5tIkSMK1736F35gAp45ozIbslHRhn/fJT1dV9twLT8dF8WC+E3\ny1A6bQi3EeFwQ1p/DAvYiNWe66/2HB/xvokg6bJH300pPPiFQJodMzFWpAMh\n0/Yz+T7i3L+T+BTP2Ocdn49D1iPJyIv1q+dFvzxqZbWUW6KBPJpPZQgYgZas\nXUGyUx/qYj398NNJGp+9Dt9CLQNWl50DG/bbb8thanqK+v+S0gnaHXQQhPag\nmS8TZOHWVEMBhWyhDJtnMVUKiRTY3PeZhCTVe+EAqxoSyrUHgtgdwK1ZfdX9\noLxpd+TaBR11keU9yIKgNxIFTjCpS1KWyFURggphm1XaHjJQgsiAYcRd+frO\ndztW\r\n=m45d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"389b1e8f2b60ae90730087557ec80e133f0e0129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.91ab1c62a.0","@material/base":"8.0.0-canary.91ab1c62a.0","@material/theme":"8.0.0-canary.91ab1c62a.0","@material/ripple":"8.0.0-canary.91ab1c62a.0","@material/typography":"8.0.0-canary.91ab1c62a.0","@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.91ab1c62a.0_1598022718401_0.027295982963460697","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/form-field","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.58eaa9f02.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e7096e0089958d222136842623bdca3312a58cc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.58eaa9f02.0.tgz","fileCount":34,"integrity":"sha512-CSt0l0qARLnNZNmwXB0R2u1Y7xm1Oq3HaKIZCg6eLxMofN7+O519tUM8FTAQ/O+RLTCrQba8HPl1kZVKjt8/3A==","signatures":[{"sig":"MEQCIF3pKMMNf/LemYhQlWHk+hNByPnIOUvjQVSC41smojIBAiB//y/9NmxfrPDBA90SnDMEP+IydpBZzW/Zt+PKgB4IsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCfjCRA9TVsSAnZWagAAe74QAIgQYnb1bFf0Aq3rXNQ3\nAPwRBAgFYbQJEr+VomcouxDQWUZsJeNUibai318bbbLRelJYEyHpnfF3GljO\nvL2DITqVBROaEXWSdx5iKdy8m5Ftukgkw4o4RwIgciJhpgm88ePQ5NXlCPsg\n2IeolQ8mZ1LQeD7okmDy6l0zj+ck2XDsiALYo7YlI0OFuQvJnEVTmtCpAgYm\ncQdP7CvYDT+2rKDb02qh9aYtApgcnWW9KfSJE89LDr3puNaaNxShMXbU5SdW\nnTMaqQH5yPnwvlZggPAfVfCuy11Kck7PTr8jv2O9BYP+BYBu+FifyfGw9api\nZZVGKbCJcP0DEdjQnDDksjCozgDLdg6DIHCibq1emykhZDIRavmrlVwoXmFU\nf0Ptw2Tl+nky22N1xzmrQXZayXM4VhiBzWXp3LSy/qSvLBpfgmvttXjtLWDU\nATfWL/Fc0IZLodQ6DIWhFJfz4fZgBnF8Zu/xYdR6M0IpUUQAeCWusrBExR2L\n6jiR6sZTYzjICZ1mknxRxZLtQGw7cz38UaKrpFPSi3kAQG1a2aQcmbSZO24v\n67O52jMZ209BzhIfASDmj/Rx1JAnImRCzMBAbpRPTQGEdiVPjxn+/wz+HksS\netIlGn6Uxxn5ItPUeMKP9DFyycgcRQ0S/CNrqmY1KHmLMSksbk/iJHcgYiUW\ndPvf\r\n=K2h8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9f3944d638392fa39379eeb30bd7348c9578f67b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.58eaa9f02.0","@material/base":"8.0.0-canary.58eaa9f02.0","@material/theme":"8.0.0-canary.58eaa9f02.0","@material/ripple":"8.0.0-canary.58eaa9f02.0","@material/typography":"8.0.0-canary.58eaa9f02.0","@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.58eaa9f02.0_1598040034575_0.5432084161623625","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/form-field","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.238216fc4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a2374ab36287cf55d18dc37b71972caac3fb479","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.238216fc4.0.tgz","fileCount":34,"integrity":"sha512-Kdr84cG9CbM6DqfSWp/yAsVq2yxBCT9zSdaA2quM71JrgV8ssOaEGT3c0B2x2c1ALrqNLA2A16nHS5YpFSagWw==","signatures":[{"sig":"MEYCIQCu1bbg7aUIEy2tvmGF074FsXHenNjLmb9/zoe01OCz9QIhAIi7tDFZsFzGxJS23D4AETeQljrEqcqhT1pygyL/n+YL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ9+RCRA9TVsSAnZWagAAeEgQAJuSCEcWq8ZtP3PnNBc5\nsaROpzNEgsYaUXpGVpgCGb2+YjqK86gN44h37AD8RTlXNBZ08wiaO3p5pPX2\n+QpLEzDPXTukGpzBS1wq/fUj274ahvnt/jPN2l2ymyaxJfgszKaHPfjzxUNA\nngoIJdYyHduOBjfpErTlus+Sng9Y90YVhJRqerCgAVxYnalU7lSYsZAtysn7\nTsw818+Qr6kLeZokxnm3/yx9qzYybGwMMs8LewH/8UEW8GwRoWaA4UVGh1XF\nh2g0msAkLl7nJ0Y65c0KBxyEqri4G9c60Rb0INxKi7TWvyJnoW03obJ4y/d+\nnKU+FMne3d3qw0OW9591DvXHgSKs4ZaCMzeI1iX9dTpa249KvM+wCGiwjvIp\nh0eTBqxhvw6FpK1nfxN1BT26n36tjewnpNdFecoFqH156pqfFL/o3gkZ9k+X\nQ/mnvxo93DlcrTCjhmhps2p5579k/bWJ8rgoIWb1eQADIo6dHuR3Z2bjY3kA\nx/bd3sk/zNIEJE1RhOorvnoB54SIEUrjBv7He1hCu5NhoSug5ObHF6X4+UNq\nWQ8MvKzahIY29cTHq7qzRH/VI2raXnCC+x4dOtXw2fpJngsDP0xvsxWxTWPy\ns68yvq9V2LZyRSbyr7oTvSlO1g3lfTJu2gPEXfd9iaGZP/tVnl4qYVjp+SjF\nspWv\r\n=3oup\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e224b287e176f866661b15e2ee791e17fcc44aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.238216fc4.0","@material/base":"8.0.0-canary.238216fc4.0","@material/theme":"8.0.0-canary.238216fc4.0","@material/ripple":"8.0.0-canary.238216fc4.0","@material/typography":"8.0.0-canary.238216fc4.0","@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.238216fc4.0_1598283664546_0.7490513868378432","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/form-field","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.a1c65593d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a65e3e08a1762e362501a3dd1999beecd76e1a07","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.a1c65593d.0.tgz","fileCount":34,"integrity":"sha512-bcWAcbcrvkCi8lkAnfjEMHYY4YOdzQcT1vG3c6MknH8WQXbTM8POJVIIpPClVdWvEqSelSurn9Wb0ITVJ32EEQ==","signatures":[{"sig":"MEYCIQCSRq5s1i/st04uq0Dxrsnk48SnA/l4l1aCwWd5xyDqmgIhAPk5WWZX4bYY6kuc1C1TkA5Q2o8TSGIlpZJ3ICBnGrzY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH+kCRA9TVsSAnZWagAA1w8P/1MBR99YYh2XHXkizg+L\nypQ+iAnJMUdjJnd8c2lGvRai07caX/4NkpdBUT99jYuQTFD7sqXDEzcd9Ym2\n+rCP8tbHMzZbDyDihgr/1ENMHm3b3+HIqvdbw//6MZLGUiQc3Sh+uZdniubz\nOJUl23BI3Dbszt8eCKzA6QkrpBBv/emyEAPUOM7MsqP9kQPHjtYaWrjSLjUQ\njoshZfBG915dButaqtKY0yD2rhwo3TOcHRj2XECklvKCQzwKImPlw4JoOQOp\nrGDr4r9FTwVK2CVIwmxB1y40JpxQE51qXQgwAICYDHpZtFXlbLxCZbzfOT+P\n4px+uGNaeIeA5NppObBnOKtDMyag1vO0v3wqHZoFjLksh7lJIisVdBinr4A1\nzfsKCakHqoPhHtgPhHIwclrTYtyhixVuprtydLHV5YAd0VyqRPEWo9+85tZD\nICB+KBhfFuOE/ouzO1PlQ437XbivE1PjHlWJpiDeXfKGGrPk1haCyzI4ShwR\n3LZNTnbUPfPFczktZqU8ZBTg9WxXCmGYqiyMHSFRZzXgn0zxlD1vDD1tdY6K\naZZtpKc+0WuRBlkCmPR7w9HBdxoBd+hQcfNT4uA0oL3zqbj3zebAb/zEm2oV\nzR8gPycatabfzxQCs2108gkBvzh9VtRa9VAnw3xJxKEFI6cZiAAttggoYxti\nyqjE\r\n=xDso\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"71fc6b5e7b16ba7f6d37b724ad4982780c9c9932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a1c65593d.0","@material/base":"8.0.0-canary.a1c65593d.0","@material/theme":"8.0.0-canary.a1c65593d.0","@material/ripple":"8.0.0-canary.a1c65593d.0","@material/typography":"8.0.0-canary.a1c65593d.0","@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.a1c65593d.0_1598324644416_0.4316074341478424","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/form-field","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.708cc09c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4489086e35258075fb9c2e1dab3be1fa94eebb8a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.708cc09c4.0.tgz","fileCount":34,"integrity":"sha512-2F/1+toEz0kxX9OuCtQiQufShqIWdIyuzZehx4osmtlWlUGrjgQ4jcWLJnWHh5l1zxuPiZ85tvukG29W/lsOlg==","signatures":[{"sig":"MEQCIEg+VMLU8WIOQQXFDqPwkfJaI8oOIKCDknxQxz4kyR7MAiAPYKDEuGDeQJyoRsGKejND9insmURI386v2ePimDDZYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTS2CRA9TVsSAnZWagAAEoEP/jlB3kc+4iO3ljUvh8wK\nG9kujP/gz49+1v5/R7e9ZevSRV+ecc2sbINCpj38hvb37d3Nfgij/xis0TPF\nwP7EecIrQH5BgjBR/gYNhYcvtMssFQqlxkbx7NfI22zCuONyIFZP6FzFXkM9\ntzhvXPsYqiBZkX8tQNh2wYJBxwRKcA1qlxGmKcz7WX8Luwo9TQqe12vnsyd4\nqFywy4WkgbHMr1wddUvL4qC1GjTfEK3xSe+PQZdvop0xZAy6+m3w+GY5L2gl\ntTA4A2gOfjfh9SwAW0eL9wapro7INIE4DGftibrghhocy8viafLppi2OeCu/\n6P/kV1ckvt6jhefoZWWWo2PhfTMTpZab3qJGyRhSSupqGbnEyNPZUY8guuP5\n75aavi44ADOBP4y32byA0DYXJGEnx21GPTvupQb5/7lhRVCY455uSBeDmKg9\nA0RuSMfr5ioGeQiNChx6hjLQ1Aqo8QKv6zO2YsGF6tyFhCjr/w5SrCp121zf\nb0hm8V8W9Zq+7TydSzg9revsZ5mO0QxjYPSXzFFfSXoarsxuDeMPJESmst3W\n1PUtMlVPc7fYV0mpjRd2bGIf2Y/NAEopUCHtvvN786JLY0wOBeZwq/WNOvzk\nuWC6YuHqu1sMo1hg2GuFouhOQJJMb68nmJhZ8eIASa37UufyI6ucHWMSftUe\nXhum\r\n=kvUo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"41353a40a8a6a80ac6438fa702cff9ca690b897e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.708cc09c4.0","@material/base":"8.0.0-canary.708cc09c4.0","@material/theme":"8.0.0-canary.708cc09c4.0","@material/ripple":"8.0.0-canary.708cc09c4.0","@material/typography":"8.0.0-canary.708cc09c4.0","@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.708cc09c4.0_1598370997589_0.330502149580264","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/form-field","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.19bea2ad3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a9c932209080522348bd38abf6cfc636c1d236c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.19bea2ad3.0.tgz","fileCount":34,"integrity":"sha512-EolyGWZZ8MJNIEubN0Rz8MvzVTVlUjiqE8wHYWms428wVZ5zAJsgkOG1RZQL1/gFrcD3NwXE+I6Yz1gn3zZynw==","signatures":[{"sig":"MEUCIFQ0RUydgXQnjI/G7Z9KyKZzuJH9yWE47SE1wUhdu3mRAiEAsWy18ULIF6pN69SppAFAtxRHl4ZNJOQP60E2nCOdG3Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq6/CRA9TVsSAnZWagAAffsP/06MGt0nVOK/Lf3EyLg9\nhOhSREY5l2FJn5PuV58Ea18NQNq/Wq9mBmkFUnDnIPS85bnEHXdigzghWPjb\nj+VeBpmQt3RB9PnsszTrM/+j0zR+gTHCIhze2JxehPnPFwT2DQImgWptOyvD\nqeswyPl/BYXCnkuw9Yb09F5PEtCE7xQq8E1oOaWvQHTMHP80DwDGTxy/ohbp\nlTKg54Ilnzg/qg7woubY9Kp4hPBeOBLW8QZdqqV1XGBKiXa2IyNvU0y3lP0m\n8X4bPMbJAMHPfbR/MOmPvJ9KQCo1OJSvVqe+Ti0TUpGyla4EJmxa6CnNow6g\nLEOhCP0lAUa5KvwcfD2GdZAv29sauJDfHl3subPZg0XPVmrXZeuzOBJsv5oL\n8c1WX+WhvL53eczhAggH0PPnu0KIG6My/xPHKkjHyC08gazwtCEBMBjEjqcj\njTNwTwe5ZBmVBBY6SB1mx0p9zKwJEe6LUKa2ejQUCToXYQSwznLne91x5Sly\n7Z/ob45zROi99o7FFXYhZA+3onSNylWgXZSpyrkqOcdvK6StJDVa+Jtp0J9V\nHXcSJ7RLHlTfVVG+luKbtmONhX9835Vrg0DPGtNXfQ/XEI67AIugYD5iIVQh\nnzkr9+pJPBK3fU9wMNdvjlVT1jvQVINmzI04L+iQ5cSMcJzUCbquSUYJo5sd\n0IJO\r\n=kK+Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4f1ed83b6a09dd3e7d24508d420cd99be9dd3893","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.19bea2ad3.0","@material/base":"8.0.0-canary.19bea2ad3.0","@material/theme":"8.0.0-canary.19bea2ad3.0","@material/ripple":"8.0.0-canary.19bea2ad3.0","@material/typography":"8.0.0-canary.19bea2ad3.0","@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.19bea2ad3.0_1598467775229_0.25499213525771425","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/form-field","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.911014711.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"975059b1d7a64c58b0499e14b192cddb9b21eef6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.911014711.0.tgz","fileCount":34,"integrity":"sha512-fA8Cgzcjro1DsMJcYZWX3KQEy6NrGmXnYR55S/co4f+G6oMcn25Exgfe6o2VHt/sLPIUr0Rz75MfVQ9T6qoadA==","signatures":[{"sig":"MEQCIGlX9zUhQqiOtvmKOW5aoogtSn5QilwlhOHBS8jvlz2WAiA466eXBL2Ii1Oi+KgdXnusOVBoinubetDoOQDVZ/QUhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9pyCRA9TVsSAnZWagAAqWoP/iqPnOZN2QXVU885cTRU\nBbqD3sZDD26toq/0ABQ19PN2lKnxCd8HqGSXwA6bksAs6UgxQrbPJJxMd6q4\n/+RQjffyzLDda0nvNnkTVhXQ6qVadjubH94eM9KA3sNHFC5mYdAMRsqtF2DB\nKjfss+oxyJlLuM61i3dZ0rExAyuvfTPUk51VyJ8yrCG6Heyd8Ck5bVJK02Cr\n2ALMJ7m5+GQBKObFXRZhCvX3oV/I5VS04FSMex5QNW0u9acxelSwiQ6mNqqb\nVO0TVzY3rif+yS8/ZKBDuV4RTuf6eHwRalnhG8s1tvoUK79JZO6EXFeCEDm6\ngWOS2Q9F45sEtDSHyr5sOI8Kn5z39hndbZ9NXxCOzV2jho0Qc5hxuQebGhfB\nFEhR0KDYJQP3NA2MX9HWMTP+ba6VhfnA9JZ8HXo6wYtemEafpboZIm5X6kHn\nzJfGMpqtPQi5uAJcjiF/onfRlrD/NfN3quCVTv2KiteF/qaHUyV+gcTfehXe\nPdx93Wh0stUj472VGi4wVWWH0kpKLh/2ddQCUeiHmIMiPr5OkpV8obwZfg3Q\nvhpdsVxixoBJMZU4WV6lEJJQGFgkzg8D0B5G0oEsuAmZhMJ250eyo6cnTf2v\nZhBXh6qv0VAG7/JctPu15yFHSTizYccFTLSDv6dNK8jo9V3wSCtRFRt7WTfV\ngkFp\r\n=TYYw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e0563b839594887804244d231bec5f415812fc4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.911014711.0","@material/base":"8.0.0-canary.911014711.0","@material/theme":"8.0.0-canary.911014711.0","@material/ripple":"8.0.0-canary.911014711.0","@material/typography":"8.0.0-canary.911014711.0","@material/feature-targeting":"8.0.0-canary.911014711.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.911014711.0_1598544497867_0.6465137908062568","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/form-field","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.d3387f54c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a1eb3d84dfb4b6571c94c366484f2a09ff85ab4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.d3387f54c.0.tgz","fileCount":34,"integrity":"sha512-/ZMwkzic63zIGRRelwU/+ri0MfNHRcw03kQQ6+u8s0CHPESy/QpBKvGeHvq2xboG+NLN6CRG42Cvsje8EbEHiA==","signatures":[{"sig":"MEUCIC05D6qBebCKgo2vCI4xP7BNjS9kQF+DIrVpF0s/TsKaAiEApTV9EKjypWW+WARkXqHH5ukLEfVdC/LsZYf6i5Upcj4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVhNCRA9TVsSAnZWagAAJhYP/jARa8SqBaoxCa25n6j4\nRuI4ylt05aAEkqfr/Re5jq2Qn3Ta6H9AVcCs/HriFupc0hs/C8VvAM6xwLZf\n8nuNAubJy4tyKK9XcMdMEAKca2uIsXETkgJ/XzyOLKekrgJgMzLOsU4fFuAU\n39BN3FKaCc4j57mcytRQBk8mHD/VJ7OvfEErThK5PlUosvRaPiiHWUciCYTE\nDruENQK31bDSinG0M/53oD5MOoESeHZ0iIx+eG/H+Y65+gmLq80UdEih8UUA\nstYTYDJMo0+2PmgicMweWHM0kuQsIeq59KpIPcXlfl9pAZc+VEmmM4EV5vWw\nnTqPzCIjtw/1KEqV2MtkI/9xcLlktu4szuuCOJBPhk+5NCR//E9T6Imsoluo\nCNpuMFC/2euI51EBJGccrxPewa+Afc5REe8rCFAJ9vUeorxdvabjArB/YYjn\nOd+YPtG8ks1aes2+Hri0dCiH7lkw/WD/AiZwte7xqBh0enPlg15eBjmWnVjy\nK+ADQ3mBZDZcApFkubTBKiqYRPV8tgQB6rsr2Cg1OvveJKCgUaUI5HqcHbBQ\naNMpsi3JwnEExu/ICgS/CLMFOga7Ku1wryExdkk2V5zvPWWB2L8/5V0NpFCl\nIEJQXRnAfF6ci8WrP7GGTTos3ifuPnJEhC5RspblurPoDSNYe4m7ES337DB1\nSDsq\r\n=uXrQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b8c159d735641688e2fc1631ac7a98134ac5fbc4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d3387f54c.0","@material/base":"8.0.0-canary.d3387f54c.0","@material/theme":"8.0.0-canary.d3387f54c.0","@material/ripple":"8.0.0-canary.d3387f54c.0","@material/typography":"8.0.0-canary.d3387f54c.0","@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.d3387f54c.0_1599166540223_0.08222980772591959","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/form-field","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.2ccf996cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15108413a3efeda36c0cb5a476a2cbdc3c6cf623","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.2ccf996cc.0.tgz","fileCount":34,"integrity":"sha512-fB2Rqj9d/C+D0bkPl/m9Y555xFFrfwJ1IOc1tXQ2QJTL1MqySC/I1ItFH5Pl9S1g8fzITAYz0iCUlHzP83NR0g==","signatures":[{"sig":"MEUCIQDCxxQGRZwm0VKRbCS8uHad2cWartGT8krpAJnBxcqZYwIgQZHx4PbmRCTsCTQ1I/dgAlOUcUraj02Rrz5ww91jJGY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVhkCRA9TVsSAnZWagAAiFkP/1XW/EXxJMC3/WlQ99/k\nPS14JkBENjK4UgURX7eGTvBKDGi8bqYzDJ/VCfHK0mztlUmOl5uTJj66ontH\n4bcMNp8kBuBJww9TXISIiYWy6IQb2oc1uXZkzRyeKNQOrfh6o6ung5sp737x\n2WNu4BIn0/fzMS760k09ZOUzeINAMK1bWhbl0d5S+kElzKOVd7xjzbmcCuhg\n2coX5J2aSiHjSrMR+GAdZFkZ+E/RnO/WCd0rpmwR5iGUizKseEfUwOeHlxX7\njj6zKuJ3POi0aG5iCo6uzOocEnqh2RGR918qJZAqj4GDCeanLYGsGVXov66s\n2GSCdO07OPbSl2pUEYplzJz3Odiv8OojnBJ51AAK3rE/N3qi2RAC+sZN8T1S\no2pVQGYupJxdXge8eqExjHlzb9yHPpqJ7dvy8fnXyDBfkuzDl3jC9AchtuG1\nDF01hN/dHGLEGbDOq5CYiPxkkXjHNSMl/e7T0d67h4gI+hlIjqO8i8OSxoCf\nJhpOmfL81KvH1Hj1JUJD3EB+2EcR2pruc8wGJXmCfW2kjEH2fe5L5DEV3UP+\nd219p4nWsWm23YqRVwnYqzy4Cr531xJWbxVlj6d98Fwdpsj2w8qOsxspHske\nnHuW1qjOzVh+YPjTwiNyoY4YWbHsMENJwxxhLdMTJe7tQdsNWU3cDtSCpoyE\n9qlS\r\n=7nkt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b295adf5299f65a654963fa774da90dad3e39244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2ccf996cc.0","@material/base":"8.0.0-canary.2ccf996cc.0","@material/theme":"8.0.0-canary.2ccf996cc.0","@material/ripple":"8.0.0-canary.2ccf996cc.0","@material/typography":"8.0.0-canary.2ccf996cc.0","@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.2ccf996cc.0_1599166563608_0.8304171496217136","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/form-field","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.744bfe5d8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c08b3841cc1a0359e5fac7e8e39f80070653957d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.744bfe5d8.0.tgz","fileCount":34,"integrity":"sha512-ZDamIeEmPFUgQZbIqiUF+9qoOf/b/MPtD2H5lYD6zBiCWKVDCglorAxkB+aPJ5l/tDz3+Run83joLpuE6WoMgQ==","signatures":[{"sig":"MEUCIHD/ZxqIf997PLTvMdBSAWU+t6EwSYmIwapoSci9J/waAiEAyo4QjrFyEnvFsKBpxAcCCpS1mhnq6qqZ5tA4mngTRGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUViKCRA9TVsSAnZWagAA2c0P/2nD73hOlIVLTsTAxFYd\njKudXDMF4ld2PbgylqWcFDBZfeRmYf2+tZpjVPad66b0LDmqKpnS/omVAvv5\nM7XhYyZ/GYRQJbEB0nutcLurdpva72dWoCsTzIODGw975eHrhajrgUZ1MEJF\nCtUPMleMWN3bshP5tfLipJieMup3L5ghw5l1rBNdg1I66k+M7ix3LUPU3eGS\nEe9V9Yngu8v74UDOCCy6uGkp5dTtWy9XucOk+XtRWNiGsRpi4yxM3Xgc5qFT\nL2X+d2eSfrW1gYsSESA3OCEz/n95m7x8xWAQ5AqXLYyOxmgyNCgQxd/f7Zn8\nNjM9+4/83m5RXCrq7s5xNANXqyxNveCtuQj0OEGU5hv50PFjIcejyWrkrMNx\nSY37bmJGnb9w+5c9/Cbs7frK9KVf+THsYXLUvahpY93IyJOk9mupGr4JEnym\nnVyCJ094dVjfCMD245/xJo7Ri7QPxM5umDS+8JUp9r4mxLB5UTbcSK22p9CK\nPKiF/2cgj0tiGhJvOttqz81zRD+tzhEFc7Ouafy8QkM0pUK63ejXVN7eCy2I\n6rBWNNReL4CssNXwkYaOazH/noXooHBacgCH1BgzH/oYfAuObu76z/NTHwhl\nO/PbMKMWVG6AJHIn4tmQ2v4dguLHswrAXqeaoqZ27lAH69GaVyOZrjXg1wlL\nZd1C\r\n=Z8ka\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e8e9d5605e05fdd50b88c6ce659dc2ddd8ba768d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.744bfe5d8.0","@material/base":"8.0.0-canary.744bfe5d8.0","@material/theme":"8.0.0-canary.744bfe5d8.0","@material/ripple":"8.0.0-canary.744bfe5d8.0","@material/typography":"8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.744bfe5d8.0_1599166602031_0.45957625572119976","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/form-field","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.78da96eaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76e97cf518d476e2ef1add411c0134fd57f95916","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.78da96eaf.0.tgz","fileCount":34,"integrity":"sha512-JLjtC5qv8xzN+q0/On1xhT3SZDq1WSC5FpHwPzGINX5t/8CP2Mti3FdyNP5Aj2ePSjSJgbCGubfs2H83gh9izg==","signatures":[{"sig":"MEUCIQCrivyFognA0xp2j47Hxj2wRtQlGItjXYeajcGgWVFrJgIgR7F6NvfaMRPJRnZHphnPM7CMl6EfpEhoGb7Gz4hLVzQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9fACRA9TVsSAnZWagAAAgcQAJiQrvWNrrU6DMU8na2P\nBO9Ud9/PUSX94YYReOuWTFoSb+Mnn1hdC6hQuRSlk4txxFcLd0xsd7NZ4Z6n\nxrckFbPhC5AIoocwryVDFi6h88wimc0oNKr4+0lKMsrKojVqwpez3WdCl7CM\nqy+57QIiXZr6g81WiRWEovKPM9bv2oojB+5J6KzXoExp7lmrLaVCeu1BmPIw\njTKUHHGDsjYQnNZ+gEF2tG4lN6pDLTFv2QbEfGlrd2yhPiUWobwHDtz+MC/n\nPHiPe/sNirWywGqa4KR1bsQEZZgiF+5GFJaQOK16zjPW1ZoXMaBh6eaHQNIL\nb19wzMsPnmK6Ny51Y44pyfdFOylkIwRnxK1OAk8o9hYi7BMkCOz7+OZ/+pER\n65JadUJACSKlS/6hx1OM4tzTyZM1gJFvn3ptG8NK8w4w0NIw8G8l6JYaIr59\nG3YmG90gghF2zj2sk46OlQKcXAlo13gh8tD7deNZNl+YQcyOkiM+ayT+hr+0\nxS3Nzrg7OJvTbuAW4Q/Pzm0i4zu0xCpm54NBlwYefK2C8GYJu6yVyCIGjHGR\nXcOtmFtu/nrE3Gb5gug9s0TvCACPmo5wV5TNg67AnBK6aPQixuPEqS54Eb7s\ndvasEDAj9cink6IripXNfv24HCbYJfF3x51PEHdX8MnoAAC2bnra6q8OMMlB\n1MM5\r\n=QO5e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e9750a8b0ebee9367eee7e514953a1b1ac6fef7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.78da96eaf.0","@material/base":"8.0.0-canary.78da96eaf.0","@material/theme":"8.0.0-canary.78da96eaf.0","@material/ripple":"8.0.0-canary.78da96eaf.0","@material/typography":"8.0.0-canary.78da96eaf.0","@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.78da96eaf.0_1599592383611_0.05806254721255044","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/form-field","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.b0ed593cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33cb8c4fff168d220452f175e7674eecf4ac1efe","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.b0ed593cc.0.tgz","fileCount":34,"integrity":"sha512-mGA5Wd1kMOFM0weN7bwbZT10hHEmAZ9BMHIpMh12CFgrrIWIWyyHr60pY9rxvyLvG26/lPxcIbv5RHIDFrCWtg==","signatures":[{"sig":"MEUCIQCN22yNFDLL7fmXy6C1BoZ9FgqiFd1F71VBB/BPDoMj7gIgSpT+b5YVR1naylKh/SdqZYIvK6iIttJj5WmgPdb7q7A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHMuCRA9TVsSAnZWagAAaPgP/0oMhvoL7qN2sPi5GpuD\n5MoRQg0dwQZlL84Er5LQ3xCJsHtfvYF3wQ+PBcyewZ8sn5yegWwXVQ+D/P3t\nHiGrW+5uizSgZR/Jd6xCeLdrrX/xN4NLu06kAuY0rv4CwgOw0PJG/IvMT8Fu\nIburBxGeoDa/vw5Cjx1cvqskHbkqgFROBTccl0NfUlPGIY1+/nGr0jWxGMrV\n6YE7CmQXUJlsFQMf2r4oETYr0O6jHtYe0eOZVSoKO8c++7OpO76+XRW97rjH\nxSsaZuaBhCe7tdCaa0S78F6+0l/tYVFsjaePkx/LJuiT6RVcqepT+cQfr3F+\naBz9x6mcxHr4v9MiXUwrvyb2u+EyTkuGVTpZAKe/0kkYDMdMkbtql9innAPP\nWvtbrkJy43UayqlEip0j/+hjVSa8X2/ltO/O9jAsqOu4sE+UmhTzAktoX6S3\nT1ObzN3c1UsymxUjZnxGtBp5t5pZ3HsLUkz7wOJLIjvOxReI1lEx4TeKF348\nga4m11yFm0HnwnQ21RgAqapjA9n34DYcBGITMm8rMLL8mKn1kIo4GUWJuH0B\nU9wNBJcX9byCOeYCP/T9Ta5vNrvy9W84+fSfPHss4FjJYN/ffC32AMUMCUwy\nkCRHBToLLjIZmPCOlpu8Np/GJBDNMyvc4DrQ5JA6YH2d9iN/RSixeNIbhnwt\ngyFm\r\n=xKbW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d4dd3b56db446c52c35f891f9a19896a2b762f0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.b0ed593cc.0","@material/base":"8.0.0-canary.b0ed593cc.0","@material/theme":"8.0.0-canary.b0ed593cc.0","@material/ripple":"8.0.0-canary.b0ed593cc.0","@material/typography":"8.0.0-canary.b0ed593cc.0","@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.b0ed593cc.0_1599632174508_0.5340940883338587","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/form-field","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.85a1fa9ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0a9739d37f7b01dae690a6bb2263e57bae3a742","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":34,"integrity":"sha512-uEl48zlG1sMLzli0+YnRjCViKbTjGdLCzmY+E61/HTc9fMcmiqSjdfYX77O22sLoXg9B1+JAOX1taRPCpC5FOw==","signatures":[{"sig":"MEUCIQDD3ckuK9KHwDVIpLbFvdSxesjlZzytk4+96rZqAEbA8QIgZbHWVhyxY3WKRuSPH+Ehr/Eu76eqRymFnW1pAvjBLK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpZXCRA9TVsSAnZWagAA2OYP/R1z3gnBXi+KRFqbzidq\n0MPuKMpj0Vxo+uOx7tqgJR3sdPnktjssf9DiCUik8g2+wUFq128YD3aTnlfp\nCgss8oHIOsWqfj4NV+TWONO9cCMCgKYbxU9kyZvKgJ5i9mkwMXv3beu/RhZG\nbpYor9c0eKvlmVYyp7kk6VwF1nNdvEbG3oWMpAhcdpT+yngUN9JEIbSnX1yT\ndkVZDIeJ6WgADVOvvS0ghYYQQog9JaLcI9spUVpYlj5L5tK3kKt0xm+bKpBD\ndm2fTY6BakiinF6EHJqW3RnDR+ww5PVcy9tWUvrS9xQDFYiZDwv4HDn3lca1\n41PD43dDnt6Wp5hzuXdf99MGO81MkbaByHjdNaFN0pd1bg1EnUfyk89yDkbk\nNFV5BQXzy/9zoQWWX+d0xIeZB9J4q6zrHEOGnD39bAt6ofnrDCQz4dCNHtRw\nOKARdbR5Xi0rNc76q+yqtCceFY0U2Hp6kCR8s8IHrwSAyV244R1w1GH3Fl5D\n3kbjsB+cvtbIn5vLobBfwjOiai8V6A/6tiN1X0rxoFD7b0GbQMF1v0TH70TL\nKB0MozahaJ5K43qUQmnkKVMSgbL5y2TjlDTzPqNO19pnm6nlFCkAsigAyviS\nGdRW7nzydrsGstb5SjOV9/jy+HJTXlY5rztIHjXJI6EWzolGu0VT9ieyKJzn\n8Ci+\r\n=/i1W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"96441cf0eac61122c48c43aebac2e249d5bf492d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.85a1fa9ea.0","@material/base":"8.0.0-canary.85a1fa9ea.0","@material/theme":"8.0.0-canary.85a1fa9ea.0","@material/ripple":"8.0.0-canary.85a1fa9ea.0","@material/typography":"8.0.0-canary.85a1fa9ea.0","@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.85a1fa9ea.0_1599772247129_0.13510558553814955","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/form-field","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.0bc41a9c7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"721518039d19871ae527ef42d08d091f596557c1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":34,"integrity":"sha512-EWvXxn5EotKbDJS6f20wyncPVULY8O4VkdwSrExz8V7tODPsvqRibKIlzsaQwTdUZobtZ6oGc1wLQq8H447qJg==","signatures":[{"sig":"MEUCIQCd7v1XK4kOwtcK9np9wfIPzF5dVfQHEnJJfhwG2SCHIQIgdVcQD5xqUlb7kYbbbD5JqVbE4T0z/QI8pAnTfiD5jcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7jGCRA9TVsSAnZWagAAEZ8QAJQlYUHbZzF7nJSlJdsu\njwV27HI9fZ1Uj7QMo0gOvO/3PSEqnfFVUTGg0idfr/C+6t3oobukmGUurYaV\n4ZK95pJLRBUHW54Su8RP/cXDTnKWz4Iw1SryQq6/yDTgk5ZqE9qleNhOHrrB\n47wcKNffDgbBO4sZU1wQS2E5PAdxcJSg+u+fbwi2/f43aoiiFgchif/hTcRc\nI0rOEg3WyzbVTcL8zKRF7KTOcdL7xr7BGWdHoIgWA9y1sRutULoCjiQf6gg5\nKAWdWpVTMsfs5bi1vA19YWZ3scnFpbDzQSs9RcW9eyAgDmgYeF3ptxuztVqM\ngOyqHV7TLllg44AuxgHh+K7isjh1/1S+ISYghW4tonNDG4HY0VIF621peJoU\naw7E6U8EfZylQ8XOlGq7wgUr50J7Dxx1KB+zIVg3Fzg9iwVN0tlD9zCiK6Jy\nFSntmIEJ3XiwIm1Gs97LM25A+U1anpSKoSn+sdBBchxhAEI8a6P99SR4KD32\nXZOQcemedeDfvcHRaMwynQl5gLn2E63w3jxcWDowr9C/fyevxbZKVzLaN0YG\n+JbrKsWtSeWtjz8L2jVQ906vqRzPxsQEszyyfA2JKnZQkRdRiSrgNssK09i2\npq7xfPbt9Y3BeBzpgp8KgXxrMdicWkfE0IPa7Y/9RXmTOXoUG6MEy0h824+z\nKr82\r\n=ZfYR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f9e2c4fbe617a115d220d49782884d15a0d9ff51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.0bc41a9c7.0","@material/base":"8.0.0-canary.0bc41a9c7.0","@material/theme":"8.0.0-canary.0bc41a9c7.0","@material/ripple":"8.0.0-canary.0bc41a9c7.0","@material/typography":"8.0.0-canary.0bc41a9c7.0","@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.0bc41a9c7.0_1599846597688_0.663580754315759","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/form-field","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.fc0eb5013.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ca7afb0de10e2bf4debb78f066bcda56b10dcc0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.fc0eb5013.0.tgz","fileCount":34,"integrity":"sha512-8l5MLV1Vs1uHgg3yFRouPdqrUctCusDLDsIiHlgBZltN8aT+AhrfBZ7D5Ijd6ar5uBYaOo9xDw+l77iADg6alQ==","signatures":[{"sig":"MEYCIQCj5PxCxeYvvlrM5AvCrZlbf1H3Te6yucSCkYtHLCDAVgIhAJKxl+Tttaw87kSE6lIw47md8y0sutQvbtDp5ND6iEdq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9ZHCRA9TVsSAnZWagAAHP0QAIlWhPNWHIImRT0X7Mhd\nzPFADOXCd8AIgscOkpyR1dGtg3MPOvZZfsrBYQCLfdIpgcK+tTR97nbyjgns\nirb5ejmVTed5KkbKyKT3qTXkjPkuzCE2DfStG24h2NvFxgSwCdWIP3rUkhKb\nRdBNkRoZNj9enseLVov0vjvRblw/fptVi8ICTBjlWK7BDaM4vksMcV8TIC+8\n5+1L+Kz1eWzKgY2VdXQW3x9ITNDMMHK4P7inMSwco1Y/A8NswiFgJNyKcZRD\nlKG3KhbH7Wvx8kSa8Psz7iWRdj7hTBEbrj5hHmMBQGTgJLUuLoHp3qjlcyGD\nFneBVfUJTG0zbcSv6IR0fdF24QnYMw6nJkUf9Bw55QRj6XTbcq06JtosAcHw\nNXDVyk7uQ7jIcGa/RmSSexL4a1WW49Nh3at9f8Y2LX74/kOmSJTsB97S/yuY\n+Ay7Nfd2KLpkmiBKP7gxLTQvPmNO0YXsIJzvZm8Hv/HeWSRfIjQQyCX5Jp+Z\nZklb97wf4Ykc33LGZM/rZR1lJ9WbdijI09H+KlwZ31+i1mlTOCOmIEZMQ+Nf\nIh4WiynVAtItM+DiizbFFAwh9xt4tFWxXVx/DUwKVXdBDSR5b7ymhKV2Fi2f\nUa1nHFtliIbsq15asm/yG7RDr4qi6zNTxFtctOBLluyIPZy12aZ+SskgifiI\nSLd2\r\n=AKOW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c6572140acfb45fa86b79570328d75e3869c40ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fc0eb5013.0","@material/base":"8.0.0-canary.fc0eb5013.0","@material/theme":"8.0.0-canary.fc0eb5013.0","@material/ripple":"8.0.0-canary.fc0eb5013.0","@material/typography":"8.0.0-canary.fc0eb5013.0","@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.fc0eb5013.0_1599854150978_0.7888889614272832","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/form-field","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.319bf66de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04d5eb3d2ea6a168c308340e1a41fe1e5011c8a2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.319bf66de.0.tgz","fileCount":34,"integrity":"sha512-wu+s/NfgeAmwvzEbOY+ClB1J4Y94sW0esbhwEwx2VsD/VFzKzMCAge81dr6EAHPCE2qgMU9nVMWp9IOidcmYdA==","signatures":[{"sig":"MEQCIBy05VdSyMgUTcHgnbWHMzejEXZpO3Dz5YpH4yxb9mbpAiAvHkklzeQarILaM7Zp0zalnYV1DNlFXZHeIOJVXp/r9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAPiCRA9TVsSAnZWagAAy5UP+gMsTMEMe0+hf6t7RU2O\nGnqPQvhjQq1gI+ztaGnD6c8bLZTvyFs4mroul3N4FRYQTSdpJBjmPc79iZ/H\nlSfNoBiUTVs0mMEwEropIXoZjlSnyXw1uaAn7kPq26zeyRlcoxuGfmcS1mf+\nSYz67H580WLdeTOusA2N6Uz4rwa5045vfMl58l93gulaZhjx3GF3YLfFY2ue\nw0z0fa4Zhfy9g045HZTBWlL7K0X64zNaEXjWJaDvUuWZklX0aLC0k/tsqP6H\nYbeQB50y8mt99fZ8XH+ii3AoHhGOR/2H1uQ+SDgbSKQd3z2MW4EuUJoLV3wu\nXw1rekftiK0CGXZTSj1UD+Fpakk2eHv5GWawNtqp6B+XbYT/uTHbp9mEUjzX\nfHNiJHWbQRvXWV9M/YT+U/N22pt8NUcTkO/UlgFy1yD5lYMq4TAdowLumqK3\nA4AgPziXh0VWHH3lTkIigGpPskoaCAA6QvzhYAqq3CX6vMASAxzDqfezrq9c\nds/NEMKjLrn062loFfVGQZIB8yPt3KigBwtMZ5i/Cq5sEHsPYiebWSZDIvuV\nNgrNzZMFniRaiOVA6ZVVY1HGScuZMZQA9OcMaf8Hl9OkjhPrlpVBHVAA6dea\ncQut/9KUjyKJboPZtEYS4gClNMMBkbzLLFeTl63iC/gIgOBLlgIjv0w4HWQy\nJ7Iv\r\n=ewtw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ba4054064292bafde40e53fcc87405c8dcad24b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.319bf66de.0","@material/base":"8.0.0-canary.319bf66de.0","@material/theme":"8.0.0-canary.319bf66de.0","@material/ripple":"8.0.0-canary.319bf66de.0","@material/typography":"8.0.0-canary.319bf66de.0","@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.319bf66de.0_1599865825813_0.7028764995521917","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/form-field","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.5bfc305ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7abaed1649f419a71b96011a6f5bed79090f79c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.5bfc305ec.0.tgz","fileCount":34,"integrity":"sha512-+Gxoc/B5uIA+cUGP6duqNHWPKkMPcr65JsJsD9vEb3+KvjlGXnMRnkMYgS1D/z/CcNVwDHnn1YnbAUcnFWdo7Q==","signatures":[{"sig":"MEQCIGMB56ygygXZHKJqqwUFZzufdxVGLK6t0C8YBxLTFkyCAiBJJk1L21Av5G7ElQ1J2XuKGQdQ0hXh6YGGGZFPN0ey4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqSLCRA9TVsSAnZWagAAyhoP/AmE8Em+RxmaabfX6Mbg\nYQTFV/LmppryqnfOfaTDuVSZ23FjUlWuYhRyDof2Pzcw1WUOQwoJArMsvGO9\n5+XjtJc9y24Aphb+y9hlMPIRCvOTMsBU1XRVuSHUOGdFbScip2u4a8MFBSPf\nEnn/HhI/DeORIr6hxLjrx9a0Hb9cBS1beKpKbSEBkjlIkwMQRBztGq1TlM3Y\nsuwZ9+I8jbTLPl9PMAjw7TN2F5vz545lxMFGbP0yd84eGP+reMv2+U+CxUdc\nYQlP9kILP7o6L3bcfZcu9nuelQXTzr09c30jf57Dhwfcc49s+HSJkKn2UgMk\nY5jnIVH0onzCbdgK3BsXvn+yu9w1uehym+V68sL2x8dzOChqM1fAWF9eyT79\n/VFplNcoIys6KDRvnQCEHp/qBEFkyDDp4Vqytzdvtq+IyDub58FR4OyngSI0\njbxXzS39rRdSoBxvk5wj2rfQY5+X5+aR1jSBGmZsvYmvzjgP2NuZzu2HRGRx\nDIozYMfGer/F5cssne7wgtkvDt9hZE51eaEN5FV+IKDXHm59+s5UpJxPM5P2\nH4J/cbDokB8uQ7nsfZJ9ByN1taZW0+FFgvTZycCeISAq4EH+4gtkovoBP1aq\nU2HLrAEyyCQbBVXPvS4YK6T7jzs/CEyPN+AqludGGuivKzvH6SkBb5dQKQmL\nldQj\r\n=OUFb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"96c0c187c7fa544c1f5303e96ba3e85cba86e5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5bfc305ec.0","@material/base":"8.0.0-canary.5bfc305ec.0","@material/theme":"8.0.0-canary.5bfc305ec.0","@material/ripple":"8.0.0-canary.5bfc305ec.0","@material/typography":"8.0.0-canary.5bfc305ec.0","@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.5bfc305ec.0_1600038026834_0.3569482574379874","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/form-field","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.83d83f131.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7919d0dfced839dd13ab085aa3f8c0218f46c7dc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.83d83f131.0.tgz","fileCount":34,"integrity":"sha512-PHulALcPW3NnFANMQ0rta/hH8O33bBXKGswhQpORPCnsfKnEBWkUz/mow8Am8FJVuxITq7v4znkMWeeM3uKL1Q==","signatures":[{"sig":"MEYCIQCOQAi8/VrmAXhb4uDb2sLPShD7lRwlcX6hBmhw1AxIrAIhAJbmtdRG6af1sg3vKl5gdKmAy+e3glmksPgJvNOuu3ZV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXro6CRA9TVsSAnZWagAAQrQP/06WrRj+TqE3GGO22rEW\n9CMBezx1ZoNRnR0dvMNs+j2/aB+Dc77C9MHu9YvF9JeXnie4ZQhtEJH/8zJo\nAtz7VcbBwKQ6RkG5Apm212ZdPPyg1EjuSIqPr5cIdeClJO1o1AMXptv0GJI5\nEuOJv1AhRDxZ2rwcQoT2hiW60PfXCVxMDaVP9mYxxqwo5jvCYSKi/5sNnlL5\nRe8C3MdQdTCX+8uJ6fnFNNgKApv3IEs4AUnWnyUk5z64sXevQxYIFPugAM07\n+G0mppH6x105eqzFR9W3HfrdDJLQg0jLr0qP6hbU1WlA+woy3aOkbsWYaMq1\n4PbidRHQ4yOebwC4htRhUzlcyT/QiKS2NgN9/5eV/YG3Rn3AJa8G77fi4QN9\nbmYYdMB2A0chw9liXFc4QB9Eg080UY/4qPRRT87XAslLJBvRlMefXIcKHbjb\nd3pZJ6kmfyx5EaW8F3Ktw8zZR5Kv5uq64A0XoXdUR4ZAwQ/zvpgU2fF6Gkgd\nnb4kgJuJXKA5yBbfcH78Z5+pICsrYCVGY78for2PpNZo6/MaC/RZ9xH5TxeH\n0fVsFVis8NVcpf1LlWFuIQJOWnPtRLsNY389iiRds9H69XvKO2Uxivk8BeF0\nxtWdvZW7j/fTbivLfnahm7CiBNby2e6y1uCS0UqTLha7M4cOI/g/Vz+tMmWQ\nGZo+\r\n=wlbt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"520e8b604c3cd3e7ce96b30f4315d576bcdad3e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.83d83f131.0","@material/base":"8.0.0-canary.83d83f131.0","@material/theme":"8.0.0-canary.83d83f131.0","@material/ripple":"8.0.0-canary.83d83f131.0","@material/typography":"8.0.0-canary.83d83f131.0","@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.83d83f131.0_1600043577777_0.44177501386712237","host":"s3://npm-registry-packages"}},"8.0.0-canary.40d8e4726.0":{"name":"@material/form-field","version":"8.0.0-canary.40d8e4726.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.40d8e4726.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfcb374c63f002ac85d329b16a8158c5e712ab2a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.40d8e4726.0.tgz","fileCount":34,"integrity":"sha512-s27ZnsKWNwn3Tdj8UplETSX+xteMcPAao16nyl8icusoFLz1WtFHQMo2y/+4YCpShL+xfIVuvA3RGETMIxjxGQ==","signatures":[{"sig":"MEQCICL6KF9KuHFUkSlpnc64wABXMGeQnSORmWJ3MfrZILmGAiAZ+wd094/nHbiTHktZhdg7rCOFeRkL8AuBq5u4pZQmeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX/0HCRA9TVsSAnZWagAA/HUP+gKIBW2ZWPrhXLkRGf4L\nS8kOt0cIRLrvirHRLkHAKhEOj4HSwPgw7ZzxAtpMOs1nROCcRjZNwQ2t6yy+\nuRUL9ztYhOnj6reoVYfJR6TURUeHIRehrQx5KoyI7A+BWwgR3Qz7mS+XALgZ\n7y3InDm59oCHWc51XS/atupo++7SWEgCDFGsLrlHtraePGQ/wmbyhLcAuFyd\nsGnrZQx2z50r+2MRWJtqXv8M8hp7VOrrDocNjnWYX0dxNwKhgnqcGY4hG+dp\nT194hm5Mh4JuWnxE7+m3/SVOeVlhsxkpKtjg+nWmotncNJ0K8x/7c343/on0\nurxgR6Cka4bHLPAYwkhndjFuDjwFl+UWEPujGqArj4ZooRTXzJwJ+HvovN15\nq6/WxKG4kuMw4QuKvO365XrKMIkHzRnSIgRW/DTeRKQ2I3wzGgO3iOqawtvY\nvej6lZOBTqXHIZYrb/2Dzpo7ngG3VbbhfpMSSsbh9cOAkSg9BFOyiCno1WWL\nv8dCbPxYCrS2KHz3eClnqGTzls6Yt2MdOuEujFnrWio1Pj4FJgdUImBT/58w\nos3nc1eNuGqa0HZVkO42AsG5bD1OWqG66FJgpnmZ2diD4mF5bb8sGASFh5hA\n8KM4DxABVMUQvDJlGbGw/VHC0ZQBt50r0eb6QIOcAUHMBtzlfuTaFkB+JubQ\noihu\r\n=f3BF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ba2736b8bb826dac383c6f8f237a6584247d5198","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.40d8e4726.0","@material/base":"8.0.0-canary.40d8e4726.0","@material/theme":"8.0.0-canary.40d8e4726.0","@material/ripple":"8.0.0-canary.40d8e4726.0","@material/typography":"8.0.0-canary.40d8e4726.0","@material/feature-targeting":"8.0.0-canary.40d8e4726.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.40d8e4726.0_1600126215479_0.6152075510797756","host":"s3://npm-registry-packages"}},"8.0.0-canary.c25d70a31.0":{"name":"@material/form-field","version":"8.0.0-canary.c25d70a31.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.c25d70a31.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db120d0d4bb32b69fe38ad30b5976cb40afadf4a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.c25d70a31.0.tgz","fileCount":34,"integrity":"sha512-3QcwVAcTC+CIDK9VCz/DiZZZEk8OgKKVAIkR2PsaL40EYIj7G05G7W3vquz9MYYFoyI8C+H2JDrvO1OQrYfLsQ==","signatures":[{"sig":"MEUCID+ELZA7PClEOHHUTSsQPhBgHmS3JXgy3M8RBDrwqayeAiEAs+8eP3PmmRL7r0LCDiLUOD1QcHuYOdhu+gGVYQJs9KE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYCb8CRA9TVsSAnZWagAAMV4P/1ZhPrijdYCbMOj+HiRy\nIVztiDyvzanbC6k0i8f7rB2Aa/D5mFzlYHTpmvXxe7o0svsjvAt4AtR0y3Mh\nEKxHz2ckCC2IyEGzsr38Lg1lX6ToZbXaZVwo0ZNxw9jPIMDAM2LfqYgApR/q\ny2yqK2Zxf2JQQvpah0Dzgr+gmUhu8SHHiZ9/TyzYzG/vQJsunuuiNhN8uf9p\nMGcS0AfcwHIRv8z0RFUpOi4fYrPFnMbuzbAb+52/lr1mUKCrZJ9Sefa6T1dv\n6YivZ5vW5FwY4z8tdWZtd6qESIO3SJ1XFZ+izS1KqXJfBa+fuW7u3bgNHr7S\nhIOorYZU8455iBzz9Es08KGron53lEs6evKgZOCK2PiTLaN4YYZuYJ6ygspj\nR+ERtzrtuiIqR+ul3c7HtOZhTpIPtzNEQqhZkkWirQZ2dgRY1VfY8hdpZQ53\nAjDwDx7WFwzFgatanl5zb1IRJDRLkNxw0tUeztGNhlaZ9MTM968YbYrOCgK2\n9ju9DAcLkR3GTUHFqkBt2/eG+jfoVXiAa5UZfZIy2dIfU9LycyWLghyo3/EU\ncXTe0a+ENYnOtGOv+zhcMh7ZlWtHzIWHHR2q0Wy6tyfCVtNXo66f/YjcA5sd\nBwrUfyTVqseblg8Fzar4P/YIpAHqdW2MenjaPuH6eoOBjyk5xmxNzOVQcn5N\n43vi\r\n=LmYI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"23adc9426ee1c32d146e601987be4165e56c7934","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c25d70a31.0","@material/base":"8.0.0-canary.c25d70a31.0","@material/theme":"8.0.0-canary.c25d70a31.0","@material/ripple":"8.0.0-canary.c25d70a31.0","@material/typography":"8.0.0-canary.c25d70a31.0","@material/feature-targeting":"8.0.0-canary.c25d70a31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.c25d70a31.0_1600136956446_0.7915665135027941","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/form-field","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.d52b165b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e4769358522894fb620dccdf61f5c1ea3eaf7b4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.d52b165b5.0.tgz","fileCount":34,"integrity":"sha512-+9fcBszesfB78c4ldRhXW/mupw8wbHp7lkDnvze64GnDe4DMPo/OzJq3qrN8AA+jCkBXd/ks2mwCra8OYowmNA==","signatures":[{"sig":"MEQCIH3r1TfgiCSbY0Xt+1CEBcucY/gGAl7qGn9cLGZcrhCsAiBpoSlPYlYbXwSaIEgmjJakY2+xKqko3mpXUxb9UhTOkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNWsCRA9TVsSAnZWagAAH4cQAIcOXVcDMDTAMxSdWb2I\nd8km/4RPJ9P7pRvXdxaD9ayhKqwR1wtMF5IACK3dB3pltkzK22Q32Iqwj3io\nd0EA+oMzVG2+NkImd4m6WSSbOn57G8mcRCC1wWPdCzschCI9XDH2VJhh5dkV\nWJ7pgHTAHU57LD+c5olZLNF3t3xOYlO6tYVv2DsqKOZWd/lPaN16Cgj7qcVd\nIT7oDlR0CEjmZGebaYIMult2ER+oL9ygYC3n2ZeiPgVl3fjwakJDmEV5VuQm\nNXt4jX4fYzd+QIeGNWBW1hooPbhcnWCsgnG74iUzd2eDhit7LAuiDI77rw0w\ncepq4TDbRd6wnYH0VEZ5jfafkGl6H9p2CysVyDljZjzCDfDpw4Fu6ZS4Vb2G\nEIljM6yXMw10e8gFist1t/GA/D8ftZvnW3qHJXtt8iE2cl3aIsK7HEjwayU6\nJ44X9/a3Ujjt5UcU+V784C6TmAnnWeVRVhvpkuaHkyuaEDnKV9q6EkTprlil\nXppR2xg7UFTdzOvQ9MQPNrhusYp8YIgUDCdZzZTZM9H34SCcu7pXC/gQvSx1\nKK92ZYAlqwvyDtNrGaw8NxDGbM1oGmnakgJQMJ+bwqNYKkgLphlnYYDfiUE8\nPxCU/jHLqgzC+roEy1BvsiappQFiuLz9YdOuXigWljEUFvVNZkxU0YxBsiWf\nRZK7\r\n=fVYo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"19ac3399f14583da3b2ca5e37a0ce783539066ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d52b165b5.0","@material/base":"8.0.0-canary.d52b165b5.0","@material/theme":"8.0.0-canary.d52b165b5.0","@material/ripple":"8.0.0-canary.d52b165b5.0","@material/typography":"8.0.0-canary.d52b165b5.0","@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.d52b165b5.0_1600181676093_0.7003857682920112","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/form-field","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.a831d4799.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4809135655ef6e9d61c00e69a8ffcd534321a494","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.a831d4799.0.tgz","fileCount":34,"integrity":"sha512-WfKd/eTY5YfmTNVYLJk7Dy5TuSsb1WJ9vbn0FyjL97rEhsthpnHPtOljle5vc3HsSWcWQ6ajWAFwtzx5wXne6g==","signatures":[{"sig":"MEUCIQD9NECenB6KfPAx3BVmIRPR8jrlATIG1aP27BpL3+gTogIgA7MER0T0cetW+F2ALOnzPXbLN6pvGGaE5IlWFaKT+Jc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP9JCRA9TVsSAnZWagAAWDoP+QCd9BsmU9y8FcJPqhNm\nq0phPQn4qON02oVAR+xQOOW5LLb/k2NP6TeZV2tR9tZYR+1fXLLIO+mYrDFB\n1hBvWltGEwLARiu8MSJ/fXXPkBr/uI2EIJURywl8+J/53ypQW83ysZPio/FA\nVVYlA/UULzCw+q7dwfGKAeSWRRv3wuWPvAf5I7RGDm4CnbTZAdgAHE8Ni5US\nDg0ILDNePvnt5AcvpFC3gSPh0QlcE9aCdgmS1P9qzduXtUTVi8z3wZD4mTHO\nb/oirWbX5cul7JhmLwFAmnSVuawyEd+vhoM16QQwDYkwhHoYhc+KwnLfnsoC\nbAwxR65Zj9dUYjr1aLtRzpvKK0acviOhbZtreMBe2kzW1wZngxgcfVk2S1kt\n4YgVDwIIzMKgMQ0g/IIxdzFYek2TTIXMGndWqrLHwGFwar4gAY5jTmXu9xFF\nm5ytIbFT1OA12ICeaTz6/ii9NANuRHPRNOagqnOu4QySZVrSro6AY2TTxHtf\nyZuepm5S2aqRqpcrNNQ5Lv65ON/n4I0a/mojMR2Dx8yvsKADwz44fUaq6VbW\n43TfchLzbl7GDLDgCBajt+qk6SOqN5IQAUn1SpXrrml/28GDeXinPTplW/fp\nImlFHuskfEZxsl0cccmAqUjrBK+TFqu9DdEr/UYLUjGQfX1eOA/86l+67Svr\n/pVp\r\n=+B1G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fa7f461e7963e1bdb73e7811d2f70b0a07acba16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a831d4799.0","@material/base":"8.0.0-canary.a831d4799.0","@material/theme":"8.0.0-canary.a831d4799.0","@material/ripple":"8.0.0-canary.a831d4799.0","@material/typography":"8.0.0-canary.a831d4799.0","@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.a831d4799.0_1600192328534_0.33292927485559054","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/form-field","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.a306aa488.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ada093c675c15e4f5e5c032b7421e1e5f0b9fc3d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.a306aa488.0.tgz","fileCount":34,"integrity":"sha512-+L1GLKMcLmOfNDHWTLbh0HBV9k5vDi/3KL08qzppzMqgC992SEhK1DXdIMXK8A+aLWoaXjLd9xHuq16Sd87pow==","signatures":[{"sig":"MEQCIFH2TCXX2V+OVqztoG9nbJ/KrzcMhfLx3jje6DQyGFlQAiBteHnfl6J0zz5xPBIsLgt/9XpqMDpNp0U8ArG3NsQXVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrTTCRA9TVsSAnZWagAA01sP/2szvbjpGeADiVQR/HJr\nQQoMfjUsSCD/H/WCiu6Eyyfo8aWAaBDrz8yTn+JZwM5PRWcRNM2gcKd9D7S6\nPNLfgznDR9fNnhiemDZJuZRnD7QWrzPaumfqYF9V+erVXPoHJ+oFUHT7LVcp\nTNFpvcbIAhhbKPqGTdUujUrcmhw6/+D8sfrMusRcHJvTno0RFG+v/NmfCa+b\nw5zo4Dq9FFNKqoN9zvQy1iHQbvwA63AtwOHsXHbRApysFjxURrihLjsBd/zh\nETYvhHeEPH4hDPXV9IU2WHuDjd6UFcramZ+h2EwB9tTM5XajhmP1tMuw38e7\n6zKCFnzE2oGRNjcOJFxc+lXzz5/3JKOcF3Z+9b22ahGsNZ7MUcf6/3ECCZUP\n0GeLSKFf2NmhBzT6uUvkBtpp3mHOa0/8HHKCMXovl860WkCyo24G2DTY652P\nsIVq0C6/AZG0YBF6x/7pjOHJq6GtKDu9sQOa58uZhxQj3v5TjQWVGg041m3a\n4F9DBdNsFlwv3T2IREQyGUVzQeNzPhaVV8wfyCOQuBEjbLkNzAJt8LlzCTMo\n7VPpwMtc2RnJxlJH5Sc+Qj8z/yQuNQnBIZRydHB2F+R/MKkFNagZHsyQYuzA\n0+gv/MLkiIYYFsDVoKCpDXb+4Ppb7H1HNSEjLGazpl61eHd3fAX3HHz71wsG\nmrC1\r\n=jTZh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c6addec60d43eb106ac774211ca2af4b04d40f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a306aa488.0","@material/base":"8.0.0-canary.a306aa488.0","@material/theme":"8.0.0-canary.a306aa488.0","@material/ripple":"8.0.0-canary.a306aa488.0","@material/typography":"8.0.0-canary.a306aa488.0","@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.a306aa488.0_1600304338986_0.8551883237041411","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/form-field","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.fd608ff66.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63feec6bf51a403e45ff49c74e6c0c613ea568ee","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.fd608ff66.0.tgz","fileCount":34,"integrity":"sha512-Y0NlxCLwYCfxvrpRhQcV7AllZH0FIAv2CwthPJCAoO4x1bCOr+bWIcFiVIkIlTBzMNmjqwFeKZfuDE8lcsk39g==","signatures":[{"sig":"MEYCIQCj6YuZ0JQHnkRhpx5qP+fHi4Qwab2RWz8xdgka8bOwUQIhAO9ETvd6L3vGXYGp/zFgdfhO15UFBfVuPzx81zAld8D4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3H4CRA9TVsSAnZWagAATaEP/2mPaZ93scZyUHyTPdkD\n7LQtI/1YGH2HpiBIkChcfBlBPC3xDcXx4Fbsm9pdsIuze7ISLeAAbyVML0D4\nkElhTSVkIj4nEsaHNwum0hzENt1edeVO6hgAztacbt5D8KVMUXKWMfpwk4iR\ne+CyQFQE+q5w0fUv23EhoyTDObpDFMhQtIJaPl4dLE5KSneVtasaN24NBlAo\n9CBjSbLR1GVmHo8dZW/NxJbXiU9Zv1gUNY+3XtF+L3YzW6q4YwhO6qOyFswu\nvff4DCbrqOtc6RaPKw7+lOHGxjO/SfSfpcDrp+weOJpJYNv1iQu+TIhS2Dkk\n1hSO1fiIEHLSin6q+4CsV6fIduHLqM0iFHLn5CKdn1ORHMQGOVaXJd/KKtUc\nnyxdbLR6IcJFxNVXtMb1cpud2I43AOxH3iVz+eI4YtuNieZL7h2MOElbPHGd\nnXODfHTaSC0QiFLUAIC6s4jY+vZltOGwChrgQxDADFCb3U1EiedqgCG6AZLQ\n+bKOqsUNwxmU2rRvxcj1kQ0qcUbVbMPe0onPVPnlSIcW4NPl64ANIzI2YvLP\nnvu4XTxRtGfTL4A0sydGKXVG5gmPhVtVj7/ochLAjPeDACSTGlZl51BsnYoV\nXNlgwf4AFMiNThCj3/DskYiGpdouaGFPhMndVIKzvZ8cdEY3+k8LoAlkKxVt\nmH8D\r\n=JufI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"03ec88b3967ad97da4309b1dee0b9764edcf89e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fd608ff66.0","@material/base":"8.0.0-canary.fd608ff66.0","@material/theme":"8.0.0-canary.fd608ff66.0","@material/ripple":"8.0.0-canary.fd608ff66.0","@material/typography":"8.0.0-canary.fd608ff66.0","@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.fd608ff66.0_1600352759475_0.23240015195277253","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/form-field","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.3e435ba57.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"685b103a1a5a99f631b59c4899221d6b27dbaea2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.3e435ba57.0.tgz","fileCount":34,"integrity":"sha512-C5nqvuQbN2bv62ZosXVOqxy1+XcukyaZVREnlO/EdTXXQVjq/SYqjiW5sGTrToJKix39QJQZMJuZdlC0OMw1Nw==","signatures":[{"sig":"MEQCIDIjLykSQsAfVQRRNjujQpO6AoY+7EanwQDI1yRWSLqPAiBxRcNb8kBgfpG4AhxecVQ+3V++0DuYP1JRVIeurAshjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3YGCRA9TVsSAnZWagAATDUQAJHRkbhUp18ur26aZobq\nvu4QkXB1gIZuC+G5EswQIpRWDxyTpNp/W9BO6x3EnMOY5Yfh+SDu9fvTjzsB\nysSlj0wVZYAOyjsCbjvEZ88pBn7MveVIg4QoN66GriQUCK/vdUdqqlLXoYb+\nIiP4ZE2ajuwFv9stygt45PdK5/urjE2LRONSBggMB3KzuNjD1f3VhqbnYYLs\nvLbie/8UDVpEZHcM0Qr3mZO2aCOnac9EpybegYyNPuY0+EGQZcVPaX+8z08w\noaiwg90SgALgJPJxpYQfO6onrYTTiA2InIRBkAokMm37031B3mlla76lv+SB\nCKIDDE7hunqOPtk8h8tR/pTqg4p4rihP8xw4X0DfTDvZWV5I2aZprtR4FSzE\nvgxxq/yI+hx9rTeo1YnMvIinOMcsVfCErmcsQ3l3mhikfAonTCThIUEqDnim\nnVTLYWMI+ZjMbOfVK/SZnsuOdl02xqBe8IppO06CqrlInO7Fj2BtfAGfutPQ\nF1g0EDtTXyiw7Dx2NZxYnoZzYtkWPiuS9f072QWnh0IoIYssmHZE8P/qubQx\ntKdw5K9FQAlUMlgJtnMjNaUajk4G4HfygcjvgSgghMHj63ELWyO9kXPj0cFy\n2/HZK9Cz2oSrzHQdoFlmNrSYq09NQDrEjg/6L1/QsJijYdgZ9UnxVSYITUhf\nVNAe\r\n=xXr5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"15ff2ccef4cf94fbadfb06cb750ee6de035cdd19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.3e435ba57.0","@material/base":"8.0.0-canary.3e435ba57.0","@material/theme":"8.0.0-canary.3e435ba57.0","@material/ripple":"8.0.0-canary.3e435ba57.0","@material/typography":"8.0.0-canary.3e435ba57.0","@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.3e435ba57.0_1600353798117_0.7269802957245393","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/form-field","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.c250ec52a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"532d1ea2073fa4aa9d886282eb853de0a84a0b1a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.c250ec52a.0.tgz","fileCount":34,"integrity":"sha512-XCsfDcWt8b7Mj8y40kzowgy1MRBRT17f4DdmRLbE8pyBUD3fOmpAh5jHb0TN3X1YhqFjDNpbSju6/h0Ofe+LdA==","signatures":[{"sig":"MEYCIQD+PrRxmDEJgKJu0cu4tAnIoa8iSzvCxvXdo+2L/zNQ0AIhAL2fH/Ay3mLvXYIkrbgktJEd0tYvb8E+8qHoY3sFQ/W3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8LHCRA9TVsSAnZWagAAE7MQAI4AgqPA2crJvfL8EgHv\neLRRuk4fxVeISRjuxprVU6U/dzFeijo1nnH8sKZn5DCI0DRymqNcMFCK/yMz\nHnYbbyc2wTXMpWG2CUZ9ovQ5peXdINdj0wQ/FMWR79GitCqDfeZCzKewGN30\nupVmmqhDfjiardTKQB4ox+87qSbHVb7VikBrmtFA6kfTCgp+uuSJK6AZiJNN\nq7URESbQRAftDhsCcpAyNUUMWI8jnSuVvktXoqdyGB6FD18gdfPpyQqEl1+K\n/TPK7QwXxiQbGfRy1b0iKDMVSn5R4SbsAHhocgk+uxgfx7LLf5ZBlQ0PxYzh\nv0z6EWP17N9EvKgHHTMguJdMxshyZRiPltp8UfbHWzsQVuHshitl3/Q/nwTt\ncXTtAJzBSOwRkeFfoTljIJJq1GHBoudsGkTZx6jix/uJPXBVZwtmYzUc/OTv\ntcOLhFxKrCaGH+bVUI3PxoR7KF/Jo7/zqFvKjQANTTHzwss7di9TUgQ0G5AV\ngx/j3XaDpZNiSaXq0yyO4Rf0SPZNJ32upgOil5QC1mzmqmO0MGLF1G4UDG0p\njGwp3wbFbp8BodLEtmv0SSGOCl6aM+hgNEZPhEbGrG8rQmuEB0b5bwrX0tIe\n9GWgP/KODgFxSTGwyiBn0NP7YHohK3jSlxsXXRPCIFfOQodezeq93aNEXYQs\nmSFf\r\n=JeYI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e214ca7cd3c1a65ab89d2fe2b4fc899aca418adc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c250ec52a.0","@material/base":"8.0.0-canary.c250ec52a.0","@material/theme":"8.0.0-canary.c250ec52a.0","@material/ripple":"8.0.0-canary.c250ec52a.0","@material/typography":"8.0.0-canary.c250ec52a.0","@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.c250ec52a.0_1600373447128_0.05164750923123185","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/form-field","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.e34e411b1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4db498548416b91c2879756fbccc694b395bb80","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.e34e411b1.0.tgz","fileCount":34,"integrity":"sha512-mCiYXdpoQi3lNTl+r4Kh1/Sv60LUpjL8AdkgYA/oroXcMViN0wSGpGZ8FDrcgahN0MqI+oyuyVhRDR9DnnkEJg==","signatures":[{"sig":"MEUCIQDxytt7jRHkmqFa9Z650qzemD+zM3v2BN/Fs7FCWNqeSwIgKtJYWYaHfKokrfzdqtuojxabjNnB2bxABVHJZFxw0HM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8SBCRA9TVsSAnZWagAAL0MP/R9exuHYqC71szBzI1Z0\nhlsnM9IH+vvEZ8/WylLoPwgGwwxwma5kZCvCeuabms3PkLMix04ceCuyK/FI\nszkVPV7PATuWOvhqFYOv7whP64fKM5xG9eqg//ujqqB6SwPvb1zDq4BH3fJL\naCBK8ZM0yUMiHGG9NXlpbMaCX2ORbbDiPgTfZajqCzZBNlnSLp60XI2Bs6D4\nSoSJTa9wlbVmse5V4KesRiQ0NitqzG/HMfl94l/2hWfKZvn+Rn6I4MVyzmL2\nLAQSARJWIeHN/CqTjeXSMKcbarFbwkruUofDX9ZTKTJw2kIeo1hXFqnAzp04\nQcmPnS87wEkqwd+zB8AoUyoorgKb8opBt9gYOw9YGwxHRmuMA5DcoCTb/VD/\nZQxTnuQFeJ6iNyA3yL1kTbgiXzHknhxj4tVmvvHMRlh9L8DVUB/Hcg4lFnf7\n4nW/P6LdU4ui1ynT5G0rUJwIm3NYiUiAnpVOQY22YJygnC1BdFh7+xssYrHu\nGGyiK0NaWFxwm2uDdcyQu4m49+INJM1TfMlnUgcWHOYKcH7LD6r4ohvFIJVF\nljiDmE2eGEyUt1zaZxYrZgvKY1Kq8CfftmkuwiY3GR1IbI7TkBRqSFtw5j6u\nPwvbT4WvtbRUiXK6Vn0yiYRTkmNRyShEPW6COcGksx0AwVGx9XJ3Jby4Vapa\nl1l6\r\n=0kux\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"460337b237852aa88d59152c38df2b32b73792a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.e34e411b1.0","@material/base":"8.0.0-canary.e34e411b1.0","@material/theme":"8.0.0-canary.e34e411b1.0","@material/ripple":"8.0.0-canary.e34e411b1.0","@material/typography":"8.0.0-canary.e34e411b1.0","@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.e34e411b1.0_1600373889030_0.834332428891706","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/form-field","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.4e9343929.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3d2dee6374fec266a069795258f780d5becdc72","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.4e9343929.0.tgz","fileCount":34,"integrity":"sha512-Aa3CBqackhUvOPutWPiMPcUKfgYuYFi2BxsiUBOOy8Ioff1w85EM/wKC/xF/jFZjnTTqXoAVCVSoIaKS6BVlOQ==","signatures":[{"sig":"MEQCIAZ0cMRpVjEQdL+OYykulRTheL5yyOKFRgEqC4HF3YA+AiAjZtblj168gXyfIjmornEMPJr3TzN0/qWLAsFgC79VdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8psCRA9TVsSAnZWagAAH00P/jbx6XA0FGF6PUDSYiQ4\n1KjWguQpb+WMVAY2ySqMUeuCPzHqiMdxEuDw5ONPBNj799ekPOuCu2rkuk5E\nh7Kwv75DD8Uv1pPioxO8eFNhLSAv3ka97EfQSUGXOLbuTES4zCFQus4l7vTJ\npUGNkec52VwcphlwHAWEEJq0d3cnfDRiZTV+k0iwrx/PF5cvJUClC3CGGgCf\ny12+hEQmJgUqF+gIJSFfsaxUKrrZhSIyiPyHBnEjts57eKTrt+BNF0RDfWDd\nma7wL0GNe4dTc/COlYsQnY9/mdH/1OiZW8wMqt8L9aUTdw/VsQQrDRmnIeAw\nphKkif/DLgu+MJuDx2s58F9/15KQZC223BGeN0Kd3kaLfykkif8QYHOOTLJy\nKOTIN86SGAk481dhiZFkKVAfv46LC1jsJaFul5MXyxJd1VB1l9D9l24R2hhS\nLUBpx+BgQPzIMyEnmRHLaEzZpERVv7wRRlnktSveCXr487ahXh8TSzOUdYMH\nc6SPSqfcwY9s71yvP+sa08LffyvDMWL+2deeJMomkcsdDpDDorRar/ZlWde+\n83+lso8PmejoTnaVplJXvNPpA75Uxdoc9HaP+Dr7baZWQUMApJlZQdvhr8tT\n/W3hshxigom/oaTjpEqqNIWvdfrH2tcP7Eo8tA89YlaATBJy4U5OR0XwwTnA\n1KUY\r\n=BqTw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7bab75a521cc7f81a2f78587d2146ac140e3cfc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4e9343929.0","@material/base":"8.0.0-canary.4e9343929.0","@material/theme":"8.0.0-canary.4e9343929.0","@material/ripple":"8.0.0-canary.4e9343929.0","@material/typography":"8.0.0-canary.4e9343929.0","@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.4e9343929.0_1600375404182_0.8443768048803606","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/form-field","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.4e5c350c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d292ef27d3a0b3d3f0d7ad633be3cbbbdc1fe828","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.4e5c350c2.0.tgz","fileCount":34,"integrity":"sha512-svruXohHFGSGqO0IOgFVJ9qQVQ0brZmhHMYhRvYV+1o7C2lmDiDrxnZyjZkfbiLKd/MJZOXI5J+qQKSZ/2QYTA==","signatures":[{"sig":"MEQCIBomXEfwim+BjWoVTAV/Qavh+u4bTC5A/N6Nmv21RGG0AiBez8RBiwjIYDfzIEcN1KulGz6cWgXsGopbRqrvJCeF9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaRexCRA9TVsSAnZWagAAR7kP/jJpXkb+Un0XVywWWMKq\nAPoIWvp/f8EfQ7BLOG+WsqY6qMQz9HypjMrv9FrWntl4Jyiaj6K30OGg4DfS\nYRL7ozi/rIekWehOsC073XsVsniMdE/U4RTZ4y8HxqujdBOwmTLmB8B898Zo\ntQf2MzOAFuC5AI8eaLuOwVjCgz8ysQbrlCnb1nzl62atnV933Tc5pYin0yNW\nRIz167WHPUv0XcGRlUw6JKG8I17tC8HnO94h6qBf4/OeaD38Lb4S2x1W/7bw\nn8ScQUphoztWlhxNkrwlSnBThN3aZut1+u/U0MQAEdc0JCRjjAkms6rwyV+g\nOJ1o/cszD4snRYh8/H2V1MrqTNYR+9FtJG3A1pJ4MDxKLzVXc/K/VG1+Ozh1\n6RIN3mY1ZtzBsaO/e4vLiydigwIn+QvEO+8CY9WzQokEI8WzoMhfUtBmreAO\ngV2vDfpTxc7cZie+j0j3/aNZ7+mSoy0I8PtAnEbp0z3vlzyAGi7FZmKictGh\nGfNxldGH3x2fgs7yi7xti7E2KE7jGSgZfFTnzR+Pyg6EeDCMM/qiVcBq+sv0\n1wVgQVft4AV2KOKq76f930Va4sqM84Mb55gz74/LYOIZ3mPlol9lsSThxdk1\nI4SOKAP+ZveLMxtRXY+0jHlXurWie2bOlP/q/m5UXpZRWMx7kEPbm1XeMgYL\nAp7I\r\n=zQHD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c753481bcbad808064a366112868670fca5381f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4e5c350c2.0","@material/base":"8.0.0-canary.4e5c350c2.0","@material/theme":"8.0.0-canary.4e5c350c2.0","@material/ripple":"8.0.0-canary.4e5c350c2.0","@material/typography":"8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.4e5c350c2.0_1600722865166_0.4441356234150191","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/form-field","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.16c563ef7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"684343a841c879820bc40c6ac19531c82d4b99f3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.16c563ef7.0.tgz","fileCount":34,"integrity":"sha512-49tBO3fKFWLNEnEgpdvX7hDEryAA12tA4oXzodi1TgvCO1N8GOW7mucOZAPA2P6rZd2z6/WYf68RAsKs/qdqRA==","signatures":[{"sig":"MEUCIDUzXr5pVVryvg4w18jA96czRPE5BjQFk26MCSEgtpwrAiEA4C6nSoVpO2K1NVm7XOtcGTnAOL/GHofkralX7orsMmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalSaCRA9TVsSAnZWagAAnIoQAIlE6/GdBnTzFa8SqJF1\nIJz7X9drPLSgyzNgebP0jc81k+oVThHlDVRS1o4mcmsCCQmTZH5LzGg1a8qA\neseTOsTQcUlBV2E8Jqmas3Dn7WvaDxnyGM/n1vdu7OX7s5HzHeSZ/EP9+YXF\njhMk5kpAp2TRuLdx+Vs1mI2ZE9YXuEUf/PHjS8EFN6joqSLvZBEfTPFcmQ/o\nEYwCc7DXmX7gGJmub7HldTCm83jtFlMNSTe/o5G0kOvGre1IdLPJczEGdpiV\nVz7NugTvgbFdXSgMsCfQq19T4emeVMPm0P3TMYpQQg0jEkx7he+r1Cw4cV4m\nPwH11GrndgEYCNrjgjABO43hz+WbuZtNHpOGvEzdJ89mFJnOzSmJwrbG9Qqd\nxRDHRG87OU1YBB1r6qX/zLm4a18d2C0aajcRC6GiN/zjwvDkVG+Ix1lhrve6\nyqQdSWp9YL+dt1MSFxTiO0p4CR7OUEScPUaiuwUOESx8d4PWi45WcN6xRMQR\nl94Y053rAizb9r0sKfP7sWOTWBoJn2gKOwg4QCafAw5KvaeteZQhsDszgtTX\nPl6Ej2k+HWCA2I5uHsZbR+qfe8K+IVM68Mzc4mqQaPV3OJdXTskghUUSz6jS\nmdnu+tnu3EvfjGl8jKfGPTDA0NI3UJ5V4ZdidtkeiIftb6ZpZg7ULxnL9VVB\nrSMd\r\n=nnYg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e3abdb235aa76184bd5171f68c237f58b8541f7a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.16c563ef7.0","@material/base":"8.0.0-canary.16c563ef7.0","@material/theme":"8.0.0-canary.16c563ef7.0","@material/ripple":"8.0.0-canary.16c563ef7.0","@material/typography":"8.0.0-canary.16c563ef7.0","@material/feature-targeting":"8.0.0-canary.16c563ef7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.16c563ef7.0_1600803993616_0.30618836041299646","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/form-field","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.fd8af3d43.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8247198071b097753a9aa5030f643d610adbfeb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.fd8af3d43.0.tgz","fileCount":34,"integrity":"sha512-LMFaLXiJOwZWA+2vuDVALiAUo2TCs5px0tqeLURah3XQSQ89lxj5dM9QrEB+TluGlsJudNPcnRQXrE18yViEHw==","signatures":[{"sig":"MEQCIENaRiGqMqDktojZmWfT+sHESbzWMx7js3MYRHY8i0rPAiBgoTmAbRWBID/ih70JfEOnAfIjBIMhieVxXmS4tyOI/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6LRCRA9TVsSAnZWagAAJMUP/iTcGGZ2tPV7687GTISH\nIte6M4PQD4s4Z3+B8pTTNND2bZaSh/AVZJu2AR4EijaHyCMGNOU1kyqZ09E3\na+WGn1hMSM8Rn3u8jF06GLieePiKRRLm6oblO4DzzlzFEHzyBLP9QPUcC/rU\n3ZmYog/cackQTgju9mZPhQKj7ECAY6/6ZAp/AVCUUpw+I3waBlzxXOJdy9UB\nXm8pLjgj0QWlb1NJqFs+/quGQ9kSO7pV9W/9b1/UkNeTlOymXB2Qb/MT1Zvb\nHXQs+xvTlICPnT8mHyNnT7kav5awi+Y5SbHsaJ6qdQeY/yV7sJv+RX3pSNNR\nGgqKjw9ud9A8hJLieabGVJcSqffRctwAED6F2NjcPxMLZgEQkWdHQHdpdUlY\nGX7/1VXl9YST4H0H+fSLOb2Ip6ytiGIBxCDbg/cnCcPtHRM1FRmKyR+Delax\nU+bo+cQqThUFIOsK2i10kMYkwrPA7QfMXQNMhuf3qQllNlRYuhHYvjjZcEhk\n2APacRy5HrutfZwfCaHo3tXQTOS9+dQ3i4sd1a2Yaa9qvWUlSKqDpXCzqiPC\n2pepza9c9+0lT5qyXFGovOuGPDmWo9lPixBP/To/nCBxSMRxoxImE9HkSORx\niHb5NPHuPGxU8qvZyQXm5fxpuYxZTneCu3iPA2ZzZ5P9zuJROV6k1B/o5Eza\nW7Kz\r\n=Erpp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0f295a5eb9518e726dc271a945985bba278bf9e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.fd8af3d43.0","@material/base":"8.0.0-canary.fd8af3d43.0","@material/theme":"8.0.0-canary.fd8af3d43.0","@material/ripple":"8.0.0-canary.fd8af3d43.0","@material/typography":"8.0.0-canary.fd8af3d43.0","@material/feature-targeting":"8.0.0-canary.fd8af3d43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.fd8af3d43.0_1600889552840_0.07405676736740952","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/form-field","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.d4cd83a85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bd1129be06956e50ecba475a8479fba86a4f370","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.d4cd83a85.0.tgz","fileCount":34,"integrity":"sha512-fp32v7spiuZaVTiGJ1kRwBY3zS5pDwNezgMcGQ3ZGf4E8D6kHMPEXkD+NcNyahS2r+qfeB8E+KNU4SIz1X520Q==","signatures":[{"sig":"MEUCIQCRS0GHTqypxhQaMbyLEySwfmKyfUZVOiXHG8VcwnKs/AIgb6PaYZ5nqs3yFPBi4PfA39HTRcL8dzO7yC/zUGijGp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTtqCRA9TVsSAnZWagAARrQP/iJts5LCLeLYpb42E/cd\nub33z0n7Q/S5PBadUdLCB16NWEKqyjze5LMgtLE0sKyheSPeZRm4Hgyxl+wc\nUpTp28CK8hDgQ4mJ6TuVKnvCfzF2LzagGXq/n55SmZCMBsvAJYPx4oYIrAS+\n4GkfaF71bl4DJSQPmPGIsv++VjUva+UmwKb8SbSBj2q6vUyKykrDUTmrKETL\n6XW2NrsGUJVw98z9Z4oKKzpY6lGfUOTYszmmZDi2FIdjADjFW89M9Ln/vG+k\n11WmYE7+IYNM4uCxffsOVzIvGW1z4JVD0H48c/pbswcQUHsncV9LuGdZr0L2\nyiEZEEFiBHajM9NpA21g52Zncq/Ln8uPcfyUnri8m6/VPOgwu2asNdXpYEjC\n5BdqnFawj3YKU0MDjyskrl8AiLz6FhAN5mfp8KujtmfcqyWxM1K53r8cGmbT\nt/F0GLWgx4NKqHYsJ5nk8DcMp/IFdyM1ar1m51fpEfLwDtD1tWk6X98lP2Gm\nRyKxkC6Crx4WYGCQYj3b5wrhfr3kYtJwiSW3qwX6qJhtNq/GTb2xzLnOzPaF\noaMMDEiX5FY41sOh5rYJh0SHvpYmx9hIPpJusHsHu2bjd5LmPyGlhrUCYRSL\nn3Ntw4eC5gc8v2YTyGSuhv1JEpYvWxS02jyWOaQnd7Y8n0ZUxGmBpIYRzcNd\nzcj0\r\n=bCxE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"80cc7639dca83570a37de4bcf4d7501246ee8eee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d4cd83a85.0","@material/base":"8.0.0-canary.d4cd83a85.0","@material/theme":"8.0.0-canary.d4cd83a85.0","@material/ripple":"8.0.0-canary.d4cd83a85.0","@material/typography":"8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"8.0.0-canary.d4cd83a85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.d4cd83a85.0_1600994153652_0.1459739722803235","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/form-field","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.199aecdfb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41c5a4312a738031da7d09ea87a70753760d13bb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.199aecdfb.0.tgz","fileCount":34,"integrity":"sha512-YMRMJfXikT30inIOCVeFPUtedACBAZlZqELg0SZ9hlb5Shnu26n4tlsoQjhv5QOPV3lvCwnOrAQ/mhBOIq5aLQ==","signatures":[{"sig":"MEYCIQDuhKe+S/STOZ5wsdCaAizkgP0RmYWt4339W/0tgD6AjQIhAPhAx8oLRdv0Ra6zZogbtL2i0oBLEi1flDYthYedji+D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhIJCRA9TVsSAnZWagAAVBsP/j5jQxhatVmwV0dVSJUV\nWQYiDj7UmTqGkZ7ln1FCJkBlzpB60r8iMJGs2ev+Mw9/B76idjhCVbvxtKNy\naWJKQ4xzr90+HCOO8pSWEolS2QtiV+VJiQ358ap0/y4rm7Zu4m71TUv0PPlu\ncKNNBWxm6KiA9zIsvQaJw+gmPO0YqM4Jwo486sJdUwTCPOV1jsJj5nKbQlFK\nzNE8RoZLuil48SJOEIHOsopFap3F8fPInlIPwN6YwMFwbHBaZioHEx8/hNHH\nPkkeInmn8oT943LtjL9kjWmlzWqRNqooH/a/q/9lEvXDVQBr9bAG1bp3mOxA\nOd/O9AFk55s+Qv6IOL96g6GrQfJjdBbP6+MHiaxMssfGQ5xPe7m+Ch+ZeWpu\nu7tiqJWmBK5NtJgHOYHoIyPz013dJVH3rxdJggt7gu9zj/YoY6tXL3zBjRJt\nglSpOzDxwRlb0rtQd3Y4I3EkEslDUnxXdcJsEDBc2HNANWo01GuMcwZDr9K9\n0YQlmCodZT4p7txOX0LeXPiPZZjt1eMFEMtFd0vQx+t8F7StbIfq/rMOnmRu\nuWRa39LARLtLhVlhENCP5dq4vydwJqYlfrVQSi1kplAQgN4zfV1iutVA8kAB\nNkFg6gGkvP6jXrENzJQOnMbjgZjMN7K+UU8Kb5z33XFRXCXerRYtmM5t+GTL\n0yRi\r\n=Qswc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2ced06dc0aac728f58cce508c7393aec959895d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.199aecdfb.0","@material/base":"8.0.0-canary.199aecdfb.0","@material/theme":"8.0.0-canary.199aecdfb.0","@material/ripple":"8.0.0-canary.199aecdfb.0","@material/typography":"8.0.0-canary.199aecdfb.0","@material/feature-targeting":"8.0.0-canary.199aecdfb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.199aecdfb.0_1601049096744_0.7144045550473197","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/form-field","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.38ef4501f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30e6031e8a6177587c0fd5d0e0afbc005a7e98ab","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.38ef4501f.0.tgz","fileCount":34,"integrity":"sha512-akDeJxEreYXWiI7X1jZeEGe8F/0WDIyxaxNyGxCBPez9PokQiQ7gCRL60To7Sm3Ftc/JVhINQubTlfOKlrc3+g==","signatures":[{"sig":"MEYCIQDG2bvHdgTMEaHPZOh+UfnYEEuA8a3AlYJCXCLLdjsNOwIhAKwBOymKbqqeHhapIsiu9URLdS0YtoX2l68r5fbb0WAl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM1wCRA9TVsSAnZWagAAxAYP/0j0wk3bLBdlOYIZ2yF8\n34mg5GOWI7UsNeq/HkVNeZ7vvEvft83IeaVoCzcu8dE8nJYGX8CkLVBkdW9E\nnia3ChG55VDFlwloi/spYLG6O89CwXQd5Y0HEl7Iun/kLdeLSmg1gdcOsLCO\nkLVGtQ/8BTXEOCL1VRcjPDJu7MghCTu9PRHE3FEXBXMSZ17yb7SRfAyecBT0\nO6IRApCDWK1gNBHqH/nd6DVv+jnz6h67UqOXHbL+L1rpnx9T4haH7Lhh2Xtz\na4HaoqN1BvXeLjuc7+XJvvKNmYhnaPrNYwZFxHkK4v9HmI7/VlpJfc70Kimt\nlMXBGuA+fUT921EjodnOqUUKXzs80v0Tt739XGfuyZ4i0BgX5OVjneeF89Di\n38agFxX8L9prcu7BBspdLE2x4rRE1WjaF+UQ+E74jBEI9RapIw67X3FeakIZ\ngqueFNTcc4ZUYag/xb4EYVaAb5AIjPDm1dBjG5rVbDCKXHUj+EOEEkqwbvmm\nUy2WhTKFlhJNMrH1A0W8PbL4GHNKgv6JfSXNNduiJUkRi3KEcZplYvf+ZJoe\n/PZpr9c7/vVV+yYaBBbnqWOI2FHZnG3kxEi/VSCERijgVV1pyz4qf5xRTQZ9\nRG33Ba4Rl6O3eabeZjwhfkMfz1UW6xs0AaEf/5H1CQpDBW+4UpmB7JKg3Sx3\nqxTM\r\n=cZPm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bace3094edebc680b12a257aebfe6170928076ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.38ef4501f.0","@material/base":"8.0.0-canary.38ef4501f.0","@material/theme":"8.0.0-canary.38ef4501f.0","@material/ripple":"8.0.0-canary.38ef4501f.0","@material/typography":"8.0.0-canary.38ef4501f.0","@material/feature-targeting":"8.0.0-canary.38ef4501f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.38ef4501f.0_1601490287898_0.014937129835702612","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/form-field","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.774dcfc8e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34a9498c99592b82b09c541f9c6981ca327b5537","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.774dcfc8e.0.tgz","fileCount":34,"integrity":"sha512-94zmsyamY4Kpq91/hFlpMLai19VQC+FtvHP1IMCAhCHb5HFC0VR3EpXrdV5L6bkn33amxALwUon6fa1IyY9qng==","signatures":[{"sig":"MEYCIQD9nHeSWapQVKkpzC992AZDs9R73P/g4TlHu5dIG70aEwIhAPvnLUoRWqbcO2DCZS9FCDuxxjdiSE6YpjsSufVOU+cz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":177385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdadTCRA9TVsSAnZWagAA45oP/2yOI/rtrCNPpsqjnlLE\nhO2z3vymJ6RSpNebDOvA+0fgUS2hhqcjSLOk6vXMax0ud0ulNIn8YXB32Kle\nWxTkEKo74upBsBIrBqbm8M7+5ln0x/ncBlsrj31zEBUPAn6xiTqnGvSMAmEc\nelLB9vgUQeQR+Q1hkW55relL/oSVpphw0R4i43C1lo646Uy0WYb+MfCZOr2L\ndMnPGiV/QEAomWgYYQWu5eG0sgHMETvu9seblmj+q+gwuyfPY9REpUciD9ib\nsI417pERp1P8A1ZQNDqcI5l0ygUCatpnk+Cx3aMX5uX4gDIPR6io+Ur7mSzI\ntT1tZeDm8UrGm23ped3DoGdEcpvPtNg2VnV18eO8w3b1TBAD6H58KmNePqdt\nTUmVzwj8evSjxyvjUMqYTqKw2y4bh7CIu0gOYtdxonLd5moAE0WjjBiowvLK\nEaHYPXB6yW2B/g08Xzbag9eLHHHqzbcLrYnRADLHYyoXMkXYBZ5fFwU1aMm2\nrc1hO4RTD/21tlms+Kqq1oOfCGbvpQ7Ouc7/WfTsThXbQzhfjnkB7tMhrGVH\nd7FsK4Q4g9mDyUEVD7Xu5Lj0g4mZg0OMi7HMteiDRwf+oOjIOeYMBXUh5WBa\nsBy0a/poMlvcZHoAoNW5RbULuD42h/5gTeraSJWkELETKfR9GjQoy3IG9nnq\n4HoU\r\n=SCTu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6c37b80b059fbd4c815253f3a3868578afcc1afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.774dcfc8e.0","@material/base":"8.0.0-canary.774dcfc8e.0","@material/theme":"8.0.0-canary.774dcfc8e.0","@material/ripple":"8.0.0-canary.774dcfc8e.0","@material/typography":"8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"8.0.0-canary.774dcfc8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.774dcfc8e.0_1601546066921_0.6417351292045625","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/form-field","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.0f60323a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e89e41a0048338b8f14ba387a01c36188d8c6bb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.0f60323a8.0.tgz","fileCount":34,"integrity":"sha512-ClZrXrGuaeqaIwJxUW1oFntueH189AlxNMevWitNCpH/vn4SDIf4hlUw5j+7db5afV1RXhU2h0AhnKQ0VNmNew==","signatures":[{"sig":"MEUCIQDSjXvJ763ZCKi9FeoPWWoov0Fjpp9UXMHx1/TR5CKKigIgFhJEJjeHXa8SaJsXr8+WiyF56WV2Y8VpcaZHCcasO4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4A9CRA9TVsSAnZWagAApUAP/1S+Ht0sjkx8z1RAC/M7\nRrSXvpbaO3lO+Wa9oewOsdzpfSUts0BBst/zmKKsNAIXAgq44Gu2uB+1Ghvy\ncNE0TsijjFxGZS1W+e7YISAbdKjVD8LuZRp1oaWRbMNMxQ8C+nw403tET2Rk\niqQs3zKjbSyBTa+XBzaf89QdTs3rwd5Xs4nuGEyRiDqfa3IaxeK4aOttHiHq\nfDAWSiJQIjEdkppOdhEpm6oZbCnX3fEyYd0T5TyQuiAuGd1LNLL4I10O8m7F\nFVKoP9ktDU5PnnyymTToiulaVgoHumBaJAToEDymEJAla7F1K7qqA6YVeuHC\n12YmvqRqCe5wcYJy773R02RXlnlzqueS5zS1nH7iHFhjXhw2mYoon6wKcSGt\nWfbM2VIVahahwZllnMLPlg7BGi1hkvzXEvurPQBAx5dlYBOWxlo5aD/N/E8d\nXN5Fb39d/XuzHEkVX1lzqfoU2Tx6G+eR94KIF2DqXKBKUYEC6LiuuCYFcX9q\nuzbZuyQZHyfuMj4PtQvHyBcAmyEkwPuOIqpSj7j5e23+qml7T0Hs/p7UhNgx\n0Fwo3eCd2xZ8xssspZKEauMI1ViGlv00N7H/sag2rbm4FT36ln7sIfdeQVVV\nnWbkrUzbOQ051CVgN6isb/MHz5CbZsJA6sBGox9Ijc8EHNd6cyB3CbKsbA7V\nQ7aq\r\n=ifIK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"edfdb55487a31cd5f5130aad32b3fa8f369e6d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.0f60323a8.0","@material/base":"8.0.0-canary.0f60323a8.0","@material/theme":"8.0.0-canary.0f60323a8.0","@material/ripple":"8.0.0-canary.0f60323a8.0","@material/typography":"8.0.0-canary.0f60323a8.0","@material/feature-targeting":"8.0.0-canary.0f60323a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.0f60323a8.0_1602191420615_0.22129028354883395","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/form-field","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.d71622574.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21b045bdffc005b5f26a0727f47d5abb0e05868c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.d71622574.0.tgz","fileCount":34,"integrity":"sha512-67KtMV+9qc6l4v9N2tWDXZ3owDLmF0nku+S91AYRtTnqprANvJewG2lD/F2TdDtSYLQI1pHvLuMozt0wsvpimA==","signatures":[{"sig":"MEUCIHX5ttJQnbEboKOtSnzfq2L4WbwD54rkO8prxKHA9KmOAiEA/J6APnLTD42Zb0t10TXVUFvVRjG52PAzJW7a08HLAtY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJCICRA9TVsSAnZWagAAg40P/iypf6rFv4O9gfU6/diZ\n5u40L3UX6IfHbLSduE1AU+S/wDySXKw9i3FWFGGIgqe9PiMvoUYwdbYf2mEj\nve3ydsADI0CRgjq7du3zZ7uNnR+8iCkdaRmj4Lo2cxfaahPDTFm8kij1B0nP\n71OfI/1Ggvjcagm7Xm0aekKtsmWuXWnAFkam7hTSzTDU3S4pcNBWhIZgsEGW\nEXGpXe7cNvnCoQcvt6E+7DxNVtB8TghVyerjWZaZ4v6cW81jf4+RZmoOrwUd\n4QpUBeiBAaRLAc1Ch7+yxEe92aNM5Rdn4Y9DBTBDUHmniEw/oOjefCvRM/bF\n7V2xQl1z6uQf1NAk+Q+5Lv2pq7E0p2kbaOurCchTdIzo3uV2/SWs8twGWw5w\nb0hYbBTAD9BaG90nU6WhpqMLJLOp3NcFp4r5k96qRRJyk0jlR4McN7u2GGHh\nxn5XqAV7sGrTD0WWmzMObFRCBQsODjiA8qq/kQxp43uiPzpDF0ZnEF37g6Np\ndpHdf0fZbgqzOLswY4EkoxZOEuk9Gyrza9JZkzo17DWeZye2lIiwEEvUOdhi\nPcwB4gOHSk+/Nt5LDduftMftr6VRbO6dz/aRUXia+frohBYPH3vgIjd98QfY\nt81C8N5qPAAmyUqGPPPo6QG7zEfCoBKOjIYBp2rWepcjyJEebvstCG4WSKoh\nAeNK\r\n=tB0e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"19a45f4824305f22d61cbf9deea0fef067dea3e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.d71622574.0","@material/base":"8.0.0-canary.d71622574.0","@material/theme":"8.0.0-canary.d71622574.0","@material/ripple":"8.0.0-canary.d71622574.0","@material/typography":"8.0.0-canary.d71622574.0","@material/feature-targeting":"8.0.0-canary.d71622574.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.d71622574.0_1602261127910_0.4254137129419324","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/form-field","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.7a9afaf4b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c50bbc731cf02f49c597bc0467b3c09c567c58b0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":34,"integrity":"sha512-Abiuwu7PCjUrXfyxdpR3tzw4xC1p4pN0/eVaGxjxhgWpaWR6n8XMMEK39VarqGczKQh7QnUwQh3wKmPt/gT5xA==","signatures":[{"sig":"MEQCIAE0rvbTASafl4WYd/irc0zXoKltepPY2oGFNTnaJt6bAiBS2ORgAe3h+ssMmgqTHsfGIQ5HyXeTH1TO/iHUh4Vosg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOoYCRA9TVsSAnZWagAAYYgP/0ybhMmCmKfgn7MFLrpV\n6ykssQBxaUWAX5zK4g8SL7tIFSZtz5N8v5tGqAKciLxw6f4zdIxWWrygPwGE\nq5aYy4JPXVZ9JbDrNb4y0U9H4YgsVEivtA9mLctLtpMs163FP/hW4MMMYWQf\nyIk4t38Pb6+E/4WJQRIPSF/OI6nDo1RUI5tsAwcT62nlJiismYntaVsyEkkx\nmzj78q7WoHvk5Yi3WIRs+XOENFwwgLg9hm/nVrx1Hr4xQ7znO7zRKwqhTQSh\nHIHxRTrp8RgfdtAMUG/md39LJl9MU3d/UKRhfJ4zHiTORO6VTXMAzjXtLmbf\nmlFAUMrCCG6ZMLiTqoMJk0N4kGfK+XclDrDUD7A9RDDYI4NRKMA1vUzaUNdA\n0V4tqGdowrFEWP3hZLAvCWzgiKXxxQcjk4Vjnvjaff2SLq7DaIZ8glB0Ysnt\nxwj7/quY/13e2J6uYFoXJGowT1O+DqX4KqJUVSKAWQCxbTk+oLQ2OR8r8tZS\nJDfoiGgC6HiebfTDfjrLhsXZFu+AxLT3/o/iFLuuxFI8P2UimWHjljRB6Hup\nXdHph4Nx2+NaazzGBDADv7hrF5dteI7xpQWqzJpVu7dju+TLV0SOU59BedxM\nqEFozTQ4/44qIlX9AIaeMYfjkfja1zBA6Mhib2fw2nfnemo40aqhlvFQsFtK\nylKz\r\n=J+0Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"137d6fb8ed93c50312981c75fb37199ad460dcf2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.7a9afaf4b.0","@material/base":"8.0.0-canary.7a9afaf4b.0","@material/theme":"8.0.0-canary.7a9afaf4b.0","@material/ripple":"8.0.0-canary.7a9afaf4b.0","@material/typography":"8.0.0-canary.7a9afaf4b.0","@material/feature-targeting":"8.0.0-canary.7a9afaf4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.7a9afaf4b.0_1602284056086_0.9096306150996845","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/form-field","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.8a39352c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f5b98d23ef3aab9189322ce2d5af9637fa48d37","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.8a39352c8.0.tgz","fileCount":34,"integrity":"sha512-wP/N5cVJh5ItW/qYU/Avi4/yngKhJIVMW6c4JsN/R4JSjvgPWEHwlzojly674CAGjYNHPF7h5E4tCVfnOCQ7xA==","signatures":[{"sig":"MEUCIQDojqMAVYIvA8gLXGM7JPEHzh7tp9KmZhQ+RI1UN0IubwIgEufAUj7TW//AgMWaBpfdzGVZwaCXjrlQ7xlrgzEZMd0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJaCCRA9TVsSAnZWagAAWEEP/0+mbIzBSsrvnOsBkWKu\ndnuxoknQDbgosHTxQsNd3ozXzFDR+u9EzVWvRNkfu3kK0UkaURA7d+TyGsc1\nq43a+bT3SpajC/UF77/DZeKtJVlJXRD63/rzSYNRauV/VVFV6fJjzVjVu2B7\nkZ/tx0GKEvyoM2/gxREmnOcB19TSbPWMJrsGa4PR/BHjFyc+GGW7tlXmmNI1\nXSa42HX/wgAq/PwyFtAAVo+1SNy6UcOrI+Qagx+R7QfrRwzXXK4xnJPALUFZ\nLYDf1N0ZlQ91OArW4gUNkOBSGvsYuYJ/89uXWYwZoRtGeChXCKYbNTctdKEX\n7gh5VZCKim+SsXQB4Acn8b4hD9e1MdoNZ6djuk0mgL8YpRdGxYKTyEUoQtdh\nxxaKH0HqpDK+J+knO8mSCKShPdBpawbm/cfU5VyVMFhczXS8h+03oCapgIAv\nHPRJYprnxB+ByF+Ewt5lcYF/c7Vz5ulx3GhVhmegSFDT8OJBtn/bBlLOQVgh\nBfjd813jVDa+ksREwHfi5boGGELwetDKtsiGdwPWYFxMV0NsTTehpknoYzpc\nZ1sApGCwr+j/Ld5WCLV+l3g902t1jlJZxh4IM9HEzztYFqVkosA5uls0AEd3\nmpJxZ2wlJ4umVTQytAdupvfk4AdkkIIJOmii27uR5bOVWmGhxCtQZtY69YuK\nrCmw\r\n=DwtE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cedb8cd906516b8d460c813039351e951b960c50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.8a39352c8.0","@material/base":"8.0.0-canary.8a39352c8.0","@material/theme":"8.0.0-canary.8a39352c8.0","@material/ripple":"8.0.0-canary.8a39352c8.0","@material/typography":"8.0.0-canary.8a39352c8.0","@material/feature-targeting":"8.0.0-canary.8a39352c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.8a39352c8.0_1602524801756_0.8968420304917488","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/form-field","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.790ca85fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"923853eae85118df3c01e573bde9cad37748d78b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.790ca85fd.0.tgz","fileCount":34,"integrity":"sha512-+PfajZtCXywdOVGvO3R7SAziNYxxONa5c9MVEnjgMyjlxWOZUzyld8NU164v63wZUK6c3LNRSv864y3TTiaEng==","signatures":[{"sig":"MEUCIFbUkhlb/WWg74xVbhVAzGoVZ0SC+vqzUomDVKECkZv2AiEAwkwY7Q2IjUMq/F14TM85Y+btZ+PhlnXmqu3Oo0fNeXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNExCRA9TVsSAnZWagAAj+UP/07fyWCFC0JyBAUZf1Xz\nEDjUo53rzqBZKFaac+8MiRU+I1i9mC3xBpXC1iAR9e8mwf3pr6jyj8cryVyf\nu+qGA0AIv2FuyeMi/j/eiPRMI1u7IWZJvUX7umycRhjhQyJ3BotcdyKenJCS\nLq6EUPxC0jrcLSb4rp8XUvjrJDqlewDuiuSCBEpTUuBawzeJzXus4zZBV0VN\npi8AisJrfw3pdkgIpnTmRsRHiWjwIEyJ6IWyCbtS2+0FNxxL4c2u2+IklAZw\nh6qXqBEQIERp6bK0cJesDmoBov91QGGtEgJnnBGnt5XCKOxpPYiSPI1vQeWt\nkXAeakNWHw+HOaDFy4pIroM5arcczTQjsLrXqDfonUw/146ZWjWKc3pgoPco\na49JfUD6ckil3Bgl+ZoRERc3GlRdGqU8TkiDPNROop5mVn0gy+U9ZfMgN5WW\nGl1Fxy3azRwSQ8QWYJwPT35PdpyF24AYb1j/SsQj9xSTn8c7+n4kkTis7Qb1\nVV7M778AKmAXmBtmOGnKSbAmb2oy/PqSiX/nRkKadw7wpK9QsrJDtbUeLrtk\n6Lhr6zuJG5t8b8O3a86kIfVJuwytpJ718qqVJg8YrkwF0lZSVK52HoN2bVq6\nm+HX+vFDu3dP5QLODmQvI2md1HVmrYKwICTyaDoOth7cq792Kyhsb5bN5frd\n89rx\r\n=Nyqv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8971e891898c4a8ca082beda756a7b93097f858e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.790ca85fd.0","@material/base":"8.0.0-canary.790ca85fd.0","@material/theme":"8.0.0-canary.790ca85fd.0","@material/ripple":"8.0.0-canary.790ca85fd.0","@material/typography":"8.0.0-canary.790ca85fd.0","@material/feature-targeting":"8.0.0-canary.790ca85fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.790ca85fd.0_1602539824948_0.7612366632710119","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/form-field","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.174c0becf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a641d47231172cced6ac6a639684c8a499ba6cf4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.174c0becf.0.tgz","fileCount":34,"integrity":"sha512-AX11y6+qNvVUnX0uO57/yxcX/BTf5dN8t6ZiMGROC3Hm41HRJOWffYfWB5dQDtN1n8Yz0wmS60rX1BB19Y00BA==","signatures":[{"sig":"MEQCIBlhW5NXUlLc97du9eNaSitA53ca4yTcOHoLGr9gtx7FAiByw5wSjFsZRIdyDk2zKnzmsbc70ickvtDzstlKn65x4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl9iCRA9TVsSAnZWagAADVwP/1DrcGxnH03Qeh/i0ew3\nxI1bKhymPFUPQNzAei6EmzT1khcU2WWjoiSn14t+R9YMEPCnww7uIDNVaqqH\nHmthjGwcJkoxqn4kO3FCLrtwg0rbBK+iiQet3kkU0mvGPlsGfG0H8nwFFEiA\nulMv7yA1nUXAa8zUMViVs/Ge5VVd2TG8FHer9Fqn0H08JLUbR3fbRdFeNmYM\nvdShZ92ANp3CA906/ODIT1vpuUVthQUQIO2X6GQk6ZVg7gJF0qO26CU+Fo3F\n9TBRxk5zfjDFGAvjMd/X9zWrPrlBjiLn1S8yjujHDde/jGi3b678Et+1L5Wy\nQIcQfUw3Mu+4DqKVDtLw5MBJig0pxcP7/kjikd4T8jfazJmuL0uVWqJrvA/+\ne+qMI/hxwmmTZKrn8ISG6S6CqXmDvdqqvyHDcmvMUD5SiR9Cx7CGrvTRrYTu\nxNloimG/gQ5Qd6K97QOBZCqdZxco0CgRNjzEtq8DODh94iN/qRBSIqymLyHb\nfFGEnM1a2cDu3ww/T6t0LCZTMto5CRlIJAWkQAHDjB0WQQPRFfrPMdejb1c5\njqb1JZuBWjtmUyzyikZaDSS6s79Lw0Jzs2jOY8HEas3NI7lEF0oms+GLbQZG\nb3nN9WHUp1eKNDTYdXO01LGX/lvHLxXCfbEmOr+QxVf++u4D46Wwn3v3q38Y\nSHct\r\n=UXJz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6dc7561b8695889178b3e884e84f5d9c3d59e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.174c0becf.0","@material/base":"8.0.0-canary.174c0becf.0","@material/theme":"8.0.0-canary.174c0becf.0","@material/ripple":"8.0.0-canary.174c0becf.0","@material/typography":"8.0.0-canary.174c0becf.0","@material/feature-targeting":"8.0.0-canary.174c0becf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.174c0becf.0_1602641761768_0.8069712388006656","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/form-field","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.c71ebfa02.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20bdaa088842d1692c315019f736ea6d6012bf8d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.c71ebfa02.0.tgz","fileCount":34,"integrity":"sha512-cgfLY9UwWGT36JMhUmXDsB3nswDZfSCvpEZFGgFARSN8QfiY03WTPgOhUskoFedctJYrfTf/AhZcOWzufRLYRQ==","signatures":[{"sig":"MEUCIQDIPEUu7diNFIsfuPGP2u9hdVyyFhia8VP12uX2JRHzowIgKKjlpJd1qey53w5WPedwTI+4dQCI5pSWcbhm0PSAhkE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnvzCRA9TVsSAnZWagAAX8cP/2Ad1jyrHNR+Vc5y/JEr\nF0boaXueNRdCfBO1X7ZiaKejlhQoFG8kSbKcsYspWySdJigPJqjzBFbc9g8F\nwp8qpDxPs/dRpsDgB/lbfwPrwmFOKGovOvyBHIf1UArabTkJqx2m7L88n9AS\nEyiiS9VwNGHit9zPfTP4lZ6Pagpd+HGHOt+ofNj3lgJ7j2bQjHyT91byAmpY\nR1nv+a1oN+v87QT6ad8fwD/NZJBakD1a7/tx22aIQTUuF2JHy69yQq8s03mj\nj+kDfrh7TeWKTaB9LynjM16E/VEiYxXJJL7ElBvlxuOHgiTyr/c9WSIXWdZB\nlaGoHrKnEffWudbZod6tesTcCnGZrqbklxfddszXKShxMatjG1phMyzpfi75\nkL+uZ9gq4ni+FD1HcCNYDCJnfyB0T9I8vDUNWA+I8Uoba2Drk2qmDNseQKpE\njGA2z3K9615L5+448MClWbKlMDaWjU0seb5JniGWx4IAzFYFnIfqjxesgozQ\ncyY6rj2sGUvVeUNHbLw6RCFsspL0owhGeCJy11dcKIbBPZTWs/C4nBwTcvxx\n596ix92/6b1onoIIvYcSiP6kuCd4dIGflOyBjP/fuJZnQIJ2pE3l80mYY/d2\nwi2RXKQ/wXZPrU441fVMbMYLbEfHbeqGDbouT2FPE8c5Yzsn452E4UAvrTaw\npbZL\r\n=jyz0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d1158a184d234471c81501e838b409c54f591268","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c71ebfa02.0","@material/base":"8.0.0-canary.c71ebfa02.0","@material/theme":"8.0.0-canary.c71ebfa02.0","@material/ripple":"8.0.0-canary.c71ebfa02.0","@material/typography":"8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"8.0.0-canary.c71ebfa02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.c71ebfa02.0_1602649074669_0.48424748949994156","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/form-field","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.2ab716cbd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26a27d803928bba84b6012890faf4797235c80d3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.2ab716cbd.0.tgz","fileCount":34,"integrity":"sha512-T2vaYYme7CVC1kKYmEurgb4Ek9oFiVBY87GypHJJNt0HzZ8QhmeEOe+4l5mqQFwbnzqkzf7xrxgCNMRBLEgJ8Q==","signatures":[{"sig":"MEUCIC8v7BRJhV99HMmSO4jIUZCqYvByw6uodjcNGfnFDzVaAiEAsD4wJeFuV7KA+X2MsNn6OdAqcZuSYGwaxjfV4Utk91o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOXCRA9TVsSAnZWagAAwDsP/0CSttcmDQ7EEuyP9rhG\nFifWkgAAN8/gfNcPbUTb6JhDlDJCYbAO6dukU2xHsmMY48dEDQQ+RNuNamT7\nqDglmnuUCS5QzFG1SC4uE3M7ZpWYQGpWt3yH5cXYWjYdswDjVx+0CThDWofz\nPZo4dGZIux0h1dpYQ4VLSnJF83TJeb9RjgxmFwCcI3/AXHcheVQKo5Q6v5fE\nI9OssFNKKslaFzb+ZT5PSvQkw1CAZYs3FXnph4YGjD9YYNdF3FdEmPdGn/qR\nuUrZiltMYTLPU9O3Q9kJkSR0D2IH/RVIJrwuQOjBSz4Sd/gIqn0zRlW8EawY\nA2oaCc9Z26Htw4tVqBmD16pmTkgwRHynFQmMFzl/Q2QioMqjGqaE+/muqNXu\nf/O813yR75YAlWpfPuCRqJnradqwGP+RwV8T6NjbsIfppn8hiL23LtHzCckJ\naPxJCunYIDyR8DppMeuOp/agsJ5LjvfWvOADRaRUzHvs3hrHi8LjerBTlWW0\nZoJMtKratVm3Z8zwZYzSZOfoTEzJ/A+omGurd2kTFz2gLrMG7ld9NQDPY+Gn\nq62veaGl7EgF7npYc0fYSzjx9eeMDDDVtNUn2Jn7ZbACqmx2psNBJGC88kve\n+1XrQ0HrMbvl8jhr9umVgwZf5AaAqKGa6oY2Z4FFdG8whw7+d3h9Phn1a4so\n2E6y\r\n=pW94\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a3f41127e9d90f7e393ee6fa5e01829e52160131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.2ab716cbd.0","@material/base":"8.0.0-canary.2ab716cbd.0","@material/theme":"8.0.0-canary.2ab716cbd.0","@material/ripple":"8.0.0-canary.2ab716cbd.0","@material/typography":"8.0.0-canary.2ab716cbd.0","@material/feature-targeting":"8.0.0-canary.2ab716cbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.2ab716cbd.0_1602806678640_0.45212430848848095","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/form-field","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.43c1c5e2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38a4482dcfa4d292c0715ef600abd15b866361f1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":34,"integrity":"sha512-fSlhNr41UoJwN0sm6BT5oE+lpHV+3/Ok4XfCaL66ZwPsHf68vpW+jKuP2YXkWI+euU0grd4cEzPrQo9yMfQeTA==","signatures":[{"sig":"MEUCIAJ9kb9uMI/uA6LyNSiv2gnwPImIB5lA1CDQ8QG/je3MAiEA0IoXyCb3Kqc/92j82nP2fwagebW7DBS1CMJdOcW+La8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ3WCRA9TVsSAnZWagAAKmoP/3mCx9RZNO7tiL+ouy24\nbprTgsGTrEDV1FkXiUVx4hO/NtgpzcCCyDeByFP/zegJTxbUl0CPpFTZNyWw\nATGCEwTvzti/H10pOdC/Rx89BALLwUONqSnGm+SP/CtKexanB2VfgTl2mP+Z\nl1UUMnK6kmfj3mz1Y/5I6bzmSKCvZg8aZYZ4lcUyXajAHuqqVV1KpjgE/GA/\nAmo4WmIWlXA1X/vsqFymaMtUrP82J11EaZ6906axxUXECx6YLSHxtliq9/H4\nEBx1OTa6izgOuqdIMpK8RYTFKK0+ZV/8vh8qHvRGe5MiuOs72wvnsay3B+G9\nzuNFU+eMEByRP1bsrEbqEw0wkzHj1GiWfwt2HXKVhjVZhG4oq9GyWXo8k9w6\nIg8ugPJv0XhpE0jbnB2cLELSWtjtpJG9ydKiDgXNzge1uYKFAo4lSi1KfeKF\nFgrx/Dh4hygFn1W0/iHzVTErOvZ7SDl5wn17s/1XvNYT5XypmT7CPZHUSiOl\nqEnhbsIf2K5+lGfV1OPyT4QspV5ChjAraowt4jt8jJ2jyIQFODswqs3SNzji\nLgK7dNDbKMOV/c7CGxDSJsvo04P9lQxd/oAzLc2O3ul9rIQiNvBfymZ+CLi6\nf7pjOOXFvRk1JT9VOjE2jF34Ugdumh9/e5g+P9sfviN52kyF5GKMRfCTPOTt\nX9n/\r\n=mwHF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bae89543d5336b4583fd1519cb63078d2a5c39f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.43c1c5e2f.0","@material/base":"8.0.0-canary.43c1c5e2f.0","@material/theme":"8.0.0-canary.43c1c5e2f.0","@material/ripple":"8.0.0-canary.43c1c5e2f.0","@material/typography":"8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"8.0.0-canary.43c1c5e2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.43c1c5e2f.0_1603116502384_0.8116013899141459","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/form-field","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.ccc64eea3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c24af261ba4eadce7d5ec5c7f4d4cb2bef4c89ca","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.ccc64eea3.0.tgz","fileCount":34,"integrity":"sha512-buBZ5POfOaK58Nv1Id/RbgmuON0RcezVdgJC7o2AJ384Bh+GdVX49irTfhNhh413reFmmK/GpwMkwLV4Lp3VGw==","signatures":[{"sig":"MEUCIQCdxmc9hmnpfUeEd6figMlsh8PW6L+GpshnE5FGhroxdQIgY78sC3fCklgqhCN7IHPQfldSGpwOZ8iXZNWpbmSjNZw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1MJCRA9TVsSAnZWagAA8S0P/2zDlp2IoSfLV7vGp44V\nkWLT4EilpyMpVAcPti5UeDw58PlGE7wFq1bj/sP6zW+e8W2NSutayUXPbsRI\nVJgFRyLPt8JLsBkevjl9dqc6fAMCKqNBrtMV4hdpljH34FzmLMdFNET/GVGf\n97ALVvOPMvSQo87T874q58ghUKutbc/huBAvDQWAH8KrpkgO+6YqWLMbq9Gx\nNL7OcTeqsIzFPECE/czGgd6yaPN89SOzcAxyVozxc/ALF6xH2QrDi0y25yk5\n9+7/0ud8fEVQWcYtfuWhNE3q59AeXEnPtJH0sd0JDdQSmQjzg7oFeVj72GcB\nR9BVBsdFyaTvDms0cnD7C+zrWeY9r31c2rWZX03nory/SGTjt4Jx++6NNYOv\nohqSDDBHSucSTXE9vYsIGgqdsXx27OSO8iN3C+sR+8fhG5saEe6vVpVQSWj/\nh2mvYcKrtii7j4bcEr/7T8mVvTlZQv2pD2x4p1Vmk7JcevMmINRvcCBkokyz\n6Of/4LkVKYwHOK4Jf/Ud8YppyynsHyYfBjU5YLpfeOOnotOBPBs8Co8amlaK\nhbQjIGzjHeNbYrdvIhHDSGt4OntapauRvPmzwewi4E5ltFm74T5LYgL+Vx51\nEfRWeGpQ8mRcaLpwx3Fx0D3WnFslgkaojUgCDen3FIwBgdttu4qsO2MxAyBs\n5Gk6\r\n=EKTB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"26df299f75c86dada6da463cae5df1b0277d5c7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.ccc64eea3.0","@material/base":"8.0.0-canary.ccc64eea3.0","@material/theme":"8.0.0-canary.ccc64eea3.0","@material/ripple":"8.0.0-canary.ccc64eea3.0","@material/typography":"8.0.0-canary.ccc64eea3.0","@material/feature-targeting":"8.0.0-canary.ccc64eea3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.ccc64eea3.0_1603752713521_0.4338733622218338","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/form-field","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.a79cdd019.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ddaff1138681f0b585262ed3e0dd6ef1471574f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.a79cdd019.0.tgz","fileCount":34,"integrity":"sha512-ppzAUs2ZPnv0X4s/g7AmZOAv1ZVE9OtgqTfOztTucDKPu50T/CDAAPE38xIqP93cNHWkhGajqjzQzlmLKvIVng==","signatures":[{"sig":"MEUCIQDDHJG3Mr806QCHtkq83AE4AkqChDWL7JJe81+QQaE7TgIgVWwuAqcd4E0dNF1Ljf7P0uw28xz+RA8qm1qt3jHf7B8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEtnCRA9TVsSAnZWagAAeeMQAKQcCM8ae7H0T9ClNsSJ\nmh0xUubclYeIl30RwdnUrQ3dEx382JLSbvVbKDJYu81k0iQTayxXZ3g9Lcha\nnav8Dy9kAXGhBns/WDIUlmjeR9NUAGXWZu5LJCB2KUQApgVYfJJ4CrjXKt+S\nFyXOzXeKIXQ+us+Zb50ZAbvstY421keg8xENqJILcfhK59UDGD/Jgftce0K3\nh8LjrRM9+20GfTCrzWvDTN5wjUgZQvFWbNhZM8Zu92Ry//qz7eic/1Rr3dEz\nPFaVyYxJ3o7tZNSPg4vrioteh9dD8cFlqFOapq8l6RwUUuAaNpma9nQuvF8h\n40cs+TCVqAqzknbNMOYw/kGendMLMItJ6wla53ZWVLxV9zy4cAeq6eX966T/\nlsRsqs+icQySpBbhWqjkGX9h3/kF9khctUw8AZjAVDRk6fSA6r5K6jdUcoIj\n4FJU7rU4UvXBci/o/4UYAP5p55911/NQk8ITQLWm4pu4yTYjel2fWX45vW30\nI/cnm/l1afSlHWPqXw5hEOCpwqgit7dbv8AYO1wEsCE0nb4JOHe4wysOl63m\nUNe9l+9ZIQUShkmyr2GfrksP67rJK9Bdo2dysiZ8wp95pMrjjzrHoX9bHVNp\n7dh+cqGX+z5KQc4WaOscIcUH9CBEn5P3H9nPKUoDz62mar9WDGgw/u+qfclk\nY3Rk\r\n=alu/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c54ccf71e4018e84948fec32678595d974f80c67","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.a79cdd019.0","@material/base":"8.0.0-canary.a79cdd019.0","@material/theme":"8.0.0-canary.a79cdd019.0","@material/ripple":"8.0.0-canary.a79cdd019.0","@material/typography":"8.0.0-canary.a79cdd019.0","@material/feature-targeting":"8.0.0-canary.a79cdd019.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.a79cdd019.0_1603816294841_0.6504065320710142","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/form-field","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.596e98424.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbd232d1d7d08aad6abd3921a4f692d4f85cd549","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.596e98424.0.tgz","fileCount":34,"integrity":"sha512-xBlfCN7DlzzMes+dIialldBb54f76w4D9Vz7m3kIgvVv2MQ9XCyltcSpsK7lOWlWRI3EnV2MP12IDACgc4ZkdQ==","signatures":[{"sig":"MEQCIAudxGn2Ju5ZbpwRL98vfW+z/ljsPAvDRmtQ3poCgStrAiBsN0phflYHeFAR4OJic4ka5ArrGWnADH0ySnZ+CDT62A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZZpCRA9TVsSAnZWagAAoc8P/Rxo/6C8GSfQUN5X5XT0\n2r5HnBBOd9Io6MGNrl4sapXSPhmkFKcUddtPeTugDsJJcIJhH7CrKfqtao8F\nUDuYertcIIqQCz7Fva05TGtAyK9OkQOFAlB+4QeRWvki2EtkgSJzqYNmGfNH\nWtvlrryUQTB7YkA3amgcCsZDm1li14EIBVtMkx1FQWsLG1nRM7x4LTUOXx7D\nkM+Y3AD8W/ARE3jL0zm1kbarp0Oc1dGfuCNfrHXVZE+5ktPn2kVH1Ke0lbfB\n6zS/dOaprA2Sooof4jMx82GHOfl8dpwhZD5Yo0xTfSIKFp40Z9ZMWryn2KAR\nKkc0NQU6jgc/qqNHrPzzisQZrCgdO+ZX51wxTXzoyqa5aRpADJ5fYiElCbqi\nM5i/GhdL3mrY9ZxVN7FcbFA/9eqwpKtncmj37LItDzAyDMjgTltOpBbtvQnI\nUwOsrDMKCYiGFysySF1dnXqkO3ZnciyzYVAipsDPIkwoFkxVl93coirAoCdg\nXt1PUXFfOMH+OPsYfd5jJV2A6137sto21BiXh/AdDKMLxn7v48TKyePvkwip\nKccJwmL3KWeSnPLuyeSt8NubXIUetcmbJKJwFN1elhgcVTtw42uv/6WVQxmp\nbUmTs3aKw2mdXVwPzWrqQlMuew3avfu9KdPoCE7a8xD00+lBblTrERLjVI5c\n2tiv\r\n=UE5U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8fdc1f444b4540a876847c7c3fb4a934e75fee2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.596e98424.0","@material/base":"8.0.0-canary.596e98424.0","@material/theme":"8.0.0-canary.596e98424.0","@material/ripple":"8.0.0-canary.596e98424.0","@material/typography":"8.0.0-canary.596e98424.0","@material/feature-targeting":"8.0.0-canary.596e98424.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.596e98424.0_1603901033173_0.5563759789581397","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/form-field","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.05d5facc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"287008ed9dd25bc2275ab16285a5c8730a4ad840","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.05d5facc2.0.tgz","fileCount":34,"integrity":"sha512-X1tnnswrp/xspJ9lZKQh8WCTG16F+7Ib1e4UwQYME0l2Y375jxGayRw7IwO1LDuYOkHPPKpJbkHfnoo3q48Zwg==","signatures":[{"sig":"MEUCIEceii6oE4H4wizE9JsiWX61edRS66KEIlK/nkhtg3m0AiEA2uq4G5knxYObTBH5Q0r6OkibeezgQ71Ky+fiL0A13v8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZhpCRA9TVsSAnZWagAAKjgP/3VdHv6/nYge26+Bz6yF\nM0nJEP4bjgKBfp36b+L7RVpNCQJQ2OBOy33Hw23OeoDkYIA48VLU0KRrshod\ncTbDETCOFijMEUU1ptkfcYCHKIxZZJgTc8oJzO5ndBSfWZaJcCTxuceWWplP\n6llXU0HuSCs+HQl9J8UioPd0h114+zvShiAVp5Rgihq3t0km1hmwXlm0TmIc\n/eBM6Z1hYdOM1n9pZewkMOxR0ekfXDR/ayVNyLfSfQ2afuQfggGqSeOX7qXq\nLz2v9hb6Q5ofmYwd8oP8P9XWepXh7tHvo9K1pbabxqEoFnO7c2PtVWO6RSyy\nGWCz10qv9SJpXo4f4AXz1lTUvLlQf+N6K3bWvTtwr7oA+QWGPppJTUBUF8GE\niKpSh+RDmjZqQ859V7RKY1sFqpgxElohhF0aNrbYqChkGda21triLZ1469gN\n022H+rJzN7AdpIHRRF+8Nzkj7zXwyl63nQRECVZcqtouQQ1LBGuWCxeOTlTF\n9CJlFwq6t9ZjqkBNBGpVAQzvxCK6NeaTpyjivXQTNXVRkCKRyEtAeOSy0Lge\nQkeukVUOyeYOCcwEwBRtRWbP5O81rFGr8uVmXjUf0bcguMRDM8MZxXKamVgV\nhD210SeFZxxxSELqzW1sq80RxWWhh25XY8h+FosD9oaR+Srw7LsPLT+EEnrM\n4Vah\r\n=p+Vx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"db17092b19dabd6628edec5bf226f0b6a48e4f95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.05d5facc2.0","@material/base":"8.0.0-canary.05d5facc2.0","@material/theme":"8.0.0-canary.05d5facc2.0","@material/ripple":"8.0.0-canary.05d5facc2.0","@material/typography":"8.0.0-canary.05d5facc2.0","@material/feature-targeting":"8.0.0-canary.05d5facc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.05d5facc2.0_1603901545219_0.052316145038161066","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/form-field","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.291b3553d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50f7eef89df049f8ae5d9e3575aec0e36aa68cdf","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.291b3553d.0.tgz","fileCount":34,"integrity":"sha512-nLAt7wT3e7PSKuBpbdXRZXRX5mbtAO6GUkFGcU/Obf7UerCRjcbre0oxKgaQc4fzUEyX5H5lvsHQbOyEhDC78g==","signatures":[{"sig":"MEUCIQC+M29mqdwqmgkPmDQl/dDJByaeMuMMPyXpY4VDXrmFdgIgQ1q1SSzBg1fjmCstJzNxgQiPNrH095CC00wvdvrMcfw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma4yCRA9TVsSAnZWagAAm9sQAKHgYCCROxoGEZi1+0qj\n75J59X6MNo8wv9esn8JMM2ttC1qcDneYENaCBCOkifGBnLXfeqTlgQ+wOnZk\n11fn2KX04tyb9/JtwPiLyY4/wFmQor8K21yEciOSg1PlErg+nUcjCYvtawQ4\nV+DM3aJvQsw/UuCZiNVAkIXL5gqict+R4++0cL2gVoMKBDH20i8ekIqH/6tr\nLD78yOEkuP8zApBuJx8OqqmuXyJM7/6BWKnwCdrhg2czscsiZIxtSmvYIHa7\nXZ15oq/g8lYJ69jH7ycIzryewkdSB1vKzLnQn3nOrTQ+ohlMtpQO42aK88Bo\nWBxH5qS08UEsUyPEFpRKVHVvA2JlcQfcO7/onQbvM4Jjd7RxEJ7YBVscPGSn\nVwEIiXpo4BEk5F/LVHor1j6esntPp+fhzgeWr1hXxBoW6uJFmStcE/v90nyG\nYAmLFkKvHxUbVYpLosCbVZ4mi1V4xWQTiu/ZFglHm2erV2Jn59YylAMSUK9s\n8AAIFW3Q96oCfk6UiVt+KnfyOjWfR8cv8FGLCnZDxB3CeuLQ7LoRTF3ctsQa\ntkvVBZH2IoC2AwleK7bqApAwRRZ1hL5zfWlXbPRHpz9Yz67ypmm2EqY31QNy\no5RBdbjyDI+FSYdzb3wDVQFLnNcn/ODBWBSYFQW2W1WMJRNth9D708iyhZ9W\nJFKZ\r\n=X6MQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bbd141e6c5168a84cdf50ef1302c9f705f0eb283","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.291b3553d.0","@material/base":"8.0.0-canary.291b3553d.0","@material/theme":"8.0.0-canary.291b3553d.0","@material/ripple":"8.0.0-canary.291b3553d.0","@material/typography":"8.0.0-canary.291b3553d.0","@material/feature-targeting":"8.0.0-canary.291b3553d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.291b3553d.0_1603907121546_0.8103549878442657","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/form-field","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.dbc449b09.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef33f33da94afab79d363cc3e03f12658d6d823f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.dbc449b09.0.tgz","fileCount":34,"integrity":"sha512-AhkpL07eVl8OcHaFrLRBPlk59Cm8KVdrVNWF9t3MoNtpVeho+TEMrPF8/3VQbZTBRDl731X2Awcxbv59aIlS9A==","signatures":[{"sig":"MEQCIA9lPa+8G/YBx8mkn+HVqHRlB0G1atxMRGG6iSNMZSo5AiAkpDlvyol1CLllh1BKPMLQLpLdnpWcvWS/OWIeUC+z2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbSvCRA9TVsSAnZWagAAvbQP/0KveL9QQvlVZu3aDmMu\nKqPx8/EoQBm2479GxcGAOEdhVKjUC0ukM3Q74+Z/0+PrasjMQdm52H7V+Pmw\nqnhVKoXvAfwgIEtgBKYpUxdwUREotcuxclVbSLdouTOqMqKV4fCAT5Z5SyPt\n9PY36fC7rzL5RxZJm6RySGnIC/w81g+q7RAj3/uuwlDNbSyfW6mQ5EUBISsH\nCaAZW91OFLD95cblu4U4/QPgShEq6yT81bDEDsUtX1Aa1zfkRTiLGH5kC/Kb\nPhVdnCvL0PtNLNiprr4NPoaM2OECUrsa/eEcNxtkmc+HhpaRCJRIConnSsaD\n/xvCwbzoBMpmV8vQrU5Xqm0Dsh25kEUKGTM0SSvOGixVWxpfZuCwaAoLI7Yh\nRclv3CJVumNYZcS7tV+cVdJ/pCWOy0GLKUpFA3IGWvNWyDCVS20fcEsCm7e3\n862nDewznWvz/mpemvf0dFi/x+OcSF6xG61yec3BBPabrNuSbSWTDt0MfEn8\nNu8sNulF10ZXoDvS6cKqIlz8X8Uyk8fhx80DeZFzvwHWD0wcuhPZRPfOOllj\ncHUXAP65Zj+zOb/23ebCjS77eW90IQQXyegju7S6QC47BQ053MxGD/xxh/a/\nMbmqDxc7ughrL0C6HGl2FC26HuWZCXT4tRqRUEb5qrrORI5lE/icdOG8YRY+\nQpsR\r\n=6a/Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7888f3b13baccffea8b2b02ef5c25e264ae321e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.dbc449b09.0","@material/base":"8.0.0-canary.dbc449b09.0","@material/theme":"8.0.0-canary.dbc449b09.0","@material/ripple":"8.0.0-canary.dbc449b09.0","@material/typography":"8.0.0-canary.dbc449b09.0","@material/feature-targeting":"8.0.0-canary.dbc449b09.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.dbc449b09.0_1603908782702_0.5215572247994418","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/form-field","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.4794b25da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69598611dd0ba6484469f2a3059eb18798b313ec","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.4794b25da.0.tgz","fileCount":34,"integrity":"sha512-dFCPZrk0Ch9g+9tzodFZIboIfVXI/Wm2kJlr6cw1jYx8y7Z6/YcKyi+G+Z9a7RDDgg4rDtTnQO7DVy1tFXv3ZA==","signatures":[{"sig":"MEYCIQC8qqP6Z5t7rOSfXA0XGUQoN4cfRV7GfPt6h38KXdsQQgIhAMUQ4aw983oHxaiWGvd154JKJSWUeIWcfoS1VHL+PjxS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbtcCRA9TVsSAnZWagAA5F4P/jnUMS/Q066QNzhYMiop\n5iaOm5hWy8mcMTkX/fHxHFddnPBiD60y65OM/4MfHq/IG9YyGeEnpPK0TrMp\nQ0s57+EnaG11zJ5r7ZEa72MtHrgdgAEsDQB+5H/j+XcT/YTk3VItDomvqWEc\n7ejeJFY3y64Hb4ZzUMbWkVfCnlDWsr5LW6NaP6xTa8RVecVUHXtd434UmBxN\nN0paCIa7I99afR7Ck1XYBWOqx1+E+JimnARuJlBLVgkhcCoZUjN3z8A39pr9\ncq9CfzYQrShRSEQtSe/MaFzNxX30S9GXIMCEzjMvNWjLurwuXANEgydx1/uQ\nGsQPaPwfGq0vFv9A3+Cg9OmgB7t0z9QFK1qCz8Vn/M0qSm1538hfNNp4D43o\nT58S6dDxkwmQ9mmLxpws93BWEDQ89i/hBIOJ6GLAObcw/COQmKw0kk/4mB/O\nVQMSshW0gavqeZh87DT7uFcUi2F7taum1Z4DV5TvMJyG04COHiHz1cll8U/U\n8S4V2z93PVZUfFNc+EKSngxD9BSAFpXRKLY6GpcdN2z0b4PHdnPNQuRAfebc\nIqtgtC1eJERwjHDM52inVgk3ayXcxz81k7Q8a0paKpoRWHagn9IHgMvUppLP\njGzIilc6VL1096quW32dc0gQ5n6Ty90v1xhC0ln0o3yxWePAE4Bu9OBr8mgM\nOOoS\r\n=+fRi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0c2eec6be7b76adae9376847043bcde093f59d3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.4794b25da.0","@material/base":"8.0.0-canary.4794b25da.0","@material/theme":"8.0.0-canary.4794b25da.0","@material/ripple":"8.0.0-canary.4794b25da.0","@material/typography":"8.0.0-canary.4794b25da.0","@material/feature-targeting":"8.0.0-canary.4794b25da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.4794b25da.0_1603910492316_0.2899885942360374","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/form-field","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.c61db90a5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f65afdfd9d436b83fdaefa91a40b730fdb8099c2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.c61db90a5.0.tgz","fileCount":34,"integrity":"sha512-QHK5e66xAv+eO2MYMao5cVpsyeLEc147okMsPPU+iHoeAEHmV3hukWhoN2xhSyREP7kI18WtcrAmeQDVtx+I0A==","signatures":[{"sig":"MEQCIFVgcpvCPOqFO8+pvGFUkAW/I64VpKrAZg6oCDXHHJspAiAlg9Q5gKhI/PEYKDnzTtsYnXo+I9MQB1DrGE1wufiOJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmb+0CRA9TVsSAnZWagAAnHAQAI0OTZ+rg9h8LjCSvAU7\nJWKoLRcmhFpF6I/OCz5QDDMIMlvZjSSaX0V0pLioh10Ucw6+MXuM8Q1hCH10\n4r7kld++X3M8dyGHGJgE8G7dn3pfuOBYKoDPACnC2OyU4gv9QIYfWlncNd5Z\n4LG2TjKsKMqkdQwX2HhQTTxsRMOGleAVhYVX8jgmYoAaXc/vLHdoYteIPyU9\nDaPNhTcK0p1znXKYTaujo+LCmLc/7wCWhpx9ov7Fl60BDMLV8UZOvXtNpvDQ\n+RArMwTzDdqKkOe3HnCKF8pSpaDcmI1nGWEDCrb3GsSVYFDTAxiMwjmIGXjn\nrU3GQZrw50XfQKpWR919+nSvZivvCtN7CbAztM3qFewcjAJmMOh97vcMyHNe\nVnUXWFMi25witJwCOBqI3V2+BrZRolRPANwHdLOGOhq1mWCpEYk1iNaSJZVO\n3WDsDk4PkbribZOFlIov1QSqGCgWhjWTWDjMiSJRAYrxIq0+fU+RZKr1phDk\nJqpa8TTLz88+m3frp7DZC/jDE3ReeRu9sbXkKheal+JSiCZyTsWK5ehQ9Ads\nbd3IqSV12QHM3NbVaSpM+XvKI6/fa0OVtUXSClvvgso1vs84ZR1ApLAJ6T3i\nideZS8V5qDW5I/m6btv/2wM9WwJi2SBZDBPSdCv6L6q3qOp26rxdqXvxULyY\ngkIM\r\n=0YMn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"695570eb7478c283510b9174ac7c4911866e0868","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.c61db90a5.0","@material/base":"8.0.0-canary.c61db90a5.0","@material/theme":"8.0.0-canary.c61db90a5.0","@material/ripple":"8.0.0-canary.c61db90a5.0","@material/typography":"8.0.0-canary.c61db90a5.0","@material/feature-targeting":"8.0.0-canary.c61db90a5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.c61db90a5.0_1603911604215_0.9757832358450167","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/form-field","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.6d9648ab2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a57e9faa19d6cf7d87f81ddc241fd465afaa12e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.6d9648ab2.0.tgz","fileCount":34,"integrity":"sha512-nfeGjghTgOBzbBRWW1Rdr0og5ThPHXWAlN7kFGUm7W3u9eNwrqhE45MrEJNk5hnkDq/Cv0T+Sun/RUMkkMMR9w==","signatures":[{"sig":"MEYCIQD1hfJtpiKMko6gpflUhUfCYzlAl9C3q49JWW25fQLEfwIhAMsPg9dU2jNi+cTJ5HuRigVZNYhzmWiu+0tpLdj6KJx+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmybuCRA9TVsSAnZWagAAzqYP/ivTR+FXoOst5PwuE3eg\nR+Z25C87UUqjkbRZgAF0amuAXOzUgd6BGtAJTnaCnbpo/fN00yn/QwcPhJun\nLvL/I5Q8QKZgxHfF6nODUnVMW+quEXFO18zBEv8VET39PQpmqlZgHijPp0ic\nRosEI+4Xfbbf/rViJpZkQ4sOD5Z0hyPA2xTIMSl/hXPYDzDvgShF1pqWzxxu\nLKU3Q3cf6ljDIDhA9FNYT6womcP3kilDohfFqpkSOGnysJMruojXHAvL/GFr\nhCV3jaIFhO/8B0958FR7oAQdsPNl6u1cTOuEzQkpjPLowaNZX1EYVTz2BSok\n38VE2z0a2IigLUjR9/5ak/a1qIf2hM6TyNx7izcqISLZ/4/wunfoWTq3TF4d\njBmEo9T2E2K+HtvFNMWjJoEXUR2wP3qs2yAyoa71EDA7B7gDcmtGj+H1CbyS\nElp+Ix38CWjJFsQRvku/6b0iWrwabVJlju7liuBJWDZ66d0RKxsKZsdYLDy9\nJjU8G/KAIkoqjo5kTNqCjw6NyApK2b8DTLad5o+e1YWiee45Pt/COBvcTVax\n4vu47QjtPNGePpRCbnvyonn2sohSfrHzt5zpHxUFmjr0/30ZeB9cfSKulD8f\ncWm0KqU6RyTm8UzfQj6Mz7lna23CRp+Fj37izfdk+DDUdBplnAZtJQKDmZJn\nr2wy\r\n=2U43\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5de6a39d4b70a98beb71cf8243a219f454b11aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.6d9648ab2.0","@material/base":"8.0.0-canary.6d9648ab2.0","@material/theme":"8.0.0-canary.6d9648ab2.0","@material/ripple":"8.0.0-canary.6d9648ab2.0","@material/typography":"8.0.0-canary.6d9648ab2.0","@material/feature-targeting":"8.0.0-canary.6d9648ab2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.6d9648ab2.0_1604003565709_0.9728207255803456","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/form-field","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.5511c5254.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51bd8fe5e7282531c217a780f3b58ebfd9a7b85f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.5511c5254.0.tgz","fileCount":34,"integrity":"sha512-HB7yqk74bU93fwEQOz6FwayXLY94VTiHPX2ML5jRkZqQmzhl/VP7DXUAzel6awVqX5I7c+lJPxMcyeEUD+O2og==","signatures":[{"sig":"MEYCIQDO0PycN4qxO2E8ybcx9mwoVXBL7SMwr0MfC8MzVkt9fwIhAOdFowTTeRTCICyL13cseDDXEjfQEtBuDPhUB7sl7eGZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFTCCRA9TVsSAnZWagAAdYgP/jKgmMAJNkD7Hn6RYusf\nVa7dWcJ27MgqqICV5rWdMrlrSRXf/2kDYmyvLNQdJOXdgsY+jSHYbnVnQIXH\nLEnhqvioepmIbJRWVG8oCOMhUqIHWdjtTLbQ41YtSggHiddyIE+0f2UbyuSG\n/oPdmbq07bCmXPXOmRaWnPeMYWTH1amg2ez6LyCRYl4OgOWUOvjnuNjpK9MB\nECzIZcuNcVSkMt4natVlUooVwgl26CJayLOyLw5Zc/hJIcoJiLc+hN/ICEeh\nh/FWKAoTi2Fo7FNYNAk2KPeRzpVmyWanDbU5J9pggMBwxWa7U6O1tbuSVzWL\nzG+96w8d0fnaGUxLtf1164bSyBw/0NpwrNtHVihgkUkLn5Q0dcUO2Q3/OmYg\nVyIIIW70ZJzFVK0WyCgP8aC3hmDHyfHxv7U8MC6q6J6bWv10kNuhsTxZvvkd\nngMpN8QQwExZ05vVhHHgP2kscTqo5vN40D05aEnralMX2Iud5ZwMRmz6tHnZ\nBE+WEocvZ/h37ZGrS+Ui3yScV2YK+mUyewD5F3nIl49Bh5biVro9zS5KURn4\nx93kSzSYe0vVtpOjdUlnUeuJKN602sYUokAcpCyxAnjZ58I/hYvQh1jiZKug\n61NhJct7vTwntup6RHqPD9plwV+4wvZo07IGiaIcWCs5Qurq48RlEb+OeELK\nb+X7\r\n=ktcM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e847a627e044cecc475be1f0140e17a4e2a68dbc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.5511c5254.0","@material/base":"8.0.0-canary.5511c5254.0","@material/theme":"8.0.0-canary.5511c5254.0","@material/ripple":"8.0.0-canary.5511c5254.0","@material/typography":"8.0.0-canary.5511c5254.0","@material/feature-targeting":"8.0.0-canary.5511c5254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.5511c5254.0_1604080834006_0.6678717752792436","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/form-field","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0-canary.bd6e302a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c101159d57dd8ddad3d073d2e787b8a3a4ab8c74","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0-canary.bd6e302a4.0.tgz","fileCount":34,"integrity":"sha512-A1IRx6a49ApV4BqnB7L7/MflrsGzLCFlwbayLybRFux2USTBPRDinDvWqdbCwEiknZ4Ukloi9/37t34u0AwTFg==","signatures":[{"sig":"MEUCICtLtH1xUasD619iCppfjorJznpT40ILfxVeaLGSjIZBAiEA57hy9H0gubYfr9jsriyt48ZEOHgWcGhy47HpvBaesj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDxJCRA9TVsSAnZWagAAmt8P+QHRQX4Kb/NzrzW86Gka\nuZhW3mkee7AbKzqd7KIXL/evTgRl5YCoIucxyVfNCITkf8R1Ejp5M2nbg5pe\nVMWFfc49m4uLll+CuDN23NgqA0nAdOmWynSXuMdQiZ9xVAvsvfsZiegbQ4MY\nJ4WcniTEj5cO5XmKV4OWaJ8YuvqEdT+nrd9tjrf8UjxYJmyHAoHOxy8XkyEd\n7gxogRS0d4W0DRAs9qpFyXSDuGz+jgqJytCLWQONjoSrMRoTL2WtwVjXmKWk\n3AB9WdGXtDfLMM04DHNLGqfpiY8nrdiMb9DxAkRAvRYsGLDYICR+T4qviaz+\nkTl+K3sPxTyUE0JDSeE/7MGCzxO8XgWJkhBg1yqGWMR5kJwlw4WGyHSwrLx8\nkr1HroXYOPmsseekd0xwVKWsRLD5jxc0Lu/Abq0cTYhl4WTRd6aO8YHPDLSb\n9l8UaYknVsBNogVuc40IVnUsXX1jeVkmsMuCz4Q6XzdinI4FR9/DYMCNGCdF\nKKar5VCO2L7wa/Va93bzp3HRBVWn9nHxhWcg2n5ZC4KNaoC2dWXthsidiZ+X\nJbDvZInvzGKDZY7TY10OHfix71TpiJVNY81l5C5gTW/j6Tsl/MiIE39drg9a\nJkTHGaVkgzqXFLGWnZCp3lwoBiEvkBHTv4vtkvVK8V9cCWb804djaWWgeyCL\nPXta\r\n=/kYK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b48f791b92804fe77eeba96f057b1baa89c48e3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"8.0.0-canary.bd6e302a4.0","@material/base":"8.0.0-canary.bd6e302a4.0","@material/theme":"8.0.0-canary.bd6e302a4.0","@material/ripple":"8.0.0-canary.bd6e302a4.0","@material/typography":"8.0.0-canary.bd6e302a4.0","@material/feature-targeting":"8.0.0-canary.bd6e302a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0-canary.bd6e302a4.0_1604336712962_0.2274651198417832","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/form-field","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.d6b5cd418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3480407d6bba2a983ef86158a6a7911676514a37","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.d6b5cd418.0.tgz","fileCount":34,"integrity":"sha512-q53q7dj8yDMnx9pbwByvo17o4y37mygBFkIPuHOBQiV1UdghOUg14PeDV2ShmT6p1y+L4G4zLfvaivY3cBQLKw==","signatures":[{"sig":"MEQCIBhuzl1IhD16JVjRxpAi+oMffje3mKIrUdsMx5RhOX+OAiApn8uXRzAebZyn5jdz0DiPXB1QxSPR+USD9t9+I6u+Dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI9SCRA9TVsSAnZWagAAGa0QAIukFVtyxkEgwuyXdS85\nZKhQQpdZTJhOGyL9ZY80L/RBjG3ipr0F3UKlitTMH9q8ScYuRPoxeBulW8oK\n1To4cSAYlW/1jH4zxFHd3P4F/nxmn7vwvBR9U+/FemjkAJVrN6A2BjcXxxXa\njqEWKoJoI/lSOUmBKExtGtuWTmlc8QwIBFpnFskEGNrjXPNlC6HaBH1qDW7Y\ncOGDd1cQwV/hOGE9Ux3QSe1AbQLL85dK5+KCQpgT7HuEdL5dRrLwRK8KDahT\nlD4R559212lz8VYBWkOeL+IhzjiL/I1RKXqzeLMjctpK7VDUQ8bYP40TUMlb\n5i19OveVvJrTGNgJH21D1/UW27kY9kh1lU7DrEdF7ItXNNTtw/sneHtfAKmr\njKKVJQ3JFwRFVPXtw1gRZxqqJheLro9pmXLvq1AQRMT2cE0iHF770sgVtjfQ\n17BAxNfI3IklZL+L7EIKYvAlItRbA6iJuCnqNS2ZwKuvLdocXfN/1ftCvEpq\nO5m7cVdoq7P+nF9FOfV8GCOUVKja+AEDG//XxZL0d5IiadGf9YwQFoP/Nlzz\nJjKabBdihJH710BoyIq43Q9D2DZSu0ln48UVqMR10nYOP/XYXj13pmjq7i4G\nXe/DWp5nHF6stjz7Ic/JIdYrOxQf4s10M+ShxZyqK3jbjXQeSzCerVqUDl1A\n3rcJ\r\n=NdUO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4fd5e4f9dda92417995fcc822b1d02016642b511","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.d6b5cd418.0","@material/base":"9.0.0-canary.d6b5cd418.0","@material/theme":"9.0.0-canary.d6b5cd418.0","@material/ripple":"9.0.0-canary.d6b5cd418.0","@material/typography":"9.0.0-canary.d6b5cd418.0","@material/feature-targeting":"9.0.0-canary.d6b5cd418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.d6b5cd418.0_1604357969614_0.9643769227072998","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/form-field","version":"8.0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@8.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"580361c04127846e485c4263b514a5ff205efa3b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-8.0.0.tgz","fileCount":33,"integrity":"sha512-VHmQ4QQRP/omLlc5kHRtP4GASg5Q+b3E3rz8r8XoJ6GqJamSHazCVpjcvIkpKxzDZaVTggLNxhlBCfRQ3VxuEQ==","signatures":[{"sig":"MEQCIDwfhSjA5E6hXbsN8C6v1FwT+nnW5MOCItGfpzM4WYkHAiAxLmqVfXuxTK2AUZvD0ZN3OUdhQ9Kx+ZxFtL2sGlMPsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI9qCRA9TVsSAnZWagAA6tgP/3dKOstI744O5JRnI67G\nHZ4n36bgaMPP0w7A9iF4PRsg8qLg8CtzcnZq9BpxNGk+uVj2+nCNpwD7/LXF\nXkfvAP8HJ596VgHb6rVcfQC70UY5nS1pSEgh18a8ns3JxV1fyAzueXlL1nTX\niG/L8gwXI8ky2+nJ0F/pNsCO3V18o6dbKU7eqgTJDEB2f+95B90s4aklnJTl\nBvZ0a0hdh2oQN4ZOJcI0D8BUmyqcaEYxjFT3V3MkLiBkjIkRJI4/uNPVp8AV\nxSRjRKZQ3VSJdBqZy9MoNDz/acjlT/VAukwWHHrThjGEbJNtPuTairWm30Ra\n9baYFJWaWafX7wMxrANtqnEDdQU7+RwUmu67IKbc5g3LkzfVJRdkV9pfVPij\nNGx18pN0cHzECuwNnctCqkQa5ScH/3I976qm4Wu+VaT0uYtpui5EQOPVpqMZ\nCHvJqtFDcDJExj3JBlZYB+JA+bgtQIckedUUr04uWaQJf1wUgXYMBVmQdNBS\n89ZyvHGNxGwGIJwasz4E1JAMBdkOi6x0VkiarTRJvBUVqbz9oenM80ABWIGy\nuM/0Qg2VShz2TsCrFktffW0+eVmKpXTvznfZx3iQwOyAqgJt82kbfvEmu2GI\nPBWf8+0ZcSkNWWKff6KIy3H1XaEW5MilDQc6qXCN3AgELyNcTe3fZbGBE9Xh\nhP7P\r\n=DMgt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","gitHead":"d6b5cd4181d0bf11b598b5ca142343fbc87976b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"^8.0.0","@material/base":"^8.0.0","@material/theme":"^8.0.0","@material/ripple":"^8.0.0","@material/typography":"^8.0.0","@material/feature-targeting":"^8.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_8.0.0_1604357994180_0.2737393442811298","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/form-field","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.fdf9a2634.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f3bd69bc033db92304650e5ea013017b6bf4567","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.fdf9a2634.0.tgz","fileCount":34,"integrity":"sha512-jIS45npYLJOc0CNSB6MTCN+yK+T62cqGgHRiUGHnCn+SIVcuIYBSFAoInCTSSW7sb+FxAlotayXaSUtNzJ7uIg==","signatures":[{"sig":"MEYCIQC+vNh3Rm0cnWZQVwfh4sN//B1hcfcYatVvGwctwuftrwIhAKVLLjoh+pfK7/YsYWA9VxGGVWLqmqG4V82EDEPY+F/8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeYNCRA9TVsSAnZWagAAfJkP/2y0OCOBwEi7S1aze1JD\n033lPPTymNEH6y3m/UBGjjww5MnSbruN/cS7/i9j/+4SRL+vmjmmth8nd16O\nDWBRx+qQLj3AVcdIoISovR3KaquytxS2rkB6J63z+c5rLQc+Zz6G0BRJWWzt\nfgiPxuZewVNtoNjClKGq/Knm0nfFcmQaJPW7x9KEIzTAbeWjt3zkE5+RXSnq\n5A0+2ZUMegILGe8SWkNt00osy6B4cr3/fmwxeHUqZ0wbLQV/HQPuSuOeynfI\nydCfxVAlLZUMiqgfKDkfbupmJosS+UII2vLn6dxiGj3flBFCb3qRvS5IbBfA\nq70H4hCDm83FR+AdZ5/mLrBCNWH4hGFZdPbNpb3XX9XYzIz1mwjEJbZjGJ7T\nTQ+Bkm8IaYte3eyl7i3AcZ51aQt5nq01TCLhgfKHs1Q6zCusjFLlrvo4zRfB\nt4QkYb1hJd1Q2TThAWRSWSWE+tc6MmGeCj7U+hXx5qZbQvcNX8wvebFge2+R\nHnzeNx8fPup86aa2sPql6Dy/vRS1f1iRtkQtO/LXmy3qwEAS3ljCVRK2I+A/\nR5eSp1cLklgJP+foIxd9pff0W+HA0QYePW838xNnxT10uXFuVUk705DhvRym\nwEI8XrgdO6deqcjLuKBoQCKyANv3CIl5ZbZVSwSrObmF6rcrip9kzj7U7LLr\nxfAV\r\n=8pps\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7d38b3b1a677a24d709697b68fb697f1367fb5d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fdf9a2634.0","@material/base":"9.0.0-canary.fdf9a2634.0","@material/theme":"9.0.0-canary.fdf9a2634.0","@material/ripple":"9.0.0-canary.fdf9a2634.0","@material/typography":"9.0.0-canary.fdf9a2634.0","@material/feature-targeting":"9.0.0-canary.fdf9a2634.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.fdf9a2634.0_1604445709219_0.6797602058607022","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/form-field","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.4a86f30a0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a06b307ffddfedb038236f643826014f020c0398","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.4a86f30a0.0.tgz","fileCount":34,"integrity":"sha512-16uNtklg9V1Qk3DZc315M6fuKD4hVLWgVeCwEfNkpQKePT6vGulvWlUcNxAz8EYfENpCHQr6RFgQWfnej9GSMw==","signatures":[{"sig":"MEYCIQDIbP4AWKE8btTbI88/M+EPN1J03nF7p+54doYOmu2gLQIhAOO5gwKp1carTk3t3RgsJV1ov4M3f+dXWIY4DDZX6vU+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeeQCRA9TVsSAnZWagAAxhgP/in+z3AzkdPHmXUQIOOE\nM2CjDnKrvOV/a4OJld9n322kUfo1546eoqF8Vy/pv8IFUQRFrSUYMpyeDm9l\n92DpitHdNC9dkjKINU0iqZh55/6/YS++vyJJVzyF+Hi/ZupSwpOLHZG1+XWF\nBhx+vXBI8SO0WELZLPiL/Ar8wRG4gS3qAUEddiak6Lvd1psgPceymNvGSaLK\npv3q4FfPxbr6tIlWRj5WTzMK9Bi+93J/Gciet5N0Vk+DoF3FWaQyBWZZMwMR\n9aBKEEt+B7NpQyUee3muu6AJfdturRrD1rBTXEY/DZWEYIYAWt3ncHhaA7Hz\nAzGcdal7T0dJaRNkO6yMe02z9fg6EN0O0AnKM+qImdtnlYL2QU4Wno+7nPkv\n9olBVlSDw2F9lgJZOOHOV9zKDlwd/AtVJB4O4YIPcbFSt3FfW1B1iDa9+VBS\n8MrYcKJ0611oTUMYJANfPckSuiW9EJEU0W0ReJSUEZmqFUQv8FpquaFpZGd9\nSqs3UOWgsTaMv5fkvBszg+Jxx+0kULRRrqr4ePoitM6RxYMy1KZ5U3l27Imp\nbVGk42DACy1r1q6OTlO6Cbtqy7xhGU6derUAvIr34cE1Hcc6i67NH8wgCwZ0\n5PhP7viYI831D1+oWwUoRwRU2RzF2F5I5Kin00g2tj42Kh5Mo2OwrO/Wz/r0\n1afj\r\n=Uppq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ae1cc15cda11f90ef629a1f536e69a9648db906a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4a86f30a0.0","@material/base":"9.0.0-canary.4a86f30a0.0","@material/theme":"9.0.0-canary.4a86f30a0.0","@material/ripple":"9.0.0-canary.4a86f30a0.0","@material/typography":"9.0.0-canary.4a86f30a0.0","@material/feature-targeting":"9.0.0-canary.4a86f30a0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.4a86f30a0.0_1604446095545_0.4186953832276805","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/form-field","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.fc8b045f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c9716813b400f40d9a6be2349bc433b090d33ac0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.fc8b045f1.0.tgz","fileCount":34,"integrity":"sha512-qHKwDoApebmlSZrM4vLRbP1YfoeAmK06Jts9cp+Y7Xn57Tr3QPJxwwVhRYY/VrGO/H+DbFLTVK0lz2ZlFazMIg==","signatures":[{"sig":"MEQCICdXYtlMWgmgqlIvgJZxq4VLYMCJfix6yEMVgPX2piHXAiAUDScPxhByjTWvI1TInXr9sAWeB1ddvVrMoJVwi1pLrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoem6CRA9TVsSAnZWagAAWP0P/1rzqH9lb6viuAaIeYCo\n33Jl6btbhPKnfRNIeGMLF0GNFmBpXU+RazGb8DpHDX/bEPmkiBE70CxIAyCa\nhVVcsRNJqEKUNDjZmZ42oH8ZHK5pgSUS/W0yt0MqPS538unnUS4wC/d5ag3d\nlfNnjuVFc9EjdVIYdFFJh+tAABLleMBCoA1YjrkISW+IIMq6B2p8NUCvpTgM\nRbkcnWWClPW5L5piP5Ne6YDUly1nMQSFNGGqdrcvIF0bxJ79iy+lSPZqAAt7\nc/uO7UgcVhzh3Fd9ybSQJ5a7CvRiczMG+GIg4EC6kGTDbMhS/XvIawZrA9EX\n2X29tof6mOn0P5WvhoPk/Y7WaNbUWpQLcyumnC1QbCLG5J3j2j2KVODCym6y\nLbNWJq7kPag9N+uIlQN8ujx02DSndgZaojqyHHaDrFPgyMDLbhfn80nLE1zR\nKveNO1lYqoBWUO83Up4cXVoqnO7gQQk7kgZ7lYCLJucUkAd5qUVHRNBBcut+\nWoQ8O7rQ/oMSYFhtP2Dy+ZXKrv58Jbu3IPqE+OoeVLg4fC5Ifx2Vwx5cdzzi\n4YIrSXKeG8a1xS635pkFbD/GfilIbFLq5JZniuyK0wbMZ8C7oVp0NNeOMBa0\n/a1HK9Q2AJhsFu69mOMbYAMrFZBsCX03QIevFNqVlpIMh4r3TCB/vVl28vo0\nOkoV\r\n=sfAT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7df7659dcee84f0af6a1e7d8617abb4056acceb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fc8b045f1.0","@material/base":"9.0.0-canary.fc8b045f1.0","@material/theme":"9.0.0-canary.fc8b045f1.0","@material/ripple":"9.0.0-canary.fc8b045f1.0","@material/typography":"9.0.0-canary.fc8b045f1.0","@material/feature-targeting":"9.0.0-canary.fc8b045f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.fc8b045f1.0_1604446649722_0.13566222234819203","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/form-field","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.a0b2db26b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4665898b932a1db98492c832e6cc219efc5a7b5e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.a0b2db26b.0.tgz","fileCount":34,"integrity":"sha512-P+DSUAOGzkc1yfHQyOhMTuJwVW/Xu1TN7MaDKCF/OLNaRdE3FnkUP/NILw/pZmWikXTsmU7ey39AOPVm1KfEWA==","signatures":[{"sig":"MEYCIQCSvvTASoI1U5pt9uSbOhCa6wqBIQ0eq+XqmE+zSptzLQIhALouT/E8XIBtYeKGM99YPL2iYHFEmef8sxG1Cj5+XFv3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofE2CRA9TVsSAnZWagAAGbYP/1uMUN8UNyKubGEWYXvi\nq/RQK3jbGtAH/eyEH8fbUiL3NKUnopmdRvNc91BXRSPit/PAedHvKL46G4Gz\nx7w9uWX5Us1FeRrPsEuUM1aAfwI5vKhIngn5JwQfcVhO67RmfFyJF5n4nZnJ\nql66wc45Ia04KUuLdnZOZp93rkehojVieNaVGkoo6YOdvnUSHKYT8+KsyRFU\nHZxusnItKlEdSNG75l1AW5rolTIME3YOg+t5qHI17sCfK8DfkFuBjgXHnBz7\nNaeMAJG+im3wYO4/Bf9eaDz92ezits1RPaUpnhMWWWgsdJPDgiLpGNogv/OA\nujC+ojalEtvm4VYDIw28GI99yVl4kaAeVs0gJjCIcFB+UniyuSFVVuW1zT5r\nW5t+YhRr9pfzKvBnnWZVERlg1ckd4NggaPJOvZeoDQdeWFo/r0HcfiCc69Yk\nRtumEwcvtexl2/WXjTAIv2cKzmzXgEoIN2KGGu9d5gb92uoEBXCCB5MSUHkA\nVcXgSs3TZ5PjtU4nDjhoHiZ58dGDlV7/4/hseMVlipZjxprnm4GopGiUr3Yz\n4a5kaVTarZtZw3+NigmXHXE4SxACSRSiakQeYA/RIQtWZhegnCoeXmzjPZJY\niAl/F3UAwOCGMmdG2DS8a/Ltvajp1qDLF2Q4NXHISMOY6sue7QDPz/m3cCON\nS48q\r\n=ZPjc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"885abc8ece3b0c3cab58996fab25be733f65b5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.a0b2db26b.0","@material/base":"9.0.0-canary.a0b2db26b.0","@material/theme":"9.0.0-canary.a0b2db26b.0","@material/ripple":"9.0.0-canary.a0b2db26b.0","@material/typography":"9.0.0-canary.a0b2db26b.0","@material/feature-targeting":"9.0.0-canary.a0b2db26b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.a0b2db26b.0_1604448565840_0.30532294831786566","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/form-field","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.419e03572.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83f266add5e801ce21cae2297e8c883f41e922c6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.419e03572.0.tgz","fileCount":34,"integrity":"sha512-m+6n/ZWtP/405mZqaHzQ6Bql1hzqEwAXsAySPVnWhqlMv+zNLYElHnlX//C7uSLtoc0qaVenHQdlHUNdtjlAFg==","signatures":[{"sig":"MEUCIBE9XXt9NGeP9krWodLgUY0B1cIxW5HHDCghfhe0SBRPAiEA88XWKKk6kw6ppNX/N33juC/2t5VV86z3bW5tBBfjr2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogTfCRA9TVsSAnZWagAAK/4P/2KD7XqNnesANlz8HlGQ\nVbEmELfD2JltsFvoNmGXZNem9zejiHvn4PsInyfc9JnBqSLxlWN5lRFqiNK7\nz6bLw5J3yIYScBKsWf8w7x4uUM15zglomKPSCLKdbg5kt/FGL0dg6XvG8h5t\nyiazECmCfHMfT7ji15jpae9vifOxU5xWgOaKKn7jD+ugnW44SgcNaOiwBget\nmjaLmYJ4QVJ6w1QLgMY0sNnP+MpbMrHfQyUDZp3MJuJTQZuES4AchQgj8sdE\n5y1NdFLqX2uVgCySGozh/9TXiF1oLGBUtXT4noiZLWk8jp0DhtOko85H2Foi\nAS4TJG9k209XyPJrjjNbTLIEMUb2LtFBN1VYe2udfwKK9licX/AFJHqJ+7Ot\nrDpybLIpJvD6h4fhx4PcnXfOM5kGqq/NbupdtT4SMc7Sv2wdBX7XjD1C6pcZ\nEkfLIqlan+MHX/C6enAm6fbRnfogel04eLKuAV4eNqFysZMLikqGF46T+XR6\nZyJumKoRt/ZAIOCJ4RkrsO5mff+5oUD22TJ64PEnhthNBCEs55uoVH1UhpsD\nxxC0KCA7gKGgUg95tnaGd0k0KjUU1FZJU9zzp02x5VRLShSQrSlcakPB+bm5\n2HfPOw6sMIBh8zIWPc1vsihcModMzUa5BpaNNHormwk6TU7ypgAa5O9zbKJO\nP/yE\r\n=ElK9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c9528e0a61f88c4fa2a5bcc6a5e406ccf027d7d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.419e03572.0","@material/base":"9.0.0-canary.419e03572.0","@material/theme":"9.0.0-canary.419e03572.0","@material/ripple":"9.0.0-canary.419e03572.0","@material/typography":"9.0.0-canary.419e03572.0","@material/feature-targeting":"9.0.0-canary.419e03572.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.419e03572.0_1604453599486_0.7424831692108897","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/form-field","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.a432ad542.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff8969ef8363ccc3ff522625c622730f88e20dce","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.a432ad542.0.tgz","fileCount":34,"integrity":"sha512-iR89akJyUWY16q/j2DQ6a6v3xCnvfJquxbys4zo1uMEYDCAxNn1iK4hHUxaOU7NBM+c/VrhaDh6rPRypNMFs5w==","signatures":[{"sig":"MEUCIQCnuSPNHtkpyEX9pdBGEzu0mNYXbTJJc/ySt1A1eGVoZQIgetPZ0sy2ODvxES3LTcPURbM9mcFs146Pue1MmnVw+ts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKrjCRA9TVsSAnZWagAAKLIP/3b8b0hlbGCyzLx68lGJ\nefFGZYZo+vefF2i6IaFE1dWFpemKsLl9glUK2W7EYQY8bnDi++cBE9zW6AIZ\niySQ55kbUw6EUUr+l2vO2OSITFAAHfyU86l4aw8S9b7vL4dSecMd7xmdhunN\nROpJc5f5EznTn3FGTi1eamx9SdekL2NKMJ6wtk/4rPjIGMHVtNwrBEs+qQ+x\nS2Yva6ewqrgAWoi8/JbJP+L88CIeSs+FPe/pAQ7STKa8cqLG6pM08zN8HyXW\nTMomKuup4VO5QstB8P4Vn44vsM7cSixA297MMCvKB9fh0F3tF66ej7anddP4\nbnqG69b0oYrYErblYIT5Jai3ppyvt3JMVtuBi1Pg4Zv5FPhyk56ICl2iGn6O\nUYjADuTnPYqNY6hY4TWItn5oyFi4s4PuVcHgM50jjKP1uvobM6n0UccsXRlT\nlMMJiFewHOOEQHI3L23CCGidBFHTGCDTNLdaaBiU7f1w8B071XHcDuw09RS2\nfEnyiGqxrD33jnGlXLlrK3xB2/jDMRJII+D+kHRpfrymAWV12dClNO1mx+wv\nsAApuu3GxU5fy1EFFc/qLu25v3tCKZippZ0VjlS7Lcxf00S3goFakuO9DO3Q\nJXT75oZa+zVzCoQDdy7vvr2Oyd/c4LgQXJFaQ5LMhzVwvJ7cXGduLeLEtHLr\nUwhd\r\n=CZTW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b873a7878b871d2ced45e7f04055b3d4ef0c7af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.a432ad542.0","@material/base":"9.0.0-canary.a432ad542.0","@material/theme":"9.0.0-canary.a432ad542.0","@material/ripple":"9.0.0-canary.a432ad542.0","@material/typography":"9.0.0-canary.a432ad542.0","@material/feature-targeting":"9.0.0-canary.a432ad542.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.a432ad542.0_1604627170624_0.950269483935918","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/form-field","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.e2e8aef1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4bc23dca03b372e715ab2dfa40cb1adbcf60c9c5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":34,"integrity":"sha512-TNXfrDd8FDlfgKuLCEm74HqQQkg7rhoWLePgQq5hi4CSEZgQ2mYlOyNpk/rugBwGu0jlmjQkiWLm9ELf5ZDlPw==","signatures":[{"sig":"MEUCIQCy6ac7cNi13QIdRu7mEG/XkfggRziTJabhsHd8b2gE4gIgSEj1ufblKEBxlj2Lynr6JKOlbKB1HW/c9/vXU1of7u0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK90CRA9TVsSAnZWagAAY2EP/2O0oyik8Wb3HLBAdHkK\nkHArPfAO9CtufrPAeX6LUWz9C1QR+xYsjL9gZkZeAKTSapfCIMEe0nHDHwAw\nFV/NnGhoYbAANt53i8vwX+7/pKf9ZE6e6GRX3ea8FuSPJJnEqAvtcJU0ifxh\nkMUhTY7cECMf6eCXR5/4wTlzPsryLZUpt0rWJBRdsg1i4CrQevq+i4Opj4lE\n7WGT98JJ+YuEbV/Yg4eQmCjWXNsTdtuiMALvEcb470neqAQFAYBboCIj8oQZ\n5xZMAkdJxjCi9QlhiUCIdtb8ewujSAwRHkXrkRlY5RwSezVqLFYxnPv5Lo3x\nsaZSqSoLjKAbV0rqrmqzVjX3GtsmYdh0QbnFBX38TD9nJVGFIPBFJXy9n/JB\ng0vxRyg9CbxVSaTzjCaEIfkWSbC20BwGl1md59G85nIIE2yaZb7LJooMhRQg\nTrThYcVXP5Lobvy2N6d15RD+jeBFs4FVv8+mhKf3Eu97nvVPfI5YPIgDdcY/\nIW478o9Uo1OSXvTrwQU3g9H6L30Zilc1y6BF6MjlGoQQAHfhvcqk5yvRUszS\npSON6U9X/H1ZrE7Bq4+Ri/oplVEioUG+8m+w6tN0jNDvl8YYoSkwsyRG7WnE\nPO5uR/TFGsor8pyo2VzyAFbrhZD0ixhJ+IGct/CJuWuBd8gpLl1MslvFInnv\nrfi4\r\n=4XK8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"59b208be2f946b47ab6905d82c0135e81316f2a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.e2e8aef1e.0","@material/base":"9.0.0-canary.e2e8aef1e.0","@material/theme":"9.0.0-canary.e2e8aef1e.0","@material/ripple":"9.0.0-canary.e2e8aef1e.0","@material/typography":"9.0.0-canary.e2e8aef1e.0","@material/feature-targeting":"9.0.0-canary.e2e8aef1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.e2e8aef1e.0_1604628339575_0.5485006652344546","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/form-field","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.ec6b68b34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91a864b5007d3a752ad343b55a57bc6885d2049e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.ec6b68b34.0.tgz","fileCount":34,"integrity":"sha512-oVn1oEGdeS7VcWCF23mESMG3Q+E7UWvZ1GKZqG/tTzm62F2TLSeFSJyPyzKsPZiiirtPx3C/CigNu7kdYN2lNQ==","signatures":[{"sig":"MEUCICG716OrJQWbx5y7Wg6HB3lm1rEAcJ7otSJoD/J34tJbAiEAvjqMeAcItt2xVQM3QMSW33+TDY1sNQn6WwX25sA7bK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZx1CRA9TVsSAnZWagAAP9IP/RdZne04fNBGS+mP8NkP\nMri/Rn+wt+WazHPOzPtysrb5pf32ETia2t1yGqvHG+PgSmAvsaNp0ezlIzxY\nYtRRAXt0eNBSUyIENQQw2MhzsTVS9S0SKjRlu6CtXGLADQah2T45K3befiIz\nHEBcpZW4L0cDL48Srbftq4c43LXIKf+o3UvXF0C9FVy8RfccjNrkMZsE+Bxi\nx7kfqfI18l6dRIivuQ5DKUXr2fScV+/gqqWWHfk3qVF9cK1iXDg/dMmJ3mVf\n/Pdje/RuM9eDBOefkeWgUvLf9zmTXybMVRRzhrBI90WG9ZabD8QKWRqAeGOh\n3yACjtCKLnSMF5TBOSerZgT/gjFfuLes1CYLpqlISrrErhmsU5B/Ij2DNaRk\nToztfIH1ChzdtTVzG/fUwGvOwQwVi2J1yR2q6J2Ph6rf9pwkZGXmFR8Hu/th\njMcOv9T77iX858gSBLkvHdU8jNh6hL22ZFEQqhT/YUOwhmtI3RTP3AcSkPjG\n9VC2xpbeGatumi09TjSoSywAk4B5zq/pysHr6JJuifg1T1TcpJ4CToSogebz\nG+1jUqb4G61t0VId8BVCSXWdgWJ5v8LWWvmgLMmvs1arueF+k/eoivjLjr4M\ngg7RYnQSzuJF8QQdl83C7yfW1iN40TXUdWZ/6QTVfSELU9sYwwsWzcPZGH+4\n0Ro9\r\n=6enM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a5005840630991931dd5d6aed79aa4986773a5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.ec6b68b34.0","@material/base":"9.0.0-canary.ec6b68b34.0","@material/theme":"9.0.0-canary.ec6b68b34.0","@material/ripple":"9.0.0-canary.ec6b68b34.0","@material/typography":"9.0.0-canary.ec6b68b34.0","@material/feature-targeting":"9.0.0-canary.ec6b68b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.ec6b68b34.0_1604689012641_0.6282727956786185","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/form-field","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.b39094d14.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.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@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"611e93db3b975a83c824df547178833fb3e4b9cb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.b39094d14.0.tgz","fileCount":34,"integrity":"sha512-8v9d3LFsYrysL22B93gPpx3bs7nfkKYEc84xvAdu4jcLEKebeuUf0WwsjxCOSa6TMyxe7I+UWv8CiUWGk8XEMQ==","signatures":[{"sig":"MEUCIQDm39NsKhGQjB+1kR4Ojri7PhxiwJO9E4Ex4jADj9HmVQIgMMzBMWq2ycYxS7+kM/CqYQ0TBSK0uZOp4/A2M36i+4o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb0kCRA9TVsSAnZWagAAZbQP/i3t86ajVvP8NrhTU90+\nT76sqfnVARRuC75ryRd9vPSqoqXhQ88KTpcW52HtIelj0cZNkcUE9p01VvYB\ny0mSX8XqmPkkc3UiXvim91fYnMOWBmxeVVyo1uiPADD1J6aVDqeqVe+PnAxY\nFAKhYq48wkUFou6n+jfc0HgoTua/dMinH9pXsH5iIbb3gaso/JARYs6HmIel\nKeYte/l0BBp+0yd0RYnrSGUfPP3LZwHVAWnqtfvKA3B4x+h0UirPzquP9tb0\nHaxLZ0selGmxtizXPYlQtfYPcPJk419iRvp2ysGx3SzN9ukj0g/L5j+2yThh\np3v9R36mf8rZk0RhDfEPLg/hB1u7dlfM69c+x6j/AVRTlqdrgR/IzypCrEDV\nhl6bv7NuiRTkCmlNTEfTeiruRXEy/o78B/ggvOV8gdf9XnuRsRumarqZ6/F8\nzc9XzN78t9u8YcJC73yjy/wm84W2heJd/ohVoTflSBbnYvwFP4tpowFc2S8W\nhJgwuLmA2c/e0RGd0J4suL3Qk3mq26LLpfVFyi4zGvEIeZKm24RgIsOqeVrM\n0mjo0aoGYXFtw1MJyZC4+euY3nyV8SvFbKP/Q0eXiZvMwat8V0SQkiuMbetY\n9u7rXN7PnywucH557Yl8iMU/8ef0EWmWpOyIZbQ9tEUdvmkJTYiD65S1XDLu\nVmdD\r\n=3BYT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f8c5ef7d8cee2d0a63421ee4afe42e4e9260cd47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b39094d14.0","@material/base":"9.0.0-canary.b39094d14.0","@material/theme":"9.0.0-canary.b39094d14.0","@material/ripple":"9.0.0-canary.b39094d14.0","@material/typography":"9.0.0-canary.b39094d14.0","@material/feature-targeting":"9.0.0-canary.b39094d14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.b39094d14.0_1604697380081_0.9510736564602194","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/form-field","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.8648b8258.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4545e81ee21e44d5a11cf5807e97b491b48fce34","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.8648b8258.0.tgz","fileCount":34,"integrity":"sha512-EjjU9z+7xSsMFs3NJYqw5dcnSRr7MzL4+eZixPPi7LhqphxvSMRrA1ECZZE9nz0RDNXATKxWB291SEhDhFsj0g==","signatures":[{"sig":"MEUCIHhzk229/r1mQQ0Mx5SB3ontDk54TDWD/qqOgGAGPn//AiEA7qG/wVIQc6yujL0grU8BIPHuRTBPHUvWrkU0U4swyX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRImCRA9TVsSAnZWagAApP0P+gOND6LhBlbnfgQTgTMA\nh9kEk9j0eL2IsyGjTLxv/KfgvB6qHChAqWm2C86EGwRx4qORr7LoU61wcmjx\nuTKn71oilArk/wg+Ar984tRT/OhwhUKHnoI3h1JVfxsGajyIbSUz+MrxiuZq\nKrJnlYAM+x1jPyrBtAoKb5tJiEQuaUXL3Bwh2wkJFTypw6UoYWDR/eHOjeu3\nYUCxTb01Dx8VM8VngWQ12VdbLMkCQ431JG/lezv3OWiMtsEbVuHmqeRlMiCg\nPKdYJj7shLmtR5ggvlMvsr2yQPywWcAMop5z/Fr4tfa65V5Vd7QMZtYlBDH7\nt3QA6LXdciDbHxTqvLJ81Z4bSVxA1DzypdDByx7X+uuMA/1a6jkjTAa4lBde\nAFwezUuhA+oneND5YtzFi0F7sPrn9HBGEX9UpCPhlJG+D2eGRnIg7+PddbJF\nyawzfiA9V9+6gR6NX2esnLP9jcJmz5wZCSJvYyWo00FOoRIhZxABaA2HcNGw\n/IAswTtr/tBeIRdLZU34SE/23eciltoPH6RzkxP2m8BXS2rKM3GM5WX0Xe1C\nh4ErC360szNhsGL41WBwrXizEi9710Uu2cbjGuZh+Llro9H6YvIw8z/a3JD/\nc0iGjHDmU4q5Sm4Q/CFLxBXW67tOguzh4vaYgPJhtGD1NYU6EiTHgvKB3etp\nz7Hq\r\n=C2pr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d98de60dd3d91dc14a84abb664678188ae936030","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.8648b8258.0","@material/base":"9.0.0-canary.8648b8258.0","@material/theme":"9.0.0-canary.8648b8258.0","@material/ripple":"9.0.0-canary.8648b8258.0","@material/typography":"9.0.0-canary.8648b8258.0","@material/feature-targeting":"9.0.0-canary.8648b8258.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.8648b8258.0_1605177894398_0.5280492011679396","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/form-field","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.240c5f74f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34d5e1e4957d369e266999dd72564e4bf93b8f2e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.240c5f74f.0.tgz","fileCount":34,"integrity":"sha512-PpsdyV9yA4vySX0FOCtL4FMSKfE+zqq+J2VgbaZl/yjU7thIdBSN7fyl/Wz57jJWNXkINc9jtD1XOVUaDDXRVg==","signatures":[{"sig":"MEUCIQCr3+w2GRCXm9D/aOFxNOtrKBIFtB22gO7/Nn//hsshQgIgUKKEXmYEyKpW/LhjYHHYUdOgukIWnBl4IjWyJo33L6c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZktCRA9TVsSAnZWagAA2Q0P/3cHagoKMZvwI3unOyrt\npjSWZvJwooM9xgCxRMk9v71MHyF+2q9xGnoON3v1yO2Zo1yjCNepAAZa5od0\nnQgww1JxAkGmkC0+qFKSwhftuY9KKon20gHh55tw3fynjygok7lvYuFkUslr\nNLsOUF0UuNTb02Ngc6HjiN9/CXm2L3S9Zh8xQHCqBUmqnbwPCAD8o9G5PTGq\nACoORMVEfKefE/+31k0G1l/TVEsusn2OliVdsUOelkVEvjNU/u2pQrGcfe7F\n0hjbUHPtV9iwTlK+bzEeKX0KYENmOaBbUTwrAvLMCGl2r5GzpAno9NPAJJNT\nWvcqrT5I78aqrrQeRO6GFvdQjtZVvN1NNGfPPejfJl9YqFCDg0Si+sAeaozu\n3768ukk/1nRIVwAp3DBDm4ZB4JaEtYVU12Vca2gYggtbz+ybC12t3DxmEiR3\n+RR1GW4miAFV62GN6ye9JBx8gPgzw4oeMDgKGCqTuPSytZAkLBscDlnfLe0Z\nR6/IwOAzUoJDmbtKrHFKZqugfgvMxi9/RluHe8jA3jT0jIz3QCnQcGiip6Wn\n9Vr2yjeSqB/FjIe4wkAz5CRqF6AzYXifxM1p+rXhUpQnLHSiWgH/YJL+xlAf\nj59b1OjW/fR5jvo9584+xGfIqh9bF1D7tA+o2VebIyLVDpmNZDSIrr+qHG50\neBSa\r\n=SbIg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"33b77622681b24909d892ec906f608e75f5e9809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.240c5f74f.0","@material/base":"9.0.0-canary.240c5f74f.0","@material/theme":"9.0.0-canary.240c5f74f.0","@material/ripple":"9.0.0-canary.240c5f74f.0","@material/typography":"9.0.0-canary.240c5f74f.0","@material/feature-targeting":"9.0.0-canary.240c5f74f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.240c5f74f.0_1605212461429_0.5634451296554939","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/form-field","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.6cf6ba4f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9ebc352106a2506df80d5f518d46b44cecd81b0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":34,"integrity":"sha512-vq555ibeur6F2iodwQgT1+fOQ8S616cMbNmguDq2KvXsHeFokjHyB/E5SUU7YiXB5dY9OebHeJtqqkkYRsmqPg==","signatures":[{"sig":"MEYCIQDqsUOQtdNfP4QKexZZ+R3WmuNbI7mP0FhCwk05uUD4yQIhALqriUwYiOF6hzyRPdsiJKO3VDuMssfviqw6l60CJf46","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssnqCRA9TVsSAnZWagAA09YQAJ8H5xclaDMFkN/6sqJG\nMLu/LkxUCcdMiogidH2pATE14U5DKkTayvESN0Dd+8kf03yTie/VKHCkHmxX\nLw5qncrfh2szgGPF50+aFpvvwXWOHNBK9LpWXIqNgjYFWHN8yWfxR/Hn2754\nROxEOX8PFRf9DIXMYNmiqaUcTkVI3zYSNa9J6lbcaeyZHmIkLv2Y0vUqptZZ\nDdgOf/u1Z7AsdGR0Id2BstxnxfbUrzLN+P7jm7FHvzNdus7UOlQ5WW7UGT++\nYPAo0cjhR1zUq4rA1iZKZiZJTu8BEhkCxZ0nCaKmdZQOVgpQzygvz8GQDxbH\nN1f6kVy/wJbYV9xmDDdJvhDyfxeuIrSKV7mD0sA6RRYiCGpCIA8JzL9xCB44\n6vwZnlEG+bf+3oG//VXgjEryKRA0rLTt0eaoT/oWxPPnvialIQpF5c0nCffZ\neW2q1/jdhEhg0csg+6Ydr5kKD0QMsU4rFApBFMW0kHsTdw55RIqDh8HiIrp7\nafbuJYw7zWM48LS17iQgjyALC3woni06xYDUY3cIUFl6hx/cQmTecaBgudKm\nm8sfLhHXLtrOO+k1+iHtMagnoEnR/JJse4dKQgwAzMEefTNjeApy3/CTnGE0\ny8cD8Ve6p+TxEPezw9TX1STjU+AB9ta/FMSNTt/dLsE9x+8sQoUAQZQDPKoD\ncqn6\r\n=MSUH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d2d4890ac5812ec797b5f621137f4e8a077c3c0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.6cf6ba4f4.0","@material/base":"9.0.0-canary.6cf6ba4f4.0","@material/theme":"9.0.0-canary.6cf6ba4f4.0","@material/ripple":"9.0.0-canary.6cf6ba4f4.0","@material/typography":"9.0.0-canary.6cf6ba4f4.0","@material/feature-targeting":"9.0.0-canary.6cf6ba4f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.6cf6ba4f4.0_1605552617715_0.5754839085794643","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/form-field","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.07f3e01b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07015643378816d0cdb1e34c441474b14545b823","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.07f3e01b7.0.tgz","fileCount":34,"integrity":"sha512-+MuTJodpzy3OsjUl96gpc1+xNSpH6JJCZnh8UuaTc2HO987D8xP6zmhqo6hwV1zU7chgmeGj2NBO9H+Y9G4aAw==","signatures":[{"sig":"MEUCIQDeLfRUY6ZhfrgTbfbbRktOBXkIu2FyjV/3P/r0+NmVBAIgK6L8D1o2xc3XQ00j9n0Qo/wuii7XiZbIH6FJNNcnlM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvMdCRA9TVsSAnZWagAA+3wP/jM8avih9Ypga5J3kbGi\n9HQzu+AmC0VQWsY33S+QpIWpoTKIL5FTZfPxRxqasMU/2AaJv0CsGbV83KQo\nnZgIhNvO5tWzlXU4fCt1ZTSTNuYNNHs7v1XNzypLkQyHiLB/EgipT7xI6BQr\nqSh/I/zCJBfesrSk495A1oDmxziNWnQnWxJ0yUOIVOBoyHjGw+VdTQc73cDI\nKUXvO8uecpLMAyPN5Nu1zUse9vJKueY+i8ou6lqkdl+0rUmEH5pd2yCELtV/\n8AEHRtY/WzzfEX/waMIDBo/imO0TAxf15iA1ZZFf40xNgQTjhluQvXUI2Pdo\n1LDoW/JKdOx5CI8vwB648lpMvaucyOaYohJ0GojgazRxsUuwtAmBksYoSiXV\nZmbrBxTJimZkVyX9s9vyTxsXXOUuFKeEFIIxQhoERbugwpcxbWItLlbSa9b0\nUeMgNR8yAcw+YrZos8/yInPBV0azvwTwcXZRk9y0cH+wDsZnIXI/2wwoDmbC\n+FZtd3gDc51p0TR0vaIfxfDJmwhxX/kbv+g/273uzpptlbl6Y9oBO8dEc3NH\nPk091/NU29KzhOKyHqPeZMaU1SWTnQglJ6y1DQ6/XQ9t4OAI9UmokB7x3v1s\nXVuxOYMqje4E2dxCaZ0qXI4OYxrCrIndNV6PRvx30R50X4aZOqg3O2rTHkoM\nl3Ti\r\n=injK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"39f1e043d0db0c6881d84b3d7b54423f64cc8c0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.07f3e01b7.0","@material/base":"9.0.0-canary.07f3e01b7.0","@material/theme":"9.0.0-canary.07f3e01b7.0","@material/ripple":"9.0.0-canary.07f3e01b7.0","@material/typography":"9.0.0-canary.07f3e01b7.0","@material/feature-targeting":"9.0.0-canary.07f3e01b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.07f3e01b7.0_1605563164587_0.2527843370605878","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/form-field","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.23491cf85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f680462c6ae5515b9953f412279b11dbe52cd38","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.23491cf85.0.tgz","fileCount":34,"integrity":"sha512-yUxnTDh1BZsdqbWfYbgJPq9bWghGg0dEfur2wkRJzWoaBDHYNe1zzwTtX4n6fuazpmMmcF0APTOPAgqVe2CVSQ==","signatures":[{"sig":"MEYCIQD/9QtfaZn1GyI5SNUtolAoHBW6j+wZNoqb1ttQ3BK8AwIhAPQhVDsplaDR+LN99PXY904rNEu0C8wNei0OJwJjw/+z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxadCRA9TVsSAnZWagAAOHUP/17vyZ6iBPNvjs9J3y9e\n8yMpDnGGuzJTSl7vjBnM6Xsd4yoV/I954m/RrfxuHpOFds2fTDiqkMJZmI32\n+ZFpPpABvtdbfNX1TFLJ5xO9nxUjfffDQy4z5U8HSC6BMtGsyjJKMz+U6UsJ\nH1yvZ/9k/3Q7OhZQIlMqE9JfsQw0gULUPTumYeABOMq+8U18nypvPc8JM0TC\nL/782rm6xwu48kzCklhaACQJ+CVC4+qdqQO9etaXdewtwWt9N2cEAWtNlqA6\nY73SQgJrDbIfbRRYM4EBg0LLbtdiey7J8qGjjMBPTIqQbATxwhsdBMNPTzG3\nLxiHnYC9ggDe9GWXqpYU3k1tfWo7yQYeilTkSceZemFYn1EWo19/8Ij8iW9m\nALzJveK2gHVh66gCKpaBSiLha7gQtzkCLpRzG8DJqPuKG6xt+Dm5GLRjNfzB\n19gpQZ/MjtQiHNmXmw+pVm9SJdGRHhzccQTHk/p79Ca4MTo18ie1AYLvzXsS\n+F21FtUO/yfvk7ad1Vqu3E4QWnLo3pQ8ZZeyosDyMg7tOuYRsmlY+bCU+yTL\nDq3qbRFQPhJz0lLcQp+iDthHnMvRD5F+g1EaMBfvkwCvQqA4pPd6ZQ70NNy9\nQo9SlT8jOyTG3dsOZgS2dQGC4I+MD+f4iYsAT+rDGhZGQLR7TtlIsgFzSqON\ndSzv\r\n=wxN2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cc2535ba5f66f73426d236b8a85291d7395ce589","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.23491cf85.0","@material/base":"9.0.0-canary.23491cf85.0","@material/theme":"9.0.0-canary.23491cf85.0","@material/ripple":"9.0.0-canary.23491cf85.0","@material/typography":"9.0.0-canary.23491cf85.0","@material/feature-targeting":"9.0.0-canary.23491cf85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.23491cf85.0_1605572253473_0.5959872676697437","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/form-field","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.b659d4fc3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"184a267c691f8e049f65131223f818766dbb2ec0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.b659d4fc3.0.tgz","fileCount":34,"integrity":"sha512-bnxJlN6aP3/i4Tztb6R3Q9csM/Z2hMaSZnrXbekMv1zKKPdV9Xmlo6Lw8VoHpLEPh2fMFGzh9ZFpxzVXlp4k7w==","signatures":[{"sig":"MEQCIDK6DyuZF/5/fVxibmDQHvpeX+5Pnbi5se1gBaLU6Z10AiALK1Z54uvpSQakqDleH1Hwsx1vINoGJh0uORfQNQFE/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxh2CRA9TVsSAnZWagAAhU8P+wbEA8Z48FQRmxt4meEa\nhMCbJ2kYvamHcBKBgl3d3L0TQUJv4SQMTrI/I/sJsIlN6Ob9W+QnS1fFohGG\n/fPg1K3q4To+rS3mMisDnqGasCsP2mJPFbC9KppG3Y3cc/3ksZu45L9po6Fj\nKTztLuaSpki5T3+ikf3guuwmbnHJQR7y4Lw3WP7lXa49PZL6ZYEWMpsPvidP\nvEhSvoyAF9U3GJvF0L4EgSeOtckS96IiklMUIAel4MYFeRheehs5k0cM2fJb\nR/lK9qTO2akAc9te9ZzXoQHR/hC9ltA1P2EXZXRHfUw9HwRGEGnPYFj3vGpr\ncMox+fAYZWeLMMIeupkzmg7H71i9JI8kudzvkR60Fxl6BGTf268iJsqD+dTa\nxrzMA7pQk2wDExJY4hr4QUcIbvZWVkTnJ1MLxOXeHrgcr8bQqfdq8iQyVXgX\nbFzD7ypRA2tld0CBswn8WGLTgooqyIMb9AvYubthsIzhhmBdXX6p+bc71VXM\nr2+DpjAvaWPnojnaP7b9pkVvTDjMrLQrdtk3be8KPL2PtjP40EFq5gd0HNoQ\nWPvPxZyA5/s58i+F8HpfpJyhKuIjcESFDmZdNOwQgC1UfW8s83VDkaZBGokR\ngZPOQQUG639pi69p0W7ZRCODcm7JPFB9850i4HHltxv8oUBVin3PDq0VwRl3\nsMBf\r\n=GqQe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"da948526208886bd05bb015d249db8d19d4b3f05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b659d4fc3.0","@material/base":"9.0.0-canary.b659d4fc3.0","@material/theme":"9.0.0-canary.b659d4fc3.0","@material/ripple":"9.0.0-canary.b659d4fc3.0","@material/typography":"9.0.0-canary.b659d4fc3.0","@material/feature-targeting":"9.0.0-canary.b659d4fc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.b659d4fc3.0_1605572726117_0.4537897828365707","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/form-field","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.d8a3aed67.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aff99630d1c367dbad8680a1bbf2a1368b99e716","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.d8a3aed67.0.tgz","fileCount":34,"integrity":"sha512-J+45i399iTE3ViDh6g/po7nj065r+59MKQ1OgVYVcIzqbGAh1v/M/8n7tFMVo/x5BUROQMRbDSQ3+AmIt+eg9g==","signatures":[{"sig":"MEQCIE/g+9f2Kb/j7WDP9m5M6mPf2+i7vWcYoy4MN6qG6vUTAiBRVIKWNEC0yg/vqeS3GfXlU3CKLUHEkli071syFFFcmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+wJCRA9TVsSAnZWagAABpsQAJNjERgSgul86L6Eyn+W\nnwLUwZp1I4evJIdI0d6+YClzEQtEMQs+/g0mBT/r37CP2IoqwLSzJQEx47EF\neirkutn8Ny84uYvI6evqBiQr9VBdDdLrAHBBwFf+Py3Yhxh71aPwBmvadkhJ\nwMnbnzCtfbh1PjYsEDId7IKWjPX3m0sDcCfRUbjQ+zwTMzOdFTeg3QcQnNP/\nbE/YDdbYQ4X+1wlOoiM8KP+gInAtvKxDAoJof7J5jaObvdZhsAQZpCgY/sR+\nk+M1Xln6B3fNo6Gw6/sPMlQMH2u7oHC21qL4vTw9GyACuUFABRZBxbHMBph5\nKD7qho7mkHTT6KzIcMdWfzpYpl9bSs2ZTkxqNoI3yB+j6ZU6PT00EZG+L8+Y\n2TY7UBm1L7RRDVhaNKYdtl0gbnUmr/nmA8vyErvq0qm6vDogVF5WGImr7oIE\nF2zxtGrQtQd3h6DOu5v1ml77DZ3HimoxovHpfoU6CcL8+4QjUKvOSpel8R1G\n7m0YOArMeXO2F4Pzg+VGHag57gEBEySSEWK0r7Y2Fx7UbYei827YrU2slgtB\nTFzkXq8DVoV7DJdCiSXYDl1zZpll+kswNZ60TKI+dXf23GBNffYwit4+el5e\nBhmeWvctRpK7RxF0bOdS2EDpSn5S8fYw3ADz07pK+iarveGBK1R3J6ABrlbz\nhJHW\r\n=RN6U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e70765503f122fcb3d748ffd41882655d9d4035e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.d8a3aed67.0","@material/base":"9.0.0-canary.d8a3aed67.0","@material/theme":"9.0.0-canary.d8a3aed67.0","@material/ripple":"9.0.0-canary.d8a3aed67.0","@material/typography":"9.0.0-canary.d8a3aed67.0","@material/feature-targeting":"9.0.0-canary.d8a3aed67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.d8a3aed67.0_1605626888833_0.9886057762946827","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/form-field","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.482ff9091.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26d37702d922865015b911a51078f08e32d14c18","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.482ff9091.0.tgz","fileCount":34,"integrity":"sha512-N+5EqAlYCKgkSJK9Xv+4lmpD9iOjv4ZFyiSKGVPLPaGbhdP+nwaWKj09ZPR24aRdgOm9awPgr7usVD9rPaJPvA==","signatures":[{"sig":"MEQCIFsmLHPZVhN/c/q/66/JoHN1zpLhNGadtHxWkv8jgptFAiBNqlREXnsnMxqResALyQNW6k8tUSNIJsI/lqwN5Q2jOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA8/CRA9TVsSAnZWagAA+csP/2bdhllM9rlbhwcv/lTh\n52DhW56JxHF41AZVfxLNxhnlrR6f9HpPoFlSFDTr1C4lVLCUqCbmogiDe/9M\nPnSNF8OeMvxVmgt2k+3U6pwTSZbfv1hl8Fu07Wu6BEoS6W4qIPxdVbaozwEo\nOfdDMhJB1PsTnNTk4To0QI41kra68rdmkhkmmlL1jV0d9rt5+oSW2ama8W7Q\nWIcUshs7yDhIEaptHjr4fTZZG2bOjoF7i0FXUmf+R2HYf/PvyQKk3xhq+Onj\ncWFYXTWXzv95P0ckxVoUXLmT6wR2BgCpQMoK0Nil9mnIZXyZ/Ml9DJJPw7u8\nvN+PfnO9MZmdMc6Rp8/IqPzM7UBqTM9L/ANorIWGwfcd31DEd7ggwk26MKoU\nG+WEyn5M323e7adERvrGt/PLXfBXTMlkZ9w0W5FSqqxL4BJD8Yr9HtNqll0q\nTUIH0Cqjjr/kgLnPUseXKBq0ETG2PjMHLkTaBp7wSjP+sDT8imVMkpqlxjlw\nJdNV7My30kEzC19e1oCCzz4O0YzssbGEQQ5ToZLtRhSCn0zlbGrXuEHIPgwv\ncSjR0zy+eKonz1uNtj+7IEvYvpuMRqSA6A/4xwtP3QN6z5HpnTDgQ4BV2ERK\nbzq5LvDcy2RA3Bn5p/1TiQHtLkBlWdi6uSv/L3qwJMKXz83kTDDle+6fGEzg\nhqsV\r\n=PbPv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5b4b306ef0e5d1d3654252169bb9fb9d75490dc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.482ff9091.0","@material/base":"9.0.0-canary.482ff9091.0","@material/theme":"9.0.0-canary.482ff9091.0","@material/ripple":"9.0.0-canary.482ff9091.0","@material/typography":"9.0.0-canary.482ff9091.0","@material/feature-targeting":"9.0.0-canary.482ff9091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.482ff9091.0_1605635902724_0.47527714445574487","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/form-field","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.99cfb6bd5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0e47afe28def01181735076543127dac16c6cc0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":34,"integrity":"sha512-EbkG0hcgq52ICGciI5fEpzxAVnaKN2tLZ6PGvK7MOY8QwBvhpsloJdFOH6bzP4yoFY7/DppFrG55FNABvRRVqw==","signatures":[{"sig":"MEUCIBYCgrTWbOeoJmdXWt1X/redSuA3XWHXeN4pjBcx7OayAiEA8JIxebxxxnC9gJ2tu/Be3s1lMmzvsT+JHti3tNmmbQI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWt9CRA9TVsSAnZWagAAPkIP/0pIj88+m82mpXDxW//2\nVG2u4i4ZatVe2/A2t+hg4UOKofxivPgLr9GuFkeRRcnbOJsxnlaHY2R09+CB\n6RP9HeSBedSHJ/xoGn2B4B6hhxGRcicV1W7DUp+83Kh4y4zQ7a75XtSJpBTz\nlYwketT9YcXnidr3mu2vbKEGz2TaBb/UlaLd4YUXR/L0wk4ihvcKbWBaOEFY\ncy0KN1jKetCDCrGv3WTITUZa9dIJRhJ5qmFvYVlKi7/Xa8vuQestJnpHstN6\nRDElDgb8xHpbDf5n9qcMDg0R/STAGQBLCXgqHndQhzkhan0COMDt2izr0lxF\nZ32uaMj4A31nKVXmOKx0c/BWdcdg2VtIhOxp8+hqGm1q0+xFwoCyvQionagE\nqbpxzMu6IEN/k7mGPxqXtf4f+dKkJoC9HKZtWlsOYm2TTWjGN8787i+iBoKl\nrRgn4gvEg0ONkHv4ljIhCZvcHmv5IcDDvjcjse69xqjDvdFoVuc5kOQbRob3\nHtoKfWANXuN6VRIO4bD3FbSHdNghpgWoWwPFGtHdpiCo7GMEJCkG5HPUvWgs\nYuOqDN0ISg/f2pAo409z8rO5MVmAgh0xqOtzQMXa260zWrxUMiW7vBlMIqYU\nFPXt8zlNj1PMtX4LcJCHFRAzFF7t9p81tENJq+C8PRE0nPz0dMgveUAekM2R\nkMhi\r\n=N7Md\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"97b5b434f189a370838c9b867dfe1b766ae52fde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.99cfb6bd5.0","@material/base":"9.0.0-canary.99cfb6bd5.0","@material/theme":"9.0.0-canary.99cfb6bd5.0","@material/ripple":"9.0.0-canary.99cfb6bd5.0","@material/typography":"9.0.0-canary.99cfb6bd5.0","@material/feature-targeting":"9.0.0-canary.99cfb6bd5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.99cfb6bd5.0_1605725053071_0.16187787912261986","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/form-field","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.b98d15d90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"470cc6a54f673ccb02fc24f57e6e890b0538d755","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.b98d15d90.0.tgz","fileCount":34,"integrity":"sha512-46S1forr5zgbL2La/+3hFblJYUizYaA+u2et9S6GRT1zddtCN7Zkudr5A8ALoY4ZtKNIwp4OgrkzMEJsHDH+bA==","signatures":[{"sig":"MEQCIDh6h/XsLCzfyjHWAnO9HTL6qGnRc1KvjEoTnguFPMvdAiB34rqjPEptlRzqpE4dlHIgJ5p5oKNKEMeYPJHlNOgegg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaGcCRA9TVsSAnZWagAA7QIP/05t9sW1hqs2+2FepNl7\nzv2zATfQWVmDIir76Tv7y6pvPq/Q/nzXcnA5w6BjbnQ+I9eud2izqUG8gX0V\nag/8GrEfF+9r9lUry+SA77OQDYaywH/kApDX6ua5eNd9J7CYK3giSa8KvUDp\nnvX/d/M+HgAkvHAa5mmtjpzXw394W7bkUzA98ejQbIsl4GE58dUVv1SX9sUD\nLOPGH21wc/Hkty91fz54Xkr/QIEI8QzNsPOBAzlesZgtJQCx7AD650bVnEgm\n+0LK3Im5gM155g5Ib566cV9eU7KTwk6DEIZ05/XIXqRe9WowO2dO9OR1GReO\nMS222F53jid3mws4PV6l3tMc7h8+lI2Icspo7sr5hgqIf7artct9820gckIh\nXNe7zLHIdAj/I2eSdjVWIx3E2IC5Bp1QpxOmbMk+M1CejqgaPWJce37uj2xA\nk81l4yRtrEoZXQIy4WS8MvHWfBLz+ts+nmApsj/4khmb2KswMmSmfhRDdku8\nuScONLlrAfjwbJhXeohCepV14JNrIBOz1/gVociBNzOPO8iYhwsVw7jIB4lD\n+S6n0Vys7Hs/jFeqqYeP4uiGfSBF52x0j7OC6j86KgWBr213wqjnUjqe8IRJ\n0yzUc/iLGG0kp9HfnYgXL7oRPZgr6tMoMgcCQ5LTKMMjYqS2kf+UTRR0sJrn\n3xa5\r\n=z7qf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"abbd2c5bad9fedd634d7a0c98bb8e4a8b0bf3439","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b98d15d90.0","@material/base":"9.0.0-canary.b98d15d90.0","@material/theme":"9.0.0-canary.b98d15d90.0","@material/ripple":"9.0.0-canary.b98d15d90.0","@material/typography":"9.0.0-canary.b98d15d90.0","@material/feature-targeting":"9.0.0-canary.b98d15d90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.b98d15d90.0_1605738907771_0.6795440237099817","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/form-field","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.30c11bfc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b9f2f6308ed8c07cfb4345bf3ced6b589be1d28","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.30c11bfc2.0.tgz","fileCount":34,"integrity":"sha512-8vtEib4pRkk4LFKNycPwc+kS56+vpx6Cf0Y0/KqT0M9qBiJEFVAml3DpxyqcVP6d1k8onYxcb25l8N6zPSzsdw==","signatures":[{"sig":"MEQCIHpogiS0MaSXxSa6LhJuQCwIr33CI+Ppxc6PlZou8yw4AiAM25E2tpl1S+Js9ld6DCLzio/YNuy1XxXUDpW/00PkRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcm5CRA9TVsSAnZWagAAusoP/iT6nhgJ6WCs+ZxhYZRk\nQfNbKVTkF6KZs1PhrEmVgWtJ91gWE2Fg2XPikn5HcoyoWRcQK2S1WTWSOscL\nxDX4x6Nknl8V3BCYSBU/yRiGpzvsJHyxcSzIWZTqs2O16p32piSGwZ8q0CkU\nqBwVpeuVXONkDQapz3TmQEZlPi8X+5MCphd19tWKxbSgbPsSPljvNHAS+nfW\nbG5LV6/G+6htz4uOn5uoFkstsDQxrjxtOK4tNLLF9m5tNb1bDlILY5drjXBm\nMq1vzHxtvkaFkZ20J8G4wNexYXLdoWvjJwgQpqSmF9kHicxyacmpwB3/pp6z\nGKJx2ZJkQYOdoUDAiCT7zruG1yM6KP9O8rhR42K+ImfIYg/0f+cfCIjEVNMr\nj5uwrIwb5jeCWwvL92smnJQEWLgfKteROOwSAEmgp8h6YTtNIFZ86uFoOLkT\nROd9rF8MIgW50OMManOVW2s22w7mJjwZnXptQfD2MrI0d2rqyE8PJ2cYe+GY\nAvftnEfmHIn5giA9Qu1gqUuwckXblsZc8hPqd1Gb3kUIUqXZ66QK3uCvLdUR\nBTHBuw9XdG1MSgsZ4weBSc8T39NUJnug/Ej3l9gMLMQTY4ETrbTdGYyVZuPn\nr/blYxhUsbjPPsUsYOHufRtyh2lxcF2+ypkVKhZRE8qefDzTwYWnokB7KLFk\nyHhv\r\n=+8Cf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bde404a844a4528a097cb2c90d03c4ce8bba9d74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.30c11bfc2.0","@material/base":"9.0.0-canary.30c11bfc2.0","@material/theme":"9.0.0-canary.30c11bfc2.0","@material/ripple":"9.0.0-canary.30c11bfc2.0","@material/typography":"9.0.0-canary.30c11bfc2.0","@material/feature-targeting":"9.0.0-canary.30c11bfc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.30c11bfc2.0_1605749177215_0.9056677949916274","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/form-field","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.1b731d51b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b1ffeb6b6697547a443a292ecf8ba11f314c38a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.1b731d51b.0.tgz","fileCount":34,"integrity":"sha512-gXRo3X9JXRyOYYJCXlkRr+t7ZqkJn8otaiZKuBkXoNrKS/ttAExqJhN5InwLm638/RijyOAiUMDRPBKupWcwIg==","signatures":[{"sig":"MEUCIFEsCm6usGBs6wSCFM7qJtpIjm3b0Vja5TUPI3uuczNyAiEAitNnXxOCaTb1AKU3pF6EK2dCsMnVQNQHulahyTkLqAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr78CRA9TVsSAnZWagAA2JEQAIuwedaTxsh8NUXtyT0h\nEirC/EsZ/729kECO+3Fq1kMF261oVK6Otxqq11cCXKYvnsl7W3R8PjRD2RAi\nehfx8NtMIkHS293xo3C5Mn8BfwDyJpFOoBQ8EtB2G4p16loRTXdaRGKkY3ci\nvXU6ZGMFthbcKNvO21atTxWQLEMsWUHnZxJlDgBXxJLwXyfKbV3a9qSw/Qef\nxAqapzCOpDIbOIGIrZ2W80Iw29hSp06sIROgZyCQqHg/Fh8NybR/V9e3y7Tu\nr7HVYp2LkvDOF/0RbhPhAc89dyo+hCONZAcisfego/RgNqC5Ah+U3jo3sjzt\nF76125oCTDreAp8YCXYvrGPUusOxvW/wutYwcJ3s0Zzo2XfSiKCMy2F3vo71\n6dMS1GLZotT23NwCSfu1u8Kf+7IsUOmer/3Sms+k43uEjTdX0/2G4pS6AoRv\nWPxq7/xF27+vObdWUqenI6yAKoaGPJXZsxOswOBhvF7STEnbbhcADyY7A6Ps\nXndZd80Lq0w9RPxS1wYeTl7gb4WRS0Mze0npk0UiSoBFTYyXEKi1tAoLuy6s\ngSzczgWFJU3jOgTryF2pK7Vkn7b0zFJvD5Hz01sPnTSYLi1uD0xvFJ58IBOR\ntTh71aTo0jOYBKg6BWymmVpGtpFRAPuxQPm9Vm83dWcxfmbmkTSsbwctkYCK\njWwE\r\n=8aj0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"22fd036a79b754fbad742c64041cedbac73ce410","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.1b731d51b.0","@material/base":"9.0.0-canary.1b731d51b.0","@material/theme":"9.0.0-canary.1b731d51b.0","@material/ripple":"9.0.0-canary.1b731d51b.0","@material/typography":"9.0.0-canary.1b731d51b.0","@material/feature-targeting":"9.0.0-canary.1b731d51b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.1b731d51b.0_1605811963600_0.09041933905615362","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/form-field","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.4ae94ff78.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1c5c60a3d0b3c11b155a91909bfcfaace00960a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.4ae94ff78.0.tgz","fileCount":34,"integrity":"sha512-Zk6eXjjV+ElgDMVMO0ZpnkQ9Qvi/BOJMGp5SiUWZSTTSohUG5JzIDlw8vMdEIN93SWg03cjmgeRGTZx4gNbk2A==","signatures":[{"sig":"MEUCIDLg6Islsa7hn+hIghCsRZYZ5AFz8YH/6p0+z5BbjSrYAiEA6j7A1Cwwk0VAlpkej+ampZSd7M77HQczlQjEXZoIt+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr+mCRA9TVsSAnZWagAASfYP/39A7NYthLi/SOrYie1p\nFZN/BUcOdL/PFXqsAPL6vX2JmAzFKL+TZN8mPh6mnGv2Jwm7KipwbjUDusdS\nc4zytDqgUHzm613tngbswoE+v06lBF5rbpG1rs7kEFRkaXp4TTOq52Z2IIIb\n/Qwz+qlkYjHbD9XO0AmfcFYRXk6M6NIQmmCiEVOLMBlQhUtVWBM76v4zJuai\nNtX0G7jJmR3Rex+xVjXHEiU64O9jZFE+7wGbZv/gpYKjkP6Lq9wV3UqiBLoc\nVE8X3QX2v31L9/uA1Inq4wUer2LCjHslhuk8jwkFvbnOL6nPj3TIJn0xrwTn\nxVEybqLu8HNmldRKAPCwH1s4qbZkOARKIgJlLkFoylntGg5k79rJW4Z1Oybo\nDAgepY8MOMlsKJApVUnO1lEvZNVugqlC1fqlW/3Ik9jHo2dDyNzx2DOjk3EA\n+OVViPARNjzcy4R+ySiXczDFv5TXWL80Ag81Rru8Lgwt609/6X61ULZgiBzW\nllP0lPsdS7xCuWW21V9/bJUaLKNQGzb7Gh98bnpWiLQnqFXwWKuNF6M8zeCG\nAJiDWpQrSfD/NgaMRVMrGbYQL/8NbRQwlOpYUVqNfLV3W49ElJDlRWPDwA/X\n2NVZbU3zLZ1PMMQTqvAv9ZRyXZgD4R5X29aS4C42er09RWkk2asLWa5bQtUL\nzpdc\r\n=tNey\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"34c69ebecd44026cff9ea0d681fc2be3de9900b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4ae94ff78.0","@material/base":"9.0.0-canary.4ae94ff78.0","@material/theme":"9.0.0-canary.4ae94ff78.0","@material/ripple":"9.0.0-canary.4ae94ff78.0","@material/typography":"9.0.0-canary.4ae94ff78.0","@material/feature-targeting":"9.0.0-canary.4ae94ff78.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.4ae94ff78.0_1605812134471_0.3697133511636257","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/form-field","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.7ad038e1d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d69d447229a8afa95736f30aa458efa1b145f43e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.7ad038e1d.0.tgz","fileCount":34,"integrity":"sha512-xAbnNGTtBPdEGqXngCWE8ouqYRrHCcnOd2WtPJLimkhheOJBkgdo3ipaK0QOcW6mQDfjpUPE1NBG4RWZ9QPlsA==","signatures":[{"sig":"MEUCIBrronCext6sIH3JDlE2WX//M7Fi+TYRbSXM4Di3vfdHAiEA49acJj5CCsbK2WKqBpVeXC7EXFzhxvOr3fsOvfx4cL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsUTCRA9TVsSAnZWagAAt40QAIt4KoepHiXwQ7e5CV+/\n9n49RTZImXuwNmtfS/FGmNm6pi5y21xYXDg4bL8eJXVuC5tMyO2MYL8PMqg0\nmhDujWbGM1NOWt8DX6f7GrZrvsnWJVBAEdtKxWO8YGjnw23PSeUVb/1BdZvC\nzfvuQicrrunpnqF3xMijb0C9CFxEv2OFJJqtOosA+g5Va8scT/lyBKxXCbqm\nJot0RBw6MKRjeWA58mqRp7Rxv/RwssJ4uyE7IUB7MmgzNHcJoL1YI+STD3Ky\nLx5I42CWE9yQyWL1fT4LmAriC6Rpbmy+NPDj9MOs1X/Q7CoaaqAsPU1nnYIH\ni4mN6o94+vnPAfqcyq3jRudZVFZ1aMzmbHBaQPurkgc+52nIBVYzdtGGD9lG\nFKUgByZ2PXinKag0GX33EojIpR/DAYBDBfz/nE2sxa4UmdrVwdAXLd8eBis9\nnWg/R66Cfh5Fzga/PF1EtULnxVRoU0XGMq1qPMztx95dOi1/YSANUAwEecZs\nvHPd9bdwja6fWllJVD4J96XITx99jbrcqva98kFbAZfhLikXn9msyl/xggr/\nqQ/lZbjnEAxsnefocweKoPcDXYtWQlI6iCJJSFZv6It0voFQDCsMmD3yBse2\nUN4C8Shq4S5LD1aYzRd+FfCRD+QbZce7OWdw5R1oibKJFk8aJfGxz1gZ7s0L\nKJlx\r\n=kWrm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ae5e88e00f948f916eeb8f578dc80b6aa2084116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.7ad038e1d.0","@material/base":"9.0.0-canary.7ad038e1d.0","@material/theme":"9.0.0-canary.7ad038e1d.0","@material/ripple":"9.0.0-canary.7ad038e1d.0","@material/typography":"9.0.0-canary.7ad038e1d.0","@material/feature-targeting":"9.0.0-canary.7ad038e1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.7ad038e1d.0_1605813523466_0.6758468340588655","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/form-field","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.a41527604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00cef7c1b43c401be07b116f40ec3cfcb151ad2a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.a41527604.0.tgz","fileCount":34,"integrity":"sha512-8HcJuuwxMyynuHxQqvZvN2MdV3g2v2CVVHMSxUK9bNp4dzh8ecbN4oxrg9wr9q6uwOC76XCuvYO2wOPaHvsBwA==","signatures":[{"sig":"MEQCIG+HlUWC7SsybWiPTqxhwjNIMgBRgQl9RgrdhOtxg2pjAiBugxStnnPjlcj3M8/z6TkXnolcn4VmfLo/WWzqG9etOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts7fCRA9TVsSAnZWagAAzDMP/jSeGpOhz1IL3xWiWA3j\nPdYAhMqtcWZ9pu8EuLjYjynZGa1mY8bM2ceh9ExkHIbJ7QxDFV0vS4VnEcjl\nIEIhJQ4JqPES3iwe6/IfqkvH4wLIWkE1TLYtFvXeSkvzzzDd5vyo+IjMelJi\nMExypWiLPfMkbTBWZyd4aiMPV8jrim7aK/5/EBADmA6HRnQoYIMiT8VnxGjT\nMZugOj7YtFpXfbtZqLanN4g6WMitM623h3We4MosQvrsr2Us35qhtsYra75m\nY7p88heypsXQ0gwwNHX09HRU9VkbV98wKlspH67t3qpzLQV6xMyjJ8WfNBMC\nhVdxjyxGocmylr+fmlLCUQeVNa2pBjKwsqKdHUp6mrZDHPdTS8D3+xWGbksy\nF9hlMIYwk+VZ3iJXauaieLQmfJ0acydnzwClFWnTyoyryUrX8viooPseqA2y\nqr4ZOCGZ8FyPRZEW0JW5yFr8GagQ3+DleIvzhEdOJX+k+mJKO1ajrjn5QJGj\np4QO2vII1MW1opxP/nxHt8ihDsL5yD5q0OpiU23pAlhNc0jp0zkXa0hiS3lD\nubKaFkHqa2yOgrAulZS2Vl6h1yuOQqBbqyHWHaEgLT1vWx4V/5a/M2DfRzEx\ncsx1czsbxbGOzmBZ9Rhj1FP9cHnm90CD0ADlLixBj08tPfCTJ8KQSbhL8nLd\nDzfw\r\n=uQaN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4419897c2a5ae382f471047e38ac619bef815058","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.a41527604.0","@material/base":"9.0.0-canary.a41527604.0","@material/theme":"9.0.0-canary.a41527604.0","@material/ripple":"9.0.0-canary.a41527604.0","@material/typography":"9.0.0-canary.a41527604.0","@material/feature-targeting":"9.0.0-canary.a41527604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.a41527604.0_1605816030447_0.43950360143055156","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/form-field","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.7b0e2b377.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1dc6729b9aa05aef77329f70e3d6fccbde763e2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.7b0e2b377.0.tgz","fileCount":34,"integrity":"sha512-+JWyjn8r1a6+XDCcr1uc1k7+VjRXIbfXlUUZTGjNVKqPiwby4Ltt569s2PhNjBW69gZdzYTEpgwiGGR/YD98lQ==","signatures":[{"sig":"MEUCIQD8wfJr0raRpU9gF6ZwpUiTKFMsErYCyUCf0re5ZRxS2AIgRKa/zC29m0S1HPGiAypUdVKFqf+ChsFeFSAm9bB1eZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuEmBCRA9TVsSAnZWagAAM3gP/R0+uN91UOC/VISVnZlf\nzH6xNAHOafKs7NfS0j5HxpVOhQJBmb/XoNpErfERDsBjYZTKF5IX/J7voKr4\n8UQ/iR6q0HWqhK8MaJ25EwALHw3jXJda69dkAj9SNq8gbeWTtV1oyC/mYgYK\nfbNCRZMkfxbUhfJ+vaZXlTS4OCj70Rb0lv2GLj/owY+z1+OHJYMI3osKUqjL\n3mEAJ7adM8Y8gu2DH/VIVCufKR2hJJKHbRYLcvYvw4zy15lImxcTB6+2erCM\n5nGKgpxBmun0ex1YpkDxQyp6p8bmd6/ainXaDj48eBKw1VxA1+wM3Jxv0nUJ\ndVdEXniNBk2UkIxrzrkf+rdmL1kHDDqXeHK/Hx+jRIQognlv1x5xfufBZZHo\nCGhhqu/reQmw/3JUXmh2yri4xZXt/gcI3Y8rPvzP2UIha64BLZL5J0QiMiLf\nnn1isQ3/hIf5rYDaGbUR3aCeg2yqzNGILsCAxflGMICuu9+Fu7OnP/1PNpxJ\nb3ETVUYTGKDsvE6ai7UjqvfC538QPJzGI6/P4pnAPrmWuYcWBZE0OW0Kp6ZB\nzyQTP1oWNv3GE7iXxNRmGxt+M85OvRYfFLOrQ2h4IUOl8vq9AngCCDqvid1C\nsmvlLR6+39T+WljUPHuCRiuINwF4TKS2qzJRBcMdmGd3oztg1vpfBUhHMF0+\n/L7C\r\n=a1p1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"51086f360a63319c786c7b166e515a34aa76c112","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.7b0e2b377.0","@material/base":"9.0.0-canary.7b0e2b377.0","@material/theme":"9.0.0-canary.7b0e2b377.0","@material/ripple":"9.0.0-canary.7b0e2b377.0","@material/typography":"9.0.0-canary.7b0e2b377.0","@material/feature-targeting":"9.0.0-canary.7b0e2b377.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.7b0e2b377.0_1605912961126_0.9468635173532673","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/form-field","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.c927a5d05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34bfbbd9059381dbcaa02db6b71527d8a35eb9c8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.c927a5d05.0.tgz","fileCount":34,"integrity":"sha512-6A5fv8sI3fVl/TZvMS/WcDEGYqrAnQE04Wq1fPJ2XU7X1F+EQbLBtcZonc67qhlOzqimBl8icP5UsMYRTuVGfQ==","signatures":[{"sig":"MEQCICEr9ryFgDSZHFI99ds65UblE9YVwLvcqG1mDxZLkzuiAiBzj3QHbM/0Bi46of9o8ZvBklZ4/9keCGPd8ivfHqlkJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBHiCRA9TVsSAnZWagAAHQYP+QB/m1E3D1ilL0PSLK3z\n8UG7ArwHfKN0qwL3oChZwfGmOi0hxDNi0bg7Jwf08S3BP6Qev0UtnCpimnzk\nnzJ48KMZ/+pnE71hQyayFmCGL/9V0OPwCeooNXpBH3UVi6SWQe+vpnABKS0k\nFMNHPxF9lii5YMcLhKk5pZ+mq5An84YxmqTDI38P3p2o8PIcIexOhZX1rg/l\nskmbYCkcexNGDkZrNO23M+VahUCHsMkgT8nHvZB7i/T/+1gErWjOcmsuB3D9\nxcBudWDgFFBCDYqCuIGlkrclOMiYjpcw9EqbkVhyyjKUmfMLY0bd70lrOd+G\nArMrEhlvgoZiIfQ1Xdh8FJfwqjD+fYCJ/qFtTSA9Sy+G9MHPuSxt0vf+UhLl\niSuF+y+SPHwEcbWWdzRUfDhfSEpBHZCEmn22DyXQNO5qakkNOOE4M/1hDkEw\nN4WKKq2P6DW+ttYZFzuNHmcOyqi7HPdfXAu+YcPxwKyZR6OVpytZFql/DYzt\nrEJ7Ol6M7hcY3ioOJKB0Kap0E8HVNt0CbhI39ew5BBe3tYU7UWvOaEYPS23e\nAwzG6q1TPzkpImXQa7DciCZGARRTC5FIdaBR2Nvrlq695a22zK9XBfO4sNkk\nhrfS4vmPJ2KG8CfRiS0rqHzoThGXmdzmHH/0O/M0jOxwfPO4o2fPGtRH6zLs\n8lpW\r\n=ZKuX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1e41eddb7d951c0eeca983e08e3fbb7b21cc3776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.c927a5d05.0","@material/base":"9.0.0-canary.c927a5d05.0","@material/theme":"9.0.0-canary.c927a5d05.0","@material/ripple":"9.0.0-canary.c927a5d05.0","@material/typography":"9.0.0-canary.c927a5d05.0","@material/feature-targeting":"9.0.0-canary.c927a5d05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.c927a5d05.0_1606160866317_0.2873909080631025","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/form-field","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.b349b5185.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05a3f1eb0870678c0cc3bcffd1ce644dee7c1fa6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.b349b5185.0.tgz","fileCount":34,"integrity":"sha512-tegRPXwhsL+ZWR5jMumbvTMy8cH+D14PtMrBmm/lRpM2XVvZe7e90X8mh1XMwyStTF4g5V/xDvkc8tT3obuu7w==","signatures":[{"sig":"MEYCIQCdaELwtuxZUnG4bhesECumgK2jKp8GRX07y37mpQUm/AIhAPdm3kwtacaJvXhmZpsjh+12S5UJLM44epVRfzkuQM9q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT44CRA9TVsSAnZWagAAQecQAJIiOkt1kmBMalIsphEp\n1U6+T3qJT2AfhO10nW1Wv2yv5MGgGhhndY6ckCBPJahCtdEejGVsxvcpQDmB\nkUcI7hz56oZmNCzC9Qk3VxdvE71wXP9QGEQlbRfZKBfBp5hUUdqqx1iVzDEl\nNIgB2fwWErabRbV6SJQsMo9uxsTLBgqt7Xm9sQSl7HvRUUuTP7NenBGitlfq\nPOAprj8xOp4t0ATzK18MsMt4br7e9T4nFikqxvKpHK6PqyLg8MZSSV6jcfBI\nK0VyXineVHTNXvToSKoz5Xn6gDZXIldHs6eM/BiJdq14xSkjxQTxODRVE73e\nOZuW8fCo5rMDO+XaP/zNoeUJAEd18F07+mVthnooY47DTwFPhil1zDlI80V+\nHE7XedHvKz/BtSHwDz8pVbXpGsdpCZYHUhUF7IqgUwPKjfwfTRaoNequ+GZo\nAibNXJffceVNk4jTNqDupp8H2y3SIos8JlqgeTdU+XAeMUiajNWM1lcgEvOb\ncZeiPgfl+waCYAHhXOmbnOA0Sg0qzQV0mHrkiYHFCbKWgoDKOPDIky9wcgdd\nmENCQRtKbzMqkRJC76oefL+aKJW7+STXvJlgroroWOyt8VZHCGy9GErQnsAi\nScMLpKcrU+aG/Vo13b1XOZLMil2YFhjaLxpuugPFp1ROil8CX8ik13lZyE5o\n4y3P\r\n=ERr9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"92e0cccba580778200706f15aef4e667fc007066","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b349b5185.0","@material/base":"9.0.0-canary.b349b5185.0","@material/theme":"9.0.0-canary.b349b5185.0","@material/ripple":"9.0.0-canary.b349b5185.0","@material/typography":"9.0.0-canary.b349b5185.0","@material/feature-targeting":"9.0.0-canary.b349b5185.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.b349b5185.0_1606237751802_0.6845370391503358","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/form-field","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.9083b7d61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7683e774a9fe3cd38126bfaf4ef634a84e92aa26","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.9083b7d61.0.tgz","fileCount":34,"integrity":"sha512-WBL5Lwm6/kVT/HyLpR8Zing9IDOgTd32ZDVGjLHwvXc35WS7+cGWVz7esGnQ1zfZJHmrwbZzMOIWV42tCdKSEw==","signatures":[{"sig":"MEYCIQC7kRqCoOTL5lKhobQTud88QaJJloCcK8jdQUdpUc8uvQIhAJVnVliLYpXHMSQnV79bDBywu0zFGYA1Z7+gQYIAL2Gd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXgaCRA9TVsSAnZWagAAHYEQAJFTlbJ3ip6Z9Pv8pPtS\nW5/erADRrJy5WaKJ5dv1J9P1WlQkZhvlSLptg2iSk8WtvK1CavWwdZ2WUP3a\nEjdnO/TLU+L5dadCxExQNLDTO4+WzxVcd6PSHApAk3NtXfepdTu4me4k/Cuq\naFvQG3c2ZL6meRyScb9WwDxbR8vT284PxmdaP6RBx4J+tQ62R8HTN9RA+w48\nwi6QtE0MLmjLIdGBKLJr91OYwyyRiv+mr5la1m6aHpCdh6D9HE4R2gsMXSaz\nE/iT47EZlvIkzegq+U6H00k4MZvM9/B3AImZ4GDoWYDeHf9/R8QqNtxUy+5z\nkqTx6SXjswqxNH6inhUsDp+aQOeewx32dSUHJ18wwcR3+wn5sOtRkgU740BN\nBOrW75rz0Je90qSf2M1ZX7HIMUOTQSFHFAjoYv8BIKpl+hVKMc802LslWgbH\nTBssx0H5EhWtYkRPY8HvuOn9UeFZy3TQqVQY3j8/JYi8RpDC/RjeQYY9BwIp\nd4EMGv+5ZjnJ7YdbB1LVRD397f9YIUroHjX0yyksHQZ5CNXWOOKgPvEqmB1j\nimw0ELXz3tDP599hqFo8xQrH5QqMyfz1H0lBT7gOJq1JEeaCOephSri+qqsJ\nA3GM90OQ9Ye1/KS46rSVz41kEtApqoMalbRVKwZGTK0Lb8cIVhRgktVeEyu1\nB68I\r\n=ZhW1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c6192773b6d2ce6a74a5b464d7df3e9b57b238d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.9083b7d61.0","@material/base":"9.0.0-canary.9083b7d61.0","@material/theme":"9.0.0-canary.9083b7d61.0","@material/ripple":"9.0.0-canary.9083b7d61.0","@material/typography":"9.0.0-canary.9083b7d61.0","@material/feature-targeting":"9.0.0-canary.9083b7d61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.9083b7d61.0_1606252570446_0.5720757303621005","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/form-field","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.eff7b46ac.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8da9805e67dca6e2a677f12c0adfe8f4b44b43e5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.eff7b46ac.0.tgz","fileCount":34,"integrity":"sha512-+wHfOptsqbAd1k1/lODOrViyNAbziNSSPMH9qexMhihMT89gZOV4nAM4RIJynP2IhHHOVIs+PjaQvfHN2yi+sA==","signatures":[{"sig":"MEQCIG8GezHkSqgafS5XWNAYu00Wn5W5OUa9T96K3guJ3XaGAiBwnVbh4ml35iJPJDyNdKzx0pC6noQMp/dr3A3QS5M8kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZfICRA9TVsSAnZWagAAOesQAI9oX7G+7QYav/diWirk\nP92MtBzKef6r648WdyTHzgyxFkYGmVCLhaIz/VCr1Kef7jrxAm5Twnk2NOeA\nnWkDL7q31edcjm3/VmpbtaWPNFLQ1F7in7AvZzHZkB2RSzK88eTe9cclY/Dj\nKflu28WVBdqQc6ngGXfCusB3tBUZ3mCTApCAShiq+V89oBhJAoJB8AhUIcnB\nktIHKh3upy7XYJTsYU2gCU08rZoervVYD5kdkbmUhMxIqrjjAZOKUGM67ZqO\nb68QnwtuAO3VGlXLQnMoWobS3vV4ktslNcBSdeDwpJsZAYxCZ/H9Z6xTwPHs\nSdCRg22rICSwk37kQiG9fH4lbhZmPY2Uv0DS7q5ym2Vmu2my+zmZBzDe9hwa\nmiaBJBgacfJn4T8v53JOOkMTYXbWrk+f54mZYRdhMXM6W4t9cLQkriYf2DUC\njhPQJ0WLq3J+DhoqtYGh7sdQYVLHwuL3OdULAHWOO/1MT1gHeQvQ9/MRqShd\ngo+uw4E1rsCtgze2/e+XmZ+AtPvlWvmxQ3ndBsIloXbrlIay7F0ZwnaUlFS4\nEinFcJ/P/xuHnUCQDuavzShO1nFsiCrMmP5lFoA8IaPkqajfwP7zeMLlQ9Pj\nJO99BZPwHhq6cDo302H6nwqyjdoRBl/OrvdA4h79W/vxHLoomlhVE9BuGQYS\nA8Bc\r\n=MWns\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b8790bb41654e5c7f7a7725e8e58c9dd08551129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.eff7b46ac.0","@material/base":"9.0.0-canary.eff7b46ac.0","@material/theme":"9.0.0-canary.eff7b46ac.0","@material/ripple":"9.0.0-canary.eff7b46ac.0","@material/typography":"9.0.0-canary.eff7b46ac.0","@material/feature-targeting":"9.0.0-canary.eff7b46ac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.eff7b46ac.0_1606260679417_0.660521907298486","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/form-field","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.ae27b44b0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d333a3d5c9d26b574c1ff9510437f964cae4345","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.ae27b44b0.0.tgz","fileCount":34,"integrity":"sha512-UPL4FgicsYnwHsH+I2AlQvFwysqMF+lMZZJeogmgA+2Wo8wvy/iS8Tr7akeBbZhHnPGAG7iErJ3vcq0LP7sp+Q==","signatures":[{"sig":"MEQCIFyfIO69rbaBDyld3b4MsYcCx18qHKsQo+XpblAoMZWHAiBaOvA8qQE5DH7D3Bd/tT2JIcQTcvTeY6wTqDve3FGjjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnlPCRA9TVsSAnZWagAAkBcP/0LdM+LQU7r7V3t1cKoO\nLgl6GKGSSpJANocm21tkJ/KhGe9ROMbLVg5cDHxnSitLbKvUDdTjWaakn1yz\nJhSUzOrRdew1mp/WXWrvMQa/o4i7PGn8Gw7aBHM2ho92/qrN3uuuhr4NEiCC\nWK3aqW7+7v5s0Kpj4dFZQrG7qPkHYPoVTBbTPQx/Kj97PWWJ6RCJLnnMmcDy\nXztuBI8r6bV4Q/Vw4Qc94gojAsz+x6t5lVu+2DZf+heWCiqdhjQU1+6348TV\nagWYt6Sx9Gf0TRzEqloa8j3WuGO5LMi66Q151/0z46/0XIBSAXs/VO1eTm2U\n5cJPKSJJdwhT8BWphdt3dwo91mTG+vxND+XiUds7Ad3EQmtis9Y9MT/ROFjM\nhNgQx7aGhaN0U2dV4qi1z19poHTeg3tK0ihvG0G0fnPCEDKymqAlCXh89l4/\noCMhMMaIgLbVB+9vgpt1KRXg4jIBHN3va70G4Bl6gliSeK/zcuj7YhLVR2el\nCcMiGZp99toSecpg4rxyscGoBN0lmMjBw22vJFa2zISCcko+V/HqQm0A6jbS\nL0CMsFGbOQO9BskYnqYU4xmqlApzR3CxF07CQmp5QLxFLzVZOShS+Rt2VGEI\n6cCyXg4+/x/zPrCcpG/s3Q7avb0yQSt9/sAgxAP4KMElmOHZGRDqEhqBjiMX\nDRUJ\r\n=3XSo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"eb690fa0e9558b61ded00dc6e4b467cbeaed4c4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.ae27b44b0.0","@material/base":"9.0.0-canary.ae27b44b0.0","@material/theme":"9.0.0-canary.ae27b44b0.0","@material/ripple":"9.0.0-canary.ae27b44b0.0","@material/typography":"9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"9.0.0-canary.ae27b44b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.ae27b44b0.0_1606318409030_0.8827507739619092","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/form-field","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.2fbba2554.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86814ebba1e670ec6f924318368a15f59928b06e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.2fbba2554.0.tgz","fileCount":34,"integrity":"sha512-/9iBaQHMBQR6loe8VS6iy29cOy2pDPqmfGvDZ4/FZ5AWnwQyu6lT6JovxlCfAW3/kcCGFRp/gxd6fCUes0y3Sw==","signatures":[{"sig":"MEQCIAjUor4otd0EfeYNhUNOTArg+VigHvza+lsfUkoBX1AZAiAM46/cWSSl+mGIutIT1NusysltlRLo1U/GjTN6IsZu8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS6VCRA9TVsSAnZWagAALQoP/3AC3cHGRanR/yH/dw9l\nFYMrSL/wyqD5qgcUVhlB0gDc5W1EIvXALVPFG7A9dRaSoJJQZ8clAsqY3/3D\niQIn/g9uxFOi2rsI99IkAJum1b4+WyNtIjLvQSLSgzV0syTeRW+MCvcwDd+c\n/kpvvrDlzzLV/S7xItW72YEOx97dxpy0H48Xp3GbkyBLhs1NUyM7cul8qgzg\n1dPeshvtHE0V5Zvwfl4x/97sFTlAo4oxk7wr7Wd9g4FA31FG5PHf2vxJMlqj\nO7TBHZJzRq5FmZVIIdMMumhdLzYW588kpnSeA6L1AUMPnvrXTrqkfRMj2crw\n/MccYJyNxNRhs1AvTUjSOuwHx8PoF7x+MsyD5b0aCcEpRwZ8ho0z2t40eAGI\n/yn/m1K7hhAwKjgkkiRgMI2AFSOH3XVLokTkGJYMQGujTuMfxo5FbjvtzwdV\nezyMoKpRyTVHH1M7COqyw4+M+RrsdfqACEvRw5c/+7e3btgdXHfIH+/LTNm2\nOqTLuYmda5keqeROPaiulRtzI3wobT9B0dnTyXfxMtr3vA3x6Oty8V2R5TA1\n/ETqfWrGntDV6OgoQg3tYMgoUu6gnF3X3bU6+FiphnOL9H5oCiw50ZchXBEH\nyhy/SHdjUKKwvbv79xHFvnwyUPDaStHBlYbLY9FEYbnNy+Gt44v7bvTLf58o\nXvwS\r\n=3Fg/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"93356628825eb23bea706adfd527933f0c5e430d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.2fbba2554.0","@material/base":"9.0.0-canary.2fbba2554.0","@material/theme":"9.0.0-canary.2fbba2554.0","@material/ripple":"9.0.0-canary.2fbba2554.0","@material/typography":"9.0.0-canary.2fbba2554.0","@material/feature-targeting":"9.0.0-canary.2fbba2554.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.2fbba2554.0_1606758037429_0.4600148969190112","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/form-field","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.6d8574fe1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3da1137dea76fa5b6cfc1c855e23adae3431c93c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.6d8574fe1.0.tgz","fileCount":34,"integrity":"sha512-0psq7Iun5lvR8A/pCe9MSuYOYGTJsHJYMONaS0c22vOyTaMx1Vz9wfOGOey3Hu+dgGn/k2j2npdnD3n2iZ+dwQ==","signatures":[{"sig":"MEYCIQD45HjGjmjECEsbaP0aHAaj/ZxzeUHwkPkdO+6ooC0lWgIhAOpyl6Ma/kubzT222K15n30xIhtP3Ews8uEY7eojCLO6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTEqCRA9TVsSAnZWagAA77YP+wbYfVF4WrHCNMlxgrT4\njowv1xzfvWMDgrF3gyY1BOF9jrcYjY1ZEx7uNeg7s6mXuLhZtJmGR0vp4YoI\n218Jc/9XWoylLg+6hnHEDeD41sEQ0c4yECwTpP/abFntMMNgj7uGTdXpuXvf\nqmODpTnFPFZsf0Aw8wu/C8JD2ogGPVcNq/XnBtzv2z6pTI3ryGDTo6qEcY8K\nV6r1U7DNBdu6xv2Xti6/PgZ/kDbcb4tqbSIKw9ZqLlaZDxqjVaexzD0QjVI2\nXgjYvYGYVwlGIvIt7AklU6UEE3b4+JnRMIIfUGB/9Vclnoh/NKvxKGw0Jb2T\nRGiUqXg485VaxMVCeOAfdtA7p6r4uFPiD6rSGz10Kfy2bzBHXO2t1aoAYMPx\n6Xc7ahP81LQAGZLPDHdKp2OMcHUQuw2+QDYsk0Uf6cbFoYOIzRAbHyavCfyN\nhBlcgRux2iJr4xABCgrIBjLIo9YbC9se7fC86frUy8WU8HaYzN9b5IvevKEg\nVQIOX1yhWDKiliqmT2/+pmLK7bkiekI3tAnDg6lb6sTGvh8zMU0WUzgmCExZ\nOizhiUUHnqruOiw6OcFmVe4qnOs+6ddsRy9EGiW/7wmMRagw3Ag3OykhTeHi\n5gTvAWE8AfcZOilpsI6IXpHZV13abvmvWStWgt95Z7YZu0n6QBi0cOTlkz6P\nCIIn\r\n=3vX/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b98a165c81d2497f6c0e8e5652743d71d87029e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.6d8574fe1.0","@material/base":"9.0.0-canary.6d8574fe1.0","@material/theme":"9.0.0-canary.6d8574fe1.0","@material/ripple":"9.0.0-canary.6d8574fe1.0","@material/typography":"9.0.0-canary.6d8574fe1.0","@material/feature-targeting":"9.0.0-canary.6d8574fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.6d8574fe1.0_1606758697464_0.14925184564997518","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/form-field","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.fd22355f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1e10568c39dda2d51dd31f2b527cb8ce70d0344","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.fd22355f7.0.tgz","fileCount":34,"integrity":"sha512-yUHlYlmvyse3XGnGKuOm8xqiK0UVvU3jnrGDeVoKvNfERM0L3x/WdtobqHMgvUXMPhLQGZXV0SGI4H0aRo8umQ==","signatures":[{"sig":"MEUCIAT1eUoNYjxKNfYYBUnCJFqbP0WEXW6sy4mrqYttfk6EAiEAjcUJsIXnz1NcA3Yvrvh6aX+12FEY3I1wVeKqmmhZkrU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXllCRA9TVsSAnZWagAA5GAQAJVcOYZvHLlxIHpihs2t\n0l2NJ19wCrxY5Fh6eC9mwGGW6sxqaO5k/t7ONQ156FGmw8g+M4G2E3aq6S9v\naqwAR2Ifgq9ENPXfmFUpZXRc7fQ+AsQ4VDVF/vCe2pvB9xSi+0eaqk0jXzbE\nG5NiqexW9AGVoWReSHJmx7CpQWGu7XfqI9y819Jd+vnaWhkNryMMpuW9VQxg\n8pVmaXfR4MWMmEQkdhVpgWKsCAcs2yJduolaXvdZwLIjto78t+QVbyttJmY0\nrYQwiEWOodrAHPnHTM31ziTi/7Oe1gZHWBVQcuwqycVX/qhO5Hphwkrzg1w3\n4Q0DncXBSaN5m1Oxx3gEFP4fxlNUpfSEYolXuvdfCHFo+H7BBpNbxs2MCkpD\n/1v2R4tU5Kn8grEIJG5wAoQQL3hMS2io0m+Z5EQdpldTojhT3PLEASF/cvnp\naBE8gF5oRaQi2hbjISmKYDcHK7tO6eRl9gu5cGQYTPbN9oMxsnmwaX8wLnC5\naZp9EkcsSepRk7hyM0t+6a+4EEhOx2+quIsc6sMiWoFfvqDgHZ8MTs/q2yaT\nwTzjdwu2BlC01qhiG2BirxSch5NZ1fxttJ2TEM+aPa85wgOupxvwhGmZB4DQ\nvVW3MNJzC4AmCxfTSDJLf0b4jHBuxjYZR8qa2p9vfl/DGv1DL8fTHdSCC2vP\n0qET\r\n=cG5y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"86a40292baea3adb58a6c26ed8c68a9a425cef18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fd22355f7.0","@material/base":"9.0.0-canary.fd22355f7.0","@material/theme":"9.0.0-canary.fd22355f7.0","@material/ripple":"9.0.0-canary.fd22355f7.0","@material/typography":"9.0.0-canary.fd22355f7.0","@material/feature-targeting":"9.0.0-canary.fd22355f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.fd22355f7.0_1606777189154_0.30922648800706054","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/form-field","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.c4ab98722.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49b0341c3c6e09e5c84d582be32584d428a87d9c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.c4ab98722.0.tgz","fileCount":34,"integrity":"sha512-0jmnLNJuR1/LMmCWmrITM36/Q4vN0iI1IgVYTAKrjQBoBKIb5r+0MhsiGFzDhPXaqD+MHPyfFj3ZkLIttir//w==","signatures":[{"sig":"MEUCIQCNZ3M0+3szQKYtymxu14eqaxVB+/ABXVjo4Qg+a2RryQIgPG5jNiirPZs+DS2jcNjEWoypQsRKOW0ezF0lZWXKAuc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuZVCRA9TVsSAnZWagAAD9QP/0TlCJbTVsCjd2rK7lvF\n9+Uxs/9IsdVRsQr0hs5tsH1ng1VlPCvmkFyRMLG/SUsMMrr4a6GwBHqCge2K\nrcttBtF1XAyuso1qj/2U3U8Cb8SWaKZ7b12DwSzpxJQpdpRZnvJq2lCPwa4B\ntYtBppDfBpYIkmVOt/bsC3LBm47NLuP3OvivgTdjthtPtHrS/oU4pRWf0UF9\n/Z2NPb9UT/THo8UGuETV6b0avqK/i8TEQ7KfH2+uyH3zmVlnFsQHsUoibo9z\nQ8EV70vPEMXz2CL4s1JTluPmhLjvR20HmkCYf9V2A83yiDCN8GEeanzqHCI6\n7lm2UAj61tan0vLeWecv3nIis5I/dxbB02Z/od+stkKF7vSZQkMg8L2FpLxm\nGnPSg5+3HgyzXdOExEaGPWVx8+Uj5D/aCJLFJKGXJkmWVOX/0Gm4GcYkF9Tz\n0SYKUh8ITvZr9xiSbXF2u1PraQfT+KEyX25L9lvsAy2tntLkMd3fwjJsXHzW\nb19sNN/wxTLYr9EP4d5pSWJh7Jz1sANnc2HYK1FdinjY2Z5wnLx2DIMru2uO\nqQkg6oFV0kX0fsRkfgD6cPjFTG0MsoAkXPoGQgREKhHUwjWdUZnWthHWEP9m\nRaoO+68tpn7v0Fqc0gjZwOu0E/8vYwVdzsUnvbRwqYOwlFcvCie0hMs0JWah\nzpwZ\r\n=Rkc1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e6187eb74996c124e1abdcea72dfb697bdb1820f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.c4ab98722.0","@material/base":"9.0.0-canary.c4ab98722.0","@material/theme":"9.0.0-canary.c4ab98722.0","@material/ripple":"9.0.0-canary.c4ab98722.0","@material/typography":"9.0.0-canary.c4ab98722.0","@material/feature-targeting":"9.0.0-canary.c4ab98722.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.c4ab98722.0_1606870612794_0.5264410069944221","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/form-field","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.977585650.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e45fe19db036eab3f661886c565d1a7f42525185","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.977585650.0.tgz","fileCount":34,"integrity":"sha512-iccxfDYeFw+Lg1Nwtr6Sq4GX/lmKxRc57Z/+Z7fdzGYsKqREbmZEfze2T/5z2oUSabCsagqmm3Ewjz16QA4iaA==","signatures":[{"sig":"MEQCIE0xulqi/Y9IQkgDhJP9R5u89eeRC7/ps/mrCc3U5LQYAiBTY80JMhIRxr5RFCcK+INbz1p9vxrAFj56BL2OdfNf1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6fKCRA9TVsSAnZWagAAWTsP/0DQAk3aCqwl074xWCP9\n6lF159aAJfg/NJcFEnGkIl+WMR/XStCZTVnbImS0C1v/JVrcE6RzaQ6KBDOX\nIViDEQ6BvFgyD65jP+IejbBB6jHp9nZZDKpnfrWYa3UhphLiC4N26ckd/MP7\nlN1VqqubWUHnzNWrb8zkdk/LlISSzJ4ZX2IvQQQJGW+DgFx1l2yggqiC+3XF\n2On7/RkezjGmZFfXKtSBRDWbbWNuGAa0ATTamhqD+J3nPilOQUqsQSx1cyqF\nUGo0l6SvqwYQQPtpn+DNSfmqxeRTYTsFRJreZo5Cnk66kC3t1v5+mAuKtIdp\nCsvv0i496mDsUPPVmPWdaU9+8IDTcdNtWDFr+n+DJxaYbUZdroGAsWle9kaK\n7e5FiO+C8He1E7+h9xCookrD8uYt/s/olsr4HuWgu8nNkc9sS85nO4R+2Cbx\n9bGVxKhAM6rOWC8istIIvjMmhcUTm2wr9wF51Z3HpUInjoGpNdst0uAQZptf\n9Fmh0FP8Kx/JIA4OlG0aD4ewwdALylnWKfuH2lHMhcFhYsCPeNcjrsJdMvOC\nNtzK2z6rw6HDhpMy4utn18FeKpFXcupNSl7j9luk6dL+CCkWZxcbud3HzZbL\njBrIgzUpuZyMU+IUp3ZtZyEgveLNqGtDFVYM2880grgdkkiBT85Cl5V2zcl0\nqSXu\r\n=1ep4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b008ede8c0d581314d3b967bd295990ca8eee38e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.977585650.0","@material/base":"9.0.0-canary.977585650.0","@material/theme":"9.0.0-canary.977585650.0","@material/ripple":"9.0.0-canary.977585650.0","@material/typography":"9.0.0-canary.977585650.0","@material/feature-targeting":"9.0.0-canary.977585650.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.977585650.0_1606920138270_0.5208399920762266","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/form-field","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.c7edfc7b6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4346abb918de1e1bcece4a03d96818e978e1e4d0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":34,"integrity":"sha512-i1VB/wGd2xBW9tUWC+TwH/aeaijRCTLuEk2xKvLrQMvEI9+QHoKV3NbMvtrJMDWRRGqe2da9A4Ssk/xIvvce0g==","signatures":[{"sig":"MEYCIQCS6KWPDl1aFAoMgKuPjgfQY4eO/3UqFkScsazGQQo5ZwIhAKQl892aRjqJNoUK8VZAZF6cssoq6a7SahqTEdkVSqeT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6mTCRA9TVsSAnZWagAAORAP/0VK/GejnUpy8SCLyQzT\nAeDTMwmwWFSQH5uhTi2wRw7KBE0wlrRq/4kvpsmmZxyZjLxg/AwpmwI/eunL\n95vh/x3Sm/64uiwsX7l/rWt2bvs03M+fXLCPXU2UjgjlSd4+Iux7OPWBX9dq\nZieqs4q6CyHt5WtcOFJUKCysAgkyPOpp+5cNMbeYmi/+QttElMXEaszi7y53\nxzhSXsdqYdBXISdYhoBkDrJG6ON5hZs0u0es9EQf3G4B2wH2IZkQr16XpeXv\ncWaHYLzp1MYbUpeIEO8vHJLWe4f4Tjf2g65o4mCp4jIv5y3k8pCR3rB/BGIR\nl3zUWcBOpYi7thBHM5Tq5ZJvHocwSYOUHC/QtNTBmq3rCdJLzQfrWK2tOqBG\n6x41DCBxlmoFDj20NvUOQ5tbEu+0WIfvHMpr8u/yimDAtWgkCGZLGM1m+xK3\nUgQZd/c6ZI8mTXhOCt7KJDgG+ex9R1E095g0tzjTnnJqlN10fhLzIwYEAq8m\ngQRHDi0Bn7sAtd4A2NINK2OZe2YZ80Mfk7xlskHbGXVmm3fKserFtGEl8/qr\nu8a6E7sS6juBAofaYkeuaJAYeGk0X93U99fAuoAppGKuIcRHgAMfwq0OYNut\noHQMWObw59JFqw0qjejgA+T1k+S3+WwQHkJ42zLGT1eLUUgtdyqmfhnnao7H\ngw+g\r\n=UHYW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"791973660a1d63a77aa10d2bd0df7c0e6ea94698","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.c7edfc7b6.0","@material/base":"9.0.0-canary.c7edfc7b6.0","@material/theme":"9.0.0-canary.c7edfc7b6.0","@material/ripple":"9.0.0-canary.c7edfc7b6.0","@material/typography":"9.0.0-canary.c7edfc7b6.0","@material/feature-targeting":"9.0.0-canary.c7edfc7b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.c7edfc7b6.0_1606920594814_0.07678054327469841","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/form-field","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.4f3347306.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91e5aa785a838a1683fb072ea73040f8d25f3636","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.4f3347306.0.tgz","fileCount":34,"integrity":"sha512-aDHwancgIsomtaRkTLnhWDjCRRNn8b4zrX/HwkXp8fgHbsDqNDaqekii8d8fDo2bRddSRt4fa9z8E/LYilb2LA==","signatures":[{"sig":"MEQCIAhTC1mMW2/25GZtik1PHiz1s7O+XFLA4lP+o4QSA+bKAiAoX3MYBcovpgPA6HGkz+72Uxy1bDhYqPZn4iwl5XZXdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx63FCRA9TVsSAnZWagAAtWQQAIyC0alBX0pUJfkm4SJq\nqOrlT515wF+njoTkN7mjmbwkJTEzIYs2UF10TthyW3WpkrtTFG3zK22C198D\nqtKoLQi7yK3gFzDBh4NiZyOlFg1KzPkpQyA02Ulp28lGZ8MeP1b5+1b9Pu+j\n/Vc8HgnRFowDmp9V/LeS+M6Ss2yzeMLUC8qCaG8W0iSF2X7ab4u5o0zBjaBZ\n60gHr4XzltBmPiWHpvVhlcK0XLu8SqC6n8jlSpeCPim4MPRgKZgjaOFY+3Qs\n8oJNkwgI7Vt/hJV3k5yiE7Gshi8QgbNmy0k17Qmi4ol0AhNGXsCAXjEwP+zq\npsstOD/r+WwpQUO1LcU56AQNZNrVZ7f8/74Uwf29UcwPYZz9lJKnC/Cyrlrp\n9Cf8D7/4EAeoCEDe3iIe2cTdkasg9XyMd+f0XQ4NY8KWC2VYKTycUKYm4UJb\ntSl+3lOTBvhWALsA7iVsFDFlcEgjgukG4xcEy9G5mzkwXuyP2vuljPeRX5ex\nxGlX5eFOP7XeGnLFiA70pU5qNGWCvA9IB2rsGRZMpmJiByNgP2hiTQdS+J5T\neAVbZ/JoDqY4BCnvmufSSydgk58PQMN3UoJzF0KrTxGzsEkl9byv9NAdeEcn\nl/6IdzyeWS0yC7G1y32TeKj2ItF876jjswsAS8uynniCxIkjnn3Q2WWhCfp0\nYSqA\r\n=W3yX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"31d08595c0470096709a4d5518ba7444313882e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4f3347306.0","@material/base":"9.0.0-canary.4f3347306.0","@material/theme":"9.0.0-canary.4f3347306.0","@material/ripple":"9.0.0-canary.4f3347306.0","@material/typography":"9.0.0-canary.4f3347306.0","@material/feature-targeting":"9.0.0-canary.4f3347306.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.4f3347306.0_1606921669229_0.3116917768262779","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/form-field","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.37fbae10d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcaa3a9ea1310371f2b634ae20654a085e3a4e9b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.37fbae10d.0.tgz","fileCount":34,"integrity":"sha512-+mNxWc9qia/H73/5xW5/hg2cGa3M3YUb3b5JqAKFQHNmUl3xr/6o7KsYfK1OThsHG0c4psHog8qYd7EvkF048Q==","signatures":[{"sig":"MEUCIQDBauzy+F/vfONukZ3aW8UfIptBkKYLhI2wCEK9k0Vr0QIgeKVJHk331q63LObN+mMMmOGYDEFlf3Vh54kOcC9nZY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9oMCRA9TVsSAnZWagAAiPIP/2koVMNGFdXvEm/auT4y\nmWvgA5f2W/p7uz0Z5AN499YtgZRg3xEMoots7x9PUX3mKRKFPF2bzP+F08HM\nRUj+phwDJgXhPNlGom+dBaLFPaImSIMrv5LzdnAo+CnNYfxNncg6nXwHQ5GG\n1El64PC+BmRLiO5ThYi4Z0xBANdkF0RNm5B1sr09p08aO5JUkNwMlYVjzfp8\n/+OKb4cMQ+1YEbl+bCTXekbKcPEdaF8XSHe2je7OHrmFC2DYWOAAO6YwzaRm\nDgT9BiLs5l1QMKww0febSWm2A24fC+rlMNRXxCOkROmNGcXBZvh9BZepx9qk\ny2eH7SAIW2puRI+VnX5p3wForJyDtc6k/mhoa7GUNrIdZSkA1N7vFmRUFneg\nZh2n2NaDNbTLlw7pwKl/HePsMPAvkPk3cUVuTbPk+kko+M2PIHvM0jown2bi\nQH6SscqI5nmly8RuJ0PA9DUoPUGI/LNd7RNZwziOI29R1JDgSpm/ZPNMsu7v\nYgEpiMcIJJpmGK7VUVYAsxl4PBrsbX6YY57TzJ8eeld7/Hs3W38BGaqSOkPU\nbSKfQefPPDwphdJnSRm/8gT8x3bDPc6J4LXyhqmgyVtmDsBWTOKbQVVeNRxv\nupi6zY1fXE3wzHUPUy8dWjXhBUtGV4sGEnxJT0jh4CBAZKU/Fm/JXh18rsja\nXF3F\r\n=L2uE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"104ddf5dd99e7bc09a57e2cae74614b7726fa235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.37fbae10d.0","@material/base":"9.0.0-canary.37fbae10d.0","@material/theme":"9.0.0-canary.37fbae10d.0","@material/ripple":"9.0.0-canary.37fbae10d.0","@material/typography":"9.0.0-canary.37fbae10d.0","@material/feature-targeting":"9.0.0-canary.37fbae10d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.37fbae10d.0_1606933003591_0.05024729393828142","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/form-field","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.11da3c0db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8c7cfeeaf1e964ba4fa2d404f8f0cd34f7ff5f6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.11da3c0db.0.tgz","fileCount":34,"integrity":"sha512-0PvT+P2fZlm6hlb2KpRoaiYxVWiC9OenyzkL9Jt3CDiUPCsPjEpvjPYGnufuhVukp8W+37vOZoK3j2ai1BxY9A==","signatures":[{"sig":"MEUCIE0USOFLa1mIDpskWVqyk+yc/GoGnKsnNFvfv78UJSJeAiEArOpVvMzWzHyVpolITPhhicMlYWa9NWfsreB0+hbfp74=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/eVCRA9TVsSAnZWagAAn1oP/1eV5c1RH0GhrcWS+F11\nhcZtVROZIg+Pr6HD8cy2Czyd3gBO4RoqU8QYZoj9eRd4/z1L28G/rvqTBrxK\nV3Zf55tKFp90DjspY1TTWT+r3Fcb38C6xjY++K8F5P0Tl04zIhqvssnczfLY\nWN6Ompg1HW6V9pZvGITXDPnlGXEzlXmJubyBwAVyDd5sRM1c9g+sHSIaRQk3\nTZ8x3wf0t1P1jVu2mRfCjsjvoLdx2soPQK9ByPsDzaRNm73kjIpGdHcQxbSx\n73fBGwG4wKIl/y3Fp8h3wFoeYv0a1e1sIhdHWMC8sPfprbfuuT8JcCYF/JaE\nxWd0w6FdDVt4qxUt7oifxmHg5lIk9Q13AkFqIzjbUmRhOnBLmAov368FsI73\np53ddel6SBqOM+glN11CoF0RotU5pH7Ddcc/AEsFjUUWkNFbrtYWBeyDDykU\n1MIHRqvnSzklTvUY3T60nac9i1zPQ+uPrEM46G7KzAxtRgM0qtgUcJUNGlUG\nhZYenbK9LGLvqBPS/+xaMl5Ght9lb5Plls1rtnB8HQNFuIIMX132uFMVmItr\nhjCYlgsqAwhNHwYk+tCzh2kwOjNl5cmE2nqHK77Lvcym4ZoN/MimDTX0ytbT\nVUb0E5zriGBcFJ5QS5LoD8ufOoZOgqmPxhOb+miNfabktxO8z+KRgSMX3/Ie\nSSQT\r\n=s3az\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"db8b5af79bc8221682000a74eab75c30395590f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.11da3c0db.0","@material/base":"9.0.0-canary.11da3c0db.0","@material/theme":"9.0.0-canary.11da3c0db.0","@material/ripple":"9.0.0-canary.11da3c0db.0","@material/typography":"9.0.0-canary.11da3c0db.0","@material/feature-targeting":"9.0.0-canary.11da3c0db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.11da3c0db.0_1606940564576_0.4749928754226067","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/form-field","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.489d4c219.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dbc0532f1547cf8bf038b0fe24c90160d023415","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.489d4c219.0.tgz","fileCount":34,"integrity":"sha512-mNlJQvctTdV6s3ocqY7m8Q/bs/KZyl5nzCeiotOgKN62KrmtqaJ/YxAp+63hMICDNxuBYRlwmkLjoq3kB2iMOw==","signatures":[{"sig":"MEYCIQDB01N2k1VRgRSDhZy+MeOz/1TIS1uil0VI39Rd1cQNdQIhAJAVTIbkgQsI+olXNTmT1KOoVDv+E0/M91QAfedzNCoD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQRzCRA9TVsSAnZWagAAN4IP/2B8WHooK/dPIkKZoyDH\nvFy+Ft65XkSbIbkYIW/DnHsgVAyF1mUtIuPtB2LGNy+5xagLaEPsPm0WjAT0\noX/plGLzNM2Pej/D+dX4qStNSkEVF6CFO7ATiEhOTOuCWr3+/rJUnJcQAX8+\nBOVCrIpF7+eQKWvCTpf0qxHokdqYA28TWq0JrqVsLxLElaNbZc7eBPx+9Bf+\nag1BsYi6vJFEtziNeDWcpSazXNu9YrXk5PpoPrmNQ4PEnBz2ifTSCwyNn7JL\nxSWoVKdJdzIHAytG1l80zE1j+yjDNVCmrKE2mNL+mwXjZlVdWyQP3iAUZhD4\nKyZs/0ziux0go8sODCcC0iL6uR4dSLYcalxOm9pQxnnq864A7DaKzGNKbk6W\nhmip/73VH0G/bvArYCeC8kAdJJ4NQNaYU/XX6yQYfpL2ozf1Z8hTKIgDvFb3\nYBwzPXDhTCNKUMBP6k23DueouYfP8kNYbRB+DLVEtdB910OhVG+nW4oniqcX\nslK8baYUCJVwaDowatmFDCZFVZlwPao8z+Ny8ZQwf552F5gQ2XhkQ+tLN6Mk\n2yY4McoqknuQVEKnEmtwM4kroHQAO4jNbU+XtJcfTVYj3jecB3EZB70O1+pv\nYoInV3kJFhOXr+M/Gr42Td80LPwrtrujdlESTTFcPS/yO2WVRXIHxDaOpqAc\nbuSu\r\n=WLVo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b1c4ecae655bd87a48f6065e7c292d4b30cda43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.489d4c219.0","@material/base":"9.0.0-canary.489d4c219.0","@material/theme":"9.0.0-canary.489d4c219.0","@material/ripple":"9.0.0-canary.489d4c219.0","@material/typography":"9.0.0-canary.489d4c219.0","@material/feature-targeting":"9.0.0-canary.489d4c219.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.489d4c219.0_1607009394806_0.40651543715201566","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/form-field","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.6557a69d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c3bb2e74e710fb3438514128951a54c5d33a186","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.6557a69d9.0.tgz","fileCount":34,"integrity":"sha512-ByYJxoDUtaJpmgzsyKCM5UyWNdRfJHoBxM8Ya81+IYmzbrtlZThb3W3gpZ/5FvRhLqmKZ+asNd/ipL+DRqjE6g==","signatures":[{"sig":"MEUCIQCNBEA+bBjpafAHeWbKBNQKnbnttc77HBh0RERSKtJ+OAIgRYIBBrsHpsHiFOM8kn01MItlPEH3uN7FrjdWvAcrY1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQc5CRA9TVsSAnZWagAAYckP/3eLsFSuYvUzH2cSb11l\nteUNQDs7p5uQJN58KlAQZw14IWNnXakF8aB72LRw6hHQmj99b4ZgHL7llb8S\nrqLzuZ/WF+zPSK88mJBx7MCrhyrEkcVPpl9TCgYDxQOuC851PCJlK3gxig4I\nWRGzGY5FPcM2PMSIiSLCW2wWt13xk6xmDsEtUgxLLW/mXYAJNghCpPGtcLzU\ndmpJxMBraiWoRHKK2iNeNCg7NHuyIiAJEISe2mHwiO7Z4FPBXpnEoSvLjt2b\nS3/kidCZZ1H7J8OwrZg0Sg6F6XtxBzf3z0ugPddKlEy7fGLEkB2+mH8glTEc\nHiVltQYquW8Wpkc023fXtEvinu0yhwg2c2/7/ypFVsz7qiJLa6BszRY/gHr7\nKwRPKMIXpZbEQBSeU7ejMRPEC2gi/hzTOEw4rQPIhMRsHCNJrvkRxphDwYbs\nJu7Vrekk9EuVJSpwZS6Em/hAO3jVCjyNZ6DdLIBeKPThzdnZV0IkSFAp9hxY\nk25Xsf98bv9ltEg6rbZG9xbsZs386IFblVAAA+CxyXRDRjTLdX0FlYGXFEKi\nSYSxzRaEHHU5mBSU9WwohlGC8c6tdDk3b6/z88ay4iEXR76ENL/OciMFBUYj\nSZDk0jDjZ7yZvS0httA9fKK3Ga+VfU6X8XpA5c16KQAIqkw4tNawr6zfZAkr\nqvnv\r\n=kznn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"55ff05f1fcd2efe299d07cfd81279127a6fcaa5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.6557a69d9.0","@material/base":"9.0.0-canary.6557a69d9.0","@material/theme":"9.0.0-canary.6557a69d9.0","@material/ripple":"9.0.0-canary.6557a69d9.0","@material/typography":"9.0.0-canary.6557a69d9.0","@material/feature-targeting":"9.0.0-canary.6557a69d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.6557a69d9.0_1607010104613_0.7317063834357609","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/form-field","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.4ea1b7c69.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f79864e3b7f09043941d25a22db6614d3da6d5ef","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":34,"integrity":"sha512-/YfelaKhMeV0aQ33GbPNPffBvRM6O/IuB4vZbDhQoL4gRYZRhKrZgtm8xjzNZIE3cx73RK1a+qGOfpceRPMhLg==","signatures":[{"sig":"MEUCICX3qA7tNwWXPMzX1w1j5qVjkdJsQsmQbOqgqpoOJCDRAiEAv0GNPP8graPMRSwS3c3uwF8PScmZ15ehZH291TeqqAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQskCRA9TVsSAnZWagAA8t0P/REoLogGp6WECZRNLn2G\nmyxW3VKJKs1+0HJXaTno4Px6urV5iu8TgLCsNBn7SQMkIf8Poi6D2VwdnwAO\nkVoPkDq3i2QorsC+xWqTEBonXlW0fcpKc2Skx2WLL8KJ1sXIC02EefkrjDLd\nMmZdtEwsU4nErr+2A+ZOJybQ09xfokhiHdBoughOLmY6dAMJCtqp7iE/Qtg7\nBiTynZUJXMLnqrL41qdnhmPvnA/bhWID+B/BDybOQY2P5fd8w8pjRKbgjZeE\no8VD/B0s98wfC0IYjQyhbr6znjkkRW7f3MkphF5GAJG4D8GJQ+5ozTunbcXa\nUFOGLo34Vw6VTVHWB0iJ7XWP9+RH+0227HgsW9r/xOHDA6YDwAEDPDw7bjXZ\nkxhuDhWP7RRZAKUZvUid8syK3ghFPdtbJa7MKTYYcs4HCUoJe20yMKoKtR9H\nWJV+uEu8qDYaEcq7WzMmkKaCSR0yII2IbwZ4vVuhA2leYFOuK+cciFXFYXUO\nOCS7s9qHuf7ZEFXGfs5Fs/ZBUwu/pCuSNye1CUbL9tsTDmhHCbwdOJ/1+n3w\nXkFqY2Dc9+fdhplAr/ASA/NLw7Xuq83MSErYZDuUqwC8X/cOsPugfDKZKaLf\nox6AXS9zlNz8yudZFaHfiFVEQE1HEq+5rui0H/Khjk2ImbzAX9VmdXLe4EB2\nQXso\r\n=9Ob+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d7307ed831dded5d9e22a8faf595a7411258793f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4ea1b7c69.0","@material/base":"9.0.0-canary.4ea1b7c69.0","@material/theme":"9.0.0-canary.4ea1b7c69.0","@material/ripple":"9.0.0-canary.4ea1b7c69.0","@material/typography":"9.0.0-canary.4ea1b7c69.0","@material/feature-targeting":"9.0.0-canary.4ea1b7c69.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.4ea1b7c69.0_1607011108316_0.19112133917853869","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/form-field","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.eaeb78ce3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d279ba212e39f4fbf77e65d6b9abaa67099d6368","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":34,"integrity":"sha512-QRU9YBpGlcfvtFHq8HXmsxJp03B8Vk5Dtn9XP8t2sabjBcdcA/nmGUtRS8X2JhIRHGWltr3XKya4DvQVFiEXGg==","signatures":[{"sig":"MEQCIB26mVVZBkCtDZJT8fbyVvEkwl5C/KJ0cYVmffUf9vKCAiAJf7WypVAzcFdg0X1M/J/X1gYeXajmE65gAxawwhabLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRoLCRA9TVsSAnZWagAAmtAP/RJdxvJu0bFk16xq1Vl5\nmcRCjxk3ylE+IHTpf7Mx57n/jAmPbaT1g9ml7kTkEnzWGi1eq9BUbfjOaxHA\nmVrnBZ2aKnNTU3+U5ZZrWvNIjGxcE4NzvSrx9344iRk3290gbid7Yu/p0/eq\nQmN4Ei43nHkIGUA2oj+o5v0ah/ihu4rg24n8vcPGphhhQd/CMyDBWptCFIDI\nGIXOaaA5BNDoc53qgIf6Ndk/guNeVeAnFhWVG1BwM2QLgmrPwPMl0mSrWafW\n4IHwjiDo2/9HKVLAjd9/yDaAv0wSIQyOhvkfd4x4B8NuqV9DeIt/2/qJyIUl\n9C13Lekxt5xt6226ESBxDQvYoRlrlY/dO3Pd2Pq2qBDwORMnS8+9hEaMAijQ\nZ8HRfIjVuLrSDffBk8E2MMLyOYyjshiFR4Sz8zu21/N2vWACTerB9xelMe6f\nuutkxHITk0y2ktZjXNgtOS7WLlukfwZzqF627CPEEXHTZ+ca9pkIZl9Gfn7G\niSYwVls/NghGBEU1diNg8SGJnubWxCDdPj4DjP0iURozM2bMLvldUt1sllfa\n4Z7uzAwtxi6o1cbiiJTXve1oZzWb0n2KZ5S5ONA9NHBvYvaQekVZRj16aPIg\nkXcAsNGzq6RGBGO8e3YBG/PtPAwMFffSMNVqsnDB+1dxatgd/BzIqyNT8V+1\nVcvg\r\n=qDwf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9902fe5ed18fabe2d289f92e75dbf17abebe5a80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.eaeb78ce3.0","@material/base":"9.0.0-canary.eaeb78ce3.0","@material/theme":"9.0.0-canary.eaeb78ce3.0","@material/ripple":"9.0.0-canary.eaeb78ce3.0","@material/typography":"9.0.0-canary.eaeb78ce3.0","@material/feature-targeting":"9.0.0-canary.eaeb78ce3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.eaeb78ce3.0_1607014922760_0.6672459469431891","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/form-field","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.1c156d69d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f44c9704c8a4aef54376819573f835983686e89","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.1c156d69d.0.tgz","fileCount":34,"integrity":"sha512-v1KWGRj4Qf9SESLswtlrdm/B6TmNkQsh5CZSM2xL2ZXe/k/KNgbLgM4ofHJApwW3QWYVBfA8nT/MlIvJJivd9w==","signatures":[{"sig":"MEQCIDRNRNMYAXsWAozAA6mJmTIEkL1L1q3apLyezQah1esyAiAY+CuBfDtFryJnnEAFDGgYeHFazKpCy7PrVSy3Ekf4BQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU5nCRA9TVsSAnZWagAAK58QAJ5IcUBtmz941KHItlni\naoO12ivIkEabL5xzKPxCjnAWOiwXTTozeJiFqXPzWZjiitVRIMe5uzq98HUA\n8gxqsyDSn7PgqjKWr5KxDF2bb0DpCo4iAO19Lwg9o54MWZuCUIFrTKqCkLbL\nRdPNiVK/0XqzjX4m5s88DeW3/rIECTEUPkBkrmLBRG6sb1WUYW3icL5lOhDQ\nW5hUZEHwSB3MAoAKlpCkQrrSgIU0sUqcy7ccRVqFG7sAcXW7D4Mdcxl6FpKR\nSxZUhzMc97Zpyvcr5fV+k2dt1nrpOnZTwslLNRyqJoTZ4FSPITY4yC2GmOEX\nD2uF1fJ/nlRTuU4bZjZnxe2HoMhtfnphf6qrVIdu1xX49T7MvZxZj/Dj2zbT\n27yUNYLPzArn8mFUuI1T53NY7ZpN+R67A9a2tg+r9zjY87x9SvVQSrghf02Y\nVpEp8sjSk7DlkjSNWh7xaxLNoVfl6nm1PEktqZk7UH7PLW4S4PYBODGodMnB\nJBXnbO7D0VGYzf1C4y2lSSu+739yCvvXpqZ9ADu2aWG9MYWgLV2gh0LF6i1e\nIhGOk150C3hQEyEVak/u/M9+NBbs+giFxxYSuvyT6OL6HtDh6bwxAzh4cEpQ\nZEXZdimpAbZUsHWKsKBSxFYY2PUE43CYDLZR2iDHzpQ5bijAooS9bIaiTL9x\nrVgE\r\n=4OaY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2239befcb4baad98eef5bd67444b0f759e58a812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.1c156d69d.0","@material/base":"9.0.0-canary.1c156d69d.0","@material/theme":"9.0.0-canary.1c156d69d.0","@material/ripple":"9.0.0-canary.1c156d69d.0","@material/typography":"9.0.0-canary.1c156d69d.0","@material/feature-targeting":"9.0.0-canary.1c156d69d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.1c156d69d.0_1607028326918_0.5578110657693436","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/form-field","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.832668d33.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f45ee6747ba283f775250d3c00756360d5761d39","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.832668d33.0.tgz","fileCount":34,"integrity":"sha512-3ikIx2oHrWEuyGWvCncLZHXAl4p0Z6cUzjZhQHckbyo28VvH5lpEFU81Fy/fmnWXtY+ljmIqG3FkeT9YLNpbvg==","signatures":[{"sig":"MEUCIQC2X2emavW43tFhk5H1M/ItvZ0sAcJA4WjpZ0L2CH687AIgf3GiFwjI0puAbj3GHCB0WvFm4peKWcGOiTEpl8v/kA8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynqUCRA9TVsSAnZWagAAbW4P/jfVhtl6Ws3qQ1ZPG1lO\nDeA0TI+sx66DAsJbnza/g6tgG4DGxsqZkcenj75L9zMPj+EGKR0QKuSipNu+\nQ3hHV2wKFpkgPaWZKmyV9CiCStOA5VC2rsSmc+ht4l+/LFhMsQ/2w3QsHvoS\nBsKxNuzeIGXN9I5fs3WQB3EDYbDriqtvzp038WqhrcN4NyKLtoTxZr5igDow\ngPXo9KuyEvI8TGxas/tSjkkEs1MPlvDpNByuEfnzaOWifXaaZkOj/p43hmnS\nYY57vVSdkKltlbYSTIfnOFiNpYzP6hL0pcOb5neo2S5FO5YEeaiLeizU5lv6\nbQiEpoG5yvPKPCpvHrB60D1VD4E/S1Lrtv7yF9UKpXmYq/2z+nNJNbh5G0nn\nHB9hAAqtGlBVXuWyBWKHWgcHeluFpeLbK8u9t+WhEs5I1kM9emBm+8nrW/cr\n9w/qJf3Vd4zrR/BdRywv5lhuBzhq4Wa0m6Zfa3GCiOB82juqsX5FUoMKJwhn\nUuPreCuygJtG8vUSUleMZknVJQ4aBuSzD8czOrmMzWZKy0ZH24+SYvIE3/zO\nVfVhbuWid6jWnIwL6e4B4P08r38zTOy5FIAdfwdQJ76lxFLWP8whAh8I+lE3\nbsL2uktnvLTtFBIB8/iENdBM/wXgU84PB+GP6Gzr4+HoDqKI3u3m1Dcxrx2g\no76K\r\n=f0t8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5744d71a59950726441cfb1b4e3ae33706069b94","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.832668d33.0","@material/base":"9.0.0-canary.832668d33.0","@material/theme":"9.0.0-canary.832668d33.0","@material/ripple":"9.0.0-canary.832668d33.0","@material/typography":"9.0.0-canary.832668d33.0","@material/feature-targeting":"9.0.0-canary.832668d33.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.832668d33.0_1607105172098_0.6475208595344937","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/form-field","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.4321323e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c53c50c2001e31a9b8bdbc2cadb109dd038c594","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.4321323e4.0.tgz","fileCount":34,"integrity":"sha512-/d/8eYnejxgtokT8H0hnfABcxZx4/LVnTyeWLwwbf4vPqLFiYw/fopQAFwxcBvedp2FVHTTfWhHIWn7KIxvkMw==","signatures":[{"sig":"MEUCIAllq7CRWFEYAzbB8GlpqyDGNiyOftteVx5Y/zNporeeAiEA3ZRBhz7ihigXpFZl2ktjH2H3StQ/85pmZiGEb2CXeS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhINCRA9TVsSAnZWagAAoKsP+wTM+zeVklOZ0kpU3N6C\ncrGFSzkDCu/ymcpZh8bV9JtQAu7TynM+Ser+GgixkubCCjBRH9JmqDvv7J5V\niUF2rj5DdvZ/8v3OyzVl5dQLdx6wEyE6srI+hw0cfkB+5Cw//WNIXwsDWesC\nyBQ4cowBZMJRcKzkzAJ3IAm98EgKtjZxNyTgY/VKniHoJ+H+skiJ+qNaHh4/\nfA1QPxlTA1WAx2yVScPbyje2B7S4FF0A9BWzLHiZpVrcY6lKf5jXdBUtNK7J\nCLfikK/sjWC23DyWImPyFr+4xrmOXrCxmsD4L9miH7W+Rabe1vXJ6rvzDzpU\n8yb1bHqnuMRYLvHg/OsBFQ4RFl5mMr3pRpotpDOpFepxXp8D++Qrn+YIuIbR\ntVjwQHNt3offrMFQz43zJ68FwagmsozdIidcek71FY4H9RAt/Ndrxs6v8bY5\nvG1yy/IzTqlGs5kVwDuUyzOe/t6gDVMWl4LtH4WxssvijmaMv8vbyrb/rW2C\ngDh3aPRjDstbCbM02KNKD0jaENv/YlOI5rH+WRa23L7UaSAxkhsEOireqgxa\nzuG8YII2gpKXhr2YnfsbHiPvVJ1yN3aF6bTV8DzSbCCKkfGEpqRkVogWv4SE\nvgVQ1eXnL1PatZZHoftIXgrRVEpfdcrf5ch/8N5/oMBXl/Xal1wBlg0vag20\nkPDc\r\n=EOD0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a838a6bc72ee56a967d493a841d4c69ace1f3f13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.4321323e4.0","@material/base":"9.0.0-canary.4321323e4.0","@material/theme":"9.0.0-canary.4321323e4.0","@material/ripple":"9.0.0-canary.4321323e4.0","@material/typography":"9.0.0-canary.4321323e4.0","@material/feature-targeting":"9.0.0-canary.4321323e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.4321323e4.0_1607340556976_0.39860316674212704","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/form-field","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.2d5f32d41.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da164c369eac037b84a473e50700cea97c82493b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.2d5f32d41.0.tgz","fileCount":34,"integrity":"sha512-niyg2JbV82dQPI+RoU8tOE4BueFjIJEkP2GJolnqLOjh5jiTt1V4V/CfSS6nVy0QDd0sVdgUYRIqgeuC+MDILQ==","signatures":[{"sig":"MEUCIFbmzf9JP6RbWwTuhB2y9hhxseYICKM3l2v7HhoHtcm9AiEAvmS6ulIddmGyT1XVLJNCqiwNyGnMz6g3Ucof76nndqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzlt1CRA9TVsSAnZWagAA4ZMP+wR9G9FNmVwvBCHfqKbP\n0HHJHzXviSZd6nTk3Wjph6EdWuN4R6jIGSzBuICzHfJWxPAnfEfEaVnlitIR\n3496dCpI9TH4FHfsBk/X4uCA6R9QuiS+YMRQw9m2FIfwcQ50Bnddt5YJ1Lue\nURMINwgy62N5J5fgO/2HHdTYTmvBXZ2wvg07VBkNf8jFozvzwT1mPtLDplhI\n/UzAivltynQlTx41gWscamh4sKoDmIl/ZsGwNhx7LI/75O5YlJBRu2InPI5O\nTz+mPSKHlmC48L/3Rgb1U61rOGIU72bq3vFknKwgvXNW1xpFcnlFlibdp8Dg\nchTGMAIv1r7bP32cvEmxf6nb5O0TXOnXfd7nQFnh7hDWhOVZkRGQYFXT8sO3\nQ2pZ5nxWzN14xV99QwLni2iyiNj4OxFUjZqjG+A+wzrX3EBoeG+RrGPmWVFx\npq7c2/0CdU3yoNrNECIMh8J2vqNLVGk0D/hBpkv8lt5KZNqGrvc9YGI8Ugbw\nYl4Q/V16W4keYEuldVBc8oG1pdRgEdkZDEkrsV31Klt0/NVQZIm/3X6Q7Hwe\n2+PpS5FgXXiDW82JsXa95JYpr2TvS6cspptH4gLFYkYUp2vnD7wdagnI+JzK\nP63cvw0XygR8eGVXvdjMUq5RlqOgsymhlDVLK+Gr4dqb0CT3YAYuufuqFPUX\nRA0e\r\n=cZ+w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2c385d3016a738d32bd3c03bcc91bccf82981fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.2d5f32d41.0","@material/base":"9.0.0-canary.2d5f32d41.0","@material/theme":"9.0.0-canary.2d5f32d41.0","@material/ripple":"9.0.0-canary.2d5f32d41.0","@material/typography":"9.0.0-canary.2d5f32d41.0","@material/feature-targeting":"9.0.0-canary.2d5f32d41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.2d5f32d41.0_1607359349456_0.41782926424165856","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/form-field","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.8239afc64.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"729b24044770aa6f76a5939efb0bf4c06eec83c2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.8239afc64.0.tgz","fileCount":34,"integrity":"sha512-M44v2a4Tg0+GSt3XlENYLUMmCZg7QeLUNUhP/qbkGx5/KOJmdcVBmgCQdoezQKWBBQksIf71hUk6tmPwg/CXOw==","signatures":[{"sig":"MEUCIQDV6T2r9PJlfefksDD8CxHVKpJa1XvG0b4lI/ZGJUSlkwIgalMnXpPlnIfXM11Gsch8dAt3TCrcQcmzik3PzlE9UCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzodbCRA9TVsSAnZWagAAhC8QAInGpZDxewp//LSss4oO\nXL9a2oXfQ1TyOANlY+fHBcXtUhPFZgyit34+rEW2yOSTU76DI8ld6T3XKz7Q\nnrSb/hl1CridcEpo21iI0Q+G9MlWpSRDacGQXM+yvjDMBjl/OlUQLMihiUrI\ng1UUCg9MR66Ucc4Wwh7OhTan3rSiiwJibgJIsvCUySy+RhlPiUgxw26hhA6i\nQt/ZK3qdTYNcKBbLHIM5ebBU6eeCkP4VkPzqmLdC0cNKD6o36D10vr9i5nYp\np/vYMK+WLFTGoPnRyxIa6kBUj/xR0GVMn3qWRZNeLei0qH8/oy6WgZeM6U1n\nLyruCB3jBuLJmubGLjMshxcQMUWrp7pMRbKQ2ISkF+7X8ldDc8VzbVd29FDo\nV/lNh4KaT0vbMAy1kN//8JOp03nmZu7WGM+Ev73h7uhGPD769K8oWVsFZF4r\nabSkmLjYarkLL0lsgHcqQVFzovdFMHOjRj1EdFj5JRp2wsHFQNLKRuANSraq\nDKLsFwzBwZRKj5/miaK86X4cPLdldbkCq5PwwqZVjZKeHhJw2UerBZbWhNxj\nOllcpzBIGHYJYAWLuJPumKe/4FlXPAZ13uVUFmvtmRIAHbCjGquCJahIlO7P\nmc3yuNslv0bGQ/dTQD+/+ntTYOlSHZwWIWPsh7KteTCMWe7WIfCTHu5Emt3B\nKIfR\r\n=R0vO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3ba24284e7fdc10c5aba869e2a2d3175867e0f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.8239afc64.0","@material/base":"9.0.0-canary.8239afc64.0","@material/theme":"9.0.0-canary.8239afc64.0","@material/ripple":"9.0.0-canary.8239afc64.0","@material/typography":"9.0.0-canary.8239afc64.0","@material/feature-targeting":"9.0.0-canary.8239afc64.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.8239afc64.0_1607370586529_0.9804253104685698","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/form-field","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.6871336f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80bfb2cb3b0fe9ff65483ea37dea2d682c928040","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.6871336f1.0.tgz","fileCount":34,"integrity":"sha512-/sRTisxPa1cy4x6YSdr/3qovL7AETnS8pOEzoS7C8ISApfp71CsPwxC7zu5lPZpNqx7+Wr+8eLmzg3V5n8Gm4w==","signatures":[{"sig":"MEUCICyRfm95LBs+wvNVDQ1Tdi5M9aX/Wbw73c7ZbjYOcqehAiEA11ZbcWDbbTSyfkTFqpi308fOd/NYjAwQz+78NEMY03M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6NoCRA9TVsSAnZWagAA3B4QAKNXVrzAqLxSs2sVt3hp\nljhK900k5164AiXmV78QaQZb9/Hxgfu6lEUggr7KV3ws6zCOh798I7eV4A0k\nhhMndRJQSQVHF1Uu1o1EWHHd1Bfw91Mg1PC/qRZQ4e3QaXAqL+CSIYhKjrY8\nDajnP0wuP6csXwSULBeSuR4pQSsAUEoHsYG0XWjwg9eFsyz09kUBLzecVYhX\nPB0hUGXz0Gb/SOpI1pk9HepqU6TCCOU1MOfzKM0zLZQATFxa2TOJbGVMdgaM\nz2j9HRIGBcmG+YxVbazKzn9+VEh66Oz15dQcgqTgyAzId1ckyu6KE2BgcyRI\nHH0ydPujKlGIyi90IsqZqzgdD7UXnZjU5lO17xST5DKX74NfN6P1v6L97Zn3\n38KjouexaOEp19grg1389dyU9Ks7WpMJ1UDy7eEbVxWELO+ZlfB7diwM1AeT\nKI3djIiJpG4bL04pSSBmE0ry6A5zluFiivC/pbBdMyNZPWe+6tB3VHQ58Pwp\ndLhb85aACW0nnBclbj1Ike3xEhn0rS5XM9ecssdVs0XHvQ7DZcSlCkCwHbb6\nmw0RhYYAziYwdIUjkLTwUqP1tiGxPJJKR+rtxgdUXRJXTA8AZPafC76+S0RN\nLl03vfl5rgngxYMaAlp9aQ1t48QcM6VOC5EKJiZBn5t90Ofg0GccKHL/jDbC\ndW3X\r\n=/x9s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"aed20b07d4f2597c382a6ce4b7c723f6df0c3efc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.6871336f1.0","@material/base":"9.0.0-canary.6871336f1.0","@material/theme":"9.0.0-canary.6871336f1.0","@material/ripple":"9.0.0-canary.6871336f1.0","@material/typography":"9.0.0-canary.6871336f1.0","@material/feature-targeting":"9.0.0-canary.6871336f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.6871336f1.0_1607443303614_0.03234202078981885","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/form-field","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.9f718da94.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e58057d97cdeb0737d2d53581913ce9be84ac0b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.9f718da94.0.tgz","fileCount":34,"integrity":"sha512-enFTZAJ/ZsjSifOSFZhr8aHaMBSxDyi/ACDACYe28gBuHmXXC7F0cxBRPcgDbvxfC2ixzP2onfBnSY9+VFCybw==","signatures":[{"sig":"MEUCICa8OyRQzx4Wht9fIdTepvHFJ9t7gL2tbe56bHX+7eDpAiEA32AerT/gH5Bt5cRVk9Z3LYvR85P5zDYpwPM91K/wrlg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6YrCRA9TVsSAnZWagAA7vkP/1fKXU8FLkqpK7wBTTeY\nCTKMWnDpgf5tfN0dyTF9X63C8w4ne2Nnh3hHxvooIIYvMjXfIwOWTxJQIpjA\nIScNekKxPn/IRR54U4f2J0g4hiBVt45TQILP7kBx18DP4xN2FO96ubKJJu+E\npn/UUWfKFWu+z/GR78OEEfw6zKTs4TvtbICyhbvxyGLAODF8iwjkJbrWY7ri\npXXXfKjG+iceOxfgj/FZchs6vKn3nVF6JL/IAQg6NdBqjSbi5MDG+fhF/V4d\nVjza1A4h0PSXGdJ0i3BawmLbjFROrzWosdKpT5cTNNmsf5eLEe0hnh7aC2gg\nYPv9dPVk93XsCfhb9EdKaY7/sNUxGwgueSOC6wtwQ/hYHrIZjY5wt74qrCIH\nYzv2RB5hJLbGWzK3bLPlvvqTU7nTlq1IGiu9XiHYi4oFH/+m45OvcrAKnqy1\nIu0bwd2GHndoCzfQEAwpeF4inK89Acq4N+l2k++54nR5stivnbQldcQFm6Mj\nMLtXEYay9G0xPrgHS1qVPsvXBb8ab3bnKGSzwJWLIbshF+rClNsvQeDhgpWh\nOprh1wYCbI8qvGfBplmdMjCHW/o40jq2HFrTax0gjgO4COIFLkV/LCY5Mes6\nueelNu/+NSXjPi2haKtnZc1IDRNHNmRobC4SgFJqmo22MkwRG8lUb0rcmSrR\nqV+h\r\n=zT6D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7fb6692f329c5482f22dc9fe691a20fe4c6dd38c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.9f718da94.0","@material/base":"9.0.0-canary.9f718da94.0","@material/theme":"9.0.0-canary.9f718da94.0","@material/ripple":"9.0.0-canary.9f718da94.0","@material/typography":"9.0.0-canary.9f718da94.0","@material/feature-targeting":"9.0.0-canary.9f718da94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.9f718da94.0_1607444011117_0.05558771752310698","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/form-field","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.1fccb1418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"593ba24c6514cc8d3c01ef7e3257e59f240d1799","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.1fccb1418.0.tgz","fileCount":34,"integrity":"sha512-beAKylEU39Xn97nE3235v73eZkCPARMphJS6tOt7940SW/q2o/8dUAFJCwHQRSJMgA3gXNjEtSiq5nSMUlKEcQ==","signatures":[{"sig":"MEQCIAnKtDEdJkCcSoUKXUHm5hcxtAPxDbDQ4kXBIWPFdX4qAiAvrzOt/39BA7SoXnQl8vJc7CgyRvEA1N8esGnCEvKXoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6mzCRA9TVsSAnZWagAAl8YP/ij8yI4Xys7aPjggXIhV\nVEHYkEKSK15jx+btv9TBgB/5+ZadnAJFZGfx+iTAMh9eMtXsGiiR/Vg5qNDh\n/3ClNaQcAp+C+5h5oBcYTug/uV2T93vFK+xBGpLjRMkVqBW+WFh7FFn6e0YQ\nFp2lJKhr1RRsLTcCWEurF3chFvL9Z8qnBUfCP71lJQCLTowmIeolu/Kn1Kny\nnzxW3pDQOJO6CU/UVe53JbZolBvXTGno11M6Graj291K5ep0JeO+SNb+o8gI\nk7U+K3jVb7SiTGzp+NUa1DYSCH2zJ5Bx6HmSJJ8EvhH6XFzAaRFXxUzqf9vp\nhPAmwUXrCdLTJ2yNuIkBC5n62oVhaIOf6DJOa388FqLkXqn1r/cORwzRShLA\nfy7UR/7rhYdxHVt+JttblUSmt8gG0mkD98MwIDeo9VlpEio+/ENTJ0+Yn3rG\nkLxqKfXkMIOohI4nG6KiwFZ15Td/NxJ8Xmny/42gZ9bovWNVbigscgpa5CvH\nURb6AmpWM4GdqoqrEnj3qpwAoz77vmC0/PbBwl9qCFV3iIDxasHjODoE6AQA\nKR6kQ9eM98HAoSdnkVgDNbmkZ8j3Mzmj8RdKYRfVwdMliuaePuD5fJkcZM2z\ni/ueGPkygRA0cu8nBDuCRLRDhJ34EtUV1X2wqeR5hDsGyieP1zlDCpPnapny\nsPwi\r\n=xMaq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f9dd96ea7afbac37dca91bc879dc44ce4523c442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.1fccb1418.0","@material/base":"9.0.0-canary.1fccb1418.0","@material/theme":"9.0.0-canary.1fccb1418.0","@material/ripple":"9.0.0-canary.1fccb1418.0","@material/typography":"9.0.0-canary.1fccb1418.0","@material/feature-targeting":"9.0.0-canary.1fccb1418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.1fccb1418.0_1607444915024_0.2797418920026915","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/form-field","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.afb68894e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6e055449160cfd4b69b1c3564ef81de3b39721a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.afb68894e.0.tgz","fileCount":34,"integrity":"sha512-RWA7sTX81/kZOaVWlKPLGjxzMTS6sw/K/8Fwk4ihF/pToqJGHaqAoYQy66hU4NhpTYQNSiLHbyyS8eV10kNxMQ==","signatures":[{"sig":"MEYCIQCvdzztCrsWri8OgXOPINrcNyrME615mYMnrjZqFBJYAgIhAP+DFtOUPmvtVSH9vRro/WgTmY81f5BaIMLmJuPLOeE2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6qiCRA9TVsSAnZWagAAZhcP/jMo4jhkgJ/211mB7+1H\nU4edbPlHP9haFFXv7s0dteJgAGXYMQBvZL7bor7QhDyF2n2zX6NtUcHD08fG\ne5mRy83q2JjIbYGuWrJqZMETz1QgA+NgM06it/z8yGAu999kDH7Qmiy4RRC9\nSnN75wtRtV07MfUdWFLHPiiWrQuGNeZfifu8+chCMfailpaJ8gQAC1cqwnz8\n1mptevFSVqZ4ye0oTKlh2mV3BymoXTUnWDXtS28NGBoN80gJiLbFVbGWf/h7\nKsJVXbj7xQnoRSBb0ZahZBhW0/vRnpsXZUQeH+U1l5Af4JcP6FnqONXHft9J\nATWUMfTZbgRgbCtvOcSntd8Y5ZGkK/X7XkYBzW3D8o5e7xXjr0bRhBXSDj9U\nvv6mV6ig766emP6PDe15QP0BCfcjPKFrkCQIKlmf2SqYQ6VfJpD/xF4M4+Gq\nUR3X9FiPnAeoAvilKv0wVoLUNBkx4VZWxVpJoh3l4Q3524vlHGNtmzfNNOIy\nmLssjFgQAN7qxIl2x9LeUO3QmHGPVTVzRmRSNs/L4MzXDuqjlXiHxZC4eYrj\ntbs4oCzwA+6bQsBogPV031k26dPdSghISXG92CGHZSk8xNOJQIGbryan3dNb\nWyWuDt63szUWzpByo/XWgYDfjPkDMrHHvyB9IWOUleorI0G4ChihjAO7pQpC\n4sQC\r\n=n/pm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8a3ec1a501083d67f1c342fcf5b11a765a586ca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.afb68894e.0","@material/base":"9.0.0-canary.afb68894e.0","@material/theme":"9.0.0-canary.afb68894e.0","@material/ripple":"9.0.0-canary.afb68894e.0","@material/typography":"9.0.0-canary.afb68894e.0","@material/feature-targeting":"9.0.0-canary.afb68894e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.afb68894e.0_1607445153825_0.928401997765931","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/form-field","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.fd88d40c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bef934efe3cc2fe04f1515752d63fbed00100277","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.fd88d40c2.0.tgz","fileCount":34,"integrity":"sha512-Ag08hYkf1V/ckarLHu2Ypl/58v9R6hmMvQOP7Y+Ti3ASF1u01sLp03kWZTi2xduuz1pDAWtTvNMY/ClHroKgQg==","signatures":[{"sig":"MEYCIQDzfJZfuiruBMLMMJezrwcU4FUuEKvPv3NgLAMefNjS+wIhAKhxjvHz6mpHRLE2nDODA4E87PTPUdIAWb46F0kMpm7e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz63DCRA9TVsSAnZWagAAoEkQAIdPw+75aniXrjw3RYv2\n0JiX09siHip0607hjt/H6Xmf8XlG6vA7ZTzEot1Q29I7kY006Q+TIcYTr0if\nmamzPbQFo5xpByaZNLRCHwok1Tohi6D5+P7Ctx8pgJxiCajvcGvmYtrRbvZz\nvWtJbsehvlWavBtTVkVV1H0IJZxryR+24OSY//4z+/Zu66YXbTeewVB6HFCP\nZGg9wdiJy0EP0v6YyUFEAlOPlma91wOCoHk0GrQ/2HAviGsGSb7D2Nz84iHq\nyyNyNmkbLMZSsWUly119E+UtzW5lfn3p8hwo9RKlVrsEGN5I+MuOo15zZtII\nOLquylmXk0rMVvZWHqCMO9umB9VtsoY6cjVL7TMiPTELhCcPqqGFgKL4mlB6\nr7CXgNggH4vWmKz/s7+fZjibK1wVLwcIZYlkocem6mJhmrAN5eefq9bJhofC\nNKUDeBxNIRLax+6twJcYmMrJ2H2Xxw+DcCBVp8wmo5x9SLuQIZPmfhtAgYK+\nkYhe8gCrvZtX7TZUuSZphP/BiYgEmGHgu9uLzuIRscMKfa1C+opJb/IVTPeK\nNtlpRgvTV35JaOmbW7FeLkdzxdLM0dkYcTPIfuMp2LFemS6OpALOmm/s8AVY\nXyxiIdrGNL8QNP7kNcc8hoz1Q3q3OokbPlGUSr+AyARGrrS89USFHC00BX5z\nWXL1\r\n=WZMd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b0f8299700bd0ac44ef5acfdd0234b464d837131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fd88d40c2.0","@material/base":"9.0.0-canary.fd88d40c2.0","@material/theme":"9.0.0-canary.fd88d40c2.0","@material/ripple":"9.0.0-canary.fd88d40c2.0","@material/typography":"9.0.0-canary.fd88d40c2.0","@material/feature-targeting":"9.0.0-canary.fd88d40c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.fd88d40c2.0_1607445954309_0.8869725685474477","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/form-field","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.ba9e3109c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61f4d6a0b8ce1778db69dd847486ad0bb6103320","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.ba9e3109c.0.tgz","fileCount":34,"integrity":"sha512-4HsmJq+PHNLrRNmzcnExIbRY/9T9JNtvPIfvvk2mxr23OiLkVJgNBSnvvHyyJ3ysXlPg+KYFJruYEcxxh8BrRw==","signatures":[{"sig":"MEUCICK3JZA1Npmtfx2pYekiCLAWqRYxGC92TeqU4yivoV1QAiEAjCxqOWsrHN23ghO7KCmGodoM48aWyK1O5klU2/jdYV0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz859CRA9TVsSAnZWagAAV6kP/00LpPk6rWua2iNrJYju\nm1rP2DuTODhlOp6VJcyr4qxixh2MvScrPlY9LoZz6npancJ8xQql2YpWaex8\ndVubeYiwpdvHRsV2je/GExhK3mTjQ0KnxMXOcdTwDfG9jdUEc20tqNDhEl6d\ncjelIJbZnf5gSZ3rqtzD2RtwIe/N2zFRfFKcvax/4XZIZ7onCRVmM0xJhaQW\nIpcQ40Br3gctzMsRNfXBaBpGX23W+OzeL/7Fe56KzDtIZTxgmLrCH7hKR3LE\nOshx4YbS6ppuH4Ad++h49FbJubjyW8YLXyu0jC9D2LKOcdISPbwASGsFPzLa\nZrpO5VLi1astnivuOSOEPPWOB0AjN1niCPjeTAeJyk0i2QbkMTAL5cBuxZHF\ngzk9mJMwcJYzrJOu7ZT6kDHMfUen5sqIxeSjny33Ik+k0dlRUNgy59Jk8dEs\nAWf0dUvVbAfQt9kMByLWKJAzwQjd/u373q5BOTmi7Bg2pkvtJAKUTTOYcFwi\nE0ZMfpMT1QQa5TtEQoitl3dEDlPXtTL4WfwUuzhAUbmbN+ob3x6p8H/U6cp4\nePKV4538c5JI1WeTqhhDon1k4E7siapK3GP0TnaP9GOuyGP15InxcR4SGR8P\nl95EkzzJWAy5VqAcIPUhmBB7C4KaI0/kOnQNZiOKll0I4yKjiGYjp8Y2fni5\nt/2v\r\n=7NUZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"84bc4a2a193fb62b5721555a77b59e7bce321bd3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.ba9e3109c.0","@material/base":"9.0.0-canary.ba9e3109c.0","@material/theme":"9.0.0-canary.ba9e3109c.0","@material/ripple":"9.0.0-canary.ba9e3109c.0","@material/typography":"9.0.0-canary.ba9e3109c.0","@material/feature-targeting":"9.0.0-canary.ba9e3109c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.ba9e3109c.0_1607454332626_0.5444113313675047","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/form-field","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.1085c3b2d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"166d86934f4594af1a0e5279c183079a5d6efa23","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.1085c3b2d.0.tgz","fileCount":34,"integrity":"sha512-hElr2Sq3WwVG1PrZHr0WHFHW3GQLL8MQrrdojuNpd3i+1SOhheq0+yMDMTn9ijlOZetvjPbw7iZLb+HRse6GSQ==","signatures":[{"sig":"MEUCIQDAgj7U/KznT3DF2D9OolCXKUeiYNEx9jFya30bqrDwkQIgfnkFpkqmg2Xhm9nK3aIHPmjXHeIme/hVCESCREdbq9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SFVCRA9TVsSAnZWagAAGRoQAIRkwUS6c2K2bczL/Ugr\nhLsgbZviVlpCtOgjq3lM7qDGU8vHqOgI8PwG3/6zXJzCdCcyckRhuMTMjnih\nWy6mrF8PgGkBuv7Z4Yc0htM8HrRw1R48iKUwPwA30WIItGlUamUqsVbzH/JD\naD0LfYuBnq8nJnfa5PH2B9ey029+GpLpo3o2Jqe7yVFWqS6osmiO8pzHskcp\nNlBBHDXd/1KwNtoZ9SDyVvuHtH7xbfkPLuEg0QOVVgoixT8gkqfmr8tREyJX\n2sbcWZo/IJnqW+5pac1ZDi8DmurqNhIyD2WQFGwQpHfkPnOTxa3yte0H56ib\neJRbYDl/eMSt1KqTIjEaf3Rap44GGyYbwk4LMb9tGE1D3a2bPmXKU9BjGxFy\nlGQvUC57jort55MtekJdX9tzVKbITbOWJ6aj5kf708QSSHG3MQBQq0BieFFQ\n0nfHH4LzqS32TLUqyZbll7NA2poWy2r8m0T391iwftTlrvDFSAXLiel/1qph\nlNRDNDv5hGEgsxcWwmL27zpEPd2KZYzWgLfsBglEjtnIDt0cyhobdkGAVYat\nf9qDbHft7Z6LIh7EyB0iBPKfuvKPt3DcIzugjNV1ETR5Nyzsws9Rqf1DrqmF\nDPTPEGuxq3gDfrDh4DD0BfrNFCr1B1so8+3lbPICdJJ84+kTMzKX0SG2BZCs\nW4BJ\r\n=LLdn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a223e0b83a78bac523ca498cc8389f361cd0f4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.1085c3b2d.0","@material/base":"9.0.0-canary.1085c3b2d.0","@material/theme":"9.0.0-canary.1085c3b2d.0","@material/ripple":"9.0.0-canary.1085c3b2d.0","@material/typography":"9.0.0-canary.1085c3b2d.0","@material/feature-targeting":"9.0.0-canary.1085c3b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.1085c3b2d.0_1607541077456_0.9197302621006573","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/form-field","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.c5dda809d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c373e80028ee2648c1dc94ad942e6394d130b7d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.c5dda809d.0.tgz","fileCount":34,"integrity":"sha512-8dxVlFkE/wmG8NC1v+nzTxZRr+2oQ4uruMT4upFXr6lHlVQqfa9VimbNYhLi2L4D2DKJSGIyfbgvh/NZ43NCcg==","signatures":[{"sig":"MEYCIQC4zT9G8H9bz2K1FrQuEOe0qUd2xLl3zG/SBCfiFyQGWgIhAJ71C8KQes08y//savjnKXhqcUQPqKRZUdHvgcT+m4me","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TiACRA9TVsSAnZWagAAfcYP/Rq1+QLYPLonngTctP/3\nDasAMy1pTgDGZfZlKfa+MhzG9bmvIV10yFwXVL1OpJRgjz9XzTQU5T+BODzh\n+MwMcq9IIK8q+EeRhR2WbdOOXkGFqfpEyDkFRM2JyXz6hA7cdpBiO54/VA+I\ndg09QvHEJqTQ4NO4QWxYDRjgUBqIywb5yU2qBXH1J4xeV1N0O/pcrt/nmvEV\nsCUjPv7BtXNY0mloiKp2m9JxlqOhbuiXUjDtJQfz7bLfBzVb5aTYpVLdtp40\n7j6VPlDYGZdas+XudTBgjrW84U1s3XdkPNWfTvVhajs0zxZpX0ZCo8rqC+UC\nDjAiWLhJ75+qMk4lBmXTyomoYfp74/ueNvo9M0JZzTefxlOepCA+enLXdmEw\nbQD6JZH70g01LOQ+EZuEUCMinuzmcyUKMhtX6hkWXbWVy4c6C9ILuTub01uu\nPUb0s6ZtD1wQpB/PKHuyHFbfJrugo0m70f95yXYS5rUrJf/UUbhzFcdysfqM\n7uuWoEJfFJC3WLPPmXMOdmtCcy0gq2RLr6EtfGlqq1Is6NYkNg/8zdxkblcI\nLFPvBZoIA9v4n2h401zdZPOLHG6ySiwzn3zOZFvQC9HHxfDnqd9tXPGilNvD\nLSZyvF09dBCyJlAV9fMYj1OLxcdUuAuXk7y2e+akERT8/arDWsU9IiUeKvcP\n9+Sh\r\n=kOi1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c2bc7206e40f2f31377a09e53af457109018ff02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.c5dda809d.0","@material/base":"9.0.0-canary.c5dda809d.0","@material/theme":"9.0.0-canary.c5dda809d.0","@material/ripple":"9.0.0-canary.c5dda809d.0","@material/typography":"9.0.0-canary.c5dda809d.0","@material/feature-targeting":"9.0.0-canary.c5dda809d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.c5dda809d.0_1607547008254_0.7406740538271306","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/form-field","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.f5f1bd86a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ab704802873d7ba9231fba29b540c3d4792834e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":34,"integrity":"sha512-ApkM+elOqkgDtxv2MPvxlKsBzb+y/ofLq8LAMryAzLhX1Kht76QJccfltbyrzMjspTrO4IXgqGLgw14flLPU4A==","signatures":[{"sig":"MEQCIAlOUwQBBG9FOEYBlITNuEG6GkrswBzZSVxmj7ILkpCmAiBlQbe9IBrwNJb+7Jw/k2XB1bzVxghAWL7v4YfIV6Bxyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TzDCRA9TVsSAnZWagAACBcP/RgGtbXpxjGD1pUAn4ys\nhM0ft/GrzbKOeZXmwVxF14PK3nwEkO450Z+P4b1PaFK6aCMB7LBS5GLbwpvT\nE1RkMf2fl1ttmSigTCuyAymkSGCjg73W4+Zg+HgbYmQApqKeP/Ibj08bBe3w\n8EYj48uEVucXIZ1DF3V4PLrTPBUZQiVFo01Yv5ZNA2yLcnPpwz9XsQ67ES1e\nO8bftR4QuHA3+IN6gKtJLTCluJTH0EIGKayDxmMRQo6eENNTmiJ9a9vpTKsF\nqdONjeIBxLQjVoQ9waAS+hDvTHJEn9Dlud+pDr5786kNd6/Ow5NFqQ0DZ4xu\nXqCCJ08Oq+Sx0h54UYzec0zMNuXZShf1gqxpwHkpH3sfwbMqYefZnRET1E6B\nBQUQPZHxpoOTVi21kbUmKgATZEdm+x1aof6ItOVPAm28eaN1GMm/ibJNCGDV\niZRMgTk446Qn/NhwB87a5VIn455AqmMvCdR1Im3XzDeOO2FliraKcLbRm7Z2\nSN0t2KIqvOL1IN0jO1M0iqev+rTM/z2cWmYlsMEYqewL9PYWKoW5URoVmAmv\nA3d6YsMA2TSIdUEy7U7NAnCy80pL/dU05Z440LWaVG5CZpdd9l9JZiaXDvwJ\n7fGGa/1BCnBYZPWwxrsxShbkAQTf+xVeOeNHwbnm4PESl7miF7sQCjTGRoEq\nvPbJ\r\n=sbez\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"86cb1fcac08fb433af0662cec8583dcdf435eede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.f5f1bd86a.0","@material/base":"9.0.0-canary.f5f1bd86a.0","@material/theme":"9.0.0-canary.f5f1bd86a.0","@material/ripple":"9.0.0-canary.f5f1bd86a.0","@material/typography":"9.0.0-canary.f5f1bd86a.0","@material/feature-targeting":"9.0.0-canary.f5f1bd86a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.f5f1bd86a.0_1607548099548_0.9391245831085788","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/form-field","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.00f38200f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10aeaa7821c9f73b9f5037989a3cf1e739e57124","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.00f38200f.0.tgz","fileCount":34,"integrity":"sha512-fFckU5/z1kDjFOD5zsV8YvlelC63VRMt7agrbWHIoFRVr7qAi85j8nSLOgOfUIYC+HEJClOjL5MMT5vN8wDSqQ==","signatures":[{"sig":"MEUCIQCiROIHyDFtccEYJjZmQEzhhqRoUSJ34tAwNCu2FSs/NQIgKqTx0SiItvyz3chLbdEoXmHV+U9qM6Z1Bhrhc4bkPJM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05QPCRA9TVsSAnZWagAA8jcP+wXtGzIE/qhiUPj+5Toq\nA3xYllFC6Am0vYDIc3p+2cQ0FrLKvskFOAUg/8hQjdZUa72xtMPRWWz5/Hr6\n8pgrBbRaxMdTifWnBRs96yZPY4D8LJ9YUUuw5Tzau8H6Xd/T2hDDm/GhMNHM\nRfcesox4lQZBllO/dSuaxQ63j6H94bxWc9MTOUExhBY1qtgohvcvZDc0w9rx\nlBaRoHcQOkfguCA1D5TDNPDYGtErdZ03RnWvOxAF/ifuD4OboY+BQl0D7Ea6\nz/vg2o0ms2nT/xZXMio3/6hXMTAVDtUU5XDnwuVQge7SpYIFP8MuBRw/uCS3\nznIHUpXZkAshqY18NWIHSIxd9Upqq2pahM/d91M49C61vUJ1NpcOjmPt/up3\nif12hkBzpBK1BPtz1HiF7avfvxEIN16nqVBk445L/J2Rp7TSvb2a6iWDavSA\nPTCqgjDjxNAHv3P94BGA7V/dRiJPLRo0TpTpUkPIp7rwcYjYUHxlP10LFEcm\n46UQ7+mkVSJfAhrej8bevjwhRwNKPdtjCUs3gUfPm7M6MMdz07SsxT+osmt+\nYILAM7Lg1GvyvnvJphz7/CXJsbipPNe0EVitDF4waIHyb+eoapgLVdwsMsm1\n6BggjB12bkh/xS0ejBa7jprVHi+C4Gq5JGkXY97HoYgn19lqSMx9qAaX7SIg\nhb7o\r\n=ktLi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2771c0048541c1dde142fd7f565741f0dbb83c20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.00f38200f.0","@material/base":"9.0.0-canary.00f38200f.0","@material/theme":"9.0.0-canary.00f38200f.0","@material/ripple":"9.0.0-canary.00f38200f.0","@material/typography":"9.0.0-canary.00f38200f.0","@material/feature-targeting":"9.0.0-canary.00f38200f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.00f38200f.0_1607701518939_0.28723840930543654","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/form-field","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.ac41a5729.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ed7ac2e893374f830e2ec414674c1de1498d015","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.ac41a5729.0.tgz","fileCount":34,"integrity":"sha512-O3kL9ieBc09pBjMCviE8iw3m7Z9EALyztYyeKhMm6NaJdXLxYldBdHoF9x0gFPzShH4KBGbZnVFNuNzsW3s+eA==","signatures":[{"sig":"MEUCIQC1+HgjWgG6JW6tHS5d/cEPcLjTXnXzPEouYrhoIJlbmQIgYycP33XN60I4vfI+5xk89V6JTiv/L3oYO1MB5VC8RwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf054oCRA9TVsSAnZWagAATMoP/iFlcULF/mg7lCx8DV4c\nN4AJSy8xtJonSaD+aQAfiIENJ5QyE7dQmP9yuC5w8bryUiqYA25/No2sRgYn\nQlI2c6rEJTgemiZCXO2aHwkFr4DXt/++ujrQul82K90KLRKM280qGXSR9S88\n8kmVAEheSygp3/f4jSuH1JF5mrCJ0vw9niWCiucG07nqKposMxAXqvmlX2Q7\nS3+HnxLfWGVZxaI+qqk83QEKGw+WpvjPAM79h7/h3QBkmQZcEj5Q4wT7JHaR\nfofhvRx4eTOLqXb8zPMPUzj0+DG40tZwwmIDZSb7xm09ogejfysn0QAan8al\n4sdWWEGC8BPrPNJwyciQLAwpZHWYZbaSThPtd9M0cOHSrY81MZl4XTeajIe5\nAwCJxqQ/FYQHNigvMW6WqPFgyeSJNt585uHUWE+3ntO3XaWkD/sHbiVsFnuf\nLv7KI5CzQWdC/o8B31Z9+wPN4bWI1gFY+srFAQucaiRX1UVl9HJ9yfVufzNQ\nM1og7taGls06WxqwgzSp8wNvo/smfUgV25gpCU/4MPynIrCD6Ja2lIk2X/lY\nsHDJdVdcHJMWChWh6MTGeDA2H9Oc6/ZCATuiNJeLXSv1PKwQ2uq05+RFSiK0\nkhD17TemJzZqiPiz8pXPz/ED4nglAM3KCvjnba4L3vXqrYEgIGe4I8bnMJh/\nT6NR\r\n=N0Cp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a8313ebe32ee1c67ef38d5e9ba2b5a4ee2d08f77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.ac41a5729.0","@material/base":"9.0.0-canary.ac41a5729.0","@material/theme":"9.0.0-canary.ac41a5729.0","@material/ripple":"9.0.0-canary.ac41a5729.0","@material/typography":"9.0.0-canary.ac41a5729.0","@material/feature-targeting":"9.0.0-canary.ac41a5729.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.ac41a5729.0_1607704103598_0.17216504229778873","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/form-field","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.7fe0e4f05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9f5c8a361e504c73f50d6582fc18ccfb0e16cef","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":34,"integrity":"sha512-3wp33azmTNAkbsdXSPhcdCCfXO05jcZQcLrfZMSp7GcBn/oxhSQXysqRwHLDUd/BkatsgvW+Nj8jk+EblP1iqA==","signatures":[{"sig":"MEUCIQDXxJF4SV49pT0Tww4a762AkvaxvFXSLaPAbXppALrfRAIgBaMCRhv1hPsLyOtLr6jRrbIwRX9n+pklcYMZCjPnu0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06bqCRA9TVsSAnZWagAAY6MP/jYRXwE2wDycwe7l6C0/\nlnEjaKv8Wn9GXFwTFjXL3PN4YPR6iYeRSipRrU8ess0zCLEih/1oGgeWzXXH\nBan6ptixKF4Y22XiYonEG5vLVyH7w3aZop9RUwBPV4rnNJtH6ps1xxey7JFH\nz7Qk04gGfPkl12KvuGoidCZ4X7ifl3XTDqdbzl4nsMqZ5w6qjnFHR7bK1a7B\nPIw2XXTDgXC2CoFJoyRk2hg0yVK1HaeQ0uPjUOBsWAJrQAv/2xj6UyN7epik\nAlAcGU6md0UoPqWsTluZ7gUBnFsop319p5G0Q5ZgTPu4AgRj02zo2X5Ij39N\n+ESdiV9oxUIw4n029VBSMb7G899WJiajQvHQOFQTlYQ7BopwzuWgeCNPXYgz\nZvp7Tz0ZDcmZQV5cNYZBGHw1foWgNVkrG//1L/3Y6QieWKqA88L4MJss29wq\n5YT69jNdam52KuItkLNvYzdoap621ecaEFk9yDN3I9dfqSegeUY80qQUKD64\npixUWROVFTk9SRnifEY9XvaVOwaBELNSVwwWyEZ5Y2rjY6dT3KcpGJcQ+7/S\nIhPrxUzyE5zY7tVn86kH+7qGtHZRLk4orNRit/vBUZU7bHngnZtcYf0t6Agv\nTR12G+DTp4tJcaPTW9uL8fRNL0et7PV4U0rR5i1erf4jfa1ZLKHaM9uPMUWc\nk16G\r\n=4XGS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"174435b67952da2f175e31e1db54647a2722499a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.7fe0e4f05.0","@material/base":"9.0.0-canary.7fe0e4f05.0","@material/theme":"9.0.0-canary.7fe0e4f05.0","@material/ripple":"9.0.0-canary.7fe0e4f05.0","@material/typography":"9.0.0-canary.7fe0e4f05.0","@material/feature-targeting":"9.0.0-canary.7fe0e4f05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.7fe0e4f05.0_1607706345790_0.28907647283297955","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/form-field","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.9244508bd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46467b8988c2536a5a799bd1dad79266e73fe00f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.9244508bd.0.tgz","fileCount":34,"integrity":"sha512-lWjlbGrjn9h3k5TApfd+0N1JTRtJrC0q+sfZOnXE4ueMtllq7+cH4wpf9aJOZlMcx7/K3y4jGw2Yp8Q6T/xQxg==","signatures":[{"sig":"MEQCICKSiEG2x0FWkhJUUtcV8cPRBqJkk2yMkuzI9sMiXfRvAiAUEAIiPgpQkOcjFrQBWJ4fjJByCi2FMGzCMt8Omxy60A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08N5CRA9TVsSAnZWagAAJUYP/3dauy5SjNdxShwehFu+\npDOLDfTzpziSsAgtElZHaUKfojWfa/NyuSxwsQiQ5arxbQspDfX09gE5B11u\nP+elwyL4taWBqps0I3qABMeBiQVOnaodWc6lJC6//tptCOpGphD57xKH3t17\ngs9cvIo2RU1henTc8yb6H2aIheG0o6rHjJuJ8ex0+4njHRNXwSzxeQU3yahx\nSCKTZHdmZzmzzS/lHKytkX+lzP0kniXSov/TjryhAIueuDKs/oh5wCAg76qM\nM1At9eTqqiDLtvr/1FfkcR3z+UgIwmBbNZvZBNoMYTHFmYRBG5NxVHO2gdGs\nb3NoMwywPY7NgmW95uB90+86xLsMmRRAK5oRBzbMRc6KQwHo0gd4tcqe4jlX\nxkSYJ7qE4xxxRSDa/31zdzFQaLdi3OAxTltTqggpmPu/VlOZqLBTkBIJ+i9X\nxN5Xi6WEbfxu+0FnKot0sf+XyLJRvitX4hnv6Cjyv1pCWo068vQKYpBEB/Ei\niopWTi6Ygzus+QhvKc9crqN60PO1tzwbhj4r+iipEN31laRyVpmdKE1Y29fj\nVHrcraC+k0vPVFSHJHJ8nQy+q3UWHjhhYUjJ2jcd2vS+YqYzRcUni2hEcrjz\nhuuM5RfaVipaqwKjFy7DwzVwWER6MiSNsGQmVGSW5OzVbt6xVNonS4SGmcPY\nbc5H\r\n=GUwu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8d704729c3b4ba17ed088d900fb2ddfd57d5803b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.9244508bd.0","@material/base":"9.0.0-canary.9244508bd.0","@material/theme":"9.0.0-canary.9244508bd.0","@material/ripple":"9.0.0-canary.9244508bd.0","@material/typography":"9.0.0-canary.9244508bd.0","@material/feature-targeting":"9.0.0-canary.9244508bd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.9244508bd.0_1607713657204_0.49435838380032826","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/form-field","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff1f271b0e208e977e8ae03faad9bd3a95ea19d3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.384a8eeb1.0.tgz","fileCount":34,"integrity":"sha512-fe1vkhlewUau+vN1ZEKvMi3bc+Dey29Jvp9n/8/zciF+hueyNtlDCy6dQvfn3aNzT0M3qz3GstFiTARYtEcPeA==","signatures":[{"sig":"MEQCIBoZsJDu/NXnc5YgeCkEFp0FZwDQY5xIUaDVtbe13zSLAiBHg87Qefcgc43FSTBLhWF8FjX7cf8ZwqBijU4pzXkXGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j2MCRA9TVsSAnZWagAAYiEP/1tahRrpUTQkS9kRBev7\nicWOkUq4+GV7xNbFfQWOCuYtif41YKHOttEuvxzGGE3ZOEQ3/HXW8ENa+T8K\nPSGDbq3vDw89oV6c7KmqNd2IuWdhaWO0vAXSTfJagUfp9lWBBjHbyAyWY2W2\nGQhPjYgO78ha58p8DBf7wrtahZ7KMgVjA1QOQIbNmGMp8/B/mzDKkv1g+iU8\nhUf8eS1J4604HUJZaIBMM+zyBNF6btAQ1smkSZw407rb9ZXKud/a231rjLpJ\nKxkyu//hJuN2q6RP5ydoF6q1uP9hH8KtNFUv0UUaFbr9ZyYs/UygGcj5maFz\nx8G7Ppfkvqj4CPJqMaFNeQ/5JFTrWNMNNhsVE0wcr2xu8m33DI3o88FbnXMJ\neQP2qGElil8uUJOq5yZabYAiTIAxWV3M5b5iDon2xRdyeNEQ0pCTsALsRVYh\nHWpfANIZABSgcdPhRU4Xf97by/pXHlc+xelvxj9dze02a2VU7Gp/sI9/ecfS\n4x/RN0704j9WoHe808kGNA+0iSiwGqH95QwzmKdlXFJLQfBElVxSNEpsFsYR\nK+g6LC+4ozQhfiVNrS7NM1li6EehtDpCcKN61LM7q8UdFAKRBcu4AfsqZB+2\nVgjkrrVz5lTLX6Lsy/pzLJIey0QJT+9d02TzsqwKwggutGGqPIaHtifWIdN4\nBLe1\r\n=kf7k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"21b2ddce32077f19c001df17ebc3c8ca9c48f8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.384a8eeb1.0","@material/base":"9.0.0-canary.384a8eeb1.0","@material/theme":"9.0.0-canary.384a8eeb1.0","@material/ripple":"9.0.0-canary.384a8eeb1.0","@material/typography":"9.0.0-canary.384a8eeb1.0","@material/feature-targeting":"9.0.0-canary.384a8eeb1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.384a8eeb1.0_1608138124088_0.9928758368398904","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/form-field","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f77f7a4b9eb5c31c1944ed6952a9364c89c85ab8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":34,"integrity":"sha512-pl2ZoWuTHXVYv8wMWpUtdg6G9UWzNiBLo/kvFnK/cruLOo5u1Iford6nOueP1yDYG3JBFRAYRnIGDc7DP6qiWg==","signatures":[{"sig":"MEQCIApQS0WkfgKJAgP0bvdOmpW2Wm7mwCXt9Q1WY3O5PxisAiAPt4aop33o6ThS+y6tKb3FkRyhYR3ZVNrmS/Tr8aR4UQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lGmCRA9TVsSAnZWagAAlDQP/jMOpH77cXMTLCWkvatB\nTqyhuz/3jLoP2+CcCKH7SQmWknsmrZplCTea8KXjsiLy+S91iS8VbFnRDpJ5\neUiPsGC/zDFuDC/gX78UyfO9zEEdjx8HTeCfyyPZpYZLm72VSK+c8+pELbkV\nQRmE7PqRhMpyTU3Cfre+eveQ9qRkgfOCQ5AGlR4chpKtkQ0LBudKmnvW9o81\n+XeWB0l33RUW9acRnYdmfuukGJT9djnyATtyvtMPVaucRJZ3MkgRRnYmdwzJ\n1idL0f8tP3qKXPlo9k0GNhqTdu3ORKqfNFuVcQtjz7x5zV1Af+f6Mj/fCHKW\nY4cVGY7V7cmmIJHR1cenO9MnsTKbAX2jJZgo7cCJZb+G8vSHKweUUqAcdngC\nFa9GcBhBLnv7NfNFMHhairmfTyRNnvA52jsDPfhAlB1wLGEdLtfy1g89TySn\nmILPQ7RhMBo+EdqjByv40e+PmG1y16Cs4uwOFzDtWbfhsPMxWR5tHtEy+AS3\nIvacUI5KlWRgUDNHsCfCR38HA23tV616lOWcCLQj3RaTDlEA/WFJ2hyJ6Vs6\nq5onQ3tJVYhjVplSOMEM+Zk/RL0UOA/0QmElmyICv+4ea0ELaRfBiTgxlMD8\nAhc7fMjeDLh0tsvUYPf+h2jpmQ20vpaJkvItcFbU4pxPCG9MAMvc1QNH/S8z\nlUwq\r\n=55Ks\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"78b3a67c04374ddb43be73dc4daf2613746d08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.eabf9d5c2.0","@material/base":"9.0.0-canary.eabf9d5c2.0","@material/theme":"9.0.0-canary.eabf9d5c2.0","@material/ripple":"9.0.0-canary.eabf9d5c2.0","@material/typography":"9.0.0-canary.eabf9d5c2.0","@material/feature-targeting":"9.0.0-canary.eabf9d5c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.eabf9d5c2.0_1608143270404_0.837597385741996","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/form-field","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"745e48a2a021b526088738c69ca7f8dc16a09d13","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.30fdfd06e.0.tgz","fileCount":34,"integrity":"sha512-vxqT0uTSaCSyrxCeq/iY3RmSVjctQogffhv9kYxc0O5QVZzAo5F3+RqlhR5yceLniDuV+gecqXWV2rR6mr1cCw==","signatures":[{"sig":"MEUCIQCsgYjgYJpm7sqZ6Rq/5ikD3aZfwvaR3mGCqqymdP2tzQIgUe8RctFhGgfvRUmuSKLgqTz2XKZoHyFHuTpZDRHZbDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lr9CRA9TVsSAnZWagAARrAP/3NGgluLBcC4XdBfPkte\nxPQSH6v6pd+1Pml0Cw8CJugoHyqnpHT49xBPHpHNuOw93ZRGJl/j6kzVUaQr\nhj/DnI/O48sM70VA8e9b/BZ0WrN5Kv+qWfI7+mtTPoHUMJ42RtZ0zbdGS6YZ\n240SslCZpmCdsZZjjhppKEpjb2MmmMzV4oYxwbJ1f+E1UzDQagHrsyozvsmk\nKwp/Gagtx87QT/aOOMtTz9zTaWSa9+MR5gXufz7uuZMsssbH+cGG+Qmm4msm\nTvW6ydje38SZU3k3fEKhn2ypQl27DFI49Q6iVlSu9AwWD9LegT9fsEEa/FwK\nXbhgA1LfzEs/tiQcUBOZydJOFIUjBFcGZ0i+50G4rYfsQE3oejwev1oLj7rl\nLM2tS1D5WOH5cHqVfbjQPv7rZV8UIbAmNaM9KRYG8UrOfauoMDsw4UEslF1y\nMJavbqufznJwPYAn80uXxZLPuug63McI+ccBdr21GZfoX0za/Pn5M2KFTdqX\nm3gt9LRuoUp33TrCN/pl61aQcNWUb5k7gWxIij2X4dNIj5KdxbGcX9cCGsWP\nPbN5TFoNuB9dW9e9ytzl8dWgRd50uMvi2mzkjsPXqsXPS3i+HyqozOnB4IsJ\nzTQXH30KcJliKTc0lkjVcgTJSi7euYI0yQkvSphwOpPyW8rlWnDWca2quQHB\nnTRR\r\n=tQ5Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f9c9fe091a06230b038ac8a71ccd652c7c662b96","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.30fdfd06e.0","@material/base":"9.0.0-canary.30fdfd06e.0","@material/theme":"9.0.0-canary.30fdfd06e.0","@material/ripple":"9.0.0-canary.30fdfd06e.0","@material/typography":"9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"9.0.0-canary.30fdfd06e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.30fdfd06e.0_1608145661465_0.7582987940404822","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/form-field","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cb9354a662c928470d6dc8eb2a6b378195e0b4c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.9590a8f90.0.tgz","fileCount":34,"integrity":"sha512-z4LfQZ4RKsEdVi/a8IWkL/gJpAiIcNvhVBItOJor6Fw583vf5BGNJNz6K8TV7NGgCgogjVReH2LUODQjkSZtQg==","signatures":[{"sig":"MEQCIA8keKSSg+ei2949hHelBb8e/xAoVcN1iwfgIfzAqqrvAiBET63/ChlVW0A/F2bbpUEP96b/wxGPiglXHSHb/CGfJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i/0CRA9TVsSAnZWagAA2FEP/2UCYx0898Va8g3E6L1p\n7Bdd/iWp8rJ59QJJhJTLIxFF4i2Hee6zvUE0z8BtE59k0aPh1XDjRJA+aZzg\n3E5l0aM5rben5xOWrS1lOzCCOyFNaDj6D+QNNb6OJsDdoz3aIDUkOC8P6+wt\nFFvZVu2s0e8G8j3EiAxyeECc3Cwz56Cdi49qege4jAEKGe6PUTuoRikVED1A\nf4LA66Pml/22Prxk/Lu1tjbmkioly+UKJza6Q93GhCu6xDbdFEasyJb17cIQ\nxHsLz14didvL3c8d/EhfQPAxrLA2WMUgMgxNdcjd4Fm1V0yQqi/pNCFctQL3\n2GnvYd0qT0yl5b0q/X1nuXZ5UJMAq7Qxb7lvuz3cpK9Y3KnB77KYpc1D77bm\n/OyDDDa1DxCDRN7aSdSh5JCxHVD3+ILkvLhGpUIYGpbxOyP5Y+uNah4uIcg1\nZ9e7aBYLMfQ+agNGc2u6kb6COGysh05JlKg4Rp6i8y3iAgyJ/BWf7TZG7NKf\n8XU5j0FW7RjdZmkxXAvyKzuLroajdnzA4l2E4v2Diy7hTSQOaGdCqXZTRT6s\nCFqXvsa00nLmjfDb7XTfzOgnHswNpW6UhnEK/CMhtqhybBluheJjAWgqvsG8\nA0oc6qRn3g1FK0DPi50BYdlBEdgee9L5IMRU1rs6fLNBc912cF44WaQA7zYt\nmlUX\r\n=+RkZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a592a11a03887b1e1535d4d49ea05db1b6f72789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.9590a8f90.0","@material/base":"9.0.0-canary.9590a8f90.0","@material/theme":"9.0.0-canary.9590a8f90.0","@material/ripple":"9.0.0-canary.9590a8f90.0","@material/typography":"9.0.0-canary.9590a8f90.0","@material/feature-targeting":"9.0.0-canary.9590a8f90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.9590a8f90.0_1608658932464_0.6812177863489854","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/form-field","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20017cb725f04d8ce4e808980ae0f7e8c90cd486","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":34,"integrity":"sha512-VeK0LcpnCjfClAHFatrpND6dwpnxS7pMZcfQdyAR151M2Rw8MSqtc5DadYE6K2ivMhIYq4GPX2KECpXKTx5IKA==","signatures":[{"sig":"MEQCIH61aPvdG4t89GDpBVcbqKmnDhavFSRFEWNoNk/JYkA5AiA2SetqoJewxboK3OZBYuyGRFxKGRuvc7umTp99z5HxEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nutCRA9TVsSAnZWagAAHtQP+gM5TaXRUpFxYnmM9nwG\ngAiPyvdeoBRh0uQL3cPLgHm1X0vUFSh9rorGtRX9fDxDnYe7tUHHYFjaqj9Z\neiMcgO+p6hUPgIUl5IAVf0ia94t225+Aa8l335t/1xXgbn0g/DXemN70Svwv\nqvO15uiifwmwBtyuku7BV845vTYgdzzMH6T0QhM00EhoSBKp2OVV/K/oUlqk\nZRMMu1kjiqrTLcCXh7PddA+Sahrc7PBb3l0kAssQk+rG3XQW7nqneRbpZcIz\nsPEGVqxoKelCo/7pPvjo+vTRkj7Z/NmrEwywCjFRopSpg7BDtSqFESs94Rrw\nlJBycH8IX8tAMS7Et9rGJKxliviZGuJkXPvG1EmtpUy3doAlo0e9jwtpy5Ky\nz53GWwAu4nQ2yhz5Mn51+N+QPk/t2rEOKbiPUH3DWHIkPE2oGL/p5BrSQzj4\n5vCDRRZ2cidqIty5I29V8IjhZ8oahuxg4D17llMqR6tP5goKGc/ie7BG/toP\nS/hYHxki5LWUBvolM7SxH7hAHpVfIuBPdNrhD+F59B0BwUZmVMtfvBuQvHbK\n0HIWjbW+YeDn4sBvtvydM7hW3ttK8zmy4LcbST5EpbrOs52ez5Qa4UTaV2OD\nIa562vxehILTnFHVwaGLVieHRzFvfl2zbbSkfbn/VMvuJsVSw9hZdYb4JObk\nJ8b8\r\n=pp//\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e0d61155aa611a1a8573762d75379cbb25d2e7c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.f89d8b8f2.0","@material/base":"9.0.0-canary.f89d8b8f2.0","@material/theme":"9.0.0-canary.f89d8b8f2.0","@material/ripple":"9.0.0-canary.f89d8b8f2.0","@material/typography":"9.0.0-canary.f89d8b8f2.0","@material/feature-targeting":"9.0.0-canary.f89d8b8f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.f89d8b8f2.0_1608678317018_0.9593665998642811","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/form-field","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f68bc202e52deef6fea4de9a1656f54cd3a2fb3b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.fb194dd35.0.tgz","fileCount":34,"integrity":"sha512-Uka18s3tGXDuaw5OVMCJdRo6wj2LCC+UpsyLE75wBFDsNqvJDoLKGNnqYRe1oS0fEZUBQqgEb3GwZh4eP+zKSQ==","signatures":[{"sig":"MEQCIEk1qnfJdkR7AhMdbn3roNOReUfq/F9P3Qg3MAwFm29hAiAGFNTBiA22c/bVBJgjw1hSU+/4AHLW9+DnSHvNfabitA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kP/CRA9TVsSAnZWagAAdiUP/0/+DMroYambeQaDF+xg\nc1fejKGbBZnOdXa4OPv/Eiul60cA9v1igO1osIIqF0QVOEbfuMSqdm5EvQML\nSWfcHpp12kDPbpmkgpkoKuJHfNOZuUfNCitJdTYo6RzwhFBx8UiwoxNGKdgR\nJIvkYvIm/ck7ykvdb37NrXyBjVm7uBTdCHXQnx25SOycGqwV/O0e1KUDHwEi\nJvPPtNOwwLjx4PFCfvmg1poqIThXT1IkNO9S6VtpG6gYnYqOT4/cgMAvQKu1\n3ID1aUzr1Rn5So0hv4ntZSt/Mg/BBXi5XhmWWScg9pLjrfc4Mn5lfVs/LbKC\n6lfiiNUaotZg3xWAAw2JfZI1+Q6nXdp2x8cXAn27Rv5ATfLUEEiO+VPW427B\nzj4RdmXQWJtAzSUyu6ggJN0yjoj4Tjyx+H3F/E7w9oBPR9vWM76/OahUWRBk\nGLbPYfomNtVkVjgUyeElPzsRln7ZUU2r7WH8HutPAdGO6MaOgZQ6HBXrxTu5\n29s3P+lbXMhJd5oKZsyINtqd47pfdeAxoSZ9vACPfrQCz3Xiq3PwGGJ0p9xy\n6jrnKDTP0dNxm/UcRxYZkvVBi47z04g88mwUsJfz7UPmuvzYleoLnZ4+7FAf\nxa9EI4Xvg28TDkxzsIR900395QS6Sk2XEZgDrcmpAeQDG8MK1YEWfmpqzbfP\nHNZD\r\n=wsWk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"57a5b34de1026133757436905fc54dc5b326d3e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.fb194dd35.0","@material/base":"9.0.0-canary.fb194dd35.0","@material/theme":"9.0.0-canary.fb194dd35.0","@material/ripple":"9.0.0-canary.fb194dd35.0","@material/typography":"9.0.0-canary.fb194dd35.0","@material/feature-targeting":"9.0.0-canary.fb194dd35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.fb194dd35.0_1609188351408_0.25447325521176833","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/form-field","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.64f36e287.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe2bdc6cc95d6808fa374e8ca81a6645f976f231","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.64f36e287.0.tgz","fileCount":34,"integrity":"sha512-Hix5yC6w5x9oU+y7f3DV4PswWMECeyeRYIS+m5HwJGMDQmxr+TVxo1bpqzJBDatNUOKG5QvytePWC9QqCpt3Zg==","signatures":[{"sig":"MEQCIBeSHX0zVFWt/w2/8SMZCeBTHGbzIVuZoiSadFZ21BomAiAIprOcCFY6/6/nkNxr3a+R7cL3n9XobbcK9Trqi1YuOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kldCRA9TVsSAnZWagAADvoP/jHE1A/lq3gTyVWtEmIQ\nHNJr/LxTOBqzmxQ4zvaHligQ0BnNkMqJUD5CqLJQEdJSQOuiwfMJ8m97vfXd\nWqunN1TaDMxrJ7yGRMDJOkcF7e+7Ou6LL9bUSfIQ16LG2nQdujBHpo3o/QfS\nEGPQH8nyHXqavzwQxxkNH7s92Ji/NaBKCSVBwNdXvURJHFG+GP/hnp1H+lWp\nzz0DiPSGJUnh2ZtOEwLD5J7wwwLnk65BwjH5s8rPQobm3vPe031t3l66vaNa\nihDgB0EKt5jcNBDBwaHWN21xtkTIpLxgKScuXpGgSreQansk736Lo0R7bawB\n5DRkfpps0oqev/Y0YorUngY//uVFD8qcgalljz9HFvHxbBrLBk1PAXmmYsRQ\nnnKXjpDPsXvZjfDkM3sDKFwK3h6pdsB22qIF5svvDYlaSXEmIv4i20IVd0if\n6cfAA0Mm+QBibfMUUbtRzxhd2B9uQ4b4oWh9d0J5LomxE4qnIf+d5y8TiopM\ni7VfmVLcx/rooRJ51UHfeXYG0w3lajo6r9TebQ/J+EpY6oYN4O7NiOFHyLB7\n5dUOTfSBSr0nvVMBy0VRjezxF0Zk4bK8QdlZjB9DLOnFnZ4tvqcr+wuOml0x\n58yrAIPXQ+XE0xlHJqr74knR97CXh6QKcj3s/YSU3TmjBOpiCzYXBdKoBueq\nqRZU\r\n=BwUj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"23f6770d284ec6c17b1aad9913827f8d456418f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.64f36e287.0","@material/base":"9.0.0-canary.64f36e287.0","@material/theme":"9.0.0-canary.64f36e287.0","@material/ripple":"9.0.0-canary.64f36e287.0","@material/typography":"9.0.0-canary.64f36e287.0","@material/feature-targeting":"9.0.0-canary.64f36e287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.64f36e287.0_1609189724698_0.46763123829568354","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/form-field","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"344a63af40f4d4ad290cc502f5fbb5f0bea35308","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0-canary.b7bbe7022.0.tgz","fileCount":34,"integrity":"sha512-3ECwNu5BWj2T1BrDjcNwc89SB0bmzz3VOUYqpZ1fvmCPKa4coW7cFCXxVR/WHONtTROoDOt096j5siFVTnRW3w==","signatures":[{"sig":"MEYCIQC70ulbdAWqlvz0ZEbdcSiiUwgheCCWDvEJs+KlgfjRAgIhAJEdHQw4iD0n21CUXffY+35ES+grV66EaWe/LlR+PTPA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63ntCRA9TVsSAnZWagAA+VEQAIwUVpHRO8pVMl+NgB3E\nPSmbiID/HZ8PBg45R6W8ZQBDxxSgmgSnipqhGiqCRZqPCl6xjafGYPp88aNh\nwgz/o0+dz/RgL7OyJMqqPRlUQR08zMWE/08nIiBLjgx8FSnYzYpFyQNRNePi\neOz/slrXcqR2ayum4Ott36k23UTd1GkOz+9qO0f9Rih4Ok9j5fqLLWZfJ9+j\ndGurZ2Fstsr+np2waUIy+bmBWZqo1ieon/48ImIIitrFoqxqV59Dc/Ne5iOx\nTkQIVVLWEsPsIguQT0xPiwhsLRkup7rVFQondT10PBXfi1LzaJARNO100KYm\nnf4VFH25IbsH597EmJEjgVDusAle8G74hjRBikaaXSu7p+ndrB+OaQFnASUm\njcOl6E3Yq6IjriNrs0uVFiZr88fekQs9IzsLSZy8PjN13arMNNX2vJ8TDDMy\nkCUoYlGYWILI5DibEyvFKi8P6o9B96vvkZWQSPZAyPn/sr14Wky9S0T30Xi2\nIargFLFyPX/gYegDb11lmtXAfYytYL3MCjfR4CdctK9h2Sbu+67JGfldq3jt\nQWB4grFHp1oVIx1N7vWoh33CMZFuQnEGJdthJkGIzbt2HffI7dO601a4k9Rn\nKocSXO7O8kioQg5gvef5O9gJe3D5KWEBnJbrte6wG68QO3l4Y/uzE5aPgwow\nm2aq\r\n=K365\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"81238a3912ea8bf30c97b0318ac2ce65f297eece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"9.0.0-canary.b7bbe7022.0","@material/base":"9.0.0-canary.b7bbe7022.0","@material/theme":"9.0.0-canary.b7bbe7022.0","@material/ripple":"9.0.0-canary.b7bbe7022.0","@material/typography":"9.0.0-canary.b7bbe7022.0","@material/feature-targeting":"9.0.0-canary.b7bbe7022.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0-canary.b7bbe7022.0_1609267693519_0.8975229762840984","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/form-field","version":"9.0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@9.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d104d416c4d71cac57ad014d2ad26dafc72de3a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-9.0.0.tgz","fileCount":33,"integrity":"sha512-W67mI9GMRefM6kx3S3LOPMw6hagTFNTKTjHIAAXFJBPeNANsXYuUnwD7SlJyXwrQi7hZMPehyBrsdk/oQlo8QA==","signatures":[{"sig":"MEUCIQDQCo+1eS75LVwJGQY3dLzbgiOw9tTj09Yuo2OTyyW5jQIgN+NQCSt4VP7IPtkkan8W/eG/kmQlAZEqZQQZr/whP48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64eLCRA9TVsSAnZWagAANyoP/iHeUCZpqHBUH1kH67en\nf4Q/IuIphJxFrN6sCdjsoSf3gQgIBL0eYIIvr69rtupseurO0q2OxRWxf6NM\nl8cXyzPeCDKr2s/+W9tlVtECLh6VHGE+ArQqHC/pDmndFtZ3MwZvAcGeCGzE\ny8B6zWaxG+w02II0L+EA2/EAMb9PDlgmoGCuQuzAT2B8ccsFMnccsHnumNTS\nSGSLxy2iulyylxEXoHVePn9MOHZr1NcpwR0NofEPU8k9XTtCdhKskuUnNcT8\nuN0J2SzOP2+uIhB3+NFMBGscXW9b4F8lUBucNA1T7HSjt9oxxS77o13YPGwp\nwLunHhwAYjLKq8AL/my7gdBfNnF1bvr2QRvVFdpwU4Tmk6jn7Vjpx2faIXcp\nYJFv47Jx0BRVIj7kBUKaeRS0N5LcOggdj+0GgsqKmXGG3TceZpjKQN57JVHT\ngFs3qvO5rlnVhgFlPYkLjcU9/ZGDw/gPETf4xttOLzeNYiBpqo0EFJerb3Hk\n01qYHAAOSf0Q1ziJUR3WBxM8g9PUU8+clbAlBa4AglTLGURfE9E23BhJzdx/\n/rd3Wvi7Zf8puu+m9zE5voBhI+hB01MXiVDQe1u24dE3JHFkMdBvENHNqSTR\nfp58EWgn3qKNUdkw7B8PP6cPewSaHj5U1GimADkI1rotzleCdTkhPZo8bHSH\nLeL6\r\n=voHf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","gitHead":"555aecce59125bc3f162b065dca47384bb5822b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"^9.0.0","@material/base":"^9.0.0","@material/theme":"^9.0.0","@material/ripple":"^9.0.0","@material/typography":"^9.0.0","@material/feature-targeting":"^9.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_9.0.0_1609271179184_0.5100981169847569","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/form-field","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.776c18681.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"365797367ce301c97491f0cd0f2e3f2946f3d506","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.776c18681.0.tgz","fileCount":34,"integrity":"sha512-FerM9RfFYPuROicMdzY4MCVuWLsHQ5DBJMh4cOlr6PXLQWMsMRMtCItO+rf9Hf+/8mGSnuun3WBDH54QiteqlA==","signatures":[{"sig":"MEUCICjGTRsZgjOz/4LHH7RDvoKUyUTh4IhrVRn3Iei1xWIlAiEAqv3Tz4M8/+OTeIfBFcdPKam6mgeez0tfgcv/arSVsak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68x1CRA9TVsSAnZWagAAjCcP/21wlV8WnWLXsmh/pTYF\nYa1nRqEeKIcOlA1GG0VpsCQ1wIVzdVG4PP3eImKmRjemzTlaSlPbthplZF5W\netRGdhStNpbBY6HoE0q29vbk7TspBMb7TQLVv2VNeWcxistx5WA4PXsntOoW\nGvOjhmTdfut+Z0CybEdwTpyN1KDX1j+QdvRcAYXFr4Jb2TN/TcJ2+vQilJzm\n9Qi4QksaYYgnGoUOqB2At1FvGoa+CGV32ldCIvYzwj9F+0mVEYkur9SNV+DA\nUYLPDjQMfsDGVBmxj76ru0dwZVaPgKNudfYIjbSvpwMmZkEVXu9WSTr1y8t2\nZBCKwAmUOVhI/GWRGsXxRGHCYd0BdSOEas/LsKtpCMEfrVXjxXlRLaK5d6f1\nAXDiIePQeVBMtFqglivIBDCgtlJh4tB4H5/6wbwZaV+gVNIqQENPhRbj/Tj2\nXcUG45wJNBm8SKLF3FqJyDW3Rzk3qDBGLRDhM4wTAB24FsKjRWHG5YNAtRsR\nkbek97MjrzCQUIdpmRYn5jLQp/WXtF8vogInzKYM8n2mdqz8DdSPcXI1Xubv\nml35LByMjy0nRoIKGkRJeq5hEEce4D8pKKCBF6w4c1Zh8mebVagSdZ+A+vDW\nU8G4OtTRXLTYAyUPNoU/tZqmcD4dgT1OrKWpNS5qyazarjuJTkJTEiHPYqiP\nPH3V\r\n=lbcI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"920f8ec98e9709a32b0564a5334ae434137478dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.776c18681.0","@material/base":"10.0.0-canary.776c18681.0","@material/theme":"10.0.0-canary.776c18681.0","@material/ripple":"10.0.0-canary.776c18681.0","@material/typography":"10.0.0-canary.776c18681.0","@material/feature-targeting":"10.0.0-canary.776c18681.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.776c18681.0_1609288821451_0.4364185824408586","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/form-field","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.671d72d95.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"231bb034fb0ae8575b3878e7911088f51b6a4f42","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.671d72d95.0.tgz","fileCount":34,"integrity":"sha512-4bzJw1pTFWaq1AbMpC+/hbv0ZGbjggEioMpOye2D9EWTRl8Ea17iPAekHbUx4tZR+rXcLhKngc2PyuYyuFiUlg==","signatures":[{"sig":"MEYCIQColJsaCpjzmGFWsrlNolKv78BoZ0MSnL42ygeWtPfzlAIhAKRabxcB/wWAH7WoSiUUHW5TGYw0mDyjpKLIPTgUL2eP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N8ZCRA9TVsSAnZWagAA8woP/is0gMt62GG3Bu4jVzsK\nRDQtrl63HNwvshbmrYai996L0J8tgl1+TSiX7Z3RxG7k3DXBq82whA8jz9FE\nez2jIrAw/O5sOeZK2uZiMeVzEncTOWUJ1Bom54/YogbVQlmrkNExf5lg5Jsj\nH+FsKALHmWCz7U6oafmUFc5AFzX9XuifgPx02HySAHNS61nX5jw5XYN7U5Yc\n4qRmPHPU8ddYQ8+rDsCcdeq/xidXvozT2yBXQJs2Y98/lU1jsHP4xMulN9Yk\nadYOtUuzbIJn3fHJsJC8Y9kvG/IfY9Fg7DkSX6ADMhNqRijqOg9CMg3XDYGy\n0buw5GPGY9TfGiFQhZEKWFpW9fKdN4VFn6ERl1hwWIZ6hlMbrqyYjB4MFKNT\nIwsC3rVN1GXBMdiRRCRfbm6Kx3KxtAOk7acPGscMGAFGMWGoRB1oXpkCEy50\nkNNevCwhQC2zFgGzuhuLxCT9PK+CIxJSbio0h+S+Z4MqfZGA2wNuDq/3MyvF\n/vhOqx8xK9Z/ltAjmhqJVgVP5y8A0tA2pnHscjaj5tRubxhxe8uEcztfjbQ8\nkm0bBA9nekABsRQrVZ8IyG31cLbSqKCVSWNMzgvYza/vgGcVJrAqsE+sPMrt\nb02DvR2M+vkeLNoOV+dJDI1li+SVhLOJ21f0TvCb4zZyA/2YPfAO6wDG3Xa3\nyCpF\r\n=2JYz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c22803ec93a76c661222622456cf6f5c5a17459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.671d72d95.0","@material/base":"10.0.0-canary.671d72d95.0","@material/theme":"10.0.0-canary.671d72d95.0","@material/ripple":"10.0.0-canary.671d72d95.0","@material/typography":"10.0.0-canary.671d72d95.0","@material/feature-targeting":"10.0.0-canary.671d72d95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.671d72d95.0_1609359128651_0.5803958400148987","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/form-field","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5106b1ddd60b7ba3ab88790cb02ee3db7f5f7136","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":34,"integrity":"sha512-wVXTuGJg31NARZu7p4dnuSVLLZ70n7YWQYh40tgkqsgtKwThAFNk8HY4H2OelZJSBOn8n5d223hvqvATbHfMWQ==","signatures":[{"sig":"MEUCIHzq6lDe0aBJTgr3wd9bCFTjWYv0WOKNaGiPvB6WLTPnAiEA4qXy3hKyMz1EhQ4UvXqbcSbjeZdl8Xo2Ao5wiyndVfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PVBCRA9TVsSAnZWagAAHdoP/jel/ZWKOr6i9z+mHuDT\nwrXwd4voTRj9BB8G9kD64O8cmyxNXUooFxnHk0Yajc5A+/lvxXmUevWWCYNV\n5Bpt34zp71BANZqOKLxCI6yiD0S/tSf7/QC0X7xDW4rNFeD1P8XOsuaelsSU\n/TaSnll1t0awmiH9pCKtxc6iJoz1fch0UQIyEgB5yhcuhPDDlBXCGq5e2bED\nmDSAph7JgXfpTlyFMNxMmRLvaElUfFGLbq1M1odI/eWl0Ia508BGuXAsbmrK\nRTHBWe2TaQr0QKvHdBhMwqn4JOGJc2yNFKpV8qQg371qZHuCGjCFnwQKfU8B\nu24klQ/T0Zi1qDGrOxM3XOKyHF9GJzbNYLjtH1l/iRQ14K6iP9E+1vo7WdUs\n8w9I3GoMQLsGBMHwSDbdJPm5A8jvaRUJ2lclBENjBr7nea8i5kpY+R1RTk6j\npiBoQBObDhRR7vK1gETRmWxFTPItgmFTeiSNzaKCH/zp3GUtKH5gWzKXhgtB\nv5EcX02aQw4+M9f/eHPonp+vafYQQj8WDHdoZREWOJTpudNuCINRemB6x2Ev\n9iXxbDt2Eoiah7ifmYwUau+LLtn9d+DmgMAq3hYTKMrJB8VuouHPRn6GTVmU\nheX39/AEIHnknHo5m3TT605b21flOJYMWy7fCy8Mkb8+Fz1AC+SiPazGen2T\n+yZ9\r\n=l6ws\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1db47387aa8e99022677270066e7cba1da23732d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b4f5a1c9e.0","@material/base":"10.0.0-canary.b4f5a1c9e.0","@material/theme":"10.0.0-canary.b4f5a1c9e.0","@material/ripple":"10.0.0-canary.b4f5a1c9e.0","@material/typography":"10.0.0-canary.b4f5a1c9e.0","@material/feature-targeting":"10.0.0-canary.b4f5a1c9e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.b4f5a1c9e.0_1609364800780_0.7471617934038959","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/form-field","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04a9196845dab93c7b8fc8a6e21c378ca437809e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.a94bd8deb.0.tgz","fileCount":34,"integrity":"sha512-IQlQhCS89/7LSkqAQHrbxoQ4rrhOG8wydZp/C/hSBU/nVSxm4s3SpgAWkbu34Vi1cLKdp+h020Hjye38Cwqsig==","signatures":[{"sig":"MEQCICvd+Vg0MoAdPk9k6yqvPOH0jkEFDQHPVcA8+SfyCEudAiAlTU/UneKFT0W2cGnDL2a/Q4lFd7jj30FN0d7IaJoCFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PluCRA9TVsSAnZWagAAT78QAIZ5KeP9sMvevduPjSYf\nAHzT2YJp8rc4yp8cLFzuXcwdtZmMYQZEyZ4k+LRaTobQWmfPYAJU3bIyS/Mm\nalus8ksNRIR6qLSGEI4IJLpU1bzE0whBJuyOd6CNLvGuIMJnVhtNk8j+phhe\nRe/6AAK4kY1Dno440l9uRAH6Ji6Xr3C9OZCRO7msGY3APYAQAbwREl5olVcS\nLiJnRuVWE+FV4cez9KyPxL5Njq+zkqgx/MeyUko+so6fU4+qkhuGCDYwJSaR\nHlTJ9XgG/dbqnqpuQQdDMaRgzsa3HCRI1iszvMeDTMcB9Vf5mxY6HFkirm4J\nwPy7Suk8Aa2XOOjEb5O5OTJq/crs7gYO38PuoWxnY4IY0QHSkPh21sPNGySu\nso+v0NqoaK+GDsyCI2egWEBCivBDHFj2qg7NmbSxhMIrF/JXqxVsUvES/2Jg\n0mNTzy/RoFEBbCGEO7R8KzbZWIpU5JUv1mbG34o29/0qp5ti0b9cbHEi8OR/\nucQAV7rWW1BfrJk5m10zyLsqJm+LscSko13Rx+xpsnIObJc6/Fl9XpmrhmyY\n+ZoZtULkUYXLFdL+lQNAVgAS3+72+HCXc9Ze6M6LxIOGfbTsj7W4EB7skkrc\n+7uTIudvzX5kvgsDWt8Y0sEau+MbA5hUEUQzXauojsPYSF4nf5N3mqZQa+hg\nZlqU\r\n=ClKB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"12c943490c76f911dda3861f863c68d7abf77ce5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.a94bd8deb.0","@material/base":"10.0.0-canary.a94bd8deb.0","@material/theme":"10.0.0-canary.a94bd8deb.0","@material/ripple":"10.0.0-canary.a94bd8deb.0","@material/typography":"10.0.0-canary.a94bd8deb.0","@material/feature-targeting":"10.0.0-canary.a94bd8deb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.a94bd8deb.0_1609365870162_0.6186073606199234","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/form-field","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.5d128511b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5442f47d88a2411c1ceccc0f19edf7abd0b1e860","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.5d128511b.0.tgz","fileCount":34,"integrity":"sha512-12b5A1R0sjnm4nB5NBFOIMtt70gB5z4jCYlrYFbhY7V0HKqzHh5sIYsChZ3L+TS6uG8Zs12ok3KuEQosQ/BT4Q==","signatures":[{"sig":"MEQCIGZjzXkTXacQRhyMbJyFYmTFkTTcZKYg6heEpq2OiUCkAiA+wFw0Hr2XDuaPg7Eh63xusEcV2+EQHh7jvKa3bwKhhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7Pq0CRA9TVsSAnZWagAAzUkP/A2f4E/EqbG1oSrijk1+\nodXJpRY9637hqKIbJEyD4Rx3SVIYToRnH/hNIaiMnm5X2FNHu13Npe5nI023\n64WtV0rdv5l+3/fnnYDxElZ57FCIXM9v2mRQubV/ut2R/PZhxVEDotL2NVPU\nfOLWnnLMfY0DtzddzoRr3ZLl98WSoY11YOTteL5wf/PhLbmpR0d6ja5KAsU8\nJBuwSWYoXeQx3S7IcEqNyF8j8v5iZEKWfTTzLGdOeMQeIUotGg6gkv0/y4pR\njRcN+VmJANCUQYM1pNpelsuqdd0aSqzOsRlvP7wcdbN3U/KWXEEMgtJcW3di\njhnI2Uatsw0L9y3O8poqm3eHq0nOmmmZAHgaeYmRjgJ7i6wCMfu4/8oqUwcF\naXs3d8xvnHvK6p5qiKEEgZ4F0H8W8crIx3z1PkVtAyrhQoYqqAKD/z7qeOAP\nv8RVwJdmazFNqED5tAXABYIn0Rqc9lw5S0PH4S/TokT6GJa6kLJdiV5hfpog\nb4nrfJBmMbhUsI9rGjO2v0H5VpDM9tAR0DUec1uXfx534gNbr8gnRviw/Nzo\nbuipRdisukay9hEuq5538S+Eh5pgYqSBPKTLdGTTER5z+3yBGALGm/p/O1NT\nZlHAGwfRhhjZJL9Sm6f+AMX37u1ZsisWd/jlwntAOGb1ByW2NfHoLfbfLwXu\nJbIp\r\n=Nf7h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"05d17b41cbad4a8aebac080f082633a26be09a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.5d128511b.0","@material/base":"10.0.0-canary.5d128511b.0","@material/theme":"10.0.0-canary.5d128511b.0","@material/ripple":"10.0.0-canary.5d128511b.0","@material/typography":"10.0.0-canary.5d128511b.0","@material/feature-targeting":"10.0.0-canary.5d128511b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.5d128511b.0_1609366195579_0.6589530878598306","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/form-field","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.365c69360.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dae4e3504ef718a2baae2642c641c480df17e8d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.365c69360.0.tgz","fileCount":34,"integrity":"sha512-wrzy/DL2w4dKxGhEw5wH2wLuBu3g9q3gbHNjm2ToS5LlIYFEuCGfxKPeIJo7nXW94ImQQRn54gQrAPeQS6n7Og==","signatures":[{"sig":"MEUCIQDKQFP2jbMsEqtrVkedip054S0q/DLmYlzK+cWtDHLBwQIgMv3p1qcpYcPueWOCG3SxAZfMXGmy2JwhgFAtRiaWN/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KZuCRA9TVsSAnZWagAADoIP/2Xeigj92hfwuPkhGdvj\nseidjWH7/vrS1KkWZAZ3QfT4K84fLarjqQElVpoKTVNN3WSu2h+wjYtX1+Ec\nQxq3ns8ZBYYr7kQPpTZNbOUbHRbtvUp5LRTAZLTjAksTgE/9pJRVvRUoF0Ai\n6pAESQDTnK9jruJIRA+izkKz5Fbr4Vy0A3ZdauiduXpnjkEjxznYbsioarhr\nGxf3t793bvn/Bkpjn3autvdyzyshPl4pp5lzA1jNXqvqBDwc1+KsoJyJBQdo\nIMOPvc3cY6TCMW3QVbh41gAq6fgCDxxhHnZkfj8sR+Q52mFBLpJ+20Gw8lKu\nII/3FQ3lJWO/3U04wmkTvmxasi2dXQMc/pn/XKCSQKHMzntHpnlc5+x2kDSE\nbSYUidAIPyWEa8D03qHWlE5QFy7j+uDaYcc5sQKoL20SrE+dlw6TwIcyx7qe\nDlXTl0hzZ3qtsobUsCYA4shK2Ks9kF/Tw3j7VdfKoov1WDkRA51yH8YerkBt\nCQktrzFbQHogdynk0x1s30RIWGTuiq0+g8voVw6+5g817osQelBxkIhSjndF\n3kpVbuo+YqmQYOhglhS/UCoutPhJUzODgCxmq5U5BgShRROS699KEQWdO/8F\ncWrIs2OtA2NkahKNRm30+ksZozqmj9aoD803HOnEkMs5oyXS5cX8AaoSzQGk\ncBzp\r\n=mjxR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0b060c30e2974c71db5d5ed87e3ab7918656edeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.365c69360.0","@material/base":"10.0.0-canary.365c69360.0","@material/theme":"10.0.0-canary.365c69360.0","@material/ripple":"10.0.0-canary.365c69360.0","@material/typography":"10.0.0-canary.365c69360.0","@material/feature-targeting":"10.0.0-canary.365c69360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.365c69360.0_1609868910059_0.7021605600024909","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/form-field","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.700a8261a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2dc15a47fd42d14ac6416750d29a9e951afd136","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.700a8261a.0.tgz","fileCount":34,"integrity":"sha512-NNurVFEyBrZYuFFOLjjkooYePu3Z8CjWHuXMMbEX7dmaSBBrQ28NpdAROo7z8YkCtDs0/0jyFbua+rujYkgMag==","signatures":[{"sig":"MEYCIQD38YuJZXszOfAn0RTnPkflqMKACYudhr9tqPZEUjxjGAIhAKgJdDeYugDKOtvgzAadtM77gjcnsr6OcjbYYjxL46s9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NN/CRA9TVsSAnZWagAA3TUQAJLK2N4c4FAJxQlsucPY\nUkgdqXjRBGIS5x/SEA57YC9dpuzhcx0CYBuVQxuNkxF+b1uuBCZf00rnlhQB\nQB+wdo+84bA4XDyixBFsXBvWmF9s1OcpuBTk84PkmtJktctKj0Hy7N4O789g\n8xp2uZc5amDhOGZ8YjkKvJfs8v+bx/8G/iGbdssvzFHBS6C0+eMCyBsiDDhc\nuE7gjqNMe0BIDIiUcSxpdXOFhUz9xel16h2HfjbL6NWH6gPMIWbOR8tZM195\nHB2twOHWIEhrBdFYgTS0Wr+ec8r9r1FWSjG4g54FvtixbV2cwhGDU3jFoh1k\nYmQbUltuF+jUko1VmdIzPhBNczotRYjhRdl+dJCxX+jJz5zmaG9JAjpAdmSW\nKV8bN3atEdXS+NXaaQ+U6tkcBc6g/49tZH/Ih6UAOpTc8xygaDQ6HiM1Tdz7\n3blprwEK6iA0iKOS3Wb7J1MBERjIg+1/tjA7hkcFQBA9ATGzt5X/nbfhcO8H\nAvLqzXZp1SErgCKBxITCU5NC38vKOcX5TSd5ocVRpF8lgZa6eIqIcPbZ1Nlp\nAyS7BRKCqsUULm0LR6mKu0hxJSKPBRVfXBXujBglJ5ektxKNO6WWz3rtXpOV\nm5fVdAhX7ZP0wUEAh1nCEU1+ASdS46ThWrQvBvNZ7xFGjyGyEBEQmHGFo78p\nqeSK\r\n=rgpi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0e9aee4feea82b83f34c723b52aac42fda1cdbd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.700a8261a.0","@material/base":"10.0.0-canary.700a8261a.0","@material/theme":"10.0.0-canary.700a8261a.0","@material/ripple":"10.0.0-canary.700a8261a.0","@material/typography":"10.0.0-canary.700a8261a.0","@material/feature-targeting":"10.0.0-canary.700a8261a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.700a8261a.0_1609880447003_0.336382239709095","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/form-field","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.766981c15.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"021f8e10a5459f3c0ed0b35ac27a7a4b058639b2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.766981c15.0.tgz","fileCount":34,"integrity":"sha512-VpPgIF6SOX52SJAMUGEhiIEmoqklNo4UWe/wVmtj4kx4GIiKd/pfjANhZ+sc17nZ9bJzRXPVG6RbyFH0nAydtg==","signatures":[{"sig":"MEUCIAXeKFvwOoyAwfjyudEUNrt6G4QNG1V6Bgv5UXqpJOIfAiEA74CljMf/yEcN8m8AimOiGyc7nqmK9QyCrcRv0HOY//4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OriCRA9TVsSAnZWagAAWUQQAJOr3iXi50+wmJohVWAg\nAc7WLr1++bNxPkGcfhxAlLiQhY+BjdyQ9S4bzq1zw5vZMcPnJZG3FQkvQZPF\nF5Wegf1PbmxGUuhXMCieCSMQMy60IzKhM4Vdtpzxx0joR3L1pkGYNV5n9d4K\nFwP//efZgT/TwwbmDnVN3sVmlEhRBWbx8LaIH4TsB1TDn/J31XaMcNiSJ1wI\nILka/fqtt1f+oYT4T7v5PEc9JHM2+SJidn8FtTYkuNjewDvVSYPw+YCePcDI\na2+tksKYtcz2NUMCCfcjNtDROQ16DBn/zkvs0cxLZoUPiE69+cXeEOM32ANZ\nM07AmpWGPIu5iDEODYCsbx0qlgXEdcjDG+FjyVe9ddwZ20nQOex1C6Q6IHiG\nOjE/49tcpNM4s6OrfkJQFuBO4XiG4GZGFS7Yvql9UgKHS6UuonaoZB3xvUVQ\nd2IJudMPy7X21fXjNLRuU5kFivihbOfwapJlJAV3tOWE15pqFCnFKB+vjxQi\nr7/S4OUEK5aUOlM2s1hgtjY7/JfdUTyYx9czJ/ASffjzDohASNDBVEGdYx2Q\ndSseSy3/97EZeHEkjXKOuyvtmwkgRFWIY6kHBevARBs5mcVYo/NJB+dyG0f4\n4EE/s5Yg6ndjxHuUvlv5jhI223coyf7MG6ccrLaLOEs0eW7SAnh4jqI3XSzB\n1zTA\r\n=7E+5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"40a13adf47648f48d6dfb1daac9ded2f7f0bd442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.766981c15.0","@material/base":"10.0.0-canary.766981c15.0","@material/theme":"10.0.0-canary.766981c15.0","@material/ripple":"10.0.0-canary.766981c15.0","@material/typography":"10.0.0-canary.766981c15.0","@material/feature-targeting":"10.0.0-canary.766981c15.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.766981c15.0_1609886433653_0.08185962936675484","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/form-field","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d8f33307d1443271ecb8d57308bc74837ee34d7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.b28c576d9.0.tgz","fileCount":34,"integrity":"sha512-bnF26AS6ycKCDlMZqxzUN3fb7vZK2d8AS1mdeYBZhbl7e6BoNiX3ddKbDU5/+0P3jNs1oyrizhgzkKHqZ/LX4w==","signatures":[{"sig":"MEUCIQCu/tqTERJ+xjY9gL4WuSo1p2kZAbUZmZVpiDrr7dddDQIgeutEts69qkn36MuoLGEAKQ/3rzR5/6kxmWSx8H9wJdY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O0lCRA9TVsSAnZWagAAx7wP/RjxDc4atLNrFhfenN73\nR2bqFJ1cfMUL1g6QPchXz0Y5BoIxneIkqb+vTrGDCxeP/50wtWyVRwLmOqG9\nyz67Iv6+XwibFpb1kNhj0Hm2gkXeRgkfKbOLAifaIJ1hW19/kacxQYVcrC9o\n1/DFAhjd6V4aJmC9JFve5RuVYZBoEJ7VLMRCGduDBIv6/X54WxBOm5Ir2fkA\nHd8EVBxRtFa1IRitQ5djCI7Z6nGizg4KyC1J2n9Pdwe7Ss/n+M2pKGHl6WJJ\nfBvoyKqrpiK1nQqKQtkqkM2JH034Xvw6xNK/w7P6AOcLtnqqNUT1ZIUJbwJb\nIFGfqFbFcqM34id9dQNcw8pz7YxbKXpLiHFwyFnznabxqIPe4l0Ex9NSEr5N\n9AAijqj016OEH17ZH3V++ZPk+dY77uZLB6ILzqkKvl2f7H8WmiWRrxo8Qxpi\nsmG8vemGxNLRzVatXqh8y6xdrLhofVCRVad1loVkbcbL0YPWuNg+AymXVKxJ\nAOxS8Zj0EfFGxRVaWXqU2T8bniuI625K/jd+DsbpzuhF5eBtfIq91z50Kgd0\nW3jH0I3/3aXRTvHNVnylCAKlAgT4qnoFqAr6WfbyJ9TV16R1zz2qBcMsc9g3\n2At0CYh11kIQHPg4goOVh6FdmsFgPYPzK2QN2UQCaed0GrraUwFeKAbm/TQb\nljHm\r\n=UbWO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f11c5039e5e02253cd6e3eaebf7ee15629f3c182","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b28c576d9.0","@material/base":"10.0.0-canary.b28c576d9.0","@material/theme":"10.0.0-canary.b28c576d9.0","@material/ripple":"10.0.0-canary.b28c576d9.0","@material/typography":"10.0.0-canary.b28c576d9.0","@material/feature-targeting":"10.0.0-canary.b28c576d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.b28c576d9.0_1609887012531_0.8999162547109978","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/form-field","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.968735356.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3c3dcbd7ced8ac914480b10705cf1b769e7d2d3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.968735356.0.tgz","fileCount":34,"integrity":"sha512-mextrU+AE4/LLegfiBgz2orbnqh360SsbilCWyaTb0SSoCSM6LPc+ZyuV+mD1R1fcUxO/3URE22u/c63wpZlzA==","signatures":[{"sig":"MEUCIAchoKQAMVOQV1zqxnD5AJvx3WoufYMedz+apghQq5vLAiEA3sa8KF1j+jo5RMmT+328Z1qkk/iCrs55nue584glnew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dxoCRA9TVsSAnZWagAALKEP/1Eqr1ggNB5bKS0eSZNx\n4Npj1PTys8e6vaTl6o2dTBL+nD4VmzZRdYz5k2WcGB+zzaAIWW0YWWQy7Vmp\n64RK0AneszcQsgj2nwnWtJt/O9MGZb0xDeK3E4jIro44AGiyvddnTHXxkkY0\nSCtIcvP/YJ+lYYlIPL2VjpvwjzI4xfh3nwukxWNIoPEqL7rSK6KFqrIh2Cix\ntPSvoKLbW6SGg5Q0Sw80FIQlQizvgsobfYDgIYIV1x0Yrb5jS7jPsZ+PstIJ\n8wiQEvPAXmOwmeRgKzgcHxdVJwIBmVx3TUwuRKfQtKUS6F+lYBnAWrcB40RA\nlCTKCowWnHTA07KYHfeyfBf49OA7aNBQ+LL98CWPu0pFxb0QlFHSfCvX2ADh\nY1Xucn371KRrotFzR3HqUx62DeLlRB4PnVtzA6QxCvUfJqOJM8N2D1UQ2UB+\nm+rUzlxWUFFI5sdTBF9AbZh7iHhPNDjokPDP0xa5Fmif+qAqa8rOw53mH/NB\nUUoptpnY8192LbTeF+MZwNd/uWgBhr7T3+mwyujUerraICC1iYS4q1B1IFBp\nv6HNmL0TKRykxudrK3LainuarS7iDHnHLBMrQtVvJqtYtSU6p+Ae0BSFXHJY\nvuFi5iEvdbY1eSXPK8sVhtrOqKYrBzNEvpwaGT0xGjuKqzOLJKjgCNW33nu5\npGEh\r\n=HwfV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"016bf1732e983523c8ba8007681b058735467018","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.968735356.0","@material/base":"10.0.0-canary.968735356.0","@material/theme":"10.0.0-canary.968735356.0","@material/ripple":"10.0.0-canary.968735356.0","@material/typography":"10.0.0-canary.968735356.0","@material/feature-targeting":"10.0.0-canary.968735356.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.968735356.0_1609948263804_0.23598449312372738","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/form-field","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ceda9da258b8687e428ab9d4eb90b01ca9e44e5c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.c5e18b020.0.tgz","fileCount":34,"integrity":"sha512-2i32SFiguo3qq0IVYgAS6BJFXPjClWGNNQtnPVWErMppJsYNgpqg8luGAjFMCcpFOD3BjnZO7cbhfG98GKZ0Lg==","signatures":[{"sig":"MEUCIQCExzgVa7hyRfD78tmOT2ISdCXLQZS8KBJHHDH0eeZPRwIgZHtnZOXEtYyXgCxPXcu8FzcosOgoE1DKshIsPNqn3c8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hMeCRA9TVsSAnZWagAA++EP/iqA9zVirfE/t6+xjeIF\nUg1pa/8NKycp2JQWWnQAjlt/ZKYTFmmsaxou8/KyeGsOqPYpB/p4pyMld53o\n27gUYQSj4U9tCfJ2sxPCjw/069qqU6jQ7sVwl9kMyDiON5/bcEFA9DsqQ/+T\ndkkfCDzDXkbb59XrQeaVcYxXfj1TQHh3VrSTZyhaNwcfGla+gxgTw2tlmygQ\nqbveZqU0E/l+h+Kn4wgE9+c0LfiBVxCPfDXPeassGrkkjpByw/L5AlcJHU4G\n40E1yE0kbCPtEVdw8VEIeTFPbBW8HsE6mtP/GZVzJwYDHBSfCONqoi/SNePU\n+LTPBXHfllAVbSRyCkrMK5uKOrfBnbhBSzQ+M8xSs3ZlqcsUtoOU6rMihyCH\nWc+I7VeqxN9cvuTV6l3imxmuSuckWK//kfjpY9FwKBO9vcr+uz11T3XGnd1w\nCMzTEdzuRl3Eb5p7rZNzWuTLaTHQLhY9/krCrQ3RE1kHP7Ua6guAVDXfmGQd\nsfwMw0oPcriNO4Tb4lMJ2papZ4NDglKz7k9m/eCilWYBwdg8urt/nf19v0mc\nH+yA2FMPo0vy2YKurFJOBrCPX0VqcGouWW2jEYKnjqcNO8uxj3j5diN8nwot\n/MF3lscjQWMIdQwp9U/E9vfQZCI8PaImbr8BkzB6hfbd0pAMGlzPmD2Qu8Yt\nxDMC\r\n=biqm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"16a60c2c89ea18fb88971304d4491f612734e932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.c5e18b020.0","@material/base":"10.0.0-canary.c5e18b020.0","@material/theme":"10.0.0-canary.c5e18b020.0","@material/ripple":"10.0.0-canary.c5e18b020.0","@material/typography":"10.0.0-canary.c5e18b020.0","@material/feature-targeting":"10.0.0-canary.c5e18b020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.c5e18b020.0_1609962269991_0.6131657338389616","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/form-field","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa2e2e60f3d7e7fc1e43704b2a9543c6e738b030","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.bcff8a66a.0.tgz","fileCount":34,"integrity":"sha512-z6gLtDpNVzXxSeu4tAbOetASVW9911QmrIBI/fGUw42cnDeA0x2SiKkaIdLfvdhPjONKbnQY8Iqczs5wP7UCtw==","signatures":[{"sig":"MEUCIGxtmJnH1M1olCW1PB2jLzMrshBE9i7JqT6Fg60RBWKbAiEA5ofkBCnuwjO19FxH9aR7V2fgCHVNbFOKRTSkdSw/JFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hzuCRA9TVsSAnZWagAAyuMP/042ZsBpqXCMveRHKBTW\nTWyTWDk5n+VYDTBfxo+HqRGmQJF/6Fx8XAozDcQrCOxyjUB/G4NMGt4mmzNa\nwTJxUh37pq3Bpsia8ijnCq3V9u7omRTJQAKYm5pMUF2JOpl44VF9tzI2eHEN\n8SjNqW4DOgoGCxvpmpmLyVJrnuNHKu2b+o48XgQoHBKi+m3GLuys4uVr9VGy\n4BlzWnbDQnbmeXc/dDcaGXJTHvMyZUNJ1+0Se4LHGOf/lhXsQ1Y8vhyAE7cX\n2auhnRt3lPdPckKJLf6ZYXjIe9+ASeACOl3Pivw3uA/GqLSUYCvhgtfrmWZv\nbzbbHiu5GTK4M+JiibgJEw/dJZGvE2Vd2Kl46mu44Lcj38ghMHaIDP5NSWNU\nvDSJJpd5WPz+gQk1XqZf89cMJxU8CmVkxB6+EaTNXXlVQTCmgFcLE8IlF2vi\nDrzFlba1Hy5XD/NS+vppOrvcGfjr0aP9nVJFn/VpDE9c5nckBEzaV11S0Zho\nyeCPFc4d8BK3yv0kakUoOPuPYpnHl+FIro5R3R1eI00xUWen6BbnRqO1cD40\nD+KJj7sUeocY2sBrphvVTKh65VEnLO2AFpJmZlssUMdX2QEglfZut3ONymIM\nBhIUBa/ZaclaMDv8PvIsVHs08qegfAO5kcbbjLXNLzowD+41Uural3GhamOf\nu5qz\r\n=3f4i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"81af087ae7601c8b819dbada709de8d76ddab960","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.bcff8a66a.0","@material/base":"10.0.0-canary.bcff8a66a.0","@material/theme":"10.0.0-canary.bcff8a66a.0","@material/ripple":"10.0.0-canary.bcff8a66a.0","@material/typography":"10.0.0-canary.bcff8a66a.0","@material/feature-targeting":"10.0.0-canary.bcff8a66a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.bcff8a66a.0_1609964782220_0.6492213226240937","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/form-field","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7604713e101e6aa0512ec5cc119e038b0e1a2e37","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.79328c9ff.0.tgz","fileCount":34,"integrity":"sha512-0vR6XjEIXk1wJKYlNL/Mr9KuKdfgMBDIpk9vuDkFICj83FH51MYiEU+RVRCfsUBivbpIBzMG8+d3zaRQH/4NsA==","signatures":[{"sig":"MEUCIDOGD12WWqF/4q3of7/5inNCRGSxzURgNaMxQY7OF67lAiEAw43UMkxkz080bn4R1WgwKKAThZOQOgkiZWQ+osvpZmk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nMxCRA9TVsSAnZWagAAB/IP+wQp0pXc8mAY9wJtbA85\nKgOIO2yYDkdTpD3+5BSGqwVcllCHfWO6A4ID1q1xyurQjwt4PPylwuNJ7zKn\n29sTswpxo6S9naeFyUZsf4Yu98iVjfJ2ymLrA2RRQYgPajGxpQjeNmSFk9mQ\nCvyUlMrbmxvPZqDgH2gXOxsciNMtNgRndFAle7chrVSGrCSQrCwevMEPyrr6\nXGWmtCusxrDrDoE76CUeq4GJpFcmFhMRbipGraFmtGByMVTBpjL7d+7/fHgG\nY3DjodGMX+K5jHZVQMKCm9zBA2XHWBqd5DN40bySA8RN14vucbJUMGcOszoz\nv8Kw4yAQK8oo1Jy3YoyBrApjqak7KsHcBHalztO2rATUepZgGBXvgT4z/1WP\nF3XiyysGobvF2sAOnJvQU4U2rrQfit3XJW9FFC2obmflOm9pyPop1Vp7o+K0\nf1nqDWSWKiCoRdcOTEvXwhuGNOg4aGR4hkx2ydF9m3lCRm9bsvEMn0SW6pSi\n3EfEGq7Yublz5X/rCGln2QErnh4mQVaEbaO+xX2Hbn1dBvbz+WuUhQRN0Xv5\nfBaaRL1eI9JTed/FYqCfFCjuVgQupZ9dUeKWyCLkFcJUiCEb/mB4SFvbyqU6\nXO3jvTuljqZ7SMoMRAdi208+L4olxYO3/+DYb2GsNDa2KKueUkjJ+Ht/PJSR\neWZ5\r\n=HHua\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"15dd1d7d9065f275f9f9779094b959944d33197a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.79328c9ff.0","@material/base":"10.0.0-canary.79328c9ff.0","@material/theme":"10.0.0-canary.79328c9ff.0","@material/ripple":"10.0.0-canary.79328c9ff.0","@material/typography":"10.0.0-canary.79328c9ff.0","@material/feature-targeting":"10.0.0-canary.79328c9ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.79328c9ff.0_1609986865462_0.8450249905248135","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/form-field","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.121e1f303.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ae8ffb11d7a15dbe35d0cc00364ca5a21af3e95","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.121e1f303.0.tgz","fileCount":34,"integrity":"sha512-TQTIwXcdkJCp1zID/5K6trg0pomEA5oFs++J69VpmeZI8R6lWoGz6HeF8oXLtxWoOM7V5kku/noGaUSd3lR9kA==","signatures":[{"sig":"MEUCIQDd8h27Nks+kUe0gHg39xG5We9yS+IlblSd5/JKKbigRAIgSDY/YTANnUy75zryhFbXPX+oV14z3DUxkEgF+yMUdZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95ckCRA9TVsSAnZWagAARUUP/i3sCiOoIqOC4gUDN54W\n25umRrKdUG7bU115NFAaE2LocKpS7eZPw7zi9IQgGPM1zTShaje2c+OxUiDV\n0Jkg04/Qe0nTeXqWEo8T8LPgvpFR9g84s9wUsHNr5whj5AmVALMieYQ1KxoH\nYtPOUAC1HlSCSkAP5yBwVyNAyV0JeJ5MHPVwvd1vqxb5gaN/nHuSNIurHl1s\nqpnBc5BSWnSweFlz+7UvIgHzi/VdBuxVuDiLUNpBx7psPeCpKx977XOKP0je\nfFGLGMwEkCQBt+udGzXiXwXuoomwNGDJzMStB7URh5DvzIT2KAjysGDlbT8g\nM4yHs+LGzv8+r2EwnELTKVnz5ef8t+yEcNUbsjlnkb988HgjZzXk55b8SAnz\nxWM1zdkZx/aCWJLh5BMYebBk4CZ2RHmjLJubtrhrBcfy8TeWOFZz4KXdrEAz\n7mKctU/dQ7B/oggROGwqV7ls+mpFjq3dijRTFx02B9p9tleE2a6/5/0VpSUK\nl6rxGFX/qSAY9HakrLCROiTBnE6vvoLpfNqrnD8ZiDut99xXLRXKlZLXUteD\nQy5rN3DLSwtNqQrfkxiizKEIGx0N7kBpi8T1LiOWqn0QTLy3MOpeu8lxoiIJ\nsuFSsE0+dMTCzqnt+1MeiQnfYUsjFvklV+9VZR9VaSPkUQxPydRIRHuEg9Q9\nyThF\r\n=E5Jh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6ae814dae9eac40570f13ed9d7b821cceddf838f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.121e1f303.0","@material/base":"10.0.0-canary.121e1f303.0","@material/theme":"10.0.0-canary.121e1f303.0","@material/ripple":"10.0.0-canary.121e1f303.0","@material/typography":"10.0.0-canary.121e1f303.0","@material/feature-targeting":"10.0.0-canary.121e1f303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.121e1f303.0_1610061603778_0.6178674210786743","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/form-field","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.abdd10065.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1e7dfe7a2cd4a23261ff54346f63232d93404c1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.abdd10065.0.tgz","fileCount":34,"integrity":"sha512-a/4qGO+vjqj/P2/eCpKS47QyVhPAxDHZ+V9zwhmjHNK3zgs9xyOMu/ImTV53Dpq2l46Tq87tsZ+xhPr7wsg5QA==","signatures":[{"sig":"MEYCIQC/F4PHAwzVPnLTcSyrDvv5U60xIRcbFKb3TuK3YzIF0AIhAJu6GEh2l+SjHR5/Pw566xv4HR2jdtclvzZMUikfX5Ft","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JuuCRA9TVsSAnZWagAAMwsP/2AC7UEtjO3enaVKMNeP\nO+TSsLYufxmr9BA4ZBRfUFL8H8qqU0YqWyt5EFIU/ST8J/3gf9ue+h1YBBXV\n7h2QlzQiXCJp5HeDQeLYViXWadjbWqQRoOan3KQjiTdgpstVqvlKIwVOo/IM\nlPJLokBBwa+bLwE1IqG9gespENlK6udyAjv0wc6vD2dPGt1CD6z+JPsW3Hhi\nKcUTVl/kmiw8j22glCbk7akHs1pqmAMUjE2HWG/cv5FiyisGNnVfzC4GwzLg\nIRiacXu3016hJw4CEZQQqZBdfU1VUqf3jnn52PUzAAYo07jjlRoHeI++uFRd\neibu2t8c+FR30I6711bS+Bhv8DnR45gbT43g5633bHEzfo8nZ60VoBQVK+8+\n2WpkMNIe3/ePKtYyuRMyzu9wlVb7JrYQKxHUsXAejalCG792/4lbHvlAsKPQ\nNPV5HicE3ssqJK3OLujnyCqikTF2MzTsvqPk5Fu/mLz1lt/bLCF54hy0pe4h\n8ErmZEUrMH/V1sg2Sd0hBXB0mA8L1owpdelrcM8YUhdWAj1OeFIwvDlVJuzO\nXxf2yDIU6jYHSAWyo4Tod0JAz/593aMn4NED+QSfVnUqueV65MZF2JR6JCZO\nqWvzOsScYvkZ5WyrsOyHcOZFny3lkBEwvUYkA8/ItiE6MBHOewtfOyh4+TgM\n+W4y\r\n=99jD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bc8986a19721edfc6facb62cf839cd222de97d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.abdd10065.0","@material/base":"10.0.0-canary.abdd10065.0","@material/theme":"10.0.0-canary.abdd10065.0","@material/ripple":"10.0.0-canary.abdd10065.0","@material/typography":"10.0.0-canary.abdd10065.0","@material/feature-targeting":"10.0.0-canary.abdd10065.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.abdd10065.0_1610128301525_0.8567858267236468","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/form-field","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.089de519c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4757aa5eda13a66a40f2f4ca6501f9754fcc5b1d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.089de519c.0.tgz","fileCount":34,"integrity":"sha512-0KaZJL0ecwUTCnemsqRW4EmtJzBvZdFV3s6U4RwkVrXz5WWEqp8rnW3USlN+7EqBNzttpCoglw4LeTEFpb+yxg==","signatures":[{"sig":"MEYCIQCx5ADQv/G88LlOlbFtE5tbhlMn81IpBIPKB0SQape09AIhAN996z6gYloMbuCOpyHOGXJGQfMAglb/VbU4+y4CMvjZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NrECRA9TVsSAnZWagAAvTwP/0U5BtFsxIMFos25oyDW\nlk5A9um4WeD/4JUfw/A+e9nATqB5cwyEsl84kWI4RWgS7gqf0492FFI792ui\nGaPs7Arq0DTNe/eVdKxYkxCjPasldi8FYiy+OrBayuEcvfPEFNkM6aNm4yKT\n6u8cUMSwPrcxNYRa5kpsj5DwbJV2KzaFe9WeBPFnx2ALqU5oJLzHLnsG3FUr\nsKukWxXW8lvTkrUAHhptx5tUYkgELoPGW7STzEhybksaH+KigD2h7+YkbcpD\n5kC7TM9Waeo+y7s0i7o19SnlMO+2Z6Ts1aRmRHbM6S3k9s6NM12EjA3a1fwO\nfoA0vtN2Nutvfn5Iv+B/QJb24wOEes6UR1WE7klJIjz72sPdtvujo6E1jWX1\nIL1rPMyIB0JqtwFyypTVX90dLaTERQajYV+p59JbWIiOZBxWHrVoYhwrtJTz\nSZfbtwkMfqYM97hP+4cC6d6CW5/hOhLEevbguBFs6qQ25Kq2hQ+pF2Er0nOi\nvd4NySqLBlmXSyLtFqNHGjyijxo2CnM97hd3xDGv1Au5X74ZJLx88yDkV6e+\n6EffXzV2IDUisqLVYSXy7sFdI8IRGHmW/9RkNwaUZmCaqk4Qlxgq2iYr5Ynm\nlkJjXzJUVgKhD5gbk8jS2JUsb6PY0gmvDnd8vXDlwseNVHLHWO1tCeIhZNB+\nstUQ\r\n=k7B3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6a64709b5be73a45401fe82d1e6d126d7312fd21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.089de519c.0","@material/base":"10.0.0-canary.089de519c.0","@material/theme":"10.0.0-canary.089de519c.0","@material/ripple":"10.0.0-canary.089de519c.0","@material/typography":"10.0.0-canary.089de519c.0","@material/feature-targeting":"10.0.0-canary.089de519c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.089de519c.0_1610144451943_0.42162752029343364","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/form-field","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.163119837.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f2952791fa2cd2fea50da006b1958752d74c9bd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.163119837.0.tgz","fileCount":34,"integrity":"sha512-8Xe1ZnzHi3Cb/yZFFB0tnCrIHOJB2dJF9vJGfSXAmdqW0nLLTBtl5NUzY5m+xeiAfRR6jBc2t5R9kf+ZUCC+Dg==","signatures":[{"sig":"MEUCIQCKhbkmnRHC517wLnPI/VzKBxz7ueMfyxgy1qnL9O5mKgIgBgvhOru26DyW0LXX0Ublbpa7X5hhJljjpueeb6N0mkE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O6dCRA9TVsSAnZWagAAm0oQAJib1KsGusO76iCK7ULV\nM/lEo5lJxEwo2jIO+qkFbF8uVQTrJLO4Wvl003v/4+mZIeEuDvZZkNrmPwUv\n/F78dOVIUVzAwpttj2XHgDCXfS9J7KGVJDzdyl0dHlpoToRn+W7zxr2DC9YT\nEkzNDRE3V6z446T15DeErJyPx0pNCIxgzSVD1n55nwlHQ4mCVP93PidDS7IN\nSGk1nnFMB3Rc6lvwLkbJyzuiag2Wsbfvi1uAUys33QKV9PHywDX16kf0KUum\nNP++NdReIU7f0cl3AtxFs9NI8yA4Vdd7SIu95A1EgstZO0aqq3+1zKQjZJo3\n6SRchfH1eC57eNy7kr8zLmt7wWzRESchjunLgIMWd7d+5I2nIcWSxQvs9EfI\np+cd/F0OG/LPfL5qx6WxCmpxFBNc4MAYeCwvHuTfqENlxWwNYgyD5QCV5ZTl\n3bdUv2DPOFwqoKHfoflsEf1BabYgMPIkCppwN3NiBmJYtvut/ZaVNXTItPph\nGgJ3Kqt0CzG2AIch+IHxHvSOGDqu+uabvw+pEObcAWFZdi9V50tMB60EhKtR\nZ4EbW5UwPQTBtskQaZKjtnAreLu/hFygn8H1FH6a8G1+anhP2L9XH/lE2TQW\nsZX4sA6YHQLHgGqMLaIQ6TaA9CpLhFKqVQvEPJbmODYp6OyYj7aeDXL/8JYW\nfDQl\r\n=u9kw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"86f8af57c151ec42ed920ac445544bc384ce0975","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.163119837.0","@material/base":"10.0.0-canary.163119837.0","@material/theme":"10.0.0-canary.163119837.0","@material/ripple":"10.0.0-canary.163119837.0","@material/typography":"10.0.0-canary.163119837.0","@material/feature-targeting":"10.0.0-canary.163119837.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.163119837.0_1610149532907_0.8211839682806763","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/form-field","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e71eeba4550705618f8e42073a97479c7c45b578","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":34,"integrity":"sha512-q0GEj/sZdhpG/52T0jbXGLo9ueEI/mk/ZRv+WDihW6tH/lOF5iNU5ZczABzeVNBvs8mexNJf+TA29UB33mELSg==","signatures":[{"sig":"MEQCIAjABUUrLNlHNzTClwxtc4BN35jxRLYcEcbMLg/iNcg2AiAl4Ru8YWtX+Mn1qxbz5ayQnh58QUQoQlWsnTxNh0yOUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HvYCRA9TVsSAnZWagAAWBYP/R9vnfBwsr5kdOTDVQRE\nBJEawEuApzFYiPUKkQKKGaGTJicvdOrPqrsH7ZoGKZikVZSnJU+Z4ivavEyM\nLor2ppkiAfHg1dzUprHSfRBR+1wGveL1gWCL16/0NH1HOaY8ER1Rz/7Nvm4G\nLS1rnIvdxuMEbd1G/npzSlLRvo3R8K0XAhWAak28U1JRtlKpOvCsz9xdn0Cp\nytExkOgqWzjO4J2hidZi7a/8XFCZkbIxDHeA8HNWpf7yeyb7LlItTNkrAWtU\nKA/AOoO+CPimFuJU6OHzpgO+K9ytMjZV/FyMCsAsnTlUMAyISsqrDlSwsEMw\nKxfugaT7Pk1nrvSLsMeI4fTxPSrB1nX8KbrH2omVNGiwiRLKqwU3ZtFZ1xj3\n2r0OYxGbkahgESkIejFfiuirSEL5LkjjSdpevyym4nvVHmT8H31dAcesPVZZ\nQC3vx8PgeumeHfOEF6EwBjbRgUKUkOfiwde5nLfjnzjOsH52udERFvumdvYm\njoaZboGrzQZqhOv0eKhghDJiY+Q/StTzdqsynVYBOp7Ep+t+Jg1VEF12fe2J\n5rm2jnSn3NNpwHielHSclOg0NILfHqK1RZaf/YhMlXpTM8ekNu5aRo0/C9Kb\nSajwYu+J5VGIUwqpBuu1XST8fLt8B9gsJhjLwHFwikAxeW3WTiM4hlZMePSm\nl4ET\r\n=Gsfi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3b735aa03cc784b7346905168638eb6a486435b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b8a1a58e4.0","@material/base":"10.0.0-canary.b8a1a58e4.0","@material/theme":"10.0.0-canary.b8a1a58e4.0","@material/ripple":"10.0.0-canary.b8a1a58e4.0","@material/typography":"10.0.0-canary.b8a1a58e4.0","@material/feature-targeting":"10.0.0-canary.b8a1a58e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.b8a1a58e4.0_1610382296208_0.2623893625364764","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/form-field","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.7584267ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"393f3126b4a50266b7fa2bd1415561d9739919d2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.7584267ff.0.tgz","fileCount":34,"integrity":"sha512-JaO/cigZuSqfPVu3YKRtZj+xb2flVRYoayXYg02EP3hMEXjYVsI1uvzr63YW1onNr9iTAcUJw/laXYtjtLvcGg==","signatures":[{"sig":"MEQCIClJ2KOvWtHJLazovAC1gpINtkUhP9jmPQVy7OE1NqeoAiB0mjNzr12LxNCDAesWO058SvdMSNmaYkq/SY+lT442uA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PeACRA9TVsSAnZWagAAYFoQAKQVs2mmsMJL7bXy4cow\n2Fr/h4g77rHAzqhFzwQedwvvJUJwiESTjygqco2jx1YjIrJgN5gWwb3PexLf\n/WV8tTy88lXojBKFhzF3SnAy0w2ZHVkYD4/9GslEOF/aWtf3g4lawbo+sLm6\nViVd0/TVemnBJkFZkUUzaLUxC4bQumrq4istSFSEacOtKdk+UimwoKqj22rj\nt4hd8Il0tftef7c6DnZgssMRRjbBfmHdAydZxFLLh8bc18Ls8nXNeC9dkfRu\n0PScmeIaeD6I66OfcqKMqErUnfBjFFXixaONc2v9JReO+sWv0cQ8nuj3oPoR\nDoq1VtWdtcZcigIHnTtRyNd6fUzH4xhetMKRNQ2Mm1keWGxYA8tvaD+kWzCT\n7RtI2GJIgsJ2EKWYn6TnLxnvCaDcXCflC3p76vFLWhYQSFBv8LNE+XQUW9/l\ndvvoFL+WnXtMJoIQAzMAcOpi8DxIdbC+id59Jxt5Qp9bsN/I609s+91YRAcd\nzGfS0ES53cDbH3ifzr7qYMBpo0OlL/yWVflL+ZEaV2N6d3W5zC67sCMXNi7H\niLTqI7mApY0csQyyYGA7lpadYvK3WijjZH2++yHe+x0m5392g3v+udOxieDg\nIdIxOLfMGQDH6d050P8kDmqhK2gSSQeWsg+XOQliV9HHbkDOumZ23xllNEnY\nfLjq\r\n=WOPi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"89cedd80674ac536aacf2762f084fd7d1640873f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.7584267ff.0","@material/base":"10.0.0-canary.7584267ff.0","@material/theme":"10.0.0-canary.7584267ff.0","@material/ripple":"10.0.0-canary.7584267ff.0","@material/typography":"10.0.0-canary.7584267ff.0","@material/feature-targeting":"10.0.0-canary.7584267ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.7584267ff.0_1610413952208_0.6437259607039698","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/form-field","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d3b7580f89d9a0663d130df3d26f021db254e7d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.251ac04c0.0.tgz","fileCount":34,"integrity":"sha512-4ZV+Nnt/lmycr54Ub25CzZHrcq8YZcKHolZUrTRFmWIQXIo44S9etS/UMxRBqkQ++PCzMfKw3+LUbc9SvSnUrg==","signatures":[{"sig":"MEUCIQD6XfQvqTaIf7J85vDAkvcnY/aKjBvh1akX58nj6GOVBwIgDMxI16xGcChFO1dEelU7s1MYkpgmj5yXkhVvqQf2jpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f6rCRA9TVsSAnZWagAAtAgQAIxRaunAfoOns/eUqitG\nywWJBpM+JQe6HBQcx9NWSlpyBwUAYspQsK87riCGiIXBsHJL5wfzi+eL0XlC\nPSZOHNGqWsml7+CbKr5mNIwmZDampbRlKQzQAd581DtDLbBvpjLhCduWzcwp\nowA+jEsbkSzPyOl+AnCBdvDjsrtuMFmwh1tTTif9VoORGun1cHq5McWj/G3e\ngFBOXs+ANE4e5B/NCvkSSELu9/KpUGBIcH8d5lJoSNKPM5hZc+ICVyv284FM\nktMZiXrU/NFjkIjVIWXImwgCi9b2zuRC5/oDw+s9ztDUqdMh665M4Ulw1Ira\npdTF4teZkpzceAuBE2SDQrB40RBcGQEh4bSJE6VVwDhZwWr99n+5ZENVKiO/\nutcmhc/JlabUwHgHQ/GOOEBRYwAFuFthkfzjrU5lhIWAEQIIsz7WQWEb1m0a\noIRLNJDfVm/d5CJ3QeixuF1BXSQZ5G6GZC+JB2761bC8oHjLccr1f4+n+oaR\nVTDAGc6C2v8WB8H1maCT1F5FKCN1B+Z4uc75cgH4IRutZRCMfEiAyJnD/nTp\n78U9Hw52JZjMgLD8lm6MYAL4kFTf0Z7AcR85NOAYapBrJ9ENgPa8dZYjplhA\n/IR/GqRH1fcyuCbhYX6tB8emKJkf1eaa577UBXX+arhjQ1l59daWIQavA8TN\nEF70\r\n=/DVs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bacdc97357600156630f8321ac8a3a8746474194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.251ac04c0.0","@material/base":"10.0.0-canary.251ac04c0.0","@material/theme":"10.0.0-canary.251ac04c0.0","@material/ripple":"10.0.0-canary.251ac04c0.0","@material/typography":"10.0.0-canary.251ac04c0.0","@material/feature-targeting":"10.0.0-canary.251ac04c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.251ac04c0.0_1610481323081_0.6546126725785284","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/form-field","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.772cc1068.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40dec41a7db1d98ac3f3d20766535e0cc85c0326","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.772cc1068.0.tgz","fileCount":34,"integrity":"sha512-N0NlC25zfYd6/pSDy3TlSKE7SI8OxmbTGybVrR/UzsV8Cf3tp8ji6/VpT2ZR7vHTshYjsbYPFwpm0btjCWiTcw==","signatures":[{"sig":"MEYCIQD8QgobLJT1ELovRYHIooaDIGiKckeK4wjTkm0Nragu/gIhAKhqpcEQmlHYlGKE/ZEgAeM6j7lb/zJZzwIpfQpeTcEF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4szCRA9TVsSAnZWagAAWmgP/3njp/WgMmvnYv1+3xr1\n2KgJw5A9mKI9yQsiky59vuT/lg9EIYWii4lMlopehSr3hrt35X3YgJgUYQhj\nBjzV4QGbfAofcm/gGOWsklT2X837tmHN7El8YvBOkrafPn/N39HrITtMXTXe\nKF68mn9gZM5Zc+bE6HVzKTZ0n9FkPEQbN1LDSVPh2rNw9BX18nVnbSxB+i3i\n9/3ncKMX4l8tfYcasIDoNlf4p5W+GUfZmRgYuvgB87UHMH9fkEiYKSkqcQsg\nW1S0m5plYS3yA1womE3dbrx/rZFL4HAaPciNq50OqZMfenAGzb1aRko2DzYE\nJbaOf8RDDcWMyMZ0Wd41JBNFJKGBwBbOn9VkppNdukcJi23KhP+nzu9vCjEO\nAjRNYpaVe37wE2lE2PnP/1gXh9ldc8G61y3hdS7uRDgzxJ0hpo+gVylKfauE\naZKyiuBskCCsPt893UFGhR32kQbFQ14Hx7M9IMxsW9Xf3rJ8CUErXm8juHs8\nAj0dpUXthcWtkblo8W4uxnOlk50IbTdpDj3a5OeZTtFVV6e9LtD5vrppwirQ\nOeMdisrCEL7x1YjeEUzZJmShYpLnj3MpP9JEyHEJnJzpR55zKjrC8H5rT9lD\nsxqcftTAmi5OW0dd9jDDiaWFQftBHVQXsvdAIis6l3rR3BHRMNGG7s+w2crU\nQTr0\r\n=eLkx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e8dfb103b25351e76ae27e482ed4f13c4bf997c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.772cc1068.0","@material/base":"10.0.0-canary.772cc1068.0","@material/theme":"10.0.0-canary.772cc1068.0","@material/ripple":"10.0.0-canary.772cc1068.0","@material/typography":"10.0.0-canary.772cc1068.0","@material/feature-targeting":"10.0.0-canary.772cc1068.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.772cc1068.0_1610582834674_0.4179598146637702","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/form-field","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8a7783ab9b15f3de94ab15e10a661cb33f6dc18","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.fe13dd130.0.tgz","fileCount":34,"integrity":"sha512-fqIEUiA5hrpqc7h1Y0ksIVvvfdQhfD3aQiZMVRg+q8DY4nOkSvbca4vkfHX5NzQPDMIQj1fWe1kwfBoLSIyXVQ==","signatures":[{"sig":"MEUCIHjdYNiZswJQpJbt7joucXTOhKC9rev14dL3ngAvw6myAiEAqOgGUeFdQldk7DI/G+r0ji41wbdznwERidpAsv6aUdg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5oICRA9TVsSAnZWagAAaA0QAI72Xxeu1LuiYJwkIAvL\n71dlbtDoAC574nNQwe2NWyZdaWm+dYj5Hv3Q3SZ0Np+j/TwrodKdfeJEro9x\nwNCMfXHvQb2h90KTHkEis08lQeC/e1pv4ATwv+6UgO56/mGuB0g+33NaJgFq\nNg4kpXXNJ8bizysTYXAZ2pW8KjAFJXulRvapR9IGtJ+jzLRbfOVC7Ut61bkt\nD3+J5iuhOJ49+IUEMJSVhvuM5N1eahmHoFpwk8K8Gz3WoB+JOp089U8AHWr2\nEf1AiXwBLzRKNPVYLHx3VgKRrDqM41aDMpHyirfd0dPIX9jkJDXPeNUqeg8S\n9Rsw2lM4VtT/IdViKvd5RraNS6NqAR9ZLUvRf1w7KFFkRYJDJwH4OPMuEbV0\n8c8H9KaqGzjzI7cGl/FObeT6StMRSLaDIlMFjHTOclCooZPsB+SpxWzeXQeI\nbR/hUF02EJgqIRfaYbnvbOivvL3AQevIIOJQJTEdE3Q8rHEAvJ5gTCHIT/EZ\nLhX59w4t40D2zdZz9KuBHmMhIfvKkOGrDP1zJcoQBNOlhFYbHeyJ2CC65oOq\nXx26c6fMd+cPEFNlJ+IISseAEV8c6XB7wEn7PHiZdVGKyH+jMA31pA06z8SU\nhnU+NFq4ud8ux8UDzSSntMhvX+/8q9CNeclwfse0iCW45ftCmvmI1pz3xRLu\nRO5s\r\n=2nBj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8825c25e04c8e88b7430f2f8e148da8a9197c02e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.fe13dd130.0","@material/base":"10.0.0-canary.fe13dd130.0","@material/theme":"10.0.0-canary.fe13dd130.0","@material/ripple":"10.0.0-canary.fe13dd130.0","@material/typography":"10.0.0-canary.fe13dd130.0","@material/feature-targeting":"10.0.0-canary.fe13dd130.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.fe13dd130.0_1610586631862_0.8524943108705938","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/form-field","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b88f771ad520e5a6da7fa4efef1eefb08abeaa4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.c7c5da28f.0.tgz","fileCount":34,"integrity":"sha512-nAPmRXGKybLgVj/pd9+HJMGkRCCbdII+MeT4eygnf/LYd5ugxmKEa/M9iRmN+kjnlfwkAK+aAlxRBU0Pt/otvQ==","signatures":[{"sig":"MEUCIEfsbERzJnRxxapF3n1CeWLD2srT83r/5KUhbNWHwHNmAiEAsjt15LjUqbmAevtRTuLFzXUWFid5a2r6a2EgMnDVAwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5+dCRA9TVsSAnZWagAA9lAP/0BotxOVoYRjF+X6MZbP\n/KTopUPvgKbG90XyM+rTtoIMpsbB5ij2lw8dHs730CPxc+YWORa4bYpbPYe0\n1p84mjAnajhIwZxGnKXtjRrSm3WF3wHpClj1TJ2QxoILD4qzgmBi7haqaRK8\nueTBaFZFb4RSbt0mvlZfjTl3MT5FiT/zz7l0kov9/EGpVDxWHR/eaJ3C9rIS\n02adb3IACdiJyvonoHFaEcCRXDvqDUdmzSDU9ewt6rCkH5BW8+AgmM5In6Ig\nstIKRCzlWtKm5bNHmP/HGVi/0Po9sPqgMfkL+qouEAgnn2IUHhBoRgjy5sB+\nzsTgdL0f2EyKKRUGxVIzdHpQhPjmVzR+KEPfB85rGQXHAhXKbIBb4a7l43sE\nGWo0hdYmf/mEXR3mP66YKDrYjhq5y61hzMP0C3Yednj1XsztFHlIaYwaCG70\nCAI1JvWKqd4zxNPFH5Cka11+89PzVf9vEGmKaSFL072dPvhiYLr5lp2LC2uW\nFk3rMjdvKlmudZClc0A+n5RzhIxCLzvoAZu2jCjxadH+sjmCV3Zco/W49jIQ\ne+urFTl1ng7o08y1MhB1luwhsuDkMbjRYElrt8aTcvS/y79Gg9gcQZwugg1a\nqmS0AblgpjcFApaHdxs3Ust5qMdxSWjQgcdbeMp/7QVVs1luHY3PBnchKTgg\nHyL8\r\n=NKIP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5d3f3a72d4e9757f2993684a89928b04ad29c6a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.c7c5da28f.0","@material/base":"10.0.0-canary.c7c5da28f.0","@material/theme":"10.0.0-canary.c7c5da28f.0","@material/ripple":"10.0.0-canary.c7c5da28f.0","@material/typography":"10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"10.0.0-canary.c7c5da28f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.c7c5da28f.0_1610588060534_0.1194261952384188","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/form-field","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac16a6ae9a2abc5550e1d84640e02589489e456c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.b2faa116a.0.tgz","fileCount":34,"integrity":"sha512-BwUBc+2C4i75yhBShU9b1Uq+C+h55cP/W7h+UigqNz8HZIeQh9UC27bZ88KADb7Cpz4jKf9kVXl7kjyDizGYzA==","signatures":[{"sig":"MEYCIQCVHPZk3Hj1qbWvGoA9s2aQU1jdOIpLaFeyNwJuxuTNRgIhAOVwCqsNNNn6hED3dLorynQX1OaOwIHR/0FlxVx8cD6c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzJ6CRA9TVsSAnZWagAAlacQAIVJM5J5Yw2+4AcrNE2/\nQXuNKWddGGNKUP/jHxkOwFhjcidYGDn9iB6TTEgQea/5puOd5QMUbYlffQ7i\nO46r0HCioGH5xOGm6PxpuVrPGB0MgcTbjEYYQJOjQSqcjXy1awblo/7KCSyC\ntZDw9Ue80lDV4TnKLMklsvsjPDMhYMbkQqoWlC79vYwaDzdWXfZJTuF8gWPp\n1knTbw7CeOvjDKa2oHK1wCLFPA01O+aoorXFbujjTKwuyTPUW5cl1NUKWR2H\n4zgYOZ0vMa0XieZCyO+RIUHEuONTxArIfLNpOqeVKI2Ntmx+npi9qTGZjXZq\norhZzl2ExwZ9XSOccLW2fi2YmefLW5ONjpx33gXYojNQzhKprrDvcmh1eMTP\nzBwh61CUTJO0MHaAIEsrsJRBIAi/AtW/R+ozKlAp/tUQMGu0RsmX3CT3toqv\n8BMw9wA4eQ2kQmPWyW7LvnqEhB7WwfuTShmcQ+S7ATaNsT7xWqF0JQ7SRJXj\nzgwY36xGRDKSEbaJtNPvKON+Tb+vVDhxlgF9xPf6krX6ULzaXngntn5Go5Xo\nM6fG20BGdHPXL8RU7FAa7ED1sKq9Y1p20zI0EQ9+IFTN52GyAflM6StR9kmT\nW1igJ87Sx6R1Ss0lBexVXpYZNMIdnuwbPl0bEGeYHzmLQMCogMFgbXBxdMPR\nhEOg\r\n=CI4q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8c83e6751cbdbda8095b6ae0686196398066d600","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b2faa116a.0","@material/base":"10.0.0-canary.b2faa116a.0","@material/theme":"10.0.0-canary.b2faa116a.0","@material/ripple":"10.0.0-canary.b2faa116a.0","@material/typography":"10.0.0-canary.b2faa116a.0","@material/feature-targeting":"10.0.0-canary.b2faa116a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.b2faa116a.0_1611084409905_0.12666350513679903","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/form-field","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39653f4f707ca34cb759e2c4acc98105082734dc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":34,"integrity":"sha512-UBmwE6MpnhS7MRXbZQYOulXuZlB4qldmHqOWaajmXsfHb+4YQ98ImV07w3dFcqzI65KD7F2FWBN+JS8AZmKfIA==","signatures":[{"sig":"MEUCIBR+dXn7bUxPq5HlaTBQXjWxFR9L92v45OF0FOgYMeG/AiEAoBb1f14DyJenGhgDhoRkH98ytaFwpgHXtSyLzPGeA5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2MLCRA9TVsSAnZWagAAHfwP/23460gqeJMHjC7PAdlp\nyVfSFdtu+wUQ1Ndbj2y3GZtE1J9EsfxePD+2WTGGaRtaP9JQcJsSEAXD7Rbr\nQeU0oQgb51gK3O3tfEQXiraNHUfqK7kA6iwafWwaSaz24fpMZO3pNCRGrMRp\nlJJQnxAkLauvVIoBfN7hhujN7Xl6O2GmgDE6LWQkKNHHDaEOmh4JiqyafaPL\nuSq8i8Bmk6FIi1AXp4SoNLNoM7sVuWh/7gPTypXu7vYou2c2jLdJ9UTDshdE\nN24aDER5fDvvlAuklauH4OhN6EQ5RWYbWPZ+QIjVntJLN4l14YF4HV9GBUr1\n57ZsiV3k7MMPyaKJTh4Ep249skGCBYLNA/VgvlPs7KspZ/23AvxaoByMvnFu\n8Yv7lakAmA+7ddmVGsS8TMkLMngrblyBXlJwmGZ9Oh7sjfQivPWHlMKYZCW8\nDglzKI2aByVHSB8tUK1glWXO+asZgmun37q27Gv0+avTgcPzWt98dFjGVyvj\nu6GHTvMcwPl86NFLAf0l82nX1L21ugkXtAcZwhNPU3eA/iyxgXOL5UDPag56\nYaevqZjwjG4BH6HwrUUA15RUnsmDba1jlk4iAL11mvbLFRvFr8oFXwNnRRdK\nfnnfMfDTG2LEO3BsxEm9UEEBeXVrxQksPeTx0KChzIZk9/7nC7nXFUoFtBs6\nFp9k\r\n=Mm7y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c9db31c38cf439af3f1498600e029c2dd812acb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.0c95c9f7b.0","@material/base":"10.0.0-canary.0c95c9f7b.0","@material/theme":"10.0.0-canary.0c95c9f7b.0","@material/ripple":"10.0.0-canary.0c95c9f7b.0","@material/typography":"10.0.0-canary.0c95c9f7b.0","@material/feature-targeting":"10.0.0-canary.0c95c9f7b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.0c95c9f7b.0_1611096842996_0.21504409051986184","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/form-field","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.5268222c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"753d9a3e71b4431ce8f7aa84e946b01c811967de","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.5268222c4.0.tgz","fileCount":34,"integrity":"sha512-l/8GYR9H0cxNUiBOf6aSqI+CuK5cgKYYYPbN1jjJhZTP+/tjP/RW40YiM5NkVeit2JgxPdLBkp2NLszeMq10yg==","signatures":[{"sig":"MEQCIF7n8Sibj9VFAVOzwA9jL8VpV3DfqKh83AxntCDs0HZlAiBuyvQxBEZZeSohy6/7Asoq6rhm8aknrOtN7S+B1VeZ8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCII1CRA9TVsSAnZWagAAAaoP/1nkitnb7CQGgndHz8vg\nxYeRu5eflGJ+gNDaHudvRV+xPkUOKVlUsM1oINNsv61kDWYhRLdAqcptKGKq\nPlXvQ9LcEyOPVy+AjyuvPwCGIp0qsNZcxzlgc64dXrqaVNv3iLnrb6ambQnP\nhphMUMHGt9p8htDmU38h4Cp6kXR6I/8vyqW6gNAC83P6O25YEuoRG9TkJhGU\n6gyuGhRTHIOqtGCucegR10Vnr5RBTYSDIlLL7EkSGBl61cSmSxckI9wcOkmw\nW3wXJiAR2hxJAZwkNdDeOFCoPqgXfVECGVKUG33EMYaJpFGEe2jx0+HYBIlu\nvv0FERs7YGnoDZGUXEa6Uk274u7iDfpHG6xsWgiKW626C3i4ElToAhAne8Rx\nJACgHF0yeJqECIhfQqhbSma2UMLVZs4O4wLehZaOKDFyJQ6t3Rp9T/IMMY+3\n87kgArb7X24sziCsv7z8D5VQQEjXSbJB9PSK5aqMhoMKXH0WMr8cbvM0FIT5\nlkAakLBFEd/qQ7DUSoLdL8hgbA1OAtWLK70cd2y+Kh18II+odQzXTseGDM6t\nFPJmPjQSfQwx+SAGaVWrd1lO2kOiOUw8VOwlovgYbNAO6nmN8fthdc42H3IQ\ne46cSitF93L9Llk5L3JRYHTbK6JcCycNGMqt/X+X9OKy+l8/vwJI4fk5+w08\n7DRd\r\n=KALq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"149775a975bdac97e3f25a99b254c8b632e6ebd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.5268222c4.0","@material/base":"10.0.0-canary.5268222c4.0","@material/theme":"10.0.0-canary.5268222c4.0","@material/ripple":"10.0.0-canary.5268222c4.0","@material/typography":"10.0.0-canary.5268222c4.0","@material/feature-targeting":"10.0.0-canary.5268222c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.5268222c4.0_1611170357303_0.9815594559393828","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/form-field","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b1e40601edbc7f0b0f5a3a0c71b599f6e854d68","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.2ed2d829b.0.tgz","fileCount":34,"integrity":"sha512-EhteNWGRjOQwA9EDpVJQQVDzbM+WxWxx25GCNqjHG2usc+ySHYZy73f4QoaPESF7tNodVXupfoBOQs141uurUw==","signatures":[{"sig":"MEUCICg7FHnI3IiKvinvzMjpf27a4iSQxcOo5lwpVt+y2is2AiEAyz/S/QDzCazhhnqMBlw3JEjRL/smtIl5fDHLPIEb28o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLffCRA9TVsSAnZWagAA4IcP/0YBrrfRc9a/PWmLiaXi\n+1ewMDC94qZzRnBq8Ig4R0F2iLHcI2f6kUEcJsXHn94xeirczYNSn1eXseD5\n8Gp8W3I2VQc1B2aZ99WfcEIvl1lbpDjxbaYT+CuQreESZ4Ywyme9dF1zjf4k\nA+w4OYnsPL8S3jQFu6Nt5r2WzUXqnYmFgOptDG0zRKf3Hp8PH5Bt+vTkfLh8\nLnI08nUHzv2TlJRHAyYIMOiGIgnK691t8eKeobVBUOd7xxbT1Yr4936zKlV6\nU4+91tqSZNCWK6DywokKX5SZCqn3YbisHbBynRra0QOecb/kyXA89QT9+rkS\nnu3nS6nq5um+As6oUB5XhMaOKP641LDEm+1phwst0oS9D9coRlDFTxFVtaK2\nBHMgBF283GabeUcKGMmH5Aurzc8n4NizHDp6dzXKpgaRBrzvDAO7LjB4PxJq\nT/6kSLE/T2DDYljeSCdy4FTiFHHQlHFt4cUOqllBmjx/IlmxlMSt39VnCdlX\ndFIhifBMNuCp6sKnj+otpY8+lXT6LkKUD9UqjrZbIEwG0cvciwoenZ0kLCFL\nXQKsk+dlg11tQIjfoXMIxYYOCKYE7RivZcuerAkOk+CMc/bgAYi08CuHr+uW\nASHD0pyGaFiPYkZ4GBaqpVTErZnjlTJvqiOfW40zWIUvJFOlC/8428SqOU4e\nGkqS\r\n=FMUX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e937a8c393e2170307639b8126f0a461ffaf9e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.2ed2d829b.0","@material/base":"10.0.0-canary.2ed2d829b.0","@material/theme":"10.0.0-canary.2ed2d829b.0","@material/ripple":"10.0.0-canary.2ed2d829b.0","@material/typography":"10.0.0-canary.2ed2d829b.0","@material/feature-targeting":"10.0.0-canary.2ed2d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.2ed2d829b.0_1611184094890_0.06473772799433286","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/form-field","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87e37a5c4f1b7d9f9ef379485a4baf2e9d8a7223","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.df00c2b30.0.tgz","fileCount":34,"integrity":"sha512-KL70M8ZgpmePn627NU31cGbPC35Xz3EjukQxLtIp78/xa2OLHmqRvAwoUAxwsIyDCe0HdqwlxnsjXGuOfFHo3w==","signatures":[{"sig":"MEYCIQC2AEYaFyQWrQNFu6dwu/qVo7DPvjj1OPwTEeWwAy6ulwIhAPV7rjKUitMbZweCDKqlwE576TtO1QCaK5RwigjQ0D2v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdwhCRA9TVsSAnZWagAAOxgP/RUtdKDEnoAyRSwCTFS6\nVoHFV3Cai+pTDu+8VGPk0QuL9LRVSrzFPiWT2Isj6t2eQui1hlKK+iY9DFIb\nqJ6l0t0yQ0hO7UhfWr4gnW4wQVLeUtK0EXuuxkqgL3246vPb8c8kBmZy6lda\na6Tda9r34Y85jTq3KyCyjKD98TZ1uWeL4gT8AenFM4IH8NPNwhavnT37F2y/\nQm0S7zlpGkGNxA+/AVxMkDgZbBQZkJB3sZRUS1ogbkyqs7kp4pofQeOW5Fxz\nDCSdTifgIxolr/g1eueRb7++kqEpBztE0SYWFnx6/tpIeXKb1dLXs3WE1Qjn\nZn5LwukBpujo5AipK/emJM7boWi/y3o4Pk3awkTnpuKask0AB2EvJ8H6IEqB\n3NiRFvm5tFmy08CVjpKRpn26HhSHNjHlizjt0s8FV2eM7bTqgxM9L/a1brig\nGCgCvZmlJYqFjTos6e4xrv0+4q4872OzuiKK9wJWama4Os3m9caR38dZ8t5H\naYNHR2mz/mmYaD9aL2YTxOQ8LPUm3VsMd0vvomEMUGJx67MNbBGMVlagJ267\njJG8Sw4qqUckzbdgUyNV384/l3jl7KcxqICUSDtEJx6rR9r2vIADBUtPzwwS\n/3J2GNHfJLXJx+MLr56eQhTQqFdCVU/JY6YS2D1DKjk4MCeFO8B5U5JkXMoy\nXcHr\r\n=Tdtd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b80e68ca5ce1e4ff7a83ec06c805029869aaa5fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.df00c2b30.0","@material/base":"10.0.0-canary.df00c2b30.0","@material/theme":"10.0.0-canary.df00c2b30.0","@material/ripple":"10.0.0-canary.df00c2b30.0","@material/typography":"10.0.0-canary.df00c2b30.0","@material/feature-targeting":"10.0.0-canary.df00c2b30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.df00c2b30.0_1611258912942_0.7974594159348867","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/form-field","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e66ff48c4402525aeb67598c3ec01ef136b3e0aa","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.fd61b0476.0.tgz","fileCount":34,"integrity":"sha512-7naUKBoAaZ8eyU64+MHwha+0Gjpc0WW/LcXz2QlalCI4VIw3Ao8qNVGgPlx12mL/UkwrzGtRFrmJ0nIJBpdQCw==","signatures":[{"sig":"MEYCIQDhsp1UOtGWMzOWqSIaEDu4O/K/REPoNAbyXfbEsR3btQIhAMZcJfjDCoJ6Dzz+3Nz6/Y0dOKSFXzH3oCSxuVOSnrz6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd+NCRA9TVsSAnZWagAA1lwQAI2Y5JqmGecvGM3oBXKw\nvobrmfGbILk6i4GOd4Q3Azd1VDkMzqA64vOROFzNhKLlnZ8bYKz3Iu+9gBSv\nIlzTPztAFzB1P2mW9spetumw/Sy4uwUdW4z5Awjr2tmTPDaD1kADCOPAnd63\nJXu59M0N+HZYp1IYnDyz61yyeDL5aBU20P6Bm6kt7NN2fik5DyxPeItV+ED9\nF6Ig/hGekz9WfksE8s6aif3ygXjgnT0dySMotPim11Nb0yMxUOZ+1Dkhd0TT\nKOtTI0AhcYuNZWDaxAJ6E6kXg2Pa+3ccMwQe5NlXsM79QnsONNgvWIGhKn7l\nTzC8MOIQpUIkCcdnHq40ZOw1k9uHJSKv0f4CyD9dhZP7U7icv8KyWx5wg/r/\nH8MPeMBm+C9D/Qz19uSXjxgB+FhImN6W6sCBe/B+0SuP0DD+SXsCsEh8EwYt\nMubk/Voz0itQ6WPmDNcXUcAoBHQ8Hdlci0SAI0sV930DvT1N+ADcJWcjNTaw\nQ9yNDD+B+A4AQYNABMfwWl/grTvrzwUhMl6p9rmy8enk/dzxdTEW3d5idp1r\nInTBdhMR0UHL+KjCEDwgcC++zSfZJtChvnVUQZQckMo+vF7cq4O4yK3Q0U3+\ndGyXv8AGlKbRRfEpaESc3OybYqo5cIgIuJ5zmAdvRVRI8/25EQw2ykrnh4Zi\nUqs+\r\n=1Xu0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"67853fc809fc128218f211f5b54f854f102d1ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.fd61b0476.0","@material/base":"10.0.0-canary.fd61b0476.0","@material/theme":"10.0.0-canary.fd61b0476.0","@material/ripple":"10.0.0-canary.fd61b0476.0","@material/typography":"10.0.0-canary.fd61b0476.0","@material/feature-targeting":"10.0.0-canary.fd61b0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.fd61b0476.0_1611259789142_0.7368098549428801","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/form-field","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d559e4bd5a8a058b325f3d567f6b21e832a642ab","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.3fb3a0265.0.tgz","fileCount":34,"integrity":"sha512-B8LReZAyXxV8NX3tfS2FL+PNrQwS9bdJlgCWq2/o35UaKxXA0VRMGf1L3g4zIfe4z9xTmRrw0lcdwjlB0ECDYA==","signatures":[{"sig":"MEQCIHbSbvejY98IAEGRmB1Nt0A6eObJT9xYKIkbkUk4leHlAiBOkSHu3kHC+KMQgUApuwTVQu1jwDwL7KdLDCd0b0RwRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChavCRA9TVsSAnZWagAAx9AP/1vhPj8XtxF83t3L8Txe\n+9bS54lzTfCk7R8KcAfTJN2sBcm4tmwvc7q+gH0xtzsXTtDbs/eDPeqp8qOL\n/+zaiA09H5ANEF0L9GfGlZiIW2sCkq17OtWeaBOmoCH6IAzMbfPjQUZew+3P\nYBXmVlQqr8LhPNrJTds2KC2zKxzJNIlLsdkRvtkgzUFqOA3wsmjuZJ5nHhtf\nw94zzpW+owv6ifiOHp0DC7b5rp10ByqLCU5+I9QgqvWLA8CYIhgNm9kdeLek\n8V26BQD4AsZNKFfEWDpadznuOXVz31OkJVr67R3axIHfDLNH2LcSLw1xa2CY\nEcQiS6LQO/90sEYzYDDHIxMoW4UkTeOLPGyYX7KtCpoaamSbiO9Jj/ZqEgmz\nzcIYGzHBhFgeWU9HmWq5o7qAkdED9t93Ddj7IFBnAXLEZrBnnNGGkIqBXxge\nLdS8b1F6odeIElWqNdOcOZo54JNKOjbmhkMogrWdtW0RgG4S7MAFvtFIUK+F\nqp7MrDxgqYR0WC50Nvh/XBBSGKwJBavQvfMZ3DRtJF7tb7JVdK/xcRSwW+LP\nV13wjGX++tXri0P5wxPj+9qtg+puQ6dXR7jch6VquLSEeQsC1UOQtWzh6L2c\nKXFad0OIg5fA1PiWgRCf9mslKikrLEL5aPG48MtBVb3IKn5U1obRHYj4BlyQ\nTyhw\r\n=nLj5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5e619e42cc5398fa779a726d775cc7e9a72a1acf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.3fb3a0265.0","@material/base":"10.0.0-canary.3fb3a0265.0","@material/theme":"10.0.0-canary.3fb3a0265.0","@material/ripple":"10.0.0-canary.3fb3a0265.0","@material/typography":"10.0.0-canary.3fb3a0265.0","@material/feature-targeting":"10.0.0-canary.3fb3a0265.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.3fb3a0265.0_1611273902975_0.014774396471178841","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/form-field","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.07deaec27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9bbc1673d650c4d83eda2d7508adb1f5cff7f6c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.07deaec27.0.tgz","fileCount":34,"integrity":"sha512-rF6eGj8LufS810o+LfQ3Bp9D2uWB1JdwfTbkEM/ttt2AVp101YB15vMETOJpOTiKbk4TyMdKsHBvbIpHnzVhkg==","signatures":[{"sig":"MEYCIQDMjfR+3qJ27UqyCgaf4M1eUjlsJuSDVIcJRJ3qmYqNBAIhALoWsApj/1UNszEGATqRXu8UGQuqMrI4iG9117+UreYO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwPFCRA9TVsSAnZWagAAj9IP/RhR7xDsnN/t0XfXpjno\noW3OwXWDO6kJiUErbytfulUgWFbCW+h5eZJWbJ6KHrvdA0qfnq28/qMgd+YH\nXh3Y6dK+aoQn5gXVRi5O8djN/SfArtmuD3YWSKA+TF0gXKuWgKEhimUHQUJ9\nde+YSDrToPOwUe+6uD+jk84AvBUXTqKF/oEGNMrinO0lWkr8Xw0v5YhjHiUn\n5tuR6qJa3/kWzrU2WoKrLqePbW5w4KZUFtyBJctDjyIsFd4/qT3n20kpe+rC\nqKATlGZR4yXRjGLaYrWRS+DDPk7niO4jO388MbmNSmmVF5I26tVc4M8Nh3Q9\n6wZRk1skt1yHyjSCaQhN5wxojd9JAepTPUBNFTAxUCaLgyJfMMjayFmD/jcY\nm8SwdzGNsNeiBKvQ3vwmd6y4D81+sEWbkSMcG8+C+kOrek+CGamv88/YL+nL\nX8tDKCMNhZz+RVtzVOvuMyS3qJmWe+fx9Nu0uR0C3SriltVJSqEUWf/6xZS5\npWRAZJEZwLxGiUijlYUU7MsTiYrBOLwK8e3+HrqgLqbw2/n0xbwl2C1nosHC\nWEO6TXOKVQp16v35sq1/wUbS55KK4EQvX841sJW0EKZ+6OlT3DXMqZst1MV+\nSFP0YyhnfQqc62/jjHuOoVdsNtFcgFWbVSXA/9b8WbGDvCPKD9nUIJtskKX2\nmhOH\r\n=NJDU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"be75b8d81f1ed6f8ebe94c8673f32110d71cec7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.07deaec27.0","@material/base":"10.0.0-canary.07deaec27.0","@material/theme":"10.0.0-canary.07deaec27.0","@material/ripple":"10.0.0-canary.07deaec27.0","@material/typography":"10.0.0-canary.07deaec27.0","@material/feature-targeting":"10.0.0-canary.07deaec27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.07deaec27.0_1611334596863_0.9969279307717034","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/form-field","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e130ff55819709569f96475187c4d202f53a30b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.d2959b16c.0.tgz","fileCount":34,"integrity":"sha512-ZhVdvlXAa+pFQfeUJ+ErA9Pe2kR8V3vmrITWTt2yYj/srQe1qDYxNcG2u43t6VEQdXUPlrlQr8ye3WG4VE7TtA==","signatures":[{"sig":"MEYCIQD2HMUoBUhJrKbANWhtaIMa0JzYxb1c1jckthN/AHTwGQIhANlffnZAMWjelEE/GZbOGhUtierUp4uwB1jFB2ENRQej","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx7oCRA9TVsSAnZWagAA7fsQAKTulOOpMWXh3L1AhGdt\nV09Et8NbYMhP5EoR62rA0060Dq05HP6WOVptBuk8H3y5MGil/v1HtJQAJS6z\njYJdJl56BFMnwro7DHOvFvMCJ520/dQEMdtB9Pel8ACy6YqAmbvB9QqcMi1r\nPYM6DfD4zbK/NN4yANzcENHZ0f9ZDV0aIfii8Yv3SrV9GycE8lwua9om89i0\nhgupPi53gIpNzctlmsPBIdBEs6HCSppg57zbLrLX3ZtlUFjX1Ft9EjEOYBOr\nj2CW1nvgdkelqarVH9WUVvzQZf9yXcgQgTvNON+fqYT+t6k/4jvEP9VNJFlG\ni7gB/q2fG5tCCJXXx2U+YRdCzOg82nkbIrfHggJyxNvze5rp3Y3IIk+bQX8X\n2BTwOt/hDAWoYu8ugbmjbQhJMHoHoKXB8svhBHDvMZUkQJP1h3k0yDlyyZcI\nT1jmQI4E00w5jZb3Oa/jEJU0jRM0IAl/ILgVoy5xYnv8VOYp7EPyhDrC8lY8\nlxd+95kGhROGZMnDWou8XU4jWP4WQWcQeFqlvOtayxd5Ef8AS6uFh2kopUzZ\n6S+24Ai8JGtcopg+2IpcTuNWw8nDEHXO6py62CES/11btisA9aihkv36IaX2\nYTAHc3IDkqOXJYfJKNDNFVam1vhSE+p7zGRH0PRtHf1CwC9YJMGhbgZybLBn\n6gGj\r\n=5FEd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9a89df0257ea15e66bbd565cfea291993f0c4ef6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.d2959b16c.0","@material/base":"10.0.0-canary.d2959b16c.0","@material/theme":"10.0.0-canary.d2959b16c.0","@material/ripple":"10.0.0-canary.d2959b16c.0","@material/typography":"10.0.0-canary.d2959b16c.0","@material/feature-targeting":"10.0.0-canary.d2959b16c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.d2959b16c.0_1611341543740_0.5624173214425454","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/form-field","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"982e30956dd9e4ec37db13be7e6f7c21840004d5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":34,"integrity":"sha512-3WtZeIHHDX+/qSFPnpuRHk6lEGQsCtco8pVqNT+9LaY9IhH7RpHLEdQo2WL97bQbDOtoKRDW5vov5g8HV4PhFQ==","signatures":[{"sig":"MEYCIQDVxZ2LTMniH11TKO+XJHZqZGUtDoVoFptkpzTrpo7O1wIhAMoD8hGghmZyth6IwF9JKBgao9v8/JVnzx7VFDJ59nuH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1b/CRA9TVsSAnZWagAAOmAP/0p7281MDrjzJuAON1VW\nGAQ+wmpIzuko/InKOC/oZ7ZPZek+UXWslwXediAvEQa14a8nQ9EcAgagWYmu\nMtIip53iDBJUFQxQ6TpBPmQwXgPMJ30TReQeGK4ipynPXOYWynEI7UzGqi4H\nlDTUot6uHL/aA1f2Sv2r7JmQ/8RPJt8TmHWrnvr8tUku0G1PPN1CGDDzay/Q\nF/D8JSvJxsfXjEecjXC1HSC83m6hbXtehkKGQGxV0EO4u1Q7bTfT275yu9Z5\nIN5sRnq2UWfB6sZ8q+ieGSa0hSfIvDtOey4lzTfYPWku2Cc9ubFq6x0KuTSm\n3uJSR28fJJw+6HIdx5v3YP+NhKQp+lBuJ+q34VtW8VEX1WFHzCphyjpppR6H\ndbpMUkTASAOlvc/DGo5MPXxsiVG+Pn1Qs1VM7oJ3wo10UHaURFy8+nrc1C6r\nIsJPpji07gCouLsdfm8oH1R3bJaTskWzIrWIJ+zl+Rcc1CDJ6fv5bVvqk4e+\nie02ODLudtSsiYSZztTUQ7120HzAbZXwwlEr7R39OBFWMXmQM5Ay4ovh2+He\nobYt+yTkUkp9hIRK4vIWwUA64eLMUv6LhuicAlYVkQUtXwuXM3Lpqec3w6l1\nN2zeFDrw8EISVKUIAnJQN9zaYxnca5WHYBdywc9hGm+0zyGqBdJRVHxUmoUt\nAkyn\r\n=eFUX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"057941e604e02f88d571d61967040f58bf499bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.75f3bfe7c.0","@material/base":"10.0.0-canary.75f3bfe7c.0","@material/theme":"10.0.0-canary.75f3bfe7c.0","@material/ripple":"10.0.0-canary.75f3bfe7c.0","@material/typography":"10.0.0-canary.75f3bfe7c.0","@material/feature-targeting":"10.0.0-canary.75f3bfe7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.75f3bfe7c.0_1611355903222_0.24993393291724764","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/form-field","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd0d4f41f130c30c6ae97ef5cb9b9a9fb437d9d7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":34,"integrity":"sha512-01lOx7UwssWPHmblkMq/oOpK32KiKK3c32SGXndV3G+JqDDbrf2Na1E0FstAJ+mjZYwao+Cb0CmbtBuxOLSubw==","signatures":[{"sig":"MEYCIQCz3shD2hKfgja/r1SHuzGeBoVp0Bf0EbpxoE4KGeUjjQIhAL23WGf/O7649mGQtbmBg8qQ1U2cv/RrjwgUbcAej2Om","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2FgCRA9TVsSAnZWagAAYGUQAKOU96gLr47eWjzD6GZd\nDH22GzGSp29kYZP2AVeSjYSndohi9DUv4TxqFPnleiHOVL9z2UroOc9g90CL\n7MCAYBTMqpwJbPhwp2/kgJ6m6vnCEvU8JxH3hyaVFnDsHV86Wpaend3urCz3\nPYMCSGbFmSLJQVBfATCYTJGGv/ZIiLhq5h6o591p3ECz4k/0RHFWTI2mlWRu\nB85wC9ziOSrSo/ngBzkNPfkRpRzMsNP5047Q2RwUczcdVzlLOK2iKKjssV26\n+Fc1dFRmXbU2lQ3hkrUN6hVTkeTCJDxFVXs6FZf2sVYuzRENj7RObSD8vwLn\n5l1TMSXTVZlIOVeWJ2JJ+ivtqhDwmvYZb1DZOIEM+gji82u4pjfPGSLwPzLK\nZA62Zr344DYchg0QxmLyAihkNvWdhtUDJGYFNlyRclmPPpsvme920K69UhDZ\nMuIGMocMLq894TFCYVHm18UO/SHT9/zix8Gc5r4ThWGLJso+hg4Qm/eCqGRy\n2XBCHnLY6t89EONiwIPXM7hRKbDDYCH7FTXd3edFki+M3ZZrOX8ladar7XRP\nrmS6s7K4UE2zK7LAmZmoh5UFPu039Lqj3mXBBK4VlIOe+gv4h1Vl8RmWm4qP\ndiHkpS4Ywo5pspsbKSOm4buIyQKWPpPj2zqsSbqNQ+fn2w5a+Q+o5ftfAzff\nMoPE\r\n=mg5O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a591eb080c699d02013eb9ab0090fdd5e9813a72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b9adb7a0f.0","@material/base":"10.0.0-canary.b9adb7a0f.0","@material/theme":"10.0.0-canary.b9adb7a0f.0","@material/ripple":"10.0.0-canary.b9adb7a0f.0","@material/typography":"10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"10.0.0-canary.b9adb7a0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.b9adb7a0f.0_1611358560543_0.9719899238123593","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/form-field","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f8817ab647b2268ec4aefcb1c2b08921d1ad5b8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.d29ec2862.0.tgz","fileCount":34,"integrity":"sha512-At0yYYZ9aqlwR812W+dB0VPCKu3G7/OtkAD7jNdbMvwyRTKuWhQt1qcEHEL/g5KLmQvgWPFrEtRnPR6Y8wEL9A==","signatures":[{"sig":"MEQCIATW8YoSyYTLoi8VeI2b6Rmq3q1JlajbIffeBi2m7CIjAiAmQfMzX9XvdlcXYq03vRHTKqZYlN1TtjFOyJOvT8Fp0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvCmCRA9TVsSAnZWagAAKjMP/AzqCcVAe8pj47Ma0Yf4\nVL3K4bFkSPemVnOpoBMlMBB3D+Y1kxJiQY+pmnYM3Q8FiP6m9ordmLWFB7XL\nN5siY7l5f7Bvkn7vOPgWR5MXJzk6H5ZPX1YSg1tC7wrlZ71ljLMx7ovk45U8\nq8yhIvtl2RKZpXaXKJLIVWXEURO0ym89fpKg7TiYWZTLg9JzmaerIsDO8CS9\npHCn8W3KN/fEaS61tDpyhcBMS8MvK9cUUYC+4BKRCKVcri8QZ2oc0Y5R1HV7\nSLB1Y/4rovbIafcjv7MXWH1/AklEqdKFwsepAn/zk40rr0qmeBIxpR7JySWw\nRnZMkaOCa9TjquA22cc1B8jl5ewW2+7mmWXFZVW33bqHBzqDFODum33Qi67w\nVQivGfAa43ZiOXkTrdxpfDMRPBpiValrH+x8+UPLKduuZSWJnEUQHyuLvevu\noXkdv0KUrP8XeY5K2PJJMSX+Yjr02l/jnCc4vBrHf6GnwxSMo8MJGIAzdLbX\nPQVjxNh80PruT5C/Mq+klQJ8i+QM7iQQaENQE1aAAIZRURgksrIPcysC9SkV\n84EllbSvlTxe7dfT1luc4trWG83q23MJPQf1rXJ5/v/sOB+6yeRbXd/4yAjk\nK9h0CVK9cK3tCuaULtGdppjIDswsdDTLkgdRa23D1MVn5y3T4Uy0DCwW8V+8\na5O3\r\n=8rll\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1f2d18d6e94fa1f0808b7d768169b9f4827dc692","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.d29ec2862.0","@material/base":"10.0.0-canary.d29ec2862.0","@material/theme":"10.0.0-canary.d29ec2862.0","@material/ripple":"10.0.0-canary.d29ec2862.0","@material/typography":"10.0.0-canary.d29ec2862.0","@material/feature-targeting":"10.0.0-canary.d29ec2862.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.d29ec2862.0_1611591845552_0.9867566041313911","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/form-field","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.96be07c68.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c9aef0d8e62e9b0f810442b70373849d64e5824","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.96be07c68.0.tgz","fileCount":34,"integrity":"sha512-+i6/hxzgfEF753yddOTtliYdxsF3sO/jrvXijf0O/MFlyssGfw+XdiJcRrCfmYDdQyT+7DAa6/s3GailKElGrg==","signatures":[{"sig":"MEQCIF/fXiEXlMzuE4Ojix763AYQgY+W4fxJWU6JvTl497kaAiAGX+77U+vq3QHCyna+wXPshZHqwurddY9NwFnNmkWNfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD13uCRA9TVsSAnZWagAA+wgQAIboBxnuO583EPOWeHeB\nm5wo9/993AOIlBXoMR+Zo4HM84V8ASS3HQbWM2L3Vr31UdE1oNv2qJNnNZhw\nz44fwgdfDtCnWRK8HB8cCkmn4/V3F8RsgBvqGRaKAADFBSMKhcY3EMixVDzJ\nLJbCZCYUKDPfSDi2VMcAbXdBFpCKkZQxe0rb8ZNRYJ9fTJ3EpMd+tf+TtcYI\nDmKljAA7LhPUYb1IQsnKjUpe2RI08xVcw3pB2jnVP8I/DsuaXPSc2x1mfGD4\nZZHkxFZruQkO7d+D7wc1crjvw4K79fp3Y1CtUqcCRwieJGw3ilXQjP6aaLfG\nAxrg5eJHSEKkMgivHUGD3joNYXh2OWdsa07pLXTGYvr/u4lImrWGghVMtXFt\nPIrRosvevC16L+Xj397dkwjyPX03IEIaBx/hgqIL/d7aNgU5LRcyvvCDNC+K\npMTpPzH0n+Q6vCgmDlkgjh9q+xhkLSu+2vqwnBBhsjyO1a5erxHAWilJXdNo\naTjtqEIj5DbLG06cqFPQLjx4eg9wAc3tGJ4SHa0oZBMwA8hw52Pb70fxoE54\n53BBTlwy8AJ8yaDPEJq7yeQTv7zn/KkoXpUoYC5GJTREosl0aiQA7IyzihHn\nTaOXmOAa4/LoFwNu/0uN4ik2oKBcBLyTENX/sDDgsZBWV47gxagA0FFjJp5R\nq6+R\r\n=r7nV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ad510acabea4f02cd7399e109ef73d3b0bb52e0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.96be07c68.0","@material/base":"10.0.0-canary.96be07c68.0","@material/theme":"10.0.0-canary.96be07c68.0","@material/ripple":"10.0.0-canary.96be07c68.0","@material/typography":"10.0.0-canary.96be07c68.0","@material/feature-targeting":"10.0.0-canary.96be07c68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.96be07c68.0_1611619822227_0.6455705610537674","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/form-field","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.e383944e9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83c791fcad2fe093bbd04f1e5f5a504c73789d46","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.e383944e9.0.tgz","fileCount":34,"integrity":"sha512-8Vf+0Zm8q5lLl5hdMLdo94XmLefCBIqkVEYyw1QwufgJ4FPLrs7P+U1XCwVMOlU6ONkFw2lJv5gnJJlhncqoOw==","signatures":[{"sig":"MEYCIQD9miqzAKN/macloWDioNah+6kE/TE7CazGKcH8/NVcJgIhALnH+IDb0zcOQWegmyb/Jap2/mWR4N+pS+KkfOPnYKb9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3QoCRA9TVsSAnZWagAAYngP/14GVgEEOboespgws8DO\n/a8Ddt/SfO0TVQ+E+pniMJ8akHvYZOBbvsD9gqNpsRTrMTx2LoaSDwtHPLbN\nWn4NNvmUn9RT3xACoQJDIk3YRl8vg+x7heREu65NcTYFE+tPFCEiLJaPNWhT\ntgKSYUX2SC6WiLu/eOq3pWExu70NCBG7Ppg5ai9iRxpTxXl2lV0fbRRau7Za\nM4gm7sZSknRMYTpB3nOIEJJAtAYbTb6zwi49ayF6TaUwtWPgNrvvK78PdhuM\nkMXSuaZVjtdiHrBrmSB2WEpO+fIJVGJoAqKkKTvAcwQyh1c480yHCVkHhuWM\n3jeyKIEfpbXwENb12o65NUzysCqeHaPXyqO152EKlWdSo6RjV4TkcMcObJbK\nQGu6o8eYix7E2AmeaiYVII+T7bWDkhkkXHcFzZG3ZKpHGPVBryR+wq9SA9cV\n1yRwpRhRe9nLDeyBrnpiHiSxyStHsgL7vqf2GEEPfU8Yrz/uIR5acodxcMQY\noyMF49b/jY1T2CzUn80spr6X1jihiTMYYe8JDzIkdnITJIiM1haufTi+j+H2\ncF1YyAVsh0CvMf5fu8KGy3JMjQPstQEk7SB9y3utohiHlnugorMtA/kK69gv\nyNO90HJNCilRIMrTvtCgS45wQun2ygoHEY8G7z0IqPpC2vVn9CjVFEm8DmDV\n1xoN\r\n=TRe3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dc6dc4efb9210fc9c70fb089edb90278a8ab66f8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.e383944e9.0","@material/base":"10.0.0-canary.e383944e9.0","@material/theme":"10.0.0-canary.e383944e9.0","@material/ripple":"10.0.0-canary.e383944e9.0","@material/typography":"10.0.0-canary.e383944e9.0","@material/feature-targeting":"10.0.0-canary.e383944e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.e383944e9.0_1611625511618_0.16937940618140557","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/form-field","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.623af861e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8309d06d3076e418794f817f78711e792450fca7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.623af861e.0.tgz","fileCount":34,"integrity":"sha512-PN+v7/MpNlb8Z3TnNN3D6AhCa+DH//qPIEU5/4MNyXaYE2Z1OLacjI56LczJtTGMIqU/oXkeJ7mvHs3et4xS9g==","signatures":[{"sig":"MEUCIQDRLu3T+W56geovTQLORNHLTE3JTUxfspY2dVtLg740HgIgQMFsoH/QIbJRfGmfYMhm+tYbkExvmELINuchDOeGi4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5BZCRA9TVsSAnZWagAASncP/iSqxrEmTw1/rLDN6fTK\ntb/YZQY9gBkKZD0Yo6ICVFVWvVTFh4S4n/me4JIpunmsAuSuVEOD1LD6Lx+j\nbCEpR7SbDcX2XcCY74SOFmMfBoqsSoQ07BnhcJg/trvL00t2d1bG4LX1ITZS\n+fTw2TwDt+nFPjkxPNG4WFJ4rAlbSKSOR4tSbl/WgZfxlo1dgSzqLKviS7vw\nr4xh66qYw2d3QcdFs2udFaz5ZxU819363SUi/itf+Tup53PNKjhk8MT032BD\n+WCvg0R+yyeuQT6DS0hTlWvkCnhcyFbuk4qK/Kerv1djU2030ilShmt0c/Np\nSh2OG7cj7aM9Myz+MrXd27SJE/IFpst3Tsf3W1wq6HCPewR5GsUXk449Lkt1\nD0nJnmPhlPM5yLIkh9vtjabcT+OjMwuq6tyDzdkwmPssob1HiK0B4kuWP9sd\n3mltDnXvI4nPHt5x2BuuXxGoTgp1mwXE4w7OGYYFlhXgw3derbh0l1HJBqEX\n3XJg3gfxZ1vq3Lt46rq4qqYE1Gm60oPrb1Qf5FmETiMpdI7gvCLMj8aG8R26\nXNv2+OPzHi9rxkQNJKF8nxDtcR+ic6H2qCalyd0QjikVUW0EeXdVO0bc7r10\nhKtxa2iaddruZE6Nhu00gAPoZDkxok77IwFgrNUc3hbv7773oGuzVRyUs93B\n6Q/Z\r\n=RkmJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5906815761339487fac225651c29aa422211a72b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.623af861e.0","@material/base":"10.0.0-canary.623af861e.0","@material/theme":"10.0.0-canary.623af861e.0","@material/ripple":"10.0.0-canary.623af861e.0","@material/typography":"10.0.0-canary.623af861e.0","@material/feature-targeting":"10.0.0-canary.623af861e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.623af861e.0_1611632728601_0.21044591993469108","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/form-field","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"101aa43c88bd4d748df6bdfba2bf63c615dc1f26","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.6863fd43a.0.tgz","fileCount":34,"integrity":"sha512-pLdfSeYi994X+ZdLTXBG+8svrSW/kMdFQAjJXVEeG6/uFd81XpBGi2vvbeYTbjZxKJDML7DbPaQVVqZjg1OCUg==","signatures":[{"sig":"MEUCIEMQrBaVkLIWU5D0wuX+gUAf9Dd287i4bejrZ6myRPpPAiEAixjtrOWqpeO+rmsZbfkbxfyP3j5I23XQSXjDJidghaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIqsCRA9TVsSAnZWagAA9LoP/38oRMO4pD9eGBgAkiBX\nufSHQbmS1YsAyu+NfwcQNuNfAPInw5WyuGuR8519I7mEmoKuVXJYBo6bOu/a\nSbYNo+epUkF7XYCAUbYLL5MHZeK6xRd2uUb6h7l+3705ohMKEnRF3rNWjT4C\nQN55/bFEej1d87llWl4Jsij3fIJVZnAYLsjteugPJNu8fxLe5yBJY8gMyg3w\nXV2KYcM5QRBIOL5B9fAYTB5JTWoSCctmWAHYQJRmVo2exVOBuP3QqowbE5Zm\nmdkBpb4JPhhvgIE3YaZbXVYwW0/8Sx/pygThyDyzBJvx9zuf1UhaBRW4nV4x\nUhQe7AJsAAMaVchufvgKMJqHrRCrBiH6ProahySvTb/pjFt19rSUR4Ox3xmH\noM4FkmaxZzoyO+idiQbaH2zkFWjW2OQy2mnQ+HgcmjSXcYVw8Lu+ExZF7bXv\ncmEF8UMbvhKeCb9B+gsPUBmrERwqKyTid9XVBJhtpOScRX2T8Qif+azWyC8e\ncwk+umgEtHJPHhgyLyQZIDipduN4To0TxcB8vGbRcWJG8eUGikq3lbCEGVLM\n/lUMVs+gtiOIzt7BdOfcnmJ6fQdciribcnTCyQli82scjdLTo2CUeMF3Dnm5\nR+K9MFXqkc7xGUrH7qrbJsj5s1saobcu8jTiOi6PW10pOAVQrQU50ZhkI/wa\n8qTR\r\n=9R0t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"49d0dacd3a675991bd5b8c454304b1f10dbcfda4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.6863fd43a.0","@material/base":"10.0.0-canary.6863fd43a.0","@material/theme":"10.0.0-canary.6863fd43a.0","@material/ripple":"10.0.0-canary.6863fd43a.0","@material/typography":"10.0.0-canary.6863fd43a.0","@material/feature-targeting":"10.0.0-canary.6863fd43a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.6863fd43a.0_1611696812045_0.5008366939816771","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/form-field","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21d4357bcbbf7a36a8ae37e6860dfaa2b96adb81","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.ea55b87ca.0.tgz","fileCount":34,"integrity":"sha512-xL6vb67R+6XOJI4fOZ994RwytX2E2y8U3fiXdqEcvyTC5mSEFnfrSV4d5AIjURUALHt4uxQJu2/Uv8Vztloldw==","signatures":[{"sig":"MEQCIHpoKcoOJZYDstP6jsQ5694COCOULqaoGd32TtlHHwROAiAyRKhyEl5zR/YvHaSuseh12J1NOQf8kqKi4OaIBxwq0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKnHCRA9TVsSAnZWagAAIBcP/i84dqk5DV4sOGWoUSpI\nH3qpqV38+gwsWWMyPUAt9XyuZtZVyO8QC9flVMomQzqfgf9JJlLLoGthpaFC\nAEjAcuqJvOD9LvQQ1+NyAyQMnsj44S6fn7I7ufvBPfrMm/fszY1pMfQKG931\n378hzIyZc658z++BH0Z2MFZuu5GMPtMOFp9N4x3Cfg98/RAJkeZVz8iiPqG1\nZcSE6iisxHsuirZ4ll2Pg2xotzCs7US/Ieq//lZ1vc7p56uhT8RaSoYC7UM3\nGXKvhnprYWaK3a+6BLXACtfJ54esHiWxXwS2SUwPOY4CJJ9tiDRDzl+t4uyX\nrNcnqVk3cecpp3y2yxMQDQsdVmUohC88JwIvgeeR8R1/x9709Vximynbqdet\nOQq5WsVyd2oqFMvGxeRcmHRkcwbY1c6cBuwtW4n9qtf0SsLN3yz7YAtbDbvs\nvP+rQsw0SZ0nl1mXtD+coBA6OlAI/hW+nQ6/DvzqucfK4S/RM5JidMy+EQhv\nMCH+zHAHWCgCXryOrKIf4AIzdSE3prYxGP7zj+tAIawo7vvJEV3Cso1JzzZ6\nIKTy7HUTCX9mkF1dgzJ/zKJd70o4caIN66lpxH2wI+wfLE9MLifi0XRDSv2G\nTqJnVEZPOmie8mekkhemlWl3S8fZB6JWY7fVzQ9fsVyJe8tFenYel7aA7vSQ\njCZ7\r\n=HmoB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"00e7569feb0aac4c4dbbfb9b292c9f53adb608bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.ea55b87ca.0","@material/base":"10.0.0-canary.ea55b87ca.0","@material/theme":"10.0.0-canary.ea55b87ca.0","@material/ripple":"10.0.0-canary.ea55b87ca.0","@material/typography":"10.0.0-canary.ea55b87ca.0","@material/feature-targeting":"10.0.0-canary.ea55b87ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.ea55b87ca.0_1611704775128_0.1871323455279672","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/form-field","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84a3b0996406def8f65f0496e889beeba015245d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.e902ff05f.0.tgz","fileCount":34,"integrity":"sha512-bUlqFtMqR/lih+fNUvzg8pY8PdOn3jxDrgMxgP8IuAsnwOjNMd4XSVUZLAb1bGQATEBtsZbWVIFc7d70Q+4m1w==","signatures":[{"sig":"MEUCIFDTvNY3jsFS4gtMjLi6vcFEIm+DEOr+0Q+PGVdk4jGyAiEAn8gv6f532wPPKFYPWMH5FlU4yP5H8mzGZ7pYQlaE9Js=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK4CCRA9TVsSAnZWagAAb0MQAJQoMk9uxdPfhWAE9wGs\nXhmYFG3HGioYqsoqjZu0k5al+M5uE0KTGmZzit7cCHWyYObNoQpO8h3TDQDj\nYPb7V1vG9VrBLNzrjtfySUyRqqZInm+oLpHoJJ41Zrc6PPf4gzW6ueoBmow7\nty2n6njF16NqC7TSe8UywPzbMMmBZnmLTNBN9ZvVZbjNB00pOiyIE0MnJQ39\ns34pgtWZsspMKrPGCmVDthDDyuoLF/kZf5/A1EuJuBt2/V1zSCsHrDXFwucg\nvBGN6FVSqYMqJs3vN4FJkP5uG6EQZyJcrJzT5Bt7O64WMhp7vM5+dJ07QYg1\nNhQKwmTyGjwlDXeOe09lsKcYMWkavOFmZOlgVE5EmwFOufLwpzp/o6wdAr5i\njLEesOSoUOVSi3PPz+JqC1vjQmOl1hurs8zbkvyDTzEN1+/xJ2UMRAa3vRnR\nt1xx1txp2UTwYAhD+lfPNSZaxtHeAFMjYNNucfpIguswH0a5XZ+Z3uhrlIAX\nxnp0Nmz5SOAC/tvTsoI44U2g5JOMi13/ad3LTy34+iUBOOngAk9gfFiDVlRT\naBkQ80kW0OtAJEXHl+EKyUkudXQfJhAvYeRvrrgugkay4yTruuqofqBK6I/V\nyudieFZlDimuDvdf/4PuMNgPzWD4K98KMosivvCrga2rNvW9QZeG0Vyac4aF\n6n2L\r\n=7TDb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8ae6ee07772b70becfa69208ee5a4849f86c2fea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.e902ff05f.0","@material/base":"10.0.0-canary.e902ff05f.0","@material/theme":"10.0.0-canary.e902ff05f.0","@material/ripple":"10.0.0-canary.e902ff05f.0","@material/typography":"10.0.0-canary.e902ff05f.0","@material/feature-targeting":"10.0.0-canary.e902ff05f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.e902ff05f.0_1611705857450_0.8950788739302549","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/form-field","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecc1266fed1a7b30fc909196981338376f656d1c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.2c9fc538a.0.tgz","fileCount":34,"integrity":"sha512-VojYVBKf9guk9wChpS28Bfs9nzbf3me6020755yZ0p11ZD7gLbyQRKuLqQBRgWJZ2vuFf76wNKftw94djVU+2g==","signatures":[{"sig":"MEUCIChVlFDdCwWSOrBuML/Vx+Jmmw/4z3g67FpPbG4N7kzwAiEA4vI0MBMoC8Ul0cD73y32RYZE+wjxO7MshwRhBhqLqfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELNwCRA9TVsSAnZWagAAnC4P/2827mleNacgnkoyi0be\nBzU8jPIWQiH8sc+PqNwRDF8BgifcGvMhKaigF1Pe7ZR4m7tPTr70vvfSBKE9\nP/NxAM6Qrk8laJIEPQp9HwnszOFwBgBDfyY+RJcM1CbMbomf9Seqp7CjOxEf\ng/eLPx7c+ya12W67oBXdiUYIqxgPzf6Vg/UfUrG08jgqZV8Mlt6wFMCnwHg4\ne7JL4KUx+OwXiJwt32vYJTkXJZ/XwWBz7HcYd3o9Kdl5cjlhD/jYJWg8s7kQ\ndblLB5HZU9uJ0ODeIe7sMo8zANRxATXtuhrCGpUY5nuHCZN1vqSVY2jk5uzL\np+qmJ5Wqu089YQGPRuvD2iCny/0nV8kHinwrskr2t81HpBytrsHkZODLnSuq\nM+J9f94anfqnOYR/6zwgzeRX2Myqfhg++algaMla7RYIy7yhjFVtOnkbXJVD\n6m4rZYdER5rInL0szyP6NkOLsc79kaIEq2rinAduoIUycMFDcN5GUPuC/ia9\nxzZFG4Q6EUr6ngf2htEJTC5gXcbmZ8W2DtGaAN3yfke73lGZ/7NIOGcBLKfv\n2+E4kcomo1aihdOh5p1D6SpXbeu3H8DjTNyfK65nn4sM97W57kRSZOn+e60x\ncWs6HzeHVwCQr49qJgXhYkXcy2uElm7+zj0Z6vYzOEnIMgsBTsWOWRoOc/mb\nVZyy\r\n=ezbd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4bc5fff9ddee1f7703010e418626d050ca883474","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.2c9fc538a.0","@material/base":"10.0.0-canary.2c9fc538a.0","@material/theme":"10.0.0-canary.2c9fc538a.0","@material/ripple":"10.0.0-canary.2c9fc538a.0","@material/typography":"10.0.0-canary.2c9fc538a.0","@material/feature-targeting":"10.0.0-canary.2c9fc538a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.2c9fc538a.0_1611707248112_0.3572445032709963","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/form-field","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af2c581c500fadfef7a2612b3a8985f60b579ed3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":34,"integrity":"sha512-J8dvWEUdNoBvChi5LPhnR9Mxn2pu1b5dkMd0PGgcQtkP7za9HwQRAGeXQ1Bt4j0dD/Bpe7tCtazVv0ZMzWTVMQ==","signatures":[{"sig":"MEUCIQCZ8PjNGL4InP+2kktcsotCU97s5hfRUclHPdTA0Q8LUwIgQFPdGgH5W0jnRTmELNsZvR1Uazwtwh8tgjqhp2cwIs8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEL/YCRA9TVsSAnZWagAACFoP/iTWXjQjPZ9PsXjO0NUe\nDcgYF+lwbKlgqnc+/ZkaFSurXM5sh5TfLvFe+lN0bfHkmgjnxKiG+uRaCobx\n1RdH/a+ch7kT2Huiu0wTa/Ei72vhSiFedA8vSG3Wkh4oxsT/pwu2EF1n2wlz\nvesVQc0cDc6jP1ui1jVijDyrhsI26ZEJnvh+TP8kb4+mZWZ3j6zUMwuSdN9L\np6UQJKEWuP85Kb0B93yhshV3h7xZ2sRs76GiVNRhVl4K+86EpxED/8fsVhkc\nJ+S2TEL4EBMRX6ayOpR10tWmhZfhfvEDsi3ZxCSn5xPsWZMViGiL13hoG9A5\nnv+KxoK7KveUTOTWF9sUoTZHbbdZSlj2wUZcHlvGn4kX8HDEqEOCa0acNxRO\nQlPvxSF5G+mIAtyRP/Jh94qAaZECSAdDMDLXsBo7XO/4enY0JoK4FbRJuU6X\nyneO7S7l/e8ZxwTFkc0qZVYv8+Nt5VVanQHZ/V2C0Sdruyhhi34dpN8+8u/3\n4p8Z2QkXUYjqznCn3KBIB+wzKTJ2NJthURf/66NsqOLtqCzat4MLPZX/FZc7\nC6P2mXqqfCXEknzHskvnAFjrmw6DS8f9+vKR0omuBfv9jiV950g8PiE9rbYM\ndl3TPvaQKOZKRKn/zg9WgaMFnIQLR/KmlbNvc4HiF8IeVNC99+9p4DxJSQ45\n5Bo3\r\n=yWZX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"557b9cd09fc15e60ea09bd17651230487a292b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.6bf56aaa4.0","@material/base":"10.0.0-canary.6bf56aaa4.0","@material/theme":"10.0.0-canary.6bf56aaa4.0","@material/ripple":"10.0.0-canary.6bf56aaa4.0","@material/typography":"10.0.0-canary.6bf56aaa4.0","@material/feature-targeting":"10.0.0-canary.6bf56aaa4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.6bf56aaa4.0_1611710423670_0.6742137882494639","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/form-field","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.994873795.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b8d417d410c0306ae8e8f58dd6b449af806fe1b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.994873795.0.tgz","fileCount":34,"integrity":"sha512-mCLV27fMyA3shMwdW0G2NfSV5h+99s6a5y/5Bvk/KdMgTkqB8Elv0FhwK/C/puj9XhcExZ+fmoIYGBNZ+dvFdw==","signatures":[{"sig":"MEQCIFLlIOHjvcvcnSA3HrR3UUtqX9RWNbCGRHlMx6F0uKGOAiB8HQFarjzSeD18hWXa9JkkOz4kjOOJg0TOAg7xwDX8+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX3mCRA9TVsSAnZWagAArewP/32eGLAYAbyrloP8GfE4\n2tXJ19F/XlboloSC7iq/DoIhsOSAlAtGw31WPEQ1DWeEm7rTbJP0lC49SSh1\nuRPdEyZRGdS7xbyLEvMRVD0RPG+7NHqgzgoM0os6nbucSsp0FmlretNSHFcq\nsTSu5s8oe824PaGC6zqI6m5cg3F+iLWxEVVAVSHOcoq5RMEIngWulkfDXWoQ\nWI2ZpWsYKMY/Xx1r7VfEoJFT4G2oEwvtAS1AB/8+Jq0iSQaGR9JLs/a1PYjS\nunuiRZ5MyIyyPq+i9KluBseElPD1ltNQwpz36KG4qRg7ezn7dqcypilgDxLf\nUX+bLCiXrDOxVesA9wywEad7R5Yd7uxvbcRZw9Ym/UTaVDCQRJs/u90RjY6h\ngG0oE9QcLKk6EPrbDPkTPauW47nQzQcuj6N4vR42+HA4yz8ctWIZDQ9ADtZe\nOUjdVms35MUA75x7/0kM51V5dOgHjHF2ckKh8xjjSJeO13idqeF2GPaBlpab\nR0UqR9O4Xkx00/e1CnHOllBfJ6JgeG1UI8HXVArUkUjF/hpG1bokq7DQL8JR\n7+HuyqzMPvwj/uX1Jdj+F/SsL7FVtWJr1Mfiu9peJxFc7hUiUzu+KiYnGWlG\nJQ1My3+DidvnO85Gn2pJ6eo7yzgNGBVrRhnQI7hZOq2/KP4s3MvuYfRD4wZp\nAx3i\r\n=1Grk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8d1337af6a27bed9f06167ca1cc1c996fffdd9a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.994873795.0","@material/base":"10.0.0-canary.994873795.0","@material/theme":"10.0.0-canary.994873795.0","@material/ripple":"10.0.0-canary.994873795.0","@material/typography":"10.0.0-canary.994873795.0","@material/feature-targeting":"10.0.0-canary.994873795.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.994873795.0_1611759078058_0.7941653389741761","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/form-field","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86ac26bee845d139ec56d234e0eae50e57511355","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.96878e1d0.0.tgz","fileCount":34,"integrity":"sha512-iVz16hUoFs/3H2fuUJSQIF5VJI2XSCTcnVHjMCL1ToiAJdxoQTnQKRYPX6b11cXsEJeUeMgUptCO3cT/HpIfLw==","signatures":[{"sig":"MEUCIC5yB0S3/CpKZYKPAlcc7OBcTeyNKO+rNFmUfG1+W95GAiEAhfkbXkbXIF92IG8TKCfJFdgHxfHWHMVYttB9ZYOyF9g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEaq4CRA9TVsSAnZWagAAtYEP/jIw9tUWSxuDhSIoxu9V\nmYDdfTEbr80Zjk+tsA2IJFNIT4fYRozcM62xiZ3aIeFR4799Sl8GkqjnqFc6\ncJkfBcwfhRUhpGRvr0YvkHkjfAA0d6eRjgXhT82TVq1bnai1MzJDDxLn9pyK\nAR1flXKhPcQ2NqcqYAf8u9xSGb5lhQ3jUhucSdg3+oLpoTEpWHpu9IMHvDNM\nPCkfn12KO5Ls+t2TSrcEjQCAmqxsPSnrgOa7BKT35cEgE9DL+S24XTVNBNAu\nvq7hVwjBvWUYlDOuzHYdLlN2Tojkc67TXKd8YTHZkp5QTFMlmnXmK6+9In6h\ng25sTu64dRKpqMTxeplP+whR97+ftCXcVzwM4B93VMG8uSpPIMB2p2eu/n/6\nnehMXyQ+3gXDOKEAwlfo5exfOGEy22YroTBe7Mc08UevRCAFDcrJNqsiXbBV\ntaCUC1bsY8be0UQkS0j9v85zTbXAKqzdm1P6wrnVqCaA6JfL8+Vdq+UAI7M8\nPLqLCp1f1lAGg2RlUU9S8Igpvbc9RnbMdoxzCxdqpo9I7Dze5QLpjBTSHbOz\nHWDSfPToBs7EyrwU4lU1Sun8rzwy1zDUik8q3aMEMuzhDqUkGh2s4Y3mIWIM\nNabapkN1Ajt6UdvQybyIwmV8s1WJP8cFIoJdbWgXnfkGmZ+dDgz0/tlDS3YT\nu/pl\r\n=xMhm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cc9f62002fbbf03874065eac25971ed2b49a47ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.96878e1d0.0","@material/base":"10.0.0-canary.96878e1d0.0","@material/theme":"10.0.0-canary.96878e1d0.0","@material/ripple":"10.0.0-canary.96878e1d0.0","@material/typography":"10.0.0-canary.96878e1d0.0","@material/feature-targeting":"10.0.0-canary.96878e1d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.96878e1d0.0_1611770551445_0.20816640080401272","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/form-field","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c5c397dd6a9f37ab2df118567b65b8967465000","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.3c117cdcc.0.tgz","fileCount":34,"integrity":"sha512-zjXTJZOv8jstbUIlkQ9ppoy+YoNxO+3Vl1mgKt3xtGe4C8zn42YZPEPLIDT7mYaCsGOlmRBtzPgMThIOcVJQxw==","signatures":[{"sig":"MEUCIQCZusLyTiBXDghwxmcwRRShbKIzGWXWgBbIDa4MG/Z6OgIgZ1VJWCSjgC2W+FcOReYwdp93lcXVf1bpzzbWK6ac/hg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbHDCRA9TVsSAnZWagAAOSMP/i9WJW/vN8vXUHN5qSXh\nbxd9hTrHkBAKZD15kGw5zfV58wVkDSlM/ToT67ZDx8Rq97jztSNUdyhPsUmT\nNaxMftodCVilvmwDfUOLWWs0A6Z6nkvdeVvBWKAp3zFH4iR0TORBCo/nk5HM\njZLHkhZRDWmvNB6BzH1W4PXOeStqzCWJ5uiB6wV0MRbUNwQUQ2WUuRMqeyh1\nmx1/fJ56EEgeu3B9uDtSWzT1aPRgxLIYpk/1Mj4vSWK/sHnN6foIpj6P82hu\ngdjh5PH9LupaE/ZgACOW0c7I1rgZ677UEnRCvD+nYkDabxpTSVYLZ3r9FP7M\nB5wlbu2VXI8k3lAba0FD0UQtW7QlTJunwTmENzHxClBxtuZQKxQn9s5YEEQW\nnln/3+ADbIVf/xO0fUKz5iW9xLmQAY9aldApPaQjinLg828/+5cPaAZH9eGd\nuj2ij3JYFDriGfZBLzdW1DYHQ0Zqgn/zoi6UEbkt+UABMonT3VZE/MwPiLPq\n9JBQaTfTite7+X/qVz7+9pet2vO04R5ekoVaZkPrDXkf6q45EzJ5YziMRcb2\ntY/WYlcMTwrbEEeWhXfnkJvKIQ3tgnQ9WfN8bHBcVdhPLim6jZheXIlDJjzp\n+q5iu2i6R26WVXvcRJ3DvVrTvvH4JXEtScGL5bBEwX2tY9EKqlHV9vzcw0NC\nvAIm\r\n=Yo2h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dfd1ede4a4727199e63765d305bb36d91509dde8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.3c117cdcc.0","@material/base":"10.0.0-canary.3c117cdcc.0","@material/theme":"10.0.0-canary.3c117cdcc.0","@material/ripple":"10.0.0-canary.3c117cdcc.0","@material/typography":"10.0.0-canary.3c117cdcc.0","@material/feature-targeting":"10.0.0-canary.3c117cdcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.3c117cdcc.0_1611772355027_0.6551659665347098","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/form-field","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.b411e7033.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10a8378817a5a23df872de3b17da5e2ccdf8f0f5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.b411e7033.0.tgz","fileCount":34,"integrity":"sha512-vRiobKT5y1LpJjMEjbflDkf3FnegXl+NS9u7Z18OzICectL3ZS0Q0InAdijgLaY07mlcpawxR1aJsvtjGLRYAg==","signatures":[{"sig":"MEQCIF6Y7lzEYSaxMQxEC2Qtn3mDE/kZQwXQwmd4BYM7sk/CAiAVcTsqif+nrN1xAXh19Ey+/FBrBoVKD+QjtKAUMBb6Zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeNJCRA9TVsSAnZWagAA0tIP/2rTIdetrYMqS6SDYQDk\nmy8qn6BU09WEGrJ/JdsS1Pi8hl7PrlK6J/51KbF+kTh27IrZu+R70v2VMJX8\nIO2+rJXCETl00EcB8eVgQrd6un8fTYEy+gmi3Mfjo5DkSKMhaBznApgxLowI\nEMgrEcW6SJdPCnKHN0Ntw28VS0OaJg6xH7Mli4DBdakRkk1N6tUajyAFIbEH\niLy9zCeP1UPjMu92jDuyJR4HKtRepvoeU26sF+qHz+YmOe/d/BjNRIQPylPb\nj6goBKWysN4PKPtqqMTTiQWNV7mHRrXJtED+GcvnOZ1ngRmmxCYXo4u2cRwD\nz2wU40ctGekssnDUIHXU+Oy3HRLlWdx/2IddMhEJ1gRCIeDHACSaNARi7q4W\nWd2MQiLIJCDfoTMc0Ul2rq6bGX9TiTMPOU+uxJWMG6FqQTWOBDyRJUFM5jYY\nzNhupj19vkh0xQ62m+CV6jt1RAAL+C7L2cT1V/NxjBB7cwIetjIsYMA30CCb\nIu/a0dlIED3H8jORZL5ZjuWBuRH5STk1g92DUpiNURUmg2IuKe5Ppjw8UJEA\n/a8apFNkSfnRR86dgztGByJXla8hiXsLM/eGOCLbRkY6DnPO0cVw0jYSGnNG\nMkBBPJABb5pQqlXpYcfruuggSI5syBv/NxAwwJHp/RvRvX1DqnrGCQGRWi1d\nRorG\r\n=xWLC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1d12550a6229cb648f6739f83d7ba5feeaa67dac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.b411e7033.0","@material/base":"10.0.0-canary.b411e7033.0","@material/theme":"10.0.0-canary.b411e7033.0","@material/ripple":"10.0.0-canary.b411e7033.0","@material/typography":"10.0.0-canary.b411e7033.0","@material/feature-targeting":"10.0.0-canary.b411e7033.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.b411e7033.0_1611785033091_0.628182368707044","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/form-field","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca78315a80caac4109866afc44da0f41cd80a1f2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":34,"integrity":"sha512-FAzm+6MFHygelH3XkoDx9KMW23+TGJKZwQZ2xk3A07KsUWygue6wOXgp0Dc4Z3XlduUSnnTVL+HIRxUHK+91YQ==","signatures":[{"sig":"MEUCIQCLsZRoO5bIVoYH+qygkHi+OVo3EKRvtarPIxdhszCPeQIgN0A7xd2sMBOwuKBkP80jIddXZQtwIVg+XjSTxKcwC9k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfFTCRA9TVsSAnZWagAAPzEP/jORYsa9a5FfVdF85u4v\nJrUY/pJquzwSnlohVkjZa4/QSywc5oBAl2rBkxSNk0PFJ6+8uCeXAU83ZmUO\ngVRecgRzIV/ySFgQo/8QeGPhehqSl0XXjs4DY89mEPgGXeua08poPwbyl0fd\n5cwvjrHa4UmeV0GS+E3E3A7yOwAMQL92qU3Smh5tYi7EIi7eHbQkjFcwcRLe\nhnU9492k27rCH9oNHR7nvBYeplfgeo8zoLaDEkNJsL3lRaagMN4vBZXTeRjE\nlMRkxg8S0M94nqRjmC74hnfRVOPN2NV+yrgxPyWrocXGzDjI1xQUSADEeVCc\nVUChXajnrgzqHwbzVWQhUjaUj3PmC+NX/jMUqnkWVB38xcnTFyfeL/2XTHxd\nlDOXAm19kJG7G1imJzeBzZNsPi66lvKLjkkGBrjZIENkpgjb9yt8puE2xlmq\nULA0qAcuqR03nyWVGIB/VqkYV9vwyQXQTBHNMW8iBwn16X+O0y7C9fzaYwyQ\nPliKHbryUE2q/GXyhu7+ZenY2DETxwIXqLU8t1CM4TrlETd4of4R9r+5N7oi\nJbgOz6TjHEfuvFnR82RQWnVSgZaeQg9Ch1uQ2ZhQe4g5YC1I2w7Gljtq0Zfv\n/grz9sxNpR/lkCZFLnZQf9XmXXp4Q4qd7O+cz8lf15qk585i+jLHPsDuOnVx\nvbBh\r\n=dLlH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1635bad405a8d329ac4e844d0a2b5f3bac553113","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.a9ac16b4a.0","@material/base":"10.0.0-canary.a9ac16b4a.0","@material/theme":"10.0.0-canary.a9ac16b4a.0","@material/ripple":"10.0.0-canary.a9ac16b4a.0","@material/typography":"10.0.0-canary.a9ac16b4a.0","@material/feature-targeting":"10.0.0-canary.a9ac16b4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.a9ac16b4a.0_1611788627332_0.003149300400824284","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/form-field","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d4e39d75d5fbb8279b40276249ea354a49ca440","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.fec7b42ca.0.tgz","fileCount":34,"integrity":"sha512-cQ0nA6nGwbIx/FLsNJMTVTsQAIMS4y3sRq93mVG/NFSqpc+Q//Ji9CMi17Kzue1L3lz+Z+ojx4hcxFIfO6Tolg==","signatures":[{"sig":"MEUCIHHSr6KBIa1KYWUwTzeUkCs0PqG3dqMLjEbEwlI+YgAFAiEA4I0XmRKknYlOztN+NwJ3dzTyX6ZG/3b+cFzNkNA0xj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw0sCRA9TVsSAnZWagAAIGcP/1UdHUMkwhc2vGbYbj50\nk5mL8+/ULt9DVUrrAtWJVPk9IoeyyK31b1FUZZuEiNUFufqLt5NNInDayJMJ\nE/P5mJmxnwQ7Iz6/Bth3ueTT3Mtk4o64VQiGYjhY7ID0e4b5RDugVn9VeHyL\nqouwdkKb0OySjnAQIo9UO5e7W2FKTyeVZqQ/RuoDZY7dcN7CZmaVt8YX0kX0\nhdj94hoypY3SIi4qr+m6IVoEjdbO7/z/9oknk2Pt/BrfC8Yp8obfO4wx/UJe\nSNkhOpy+c1ty7k4oUJUowriuFIxpy4wmnf0MR8+Ggeo8k4sM55gP9UEgWYLt\nodwtYRimeFOGMBB3Utpcnb+YUv/NL5gv80zR/NxMYRhsxfhAMv2MotF3TxZI\nJHOxuM2IBJCz/hiFc9+CM3PhVQzbiTcrDb2vTQTwqpSCA8pi3ErS3RudE0qJ\nenwSWsCL+HO3Bhov+BDczeIO1ijSiAyoZdxyhjDLOlBi5azjIPx0atgVd1+Y\n6ZBikF6Lhiz853pWSB0h8LB5OuXdpFGOn/U65UsC49UQ26MzMoeoIuh5DmPM\na1Vzm9x24yASDsBi9rAuaa59W3yO7BykYSv2EXmDEbAeD2/dhFaN5NtdMheJ\nnlOG09ghQEgC4E6LDZlb0bsqQeEJXUrDV/NFytN6RBnbwa0ew+mXluYiKlv4\n3S0h\r\n=NScI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c05b9618cc2b93ff9a68314dc20c83c691206159","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.fec7b42ca.0","@material/base":"10.0.0-canary.fec7b42ca.0","@material/theme":"10.0.0-canary.fec7b42ca.0","@material/ripple":"10.0.0-canary.fec7b42ca.0","@material/typography":"10.0.0-canary.fec7b42ca.0","@material/feature-targeting":"10.0.0-canary.fec7b42ca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.fec7b42ca.0_1611861292249_0.015112200034462342","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/form-field","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6bb101059d25af70b8ded390fff025528dad644b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.8e66dbfee.0.tgz","fileCount":34,"integrity":"sha512-lOTJeRY54KG2AXt65lhHVveUH6XIVX5FkSvR+pqYxNtte4ipbKkyByt27WMvwPJAEEd45+NXNY6bNRgNHDdsJg==","signatures":[{"sig":"MEUCIQDhG2bXewrr0hbqhz2Zyben+pv6MVmYroXCeYxh62vPyAIgXY7U3fi1muu7qzybxx4k85FBd1tuRmWc9DdZFi+tXmI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGIzJCRA9TVsSAnZWagAAiLAP/1+kwrNYIlBBMnZAwK5J\nNYXdGtk9W5dRbFVT0VfKOciXT58sSVOu/tcX9qd7GgdVkOBlsmhoeiv0pWQ1\ntCn4PG6RqqjWfKtvbR4CBMlJHFNHHGiP+wPxth4kepOI7zEN1bw0JFREyevr\ncgkIg92IhwiXQCtP065gK9DjCIM5fGuD6eCXqVcUzlZmkwef83HpkJlu1tgI\n/TgeCPQ92dQRGNtWRiSAQJ+9+XWj/A4B7CNVEaAIH8wCpL7mSF40OpYS1CuZ\n/tLvt3O8X5qVNYnb9aMGTgG2zpefBokLVC9VyrWiRGyhU40/jN7NhpHvYRXZ\njQOvLuNlYgK6zm3OP+o1fAeC33Qij2fqSK3wvNJgaF1dAiIaO0KTF5w3xv6s\n3nY2rKcq9tiD26KdiWQKMfyn8nKOEosW7tEUFKBHeHHn2JsjfLoKmt+ejj/m\njM3EKU7vEgS6JHwK4BWI3BuC/uonLjiM0J2/6G+vQL5VPacWlLI+UrfpkNBt\nXsXuM3uq1i4oEEUAJrYm31UFQK8ci6TpWllhKh8K3r2XB0tHicXeyqzo8BaS\n+o+aS14KHwQxbx89lzo/kio0zhxFJaE5jHPp6L/lwOYixSLAPAchdLFWM3Jf\nLCMFGQMDaeTtckivDfu8dIs4/z6WtIwrlcs1p2vnXsR/qZqQAKrIgNgzu6S0\nC/8T\r\n=3LV/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"63606d4d60d94cbfccb1897812018e02aa13bd18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.8e66dbfee.0","@material/base":"10.0.0-canary.8e66dbfee.0","@material/theme":"10.0.0-canary.8e66dbfee.0","@material/ripple":"10.0.0-canary.8e66dbfee.0","@material/typography":"10.0.0-canary.8e66dbfee.0","@material/feature-targeting":"10.0.0-canary.8e66dbfee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.8e66dbfee.0_1612221641342_0.08593997024218902","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/form-field","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.637d15da6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aa9f10b2700938ff23eada35592af2193cec4a2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.637d15da6.0.tgz","fileCount":34,"integrity":"sha512-TWU3nnPYkd+VSCuJWYmKMjcgWegHPpbci8YYyEGjzBRxlRAsjaSy4eicMkda6h59pwo3JS+afH83NDL+aOny5Q==","signatures":[{"sig":"MEQCICj5ok5p/MJMTFyvThVFHjd5TZAybwEdlWLAIAyy6XhiAiACTeCuseHTqQHmHGnw+rhuiMxwPqxrGVEAz8llhy8v8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ65CRA9TVsSAnZWagAAAwIP/RF5OJ+iDMmRHJSY9H2Z\nBE4Z7g9E7EwU0M1yVW/DX/0mWINPZBB0sDnLJX+2TBHumE0Ms28FGQT9UNOm\n4+WK+g1YMf/bfEc22YUGYQ54QvZwFXA9AIqYM9Wr6uIjq70wsnGLd0AXee20\nO9d9S43OGWEirjDLLC/oHIJWWU6IgeyGiXx8M3U2DolY3RNKaRPNIFx8agyT\nuGaph2Ed1z99Ren1wX0d57zPw6gf7rDlBpCpzEMIcEbJi9+ZqdirfShyelDH\nNTmT8SclxKf9zgUequyHtmb2rRQn4YH8LZuGJh1OBZppJPn8h7SAYMfXNAQ6\nkDsh8ZssggCpcCY3sIy5kuokjdM2YOgqdhRbGORNHS23hOYLYq7q7iph4nt3\nTNqyUau0w+UqLoiIZruVmMAhvkFxeuLbXiF1rsha9rsD5jpOgTMCqsSUAKSF\nagvhDN05/ThtzG3MyM7/zbo/p+iZRzzeiRkBqX7EzPc/LBSLMKcy3WosmzHG\nL9R6XAU8dGCPI4tmrXNmQ/FxHlxOO/Rtnz0yYnAS+PGKgDAbmPjcSkZLTFeU\nUxnjbla8CHGaLpAAO1xyCgM2DMtAMr8DK7U1KsvT0mJoNUy3fBnj54vodSKD\nWX8B88rgboKowQdv1Nppj6crR4Rm1bXjG1IEhrFgrhAmeM5OqiVf8tFF7XqL\n8AJy\r\n=bIQr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"264dfb09f81436a3537d88f2366133e250344864","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.637d15da6.0","@material/base":"10.0.0-canary.637d15da6.0","@material/theme":"10.0.0-canary.637d15da6.0","@material/ripple":"10.0.0-canary.637d15da6.0","@material/typography":"10.0.0-canary.637d15da6.0","@material/feature-targeting":"10.0.0-canary.637d15da6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.637d15da6.0_1612291769241_0.032950823175831756","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/form-field","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.fb793939e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22e9d022b5da62ea2cb7de04fae008a5787758c3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.fb793939e.0.tgz","fileCount":34,"integrity":"sha512-lOtAR3qjiJpIP8YQD4ErJ+sA6HjMgRoejmkdQ5C0r7whZ2c7vpdUK0QdLPR1B4uEkCI7fhFJGcXhs8z/ICiM+g==","signatures":[{"sig":"MEUCIQDCL4MZEHtl+TZCAXYmDMBU6+VzuPIZ+sfMakiHljPG3AIgUvWTLJ70onG8THTdAOyPm9Z0UEBauTXDkt6AnBRKIhA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGeOSCRA9TVsSAnZWagAAujwP/2XsJ6vRdaCcXFBp8w9G\nd31BJyhkIPtWbPYkOpHYPJfzKHhXn2eKDuWtBYZqIiG46MZ3K0Nqj2oaRlXm\nVyXrkE3m7XD72x2LuV72AECh5Ygf0L0AUkbRPig+jTdExnPEWuwWzb/6zX7q\nJXw4JQzle49ezgOZ9X8L9tswlqToVlXx7ZIpcomrcfGuc11ujh8LdPdzITy2\nMOmMFjS+UzaRbyBG/jeWD2KHInpv6tcejz3pZYAopH5yYLdZ9iQUWtye1vWR\n8sKEvBB+WRHP3hL7uJ5he1tfH3OC8N+iYNO7vVDBl4+uB2aVRAXZxCGuIHE4\nNd8ZgiYebS6QlaMSiPEkkjH8AyJ5Evz2J99Gvb2kZGdsXBQS6pbi7I2TzaAs\nEXA/L6FZ0x5k2bB1hqXoc3xFYC8LypuKZuOfp7h/k/CIqRS23pA78Kg0XlKv\nKWhtNqL/NGx9Uddw1lF6TOMeOgsr9keznTNy1HmBnyJ7S+TYFRnhS7+4o2yB\nE4MIwhjaxsUq2XkuTuolEt1c6KfWpKIxXvuTLyfBjrmmKGpCWJXZcrveNSxi\nKTeU4qtI/sZUe0y9fYJ4GP4ShVTIHNBSLG0V2+40lPFG6ybgMtC7x4/xWpVh\nuge/cTUwnT8k9tUbFLMxIcVONdh7oJk9r6jyMBpdFmvXC/RxrWaIWwdz9jEW\nRRab\r\n=J9q1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b89489007d2a0c1f3821bd2291e448d44723ac68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.fb793939e.0","@material/base":"10.0.0-canary.fb793939e.0","@material/theme":"10.0.0-canary.fb793939e.0","@material/ripple":"10.0.0-canary.fb793939e.0","@material/typography":"10.0.0-canary.fb793939e.0","@material/feature-targeting":"10.0.0-canary.fb793939e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.fb793939e.0_1612309394249_0.5237030652578785","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/form-field","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4118871f1782fb9c5e5513d1ad72084eaf711474","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.15a4d40dd.0.tgz","fileCount":34,"integrity":"sha512-wyaT6kNVTRBZUAk6OIjpFrMjGQx0wMTVH2yZbjWJfbgGmGPKYAyc5Hj0F249uw/9/Vn6iqaqBOiMgwx4Vlc5eg==","signatures":[{"sig":"MEUCIBRjAEES57URfDW59L7ZF56hQ2VGeH7O8YuEwS4q0tC5AiEAuVjH2irdZgT3UQF5KNzXI9GyLWgXiGnG+22cNo2aEuk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGggGCRA9TVsSAnZWagAAbisQAI6oCKAC88BjpIz714Sr\nPqqxoD5Idzx4NR5u6Uzku9URvx9pTuYbRz3/XzcVxe1zfTZ04ThRRu2c4R9G\nPSqmppiOu6xQwfU9N/B0RqrorNY2L+GoohAZFgMuYWN0rrBJRoe9kG+LPguA\n5xJFplS7y4zNb1g32ROrlX9yqK+Tfzv7Z6NtcxGLu1gvbiQbAYpKb82V65kq\nQYaZjqPfWcSL64w7oEBOznUAbqEO3Ug1OLg/ToM2rZN+UoUyGDB8lrnHxphq\nc4RugsSyYuJEGywwLrv5W/hK+VDJWT+QvMPhwDABEsIlztyCIM6mcEicYIit\neOiSjWJszRbc7z56l4UYoCDAU/ljPKYWJvAFJPw+ElFBw3WxnTO5g4Y2XToQ\n1WHVt1/x1h/1Rs672lbPipr4ntRhOuBi3LOFp6LgL/zy8uXTmxrmA3IKwcE6\nonyIzR9Gyx0JxID0DRcOqhLQ9Do/tCvv3JzXUO8FqNjAFvk0yS6U/qQGqn9M\nR7VJNh/0ogCp4gT0U/t3HcoFcqZdSbM8jBW1J8BzG5oSIoV3MUXsn6O77MaV\np9bIgxx8+YmDIv+WgHV1DYo80DOTjMjixSFF3uDVvJ/je7CpSPFoc7+HCNFd\n1XTlcqAl5cWx3Tq8SY6fxjCB8t+u/q3zxaD4uF8JaAoSAEetsPg7cF09DWHJ\nSmoj\r\n=5HSL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a6b5f072852f1f101d03fb492c57fc97f7f0ca9e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.15a4d40dd.0","@material/base":"10.0.0-canary.15a4d40dd.0","@material/theme":"10.0.0-canary.15a4d40dd.0","@material/ripple":"10.0.0-canary.15a4d40dd.0","@material/typography":"10.0.0-canary.15a4d40dd.0","@material/feature-targeting":"10.0.0-canary.15a4d40dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.15a4d40dd.0_1612318726086_0.322443020232698","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/form-field","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ceff9f5410c0fe7e05c8bacb07d86253bec6644e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.7a003acf0.0.tgz","fileCount":34,"integrity":"sha512-r6BmWlGLI97tSB8zuRt9tw9gTS6QfAGjRxHBNFjE+vZElK74XM5UZdAm3KDfEp5qDWxVj+oqjn2B/jjC76QOJw==","signatures":[{"sig":"MEQCIFK3JUvlocacX6FdIUkk1Km/bfRiqZhEUX5QjZNL4mNsAiBFxAp5HxD9Ab2NmqwF6OgIKo2P+1bYSKdhroUWDDN34A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG10lCRA9TVsSAnZWagAAQqcQAJapkWAdIjVS5BP+RDsn\n1a3ZHDvRo9/ov2BbYTUby/8U5+q0z9tr7SZHg8S1RBISCGZw0K8ue5xzPvmv\n8+79jL/IHg6F7+ij/Z+Z9wmdAiEkfnjxDyFirubquntpKx+GV4+K/0TeR0wO\n6E6xkJOS0ni5+oGuP7XvJegf/YR1bq/tlyhLIjAU7tQqZ7W6kkuKnvH57QRG\npjm5B58vvNmKnxfQpbPpEzzfUC4cO7MPKN1mWNazSZpx7eysyH9bwNGLb1PK\nhZp6vWKtMbJzUeJnCquYZTa3Uh5x9Ln13WOLy4yKgMgajaNyT651viVUeyIS\nV5IczfbiohdEISF5AJn2V/JD/3AnMYdlPW6EkiRftIuouT/DxQudnhT1Ur9y\nFv4CpM9t8dS1QArlsc1tw9DHklyqBh/7kK+IJXSUyvLr4083BeYGBO6oZ1mk\nkC2a0NTrW3dudZ/mg61XydVtvT8/h5o2/ndnWcyIiS0iC98Kzu8a7Uhiu6M6\nZr1fBKoibbFiW5+JuriY8RKdvf7KuB2p3V+zezjLVMSwo0MlQ1iHd39Z+144\nxj8q2cJg79gE6aXx7f7f0wwbfK6x+iwR7owK2FPWoGbHVBKG7+5MVgo/lDX+\n01cebHBEqRssTtlLu1k/rAbKHDDz86w7r5vnXQ8o8ooYCgTjtkUyj6HqYFIb\nK7jH\r\n=3OBI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"50aca8110f6412e14432e118e1f9229dafb02d85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.7a003acf0.0","@material/base":"10.0.0-canary.7a003acf0.0","@material/theme":"10.0.0-canary.7a003acf0.0","@material/ripple":"10.0.0-canary.7a003acf0.0","@material/typography":"10.0.0-canary.7a003acf0.0","@material/feature-targeting":"10.0.0-canary.7a003acf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.7a003acf0.0_1612406052651_0.9192506443345645","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/form-field","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.05f249666.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a7a439d0535c80ea0af11b736b2129a6e661247","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.05f249666.0.tgz","fileCount":34,"integrity":"sha512-WXNJtWB8BryseQhrr0lDbDT47KD4GU3aqJHz3klOQo1yJp3bj4+sTTOnlCXQL0ZwBehF1ZH+FVjTSIZYfGNOrQ==","signatures":[{"sig":"MEYCIQCbv9SUp4T8J9vePHTPpcMsFzkvGwMmtiPTAl4NLwzARgIhAKwC6M6Rv9EJdHf/ATGdl5lR0X7LEgTy63J2QDhmVDft","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDPkCRA9TVsSAnZWagAALsEP/1A4UeiBIMMF40WPCLy+\nTJvJFHcXnQKnXzNYng06v4n+OT45zM7O89KUeZXadBZFJAHtKEyuLjM/LR6R\nSA7EP47cCH2JQ/U/JZ3HC4Ebjd4zqdY8oWKGt98WntdT6W7MXOhbJEdLQu0t\nCw1W61Jd5WRsyAYT/230SUZfSvibtrfXsvbrjCJ9QXeebTTkvv/24R1coCy5\nRim4QDjCiuG8Ce6XwvkzAiYdRK7vBXNG2QfOKLewz8+HrHiOe87fgVaq7Dnn\n31cGSUFdOWDxMNwGn1MH3C74lHE9G1VRpkVmZGyc4aXJlH6BFfZ3ZCorZzrp\nvae9K7GHNB/vZ88lW3yAvrvLstIi8094hFj2e9dGCQzfi2EjDxsJgcYWflwX\ndBV6HSncdy0B3OsVXeLM7/PCKMBy4qCJ2oy+NopM/WHa3IkcBJ5SpZfkRycI\nUVuZhrtx/d5GAS7xYYQLIhF1U2r4YzNdKY2NwI0DFSj2kwg7AE+KwGOoMOCk\nymhuFJ7dj3gw86WvuBSpxztkKxcOfRedJUcxES349JvGXHhmuFkxWwENPZQA\ndSKNOLFznWag4U2v8rMzqXBLJDCeBfZkbOojWA1v05leBIgXgPrBrXWTtxfH\nyDw3d6BJKl50RHU4LDvO7t/GjQNp9K+SpDX/D8/7c1BeohnOjEvQHn3C8gVu\ne1Mn\r\n=+lcq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6f1fffc7e905a3d49f007f288c26a4b5ea11dfd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.05f249666.0","@material/base":"10.0.0-canary.05f249666.0","@material/theme":"10.0.0-canary.05f249666.0","@material/ripple":"10.0.0-canary.05f249666.0","@material/typography":"10.0.0-canary.05f249666.0","@material/feature-targeting":"10.0.0-canary.05f249666.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.05f249666.0_1612461028245_0.610789984637474","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/form-field","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdced274e20abf202edc67da4e957b7e2a5f30eb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.1a3a39629.0.tgz","fileCount":34,"integrity":"sha512-esQfkLP4u7msz1LyuZ2TlLVEVZ0D80PGLrMg8c4MvclQux//mWt+D+jAVZdxKbTyrcVTy5eXna/vMrRSJWeRuQ==","signatures":[{"sig":"MEYCIQCtNCHSOXVJqVNDYyX063kPD0CtqLnydkQ+8YTydkKznQIhANa8J8JeIXkrOcb30TTkG60mFH5LYuZIzL0ikQaghRX6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHEBLCRA9TVsSAnZWagAAV5gQAJNwVt/kl1PS7TxkGb0n\nGtkd33j6TNlnX0He9xgD8lEQpiu6i4YHLXIIidOS8sZHUKWYiKb/OyYCEUlU\nYyhIvpzVTXGPmMTFYtdTqPhRQT1EY09ftB8Ld3nEP7UemwuPeLdLlUZSlkCX\nyVkaCCSj/DEVToJyf6KdTJd3iNjSx7tGEXCBP/IRoNMqh9n4CR3ZwLzrsK9f\nGeh2VhvbEtQQcDiKAcbQvtyKQpZTyCCkU2KYULUqlTJaZBR9meh4XAJRXMGg\nIGp22bxA5JzrSUrq5v90TEtvbS/kQcpNY6IF+7DmgGTpco+Fjjupl03SCHt5\nOSRL6SCF1N7vaQF6gk6lyRAlC5Y5ZSPpycMGH/cIJ4d1G4Pm4BRM6nPJriZV\nbm1JOqdUxlj39mWD91euzSQa0MZ2EkBZX+NKhXJrx255TpYy6Vt6ImuywzW9\nZCSDfm7I9mUnnvc2IRwPhF7AtzU4jlYlIZFyd/CbG1OQs198Ayz7UEODbG34\nl9yOB0JgUiswJSEKyqGTLmBl1KRrI4ELcms5KpjuT9dALEjGdwUgxdg6Y4VB\n5QnKH1tgr8IuLa4dwCmOb4xU25h8bmGCc/Hu1QvBG6FZAj08eVveLlfRayoz\nT9ogYOAEpB5kmREx519oTIOnzhiLRBeIk2MOUSwDlXpDWSwJf/j7gRWy42Gn\nCCla\r\n=JIQw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"87d65275f85db5a2c4e630df10d231afaba36449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.1a3a39629.0","@material/base":"10.0.0-canary.1a3a39629.0","@material/theme":"10.0.0-canary.1a3a39629.0","@material/ripple":"10.0.0-canary.1a3a39629.0","@material/typography":"10.0.0-canary.1a3a39629.0","@material/feature-targeting":"10.0.0-canary.1a3a39629.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.1a3a39629.0_1612464203142_0.16753737945872782","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/form-field","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abd74baf38334cce0dc8b6a4496c7db245e022e0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":34,"integrity":"sha512-sS8Q6Ey+cns/4BYTPqe4UbJem0K8NVD8J/mex5AhKLVU2vDOHCl7dNpXtQPfPldwVHcSIERo2GjnoT6Y8RPGCw==","signatures":[{"sig":"MEUCIHFA7C1CBTo7Mza+VD7uIQGlphmCyo4TJJQ5Udd8fB5xAiEAl0m1FOZcYm+j+6Ioh39VukZMVl7PKibnboGA0mjYPG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHacCRA9TVsSAnZWagAA3PgP/0/QOnpxrQPUDPf+GPsH\nHrAXBtTM0UnWAuiDmTLCocwrC66878gJfm9Duk8jGgub9GF6h5QTwr393ipl\ny9Qc1zsmPtMtGLKJ7PuG7bfRhZvwTVB0g+hkF8XzkWrwSvgTa03sGaGllxLR\nJ6/Lm/jm08bmTpi/fRgG0IMFBW4MhhMbzaj/b7SuuhLH81Fy3HurHyXGXSPw\nOR8iM3D8jTYyA02h/o1xEbkPhJ34ZWC9C0gj5M2rjFEIEV6Nr+BN3wAivnqz\nXNQ7MQR0K3wlosWVVIFw9Xmh/SRBFuZWVCPHGP3NLBHpSmTGFN59dLJoD0AX\nmKIDKl4X1F4KU5SfRk9tQx7h7Rj4tgJVJ0gRIy/3clfVDH4foZVUTYR+guYP\nLIkokY6NPQw2PK9wP7sKIEEgNpOrdJyFxVw0Vmt4Xk5uf6Ttg2p81qlI1UE3\nlEXdjqQEqKeBuPLI2NQZR3ggmkUCoHoxUPSk1s4yhaH9n/Nndlxpi7gQnevQ\ncTCUx3jOjZRioXMvxjRX8uTesP3ptX28Nd21tgrstqPdesRo8QoOHljrQ7sx\n5Q+qWdMy5hvkpu5jNdA4sL69kSlumJO39cemz3I834f42+G8SxKMmEPjMk4J\nLCxFK5IQbuleV7TqP2VzFB9ksS2Q4ojXsDiwOe8q+AhSK97mIFg8mg4hmelE\nhA5L\r\n=Fhl1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"73f8ad23c72c2fe32bd1a9e5e102b6aca8ce21d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.8b1cdb1be.0","@material/base":"10.0.0-canary.8b1cdb1be.0","@material/theme":"10.0.0-canary.8b1cdb1be.0","@material/ripple":"10.0.0-canary.8b1cdb1be.0","@material/typography":"10.0.0-canary.8b1cdb1be.0","@material/feature-targeting":"10.0.0-canary.8b1cdb1be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.8b1cdb1be.0_1612478107919_0.417573870306593","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/form-field","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52a1131237b0bc80708f74faa73cdb289db97de7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.8271f00f7.0.tgz","fileCount":34,"integrity":"sha512-CHcvJibfY3nMA3YQ2p5pl3EIXLcjAcFZBvvsqMFqT1pvZYb+Kny2bIa/D0xF9IzQmE2sk/eOtvIsEJHMyx+IWg==","signatures":[{"sig":"MEUCIFjmgjjYM5+5VDUef1LiyNgRUZQtE6eTsMy1K8KSOVDaAiEAzXVQWxnzvv3bqWyPcOAqwQKp3TBXWYVLv5FNOVuN2sU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHykCRA9TVsSAnZWagAAEOoP/jQkKfi3/9SUhx1+3KmB\n4RoX3aXiOmuly2y6HXvo+f34me7xXCQRbdYwFTWcXYLGTaE2w1riEULD7t3p\nUYXZLk8hEWJa2XvzSl2OGAeALzwAohuf36av+oVbPIN0JrVWwSM4UDig3GsV\n8T7rPd0OjIZ7bO41y5o9+W7ShUfbyTxAf8DnogucKVmaB32xXSiaCad7OVzE\nHzcSWWludCE/VOaODAfkXUjKPClea9r7KIzSMlTfpdphEBxQ5pEVln7Z+vBh\n/6A2qibJ1xwTwAG5cF84lzpoYa313mu/5EFjQju+oqjA8SYvAK3CwJdGu/dr\n4dcEsWCt93ieriZ6DLFTkIrQcVlT+ce+Omyh/whuDEMwD81+EW3R1sMDhCAN\nIz+CCvmnOPt7JMGteIUCWFa7xmxsLNM2G6ytDoxIMUrQnFBaLdcRKPhb4NLP\nlFJ8tTGKdO+i6V8f+3ye90u4zrPv8ZnZ/Abpvfte74aG7eH+w7aC7floJFTa\nc6aDRlmLdqmTFiUKkaVRdoV1O+lBnaAotEm83KlpzQ4Vqjh4DpXHquWBiEom\nvMA9Ufo1wdIffYaIKBgb/NOAZwPJKJgS0DqJWiDD8zPVcNutUDrOGPzulCBT\n1fkd6+ayVPxMfPIKdS8V+Vhc47bM7EC1ybu88Bgv/MASArDhDtY3loW8Go4Y\nvu/p\r\n=IQdr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e210c5292564fea23c9cedf08acd2b8ecf86e94d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.8271f00f7.0","@material/base":"10.0.0-canary.8271f00f7.0","@material/theme":"10.0.0-canary.8271f00f7.0","@material/ripple":"10.0.0-canary.8271f00f7.0","@material/typography":"10.0.0-canary.8271f00f7.0","@material/feature-targeting":"10.0.0-canary.8271f00f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.8271f00f7.0_1612479651736_0.030647890268745925","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/form-field","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0-canary.533092a90.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50d64ea2764729086036d63e01553a931b121036","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0-canary.533092a90.0.tgz","fileCount":34,"integrity":"sha512-KRVtFaDRALq8GfyY2kn1VGSesoNr1lfS9wal18DXINxoPSLgtj1tC0TTGbwU8f3zjAZsbCQF8aopoq6cylZuPg==","signatures":[{"sig":"MEQCIB7G1g6FwZKJBgEGkMf5EKc88iworLmbFCWIF29rckWWAiA3YGlYmFPxCJe00IHJNgERmLKZ3TpkRezXLC1wzeNQCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL+yCRA9TVsSAnZWagAA2l8P/0Y7jpc1yIQ3RUMAr1R/\nFK349uJTV3lGDJRbKNJFJYJ0JqZDTFeCmJhIzfZauPfDlJ2op5oGTLz08xbc\n4olIfMV0M1XFz7Rph49fVHc2iGX7L2MApJPzUjzcIRRa5jQidv0sSoa85gtB\nPAHWm4Az8MgbHan1tRNOOOo0vU1mX2iEd5r9qf83/NmSomnqjKhuzwT2xY9Z\n5wU+p+NoIZh3B/UzApb5T1lrPkFgreDIPn1PV3QmtKzAqsv6x6E+mVLq4+t8\na28ifTnupGCOmbqNP2HzwCWK+rwe+3C0GaqwIro0SDcq38XiG1RlrcBL/Xyr\nCI8MXacocKQmMLs/oEFiv8PycS3dKmVoviOp2g24lcxkwcc9HgAgYJ2KHNf4\n2TfTmdBWVsy81aEBWsH9ccRteW4pIP/gTQfgqGixtbKiK2rOLqLJzLkXJGvi\ntU7TW2eaXyPigf74ge1u63RhIkqPmiHCcUAVg+dbeUmQumPcNmBaiZElmq6w\nU3g87lr+TOGAhAa1O1qJDgC6eaWB5bHO0sXs8HBuZO5nRxS1hlqd5bKe2WMi\nrvHhCnwJTZphDawlFBTP4JMh8FV6mbW5LvucZVoLA/ohclzrO45r/YbIxKUt\nz4tJXnN3sAjy1ulA9AsJ7oNy0Fv3ndKxgJBbyuwRJKnEpubKPZB6jWMAUvvp\nY+6B\r\n=B+Sk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1f76aa244e85ddde7348716259e771c739c09f23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"10.0.0-canary.533092a90.0","@material/base":"10.0.0-canary.533092a90.0","@material/theme":"10.0.0-canary.533092a90.0","@material/ripple":"10.0.0-canary.533092a90.0","@material/typography":"10.0.0-canary.533092a90.0","@material/feature-targeting":"10.0.0-canary.533092a90.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0-canary.533092a90.0_1612496817501_0.7049078985116359","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/form-field","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18609847e7519009d681c8f197deb65885c0df04","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.633a9fc7a.0.tgz","fileCount":34,"integrity":"sha512-kH3+kOF5pipJwJxfpnzVOEdiVpMnBdGoYsqPXG4F34I34g2agp8jee2T7PltDuebaW8LfFEPODkAhRoCVg8hiw==","signatures":[{"sig":"MEQCIAHcX2+5yrEwDZ0HuUlmefvh+hI9iXPq5EnhE+vVLkKyAiBbIr0/0zukfdI/KoKEez45T16JpDjqrbeC7hwG6mssPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW+hCRA9TVsSAnZWagAARxoP/imwkXoZiX12EkZ8aIN9\nWpFYTe58+w15BbTRMBmJUqU20jNb3BS7+r8JvOKEkfoes3n43235ruj/cn4R\nJ/fWn4QIp/WR6NGjSLHuSJLB63VXRT7hAhaLfmaxOOgNeOCtkUc3w260yvbi\nhvWBBc8JG3oh4+0SYdPLssM3MseZNw7Jsd+WkkQPZl6/MveAI8SRbuLq9Y9z\n2Bhq409f6kpjMpk5qmx0/QbUs3YOq0UXva5X3WQCf9jblckzqDs9wE8loRRn\nQbPm6aZBKmp4spUNmMA1TjpTGTPDcVR/l/iGCVNnmJ1NcWgjF74vcNE6501A\n0h0D24iOcdYSQx+rPtPm4NLGw7roe92x7GH43Su94Og6Yb34LFJkcoX17/Em\nyAkO9WJ6WLvRefkab+1Mw4rPR7oVNRce3AxDNVqBZcusYA488hBqnD0i7UN9\nCWiK4XTBlo/R+jZoXv2UMKeelLiHRBYUVrU6atHicEyQYxZh/SscMxniz7bf\neunLV6RcjItR4j0Nf10WgqL/ptwgzw1kydmoA0tsygyRFMtkMWvV1EPjtolq\no8xPSEmsRXW8Roq2q480+vXtL20V7pMSIF13btuqDtIGQHmJy8klQCU00BXg\ng4IQlqRwBA2C4FuQ3E380h0HezPE5HZwnxAsVT/2gLHR9IHuXtp/pL64OjjE\n6nwr\r\n=Cu07\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9fe28e8829bc50c384861e340d551c0718dac053","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.633a9fc7a.0","@material/base":"11.0.0-canary.633a9fc7a.0","@material/theme":"11.0.0-canary.633a9fc7a.0","@material/ripple":"11.0.0-canary.633a9fc7a.0","@material/typography":"11.0.0-canary.633a9fc7a.0","@material/feature-targeting":"11.0.0-canary.633a9fc7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.633a9fc7a.0_1612541856797_0.09309840949400128","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/form-field","version":"10.0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@10.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a611a64868d42ec1033e165d3890fc5f09d8d79b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-10.0.0.tgz","fileCount":33,"integrity":"sha512-OP4SiWVClIfNZYOUzuJpkY67ZRXTm2N4KF1xtfE7aN5mBjJfzrJkhjZ7wrfeWIDx4noGtGDn4wb8ui3kBk87KQ==","signatures":[{"sig":"MEYCIQDB4jtLqZluRygVh7Cc+SmkbqvXtzIxAxMGiovLsBhZlQIhAIwK4zPsN+dsBs7URccgPGaLRXZoulykCwBGngM92Dm2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW/+CRA9TVsSAnZWagAAeDgQAJkxGW9HqdMAqOAcfqzR\nyaJx+UqIO8bXC35b3qXBj+BsXjaw//BpNyhvTZ5xArhBwM6Cck6wlM+5DA1k\n6NUxpdb0eERv8xHnkI4YlXod/28BvI6vba5K3Dcp13ILtg4nGGweQt1ns68S\n0/Uhw7yQqur9MmHhon1Z/fZLsLBpeVwk/3y02kFfNrw/lTjl++FP5mEvXNHy\nBXDfLKVspRemGqXGoTZdI3+7GjLZxLPs4Wds8qx3+8/FpD1AEfWdz4YS9tfy\n0ETD4aeymTuNhcP7Xwu2ebHjeG9p2SKvmFCU1x4+r3DH/VugXainraIH93xE\noeHOr9eBcqr+kHauGEaFoQIJF9zNyNl1h/mr5YzCEgsZwC7r58stPf7G7nZi\nPPDxfO5NPcd+NTDo3mvs6F3KXw8BcTZeLEEO6JZoFB+fW3Ng8RB6ludf4dTj\nbfiKvLqI8Enf3XhWLEi0LKcJxRw1/8EEaWUjBiXIdtKYbJAWp0rvUl3MyJpO\nxGDjvv6YdJHG+T6zwPi+Q9uyzsjcm+cE1/EgqjU/KenD6PXD0c7QUO/JCy64\ndXVs4jkH0ZW7pHk7TFPnJypmP2XK+Q/xs/d6JHCpFpH8i5BDeQJtdjf90tFC\n0DJ63JVumf1mpoJOnb7v19t+0hfLY64/abTv2F2nhsDZ/kevIUf/Grs/btG4\nmec9\r\n=q69f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","gitHead":"633a9fc7a98d0d9bdc177bc9ccbd49beb25bd5b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"^10.0.0","@material/base":"^10.0.0","@material/theme":"^10.0.0","@material/ripple":"^10.0.0","@material/typography":"^10.0.0","@material/feature-targeting":"^10.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_10.0.0_1612541950273_0.6495425708856966","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/form-field","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.b5227247d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a0e1696d463ebdb977d6f48d7e5f36a5615f483","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.b5227247d.0.tgz","fileCount":34,"integrity":"sha512-mfNpj/Kpxz/5XD6bEPraaykIfCp0yzd+fKZIaBydQ1j956n6uvJPPTotbzvHD2RoKETN82xeDB5pcp3pn/E6+g==","signatures":[{"sig":"MEUCIHjkUO4wcaN+8EmnkmD//INFz+FVkTor2b213biSHvpsAiEA01bJkOcMCg5gOvCc1VPgMjJKD1KRZNBdazYlzhiMApY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYN3CRA9TVsSAnZWagAAnpQP/10eAxDpMj6r1BP0GG34\ntkCg9aPPl8RPTS+ToO0l2/Drq7tlz5LlFQasPdcLJj6bLKKZTjJ2CCSx6luw\nfqsnWFh5464GbK0bTjRiUCgH+EAq3qf7h8tDtpE80mmQ5LjZbKAScCZ2tLtQ\njpc1QIEyzoiKcmO9eeRo96z5okNXL+c+KJahB4qRhnm8EqaiPalA4i/Qjro/\nYb8cZBtlQq+T9jioECoMrhg/yrhv1thE1MxKInNakC32fEt2G+xWuody0LiF\nsUxEGERFh8AAvPXAR9WRweh5oE3VsQSJ7rkV6F+mQX3LC/Ad2RNDlMQb1xXL\n0PG+GJxdqPt/KAImUQTpuFNKG4Qek8jxXJ94Jmg/NTkqdmMj1054rgvGtjQ2\nyC3j0EhPOVjBhre4tlaJ1+3Lx1bBdxcHMNmITMll1sP/Wj8emPXW6ccA6W/N\n/IfHyRZd2MgJcbbErgX+arRSV1H9pk52IfeaHOBAW/z8yqri0JtdzT2Kxqii\nEnEArCmPxg/kMXAOWOLdsUJK4d/RihjmtJOZiju6kW26+pKrbKz+b5xiBbZX\nObP/FRaMwEftqLwWi0XYeQuBSrqIfoR05RisFhmHbxnNKyg9Kg2Zt9Hv7xJr\nS3tFmHTVeHN5WI1hQUu25gujH5Va54Ti/T5WUSxIKdZONhL1WieIWl+uTApj\nJaVC\r\n=yzO6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6f733c52a8cabe9fdd3ba4c35cb19e5526d8b312","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.b5227247d.0","@material/base":"11.0.0-canary.b5227247d.0","@material/theme":"11.0.0-canary.b5227247d.0","@material/ripple":"11.0.0-canary.b5227247d.0","@material/typography":"11.0.0-canary.b5227247d.0","@material/feature-targeting":"11.0.0-canary.b5227247d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.b5227247d.0_1612546935332_0.6398747368297455","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/form-field","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.95322b11e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"578f3d2dbf8e4786d667e248745a623ffd886e95","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.95322b11e.0.tgz","fileCount":34,"integrity":"sha512-ddEaAtM3Hg554ORZdRkQ+4bViHg8aUn+N4Brdx0+dbl/ov70j25gtJNGL+gjvXju8UTOEvMQQLmawUkuBon/pQ==","signatures":[{"sig":"MEUCIEZByiAtZ5PBGmp4gRgutguupvLDUiRY90Zl0iuk0/8aAiEAlLyorAwRmsmpdUKM5XQjfAkABSuVSfmiid2bsd0l+VA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdVoCRA9TVsSAnZWagAAASYQAJxGx3GxiB6BFUaXvv97\nW62JTD5H5qwSqcJdko9mKnCeMui8+a55VROsYGP9DcwODzwBQr1oK8iVhlTO\nj5HaCtnP0KN9orsmcajPfYMPX2YghiOu2wFg7KYrmgGs1yBSRng848W6RC9h\nkZdmoWjxgnKrGpckt8qGFFoMlPWM2mAorE1c8TUlbtW/2MbykgBddEdWkgn8\niZpbFAMVZN6ob+MdEU3SZ+IHV0yz6gDF9XJ2tssDwZoVniGQDbdG2bQPQ0oD\n7WUdIaT1XDWRYT7dOsmdLToprhFLpkPigkbNKe1LSxbNpfabWbunXSqq70Nq\nFTF8IhUK1tX+SeicBNzCRPqiUPfzplUYRkfviKDrGlHrvbAupTE0zuoI1+06\nTVO8SkwaiZwFtKvb1F3933899+Ko5VldQuM+EvfXSNQKqWJxTb4od+vqhPIt\nJ8CEQVMJLItR3JYK0hnH2zbwWfz/IM01hFQ7s4OBcCxywKcBPD3RFNjGolC+\nMkCc0cmW0lGT3qvcRw//HX1TxqNmdgcmr+DhsPSLQVs2M2jiB+2pds+w9JGP\nDG0a2sRGVS/oOGAHq6Ur/5rRakxPzJEGZiaRkPm8llwhzp/wBGTz/XZuD1pf\nYNrspALMBZaCHMxjjmEcMct7yHMBtzYJ7oqNM7a/kXwe0BvU5mOFCBERm4OA\nyFsc\r\n=DznP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"96cbc49ea4bd39eb1c275fdae68b6bae32b59ad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.95322b11e.0","@material/base":"11.0.0-canary.95322b11e.0","@material/theme":"11.0.0-canary.95322b11e.0","@material/ripple":"11.0.0-canary.95322b11e.0","@material/typography":"11.0.0-canary.95322b11e.0","@material/feature-targeting":"11.0.0-canary.95322b11e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.95322b11e.0_1612567912190_0.9934908963940958","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/form-field","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d45d1448c32151f8295bcd7ebf65d651105b7f6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.1f318ff0f.0.tgz","fileCount":34,"integrity":"sha512-xYti7wXfINzfBD9/17n9hf/c4EsbYjpvDAbB6d1vSKDtvt7MoAGswN5bWTZDH6hsy8nzU+pyowTTRL+9LoiRRg==","signatures":[{"sig":"MEYCIQD6EMZo4LZ92voE5y2+2FNX7vXF9EKO2yrm/tClHUB0bAIhALYo7i0vQIkGFfIrvAnGbAFnXOqm4dnBpZpKV7Oj/FSG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd0vCRA9TVsSAnZWagAAYGQP/1u9WrPlpx/ypIwOrYPr\nFrlXmddN+ONIRls9RaKqugZCRP2LuMzI1enErTZKKPCW8sh1ONvWML3RUahA\ny4DV0OylzRjhmC6pOgMFkDXk0LmH1tdrDazlWtOn9VxK9WAFIgWqGGSd0OP1\nyJXm3X6u2Ca4mi7Af8Nx5h4lfGj5IU567dLt+nEvmp3fLSpXxKhZ0TriODja\ngShcGEpElKPYvQnUHjHYNntG1eydqndtnyHCLMaJMtALrvitxi6jML0hV9z4\nLL/MNVXxpq05CPRfDyjddhQIoAHmrhYwr7czdootZj6idIWCdEaX5kkCIEur\nlw6i3/0STpOHZlhBP9qkiJVWqJV0grJQdKZ0UQ1znGNgucu+U/71I172RsLG\nai0oHLawcfuBpem62tUWLK0Gb35Twgx6FjG6g+l1ViMM9YMoeDyjpy+Eq1xX\nkD+06zsDjHUnzIVZfn4HwSHPJ7Lsels0fJiqJeDWXHzlShiXeCb+Y4dCt/6q\nnUQ7muApnaTqyzMDNPBzoCHa+mOMUfC93mjKzwLY23CbCTPsAenevRjjPTUp\npKvTg1mRYSlyvvnJMSpELxhzE+LKqcHNwV7cYjbFpeNgNs/LHURjCOi+ZtVy\nP0uYgpxXdHzLlCXNXFDraDEs7Z1ob8MD5rT4DMAsicLEn+TeWbyPJfXEYbta\nLf28\r\n=Bged\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fbdc53421d5701ba23a43e18a010bebd179dbae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.1f318ff0f.0","@material/base":"11.0.0-canary.1f318ff0f.0","@material/theme":"11.0.0-canary.1f318ff0f.0","@material/ripple":"11.0.0-canary.1f318ff0f.0","@material/typography":"11.0.0-canary.1f318ff0f.0","@material/feature-targeting":"11.0.0-canary.1f318ff0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.1f318ff0f.0_1612569903066_0.7846885053365649","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/form-field","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42ed8b6ad96629e8d38e76a16848d7241aff7883","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":34,"integrity":"sha512-hdzqoc9t7hDPdZbh7Nsg4sJHwH13pgYuscbzojigXVunLmKV85PjZFyGkHO2oESUBEeAV8VcSTk/Ud03Jh+XjQ==","signatures":[{"sig":"MEQCIBYlmX/5rhd8kYYP/SvOFeFs9Oh7B1dDj08v1N+grZpxAiBaHWT0OnJ1Zd/eHPqcR1s70CuCf9xBUVo11AThSK93lA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVLPCRA9TVsSAnZWagAAD3wP/3gWFN+CJ77uZaNsNMcC\nIQ77yOoUAriXj7ovevzCUnTDxCUIaG5gl4U5A/jIIShqRY/glOopwjyjn96B\nVFGS8mu85ZwiTGwyNngBRAK5bdBvIlVwe3h03t0NApIrZYrKkJp9Ox6YG2iX\n5osHWPplsijVweEuAxc8iazswr+rA/44E2090u0ctFHOaYNqqMLIuflA23nj\nDyQZKWHN11dVWxz9bZ6eSV+Yk4/KBvyNFRrakppAL3WaHbynVRV2nbNupEfe\nG5gpIYtt0xH77y5ydnq47LOb9eoWHI2NVrY4t/7YfgTpStQ2SqE/R09xn+bn\nNKOLDdNeozvobENhDKCv3/zqIRcDLSoz6xMV4HBi4DOeJHijeB8iaMmyKY/D\nXPMCSpUXN+rgyQfUixp00puOivOL5cwrqlIA40E8/P33dzXKY9+Q2jFwis+A\nBQS+z2s9BTstYR0I4qsnkRnYniivaZhU9i3jKM+loKCaeVxph0wtb0+YryxJ\n/2wy2gATa6JP7z0USmu0chkQ3Npl2Ggk0ph86YepGL+lvBcuHRs+jzTgKqRX\nVjfE+PgOIyA30vIn/VEzs9VDau2x+Gq5V4LJSQunQaiKHI7XdkF8b1Y4cpaI\n8y5zbCNHt0SBN5Mwh2gA08SVhYfys4TvCuo22OmxeLJqPHY6cSVs2D5n05tr\ndiz5\r\n=98eN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b1cf52745607ed664e2dca58a230a3b3849aa273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.ab12cf7a3.0","@material/base":"11.0.0-canary.ab12cf7a3.0","@material/theme":"11.0.0-canary.ab12cf7a3.0","@material/ripple":"11.0.0-canary.ab12cf7a3.0","@material/typography":"11.0.0-canary.ab12cf7a3.0","@material/feature-targeting":"11.0.0-canary.ab12cf7a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.ab12cf7a3.0_1612796623113_0.571031994355641","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/form-field","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02b8ab05203e2902ea1d50d60091fc92e1f18d9a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.98db2c5ec.0.tgz","fileCount":34,"integrity":"sha512-AkP7JcV9lnG09aAM7cUJ+eNuQFC35Lcg8QiuGZv0oSBSa2J/x/pecW2fiJ3G8X18o5IccLrl9WVVm5rEdNd68w==","signatures":[{"sig":"MEQCIBO/onSxi61zkRkGwEfp2kOnAq1On5aG5uq/SORXvVm8AiAoLKhXR07M6LTIRk01DtUg8/qTKaQw8IOeoopeMnJYbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVoNCRA9TVsSAnZWagAArhYP/RCO2bZ63ha9QwvAysxh\nwKp/a4D7vWM6EKPVsj5zsHjVz6JuEzuW9KjT8Rlczr61xJMBXai1c3gbAbfu\ngNPSH4Tb4oG2GjXlZSyzxlqsqszUVJTauJvZ1wiTUchyq4pi8LyPcwznd+do\n1iOgIeBN3k5vuXzcYlYwv4rvrO/YT32e8eb63m2kz1GwW5PcvtigknLZGQEZ\nGJOcJTiWAcWdX2p8UxEfVHauTqjT0T/1RQFJEp49zHzY93XcCfk2HHDinPPI\n9S7o0Kp5Q1kO278E/6ffU3oF8/e3LJ1p+IjYEZ/rIkBuoseYAH8IsGHF/DrH\njo2JckXwTuTSVfNNSH6HbSi9PaLDjKVXA3TvsHGLkl6Js9FfnOOzgyUibblI\ngEmlC7z8pINzCcPfv07BxucQCfg3EjcIBm5IBLSK8dBBGMNKmrX8Nddq/x/6\nxoXaLhXGYaA5xphThr2WwSxvaXSEPFTFAaRRHJgmU6tO3Itx7+ABIxldo+69\n0IrU7EdqxDFBcM+BzJPybFeMVpgwygaY4cqjcUX6fzzr/sAF5wvKujc9QArx\nqOw2W7s4t+xCLkLWENl4VpVjCTfMeq7IxBDHZZHEfIsYRUXX2ZCcusPiCOuG\ndZUtsTM8SHmFaqhYZwPB2pmlzTO102ow+k3+/xuyYsT+4mPvS6iIbBndvyz8\nISyG\r\n=Rv/o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cc1b9da2cd7b871fe0f5c8370793e0ad9b1a5f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.98db2c5ec.0","@material/base":"11.0.0-canary.98db2c5ec.0","@material/theme":"11.0.0-canary.98db2c5ec.0","@material/ripple":"11.0.0-canary.98db2c5ec.0","@material/typography":"11.0.0-canary.98db2c5ec.0","@material/feature-targeting":"11.0.0-canary.98db2c5ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.98db2c5ec.0_1612798476482_0.1972966404656984","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/form-field","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7250e67843d0c79b5199267789c598b53d33a9c8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":34,"integrity":"sha512-95L7pseZ4+C64zQWhvmeVLcWHVvNEH13NKAKWvweuxrFvtuMMtTmKGZIdfuHZv7BIqBO7TfiI3egZrN9F5A3Rg==","signatures":[{"sig":"MEQCIEpO65k58lUVGxTOfcNsJSHk62COqiD6lRmD1kR15AGKAiBMCvS9JSEt0CQOTgoMMLlih9eNjwr8z8EhXg2KfKbkig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXIxCRA9TVsSAnZWagAAtyMP/imWdHonWPn+VIex8xZW\nn7WXF0SWR9WWt7AQcs3dMg/TjQK7tmMtjxNZ3a8qZyGHMZJR4tsNfVUeKmYZ\n7Vc6DEyhOZGxgvj4zijPQS7sT8h4j8fGrVgtXaWwgnrJ08YhdLD/nxBOm3EU\n0iDyVpUCSSv2G55vh7xwp+yphP1mXNusHXDjNYDIFjFq9e8KGUYGxf4haxqo\nAvD6gZ73geZwimoc0dlpDgi+7lryGoyF+hdK82cvZTBW87O2KmfuJJVcMvyE\n8yazh66urghkON4tGs84/+GjfrhkER+OKQqf+e0pkTTlgLG+Jrphj2bnfHcr\n/q8NlMVkMUC5VaUrxFio8bx1q5sDRVqu5PpFyUH+I78gjUCB/nnHQQZVcd6L\n2yxdD8gLVVddhgU8n5EaJHW71IZKU2D4ffL5OeX9fs8M2oj2wtgv4qvVnJPd\n3zhSQWx3CUJHFGo6n7AYkFg27tDcneZRvVXrdIS5kr178oIZK4lq1aOTu1Zy\n5Oug7VtGWpALNnLP66XnreIkk7BE8TVJ046glyqQJFXfKGrUrm1LR3hbXDjP\nK9zyxQydE0/NyTVsZM7bQ7/zx/Y+hf65lbFki6OjjevPSoNRePHWNrC75t+N\nJZoDtpHnyu3iF/KSguMMPLXNpoIA17zAAJPvePoHrWHQgOhe4jc7jwueIvHh\ntrNF\r\n=mWHE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"aff88a7d3786743558ecb0dabd92c225698d2b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.1f86b9f6d.0","@material/base":"11.0.0-canary.1f86b9f6d.0","@material/theme":"11.0.0-canary.1f86b9f6d.0","@material/ripple":"11.0.0-canary.1f86b9f6d.0","@material/typography":"11.0.0-canary.1f86b9f6d.0","@material/feature-targeting":"11.0.0-canary.1f86b9f6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.1f86b9f6d.0_1612804656813_0.24304719207198544","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/form-field","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91a11e0971b857d95fe3a8c2cc82126793fa3ad0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":34,"integrity":"sha512-TcTkc8sTVXbM4ApmaQ86ayj2/od1Dr1LActmJ9kXm7A2b4tf9MD5mxyllMzJZCR5CV6RK8AeuwA4n6xYKAAtTQ==","signatures":[{"sig":"MEYCIQCR6ckqXYVHfawaT/u6MeJj4UQptODsJaIV2FngTNNodgIhAIg48+27x/GGYtKk6OCDRdZrAdoLxYg8q7CpU8KTCkeR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXw6CRA9TVsSAnZWagAACmAP/2LdDdKx5GDr2wUSymQv\n73GjBHt4uQ4vjkghazyBNHvVshZ808i6fKxojIC/6MvVakHUqlVemlnS++ug\nO3aJQdWSrzWvrtfHEcQxSo6aIbSJvwFlsu7KZOf1Bq85hCK/j4eyZAcDbMa/\nh0gdLWwNJ0qrmWQcVPBKzoPMsEt93w1CxBzqie1R3hJf9VX2BVeK6Z0FAdG+\nc6RBW1gYbUKJTlXnz//jJtGUQhaFOzU6quXjTvlDnGhnzd9hXwMPHzGA36zs\nQnolaY73FWm7UI2sr0oF5AnJ0wv/GKHGFYl7FgEXr4qqMew8bo4rB/L8DZkP\nQEL7H7BMSETmbdLTwiYZtpczzb28AySnAUOVfIx4c1y3wcyyGEhAqw97I0A5\nZRAVgM5wKZ02nKhfFB3+r2V3N1ZiMiH5nnT4KDYKSZIV+5BZ1Suaz/zDowC4\nrlaeNKATA1yLV5D3vN40kw+mJBR6EF03Z5d4IgCiajsENKf2R9/oPuqwfyZ3\nlVEVjobLNyDqMt+5Zk2l9+REYmiZKieukjXZUNmhGtp2iXsNrN/Nm6fH9zz5\no81b1TYfnF+8Y+mplkHsMPjGs6zuft/vC9pxTUZ+896qMAGAoG3FukfJi/HN\nHz+ZF6wEQ/pg6ocuPGAnN48I8TLTueNEaIg7wjlvunmduUEWwfmUNa7yWC5t\nS8jO\r\n=DzTi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5accfac22392cfbc1035dcad920093851b33cc79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.aac8f5d9a.0","@material/base":"11.0.0-canary.aac8f5d9a.0","@material/theme":"11.0.0-canary.aac8f5d9a.0","@material/ripple":"11.0.0-canary.aac8f5d9a.0","@material/typography":"11.0.0-canary.aac8f5d9a.0","@material/feature-targeting":"11.0.0-canary.aac8f5d9a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.aac8f5d9a.0_1612807225622_0.09124498352240495","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/form-field","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb5fb863cc9b9c34a21c373f0600e7c983e6966b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.750e18fc7.0.tgz","fileCount":34,"integrity":"sha512-EQiBngeaxW6Slr3BN0GiWWfG7HTE1WwTXA8sVy5PU33sF3lpxxdGH4OogIVzpO/uzBI4Pzb7BtwYrVM4YW7Mlg==","signatures":[{"sig":"MEUCIQD0CX5ZdNHRFn3qb1Y0psgNgIujo/jxxCQljdl/fExg5AIgWYNhRe7z6wOghIT4PGz/EvF8gCsYrYRfi2X+gVHylNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIbANCRA9TVsSAnZWagAAJUQP/2LeZzOqscbWJX1fu2rZ\ndBVg9IuXtddAnLAnNoaApSz2D8JGaMrxVAv+fLF3x3fUMox2x26zr2j2t6lW\n8qcftC3KKl/VEuLpZk+4v34STucvrIfvW2CqSiz7rCkwbfSwHt1dVmoZw9XY\n3t5Hebtvk/GH5/WGR4lIHhpSfHnm1uL1gwZvA3e24Ln74E8wnUTUJ1eNTlXh\np9sOclpW44eSFITRW4/lhJ+LyzjarWg3M3yliE1b50FDQvztbGaVDcBQdymj\n06B4LxnmwiHZR9qPPn0vGqTPOlg23+SjeLC0gRUFqlAawxB92kZZ2ZwtgzTC\nOMzJ3Iqk/8fA5OEPvuXCg9CtuQ0Dmc0ixDmumhHLACcNX56xwzApBhAWSPpB\nsmTyQ77wWmWsNxcGKxXz1afZm+XinLMUhebwZOwJCEyzcsVGy6Uhh0dH0c4r\nQ6XxBMQB1c4UvJUtOj6Tym42PpFn0SuTENjET4R3UU0n848XkXnOEKGNvJMe\niFmHef77rsXBk5md1MfMX0QaC33G7vpjhTxRaN2V+8DhkIIQ0AM7GiiVw5cb\n1hsT21bZxYc9GJ9unnaSTrEc7oH5+cchIX3p9yF1jUvpCDNYXh+mfQQdO0Vr\nIQSBBYUdeZ8R7O+vMD0iIwIz7Cb+OcFkUcDAmrHznxP3coLckk9om+n+nKY0\nhvh2\r\n=IYNy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1bab3bfc895c50d4159c7b24b69d3ab3a7eb9e72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.750e18fc7.0","@material/base":"11.0.0-canary.750e18fc7.0","@material/theme":"11.0.0-canary.750e18fc7.0","@material/ripple":"11.0.0-canary.750e18fc7.0","@material/typography":"11.0.0-canary.750e18fc7.0","@material/feature-targeting":"11.0.0-canary.750e18fc7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.750e18fc7.0_1612820492674_0.5192828041030575","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/form-field","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"865353d3c0e9984c6b184747f8dbb834beb9eaed","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.b62b1266d.0.tgz","fileCount":34,"integrity":"sha512-/NjgfMyWg48Vbt95Famg9N0lMOVP+f5DD9jgmeZf3Z0iHN3qbxXTRgr3YXKnO6Feq+6S2nTOKYPBh/galesV5g==","signatures":[{"sig":"MEQCIAEPTDEm5IM40rjg0B1Pi2jv4VC7joGRuS1A2D8PkYC/AiAZiJfY8Ay7XBU6iteo/c8/rrHxy49QjxInvV8vpAtxnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwQ3CRA9TVsSAnZWagAAUsMP/3EsPXWSK5pCZlm47kuw\n1wV/xG8OJaquJZYOLCa2C17AOkDC3FN9sNPQiUZHYFhGmkvx7jDgrnH1qeh/\nUol12Ieak13fQyX7mkUwYmGpsFErl61OGaFz7K42asRiCzOUkw0U9IrQalTP\n3KZ+1w7c9ahQfiPel5XHCZQ2yJHESMXHmKeGRb2WPckYR0EWkIuc+HtJMqsG\nCm/gaDuOBb4aqZACYL7colm0UdwXx0+0bF7hcZ9keYUpn7PBUbbDbpmh6jJf\nr6xF6WoGrcpAG/oVOcVD9KF748cnyvjzwGMbnaoea9q4yhOJBSBNHeht8DeO\nDcjCkDWRHapMCfysZ3XiPlGoOUBMkjmXQm5UzHa77Iu2vDQJ+6t3nBD5uRbL\niQxtK1YFRqwr86zMwQi2A6LR+xjrm8Dgjv8uyL29mn8Gv8KlfvdzkYD7U3dw\nDu8FT53LxtcEe7uqjdBlrAIUIm72R+tUtzu7qP7YVH3ttqq7nKxciRe354Fg\nfzg5YXT4Q9k/ARvOcCCqPcH/O8cPubVKhqtWwr5ESz4gO1QAL2LTveqiINwz\njxSNgjgoo5/fLgUiJyUaZXRSYSp83CWqGBJuBEOa1G/J//hJcP/DqnPcIHuc\nQycvFTxCZ6PJ08pXWdPi+HMHBQet5C4myw9JTIhTheWKz6n/TgFJg7trei99\n6HJa\r\n=LxPm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2369de5a28b7ff8c15bb5f1b2ba96320e8a9126d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.b62b1266d.0","@material/base":"11.0.0-canary.b62b1266d.0","@material/theme":"11.0.0-canary.b62b1266d.0","@material/ripple":"11.0.0-canary.b62b1266d.0","@material/typography":"11.0.0-canary.b62b1266d.0","@material/feature-targeting":"11.0.0-canary.b62b1266d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.b62b1266d.0_1612907574547_0.6618819771525191","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/form-field","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d0a3efed3faafc6a2121038c2a7668fd6c8649b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.a6b3101fb.0.tgz","fileCount":34,"integrity":"sha512-h6dUNfyF79zVqCUkM6CVQXqg5uiujdgpvTnihYk6tE1VdIWt3apoppMSWp3GR8tzBxac8W1WIeabdBpli93OlQ==","signatures":[{"sig":"MEQCIEJKcBbxvD4TeWt+tEDy0kBmYE0tiCk+LjIc4y2f1NWCAiBrCrEBzRBIk5p0O2OG8nOl6KTXucHZKpo/VIe+Yn6kdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbroCRA9TVsSAnZWagAAAgwP/12BQ7dq8rKrUSlUqvBW\nkzZwlxycAJ/hDBzxf0JvvrYxdLJ5CjdHdNRqQwnmvc3lEf0CumxuYR3pPeFA\nXIuM2ETliJMGTZornwuhEcLgCYuVxzu/KJ+e7o+UxX5du6hYAjJQ2SYy1ogo\nYOwTilv0tP7NQ1KzpLuc3BKF12VO6psMACZicNoufa19sQWtNBVWQihToVjR\n0Lx/yrw1d2zuImyYqCIO+HKNuItPL8JExjG64jZpo8biUJGfVha5eNdZoUQ4\n18YSPP8lQDKQmne2cwGSBvkke8Hid+mVvoEj52V6CuNhdJkbvtg9HoA1CtPV\nLchZFuI0pT4iQ2PQGI4XE5z2lLMIrhLqhLgZ2e/0KmIY24SFYaP+RO+VyVqH\nYMWvLEEYe5WstWL3qOGlYh+B8FMmM/jbJPLjTqeuEGDQSJz18Gdayl/2lzC+\ndttV2svymfD/mAYoF+ruRdrPPAm3gTgMd4GU4S3iFT0YbFA/Wc0FpdAiUTwy\n1/qC1IISB+RHkY4ag9e/yqHHSKAfiUt8NAB6HkKPv+4UnqTHmGIkA4eWfOGo\n+cBeXs/+J5khkaZ309LiG2tFc/Ye85nbZDaU076A9AIQ/qklHY5+qcSRCRlU\nMwEl9DgWiYNSGWGjf5mXOQ8LjYtYaY4snH+N9P84/AwCQrEhBhMKfjuczNPP\njm3/\r\n=BIWp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4e94d35f86983ae07d81d1c7893ffdfca50c2afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.a6b3101fb.0","@material/base":"11.0.0-canary.a6b3101fb.0","@material/theme":"11.0.0-canary.a6b3101fb.0","@material/ripple":"11.0.0-canary.a6b3101fb.0","@material/typography":"11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"11.0.0-canary.a6b3101fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.a6b3101fb.0_1613085416436_0.5342582008984067","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/form-field","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.ed88df700.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30528abf580391e62f5bc0da36c8f255557e33b7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.ed88df700.0.tgz","fileCount":34,"integrity":"sha512-J2wUA0T7P199VenqXIVB5JE6n7Kq4iE1Gk+84kqOPxX8P2H3eHr+pblD609qMmLZ56/LgFIFxq96cy9n4Ltv5A==","signatures":[{"sig":"MEYCIQDKSHPprudEHUcN/GjXOSzpzkHUVF8z95KubZRQfpLTXAIhAOTw1KRmpzq+cNpfzrl3z+7hrab2ySgDR7X6LH9e1RwQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcapCRA9TVsSAnZWagAA9jcP/1vJDz3KaC/ceC5FS/5o\nBzXUe1XJOMDmstinihTlkkAEdW6KzP3DFDGo280VsJWGdj0HVycd71WfNilN\nXiObdHXGngI8CMm0Oj5hMKTOp6UmfdugnkIqMkTOKw8yGSdIMji3eAy22+PB\naC3trip6trsK+NCTcOTaEs0NCVJ2rLlv7eRY+SERcHvuDt5+ZF6EbxVHUwiJ\nLwLkGwnd+8ZdXEgokFysLx4mv/Tw0+yA4A1D/bEqHsjv5uBX1lAEOMrkLUJ0\nbZq0mFSZXfXZLoS3R/DFV3SvnpKMSEx+ND6wXJad2b5RSpM59kTtvkboQJSl\ncjD7JdoJghHpp3b29fxag2QchHKCVMD9gnuTb734mKQ/OqCcbm6qbOjuPmt0\nDJIXRamacZgxenTr3u1oPu9s26K+v4lj1SCNcEz9FTH1VGc2ouJxzd0iCoPL\nokBomcN+8htinlviar54XYw3Mo6nTobNVf/VfHd+T2Uj5uLSp2L91uP80t/W\nYwPUyx4whoCxgA1afoYbEZuBvo+uVCW8AvpFNsYK0mNMt4FhIu35Bv3xaBho\ncxhDUotfhD9CYxYPRECp3+pFMxpgjHRVzHL3Ogw/JE+IyNvmZ1QBWf1pvTgm\nJPMcSt/kpGeTm9zW54EqHUVw/CEbSQF0FBZ31A14NLPFA2ZWsj6Vy1gpcMKL\nVLZ5\r\n=I7/n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9ee8b051c4fdfde9d63ea193e791d71e20094867","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.ed88df700.0","@material/base":"11.0.0-canary.ed88df700.0","@material/theme":"11.0.0-canary.ed88df700.0","@material/ripple":"11.0.0-canary.ed88df700.0","@material/typography":"11.0.0-canary.ed88df700.0","@material/feature-targeting":"11.0.0-canary.ed88df700.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.ed88df700.0_1613088425097_0.9006924386075081","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/form-field","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29f051fe9e95a0d932d4fb3a9959d38675d3e735","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.d30efe6b4.0.tgz","fileCount":34,"integrity":"sha512-9kThryeyEzLauftjxbQyc6FIqiXMMy8wuS//yb4mmNHuEivH97cQHXGnT/YlKt07i6s9s/+eckixIsVNAHUYtQ==","signatures":[{"sig":"MEUCIQDqHC3bHuoztRT+E2lc5l+pRHKXOw2oSpt0+cSmm6fl4QIgEA9mSyNKfHAwCF7OsjwWVPjyHMfHbe+YcEBoP/mRZVQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJer/CRA9TVsSAnZWagAAWmMP/2c7CbQeAXSJsktthDdM\nlNLYpYBWLgxFv1JPpmOHAkjHXKAzxydHa0KuvqQLtzGWekedjOYkdqeYalg1\ng4knrnjmfuSSMqqhtuxzjuHTD8lxSujo/5OTEa/PSiTumVCL9tUP+JlHLdxm\nNOu0TkDeIGPTLOh2FpS6Q3xOvGvjyB85UArTI2jeT7O7uEHgV6STLfxD4Cza\nlCeKyjkCt12fyXrenSn9EQthqsZMwanUmi8MnAyYWqbYlphDyku+G7C7dAuV\nZbcRjprLfxce9M/lnL8Tv5Y80PKerHhM9xvbOLMnAm93yM+FtFQItqySV1bA\ngBysplFIfgtStE9/48WloYRuNcTG5bfUfp8UUD9s0bMyunh87n02Eq+pSXcD\niQBFL3Bys3zu5jarBFe2+NsVmJ4TRa59VSCZKpyQebCJv9F2nsT/nYafRueK\nw2KdxLca17/7W1hHtHz5RzUzAx4n/69mvTqGovwjwYQLrVK32EGVSU5an6oG\nYCV1EmaYquJMXhc7XAGncInYOy6HtFyG/uLI9YEfa+6HQsoTTFzzvttT1BJF\nM2qQzfN2Mm75T8i96JTljtS0G27tXj1v3LH4ShiX+TamNSlUlEIOZfg6lkdk\nM4y75pjYAMUopStnFwaEnpUnkcqDKXSg0Hm195jPTvixAJ8FOb7rMh9ePocc\nrIDM\r\n=150P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0d2a46d4ab9ca5088511e4e0b5cf2b261e3e644f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.d30efe6b4.0","@material/base":"11.0.0-canary.d30efe6b4.0","@material/theme":"11.0.0-canary.d30efe6b4.0","@material/ripple":"11.0.0-canary.d30efe6b4.0","@material/typography":"11.0.0-canary.d30efe6b4.0","@material/feature-targeting":"11.0.0-canary.d30efe6b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.d30efe6b4.0_1613097727547_0.06850065180801712","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/form-field","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15b86d59af843c67a08192fa75c4b244d9529988","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.0393bdc4b.0.tgz","fileCount":34,"integrity":"sha512-SK7yd05rMhXkjvDmAz+qe6aCp9IiL/a8fEPfWV3QpHEuhF04kHITN9WoDTUY8sw7BmaFOo+32A1B/VqkYIQ4qw==","signatures":[{"sig":"MEQCICHeU2gvDgcdxDwFVEVqTgbZ5jJWHYRsYB+by4QPD4N8AiBbNDFRCWGFaDWFky2MV9zDuz5UAv71zCPrSpPWX8y/Fw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgSKCRA9TVsSAnZWagAALgIQAIiWDrp4krrZU9fwbPP0\nwoS68Q+tZWEks++qeSjVz/soaLR/2JSZjn77NrvG4yq8Fqsvm8WG80il1IYm\ngQUgaI+UhmSVSn+8XsmIhIDFoRlX4w17RbnUCXTOrDyrgbKhMfLQqqV8ZXz5\nP8UCsmUabMEhWpVuYPjUP/Db6DZqDDr/MFL3cH1TMKe2A6y50YpoRDOOJj39\n/wr9R7jGbEP3xnGVgpShVyWbLad5xccNDQZg7U1O6v5xQGyZfoJKFPBCvzcY\nnc5qgVDBSDUvP0WTosiH0kGGL9HCDKK0GbSY+KUzE1/Eqgr2nperPFLbLvLa\nzav3a47h6EdgmXizDBohA6VuE/23u8upPetWYlEwZZkduPCzwbe9em1U7fNA\nK2Pt/tWRUQ7kqVUY+YrI4EoJvZajAP2bd0oa41Brsu/f4eOO2sezsbg1LJPj\n53SZwHqygT+bX5l/2sVaAYgSotN8V9fz8eldSh+15yRxzIAoZBgoPaG2ArBu\nCBLfT5xVGQ5Ti3nA6AQJugUAIoFdbMEx3od6ccl76YCzbbOYoeUK/63+iusC\ndDQI0kkVTiFLDcn48s1+z5s/reQgbbzaC1+XyulrrTzfuQnAPI4+RxyERs/l\noK02GZTu8Qc3jFnGP4JRIo7YJbd64bSThsk+NFpfJHm6gvw6T8Wy2eooInE2\nld/U\r\n=amne\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8f241a2f549ae5b1fefdbb0c93ddadbc1e1705a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.0393bdc4b.0","@material/base":"11.0.0-canary.0393bdc4b.0","@material/theme":"11.0.0-canary.0393bdc4b.0","@material/ripple":"11.0.0-canary.0393bdc4b.0","@material/typography":"11.0.0-canary.0393bdc4b.0","@material/feature-targeting":"11.0.0-canary.0393bdc4b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.0393bdc4b.0_1613104265987_0.469909316137312","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/form-field","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88a66190747a27fdafc9c5a1dde92f560f695be2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.7cd26af4d.0.tgz","fileCount":34,"integrity":"sha512-9BNmup+6izhny8iz+HRcDYqW1uV0dGkqjewbkV9sxohpH0/7ZnD3Go/L65I+e/zIQW5ugEsfp8z4JGhJ4a03KA==","signatures":[{"sig":"MEYCIQCw5fg3JyWticxExtgCL+Os9wwSuW6OkRhM9xSCSvwkYgIhAODvZ1+9W1e/p5gCfY8352sGPhaY12OcTUTEilSuEiiM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqXnCRA9TVsSAnZWagAAiBAP/31tZeS0Ix/xvhcWI2Hg\nynaQpZl4abSXqpPCKVZyz7shSFPtPupGiL/YOe5ab8+N03CMD52+asAYSd4C\nKFcuXhcP7cjr1qYwQo25Q/XzNfs38GN6cQbU07Eed4gemHTCdvY/bSA410JG\nGVVJSMuo5J6pukdcz6GbpMDGlA3cqqklUSWooqlG5v3vsNJVLjWQI+5IaLaO\nnOHtjcqySsbwbtVUYe6azv3JD05LPb9Fj7xK8xzYdfB68B+9OUR5uColrHLh\nZcZNQl5+4K5D9DBs8/+X7uy0IlMg+0UrACNjWcHdk8Gt1HTam+9P4DPXGMze\nrq68IZ1s4QvFYUDhh0l4DSCTMHouyQKfHnsYuScLiUwHdOyc8venq+nfLY8v\nAmx4EXYl8Kihw4w2z9CdbIq/Bq7oZ7LhZ9OvCOmP/mPPEK7LKnw5nCWjfOae\niPjfpjp5SEwS6/xToI2t7fCB8HfgDM1qRxvuiDXR6Ob2Ba3lP5CTJancpBfU\n38qt8bSRR0nc4iRIKRnHT0ILSQ5CeWizVhV9hXSX79yUrnbWBjr3z6Oy2Hue\nntKtNTNcqJAGg1r348IY5IBnG86LU/ZNiMFKswO7QC6nwpF/j8Qm6yPL99xT\nxSSDTheL/6z3pqET4Pw66hJasVskdjHnPro5Cga1op1U2EwYZmMozg4iVLG1\nORel\r\n=OurT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"da78e237011a9e38abc623fed26601ad22a7426d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.7cd26af4d.0","@material/base":"11.0.0-canary.7cd26af4d.0","@material/theme":"11.0.0-canary.7cd26af4d.0","@material/ripple":"11.0.0-canary.7cd26af4d.0","@material/typography":"11.0.0-canary.7cd26af4d.0","@material/feature-targeting":"11.0.0-canary.7cd26af4d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.7cd26af4d.0_1613145575001_0.2815651292641961","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/form-field","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42f34059f9383574bc46287fb88ff570c1f7a556","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.71fe9a067.0.tgz","fileCount":34,"integrity":"sha512-EcicXQ6QlbST1EsYyTo38ekKUvL4PLaP5YrwGPOtg0U2BGs4vLnTVUaTqp1lSCyZY3piKULg0hNZK3oklZq/Og==","signatures":[{"sig":"MEYCIQDL4K3qyg0PDFOlpxN/PTHwGFCBsDrYNo778M+tVm8icwIhAKuHM3b7ufhAkWqZwcYk5z1G43vyIkqfLAxusF55wc6x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq1ICRA9TVsSAnZWagAAOP0P/i6K/AHrO7PtuxiLFjKS\nsiZtZMZVP+ChaqMPv3T/NnW/8pcC9WI5NaUe3jr0FsDHDh/VeAVVFPkAI/ZR\nTULVTqo1Bj/OWI2lE1lMoERz6XQRzlJewNGFuET6i1Klq0W7vCQAzDOD3m6Y\n0pLZXJ8ESwn4gTnqBoyjh8j25RQjUG8KFM4gqPLvthU99z6LhDYTGQpPloPz\nJ2b63CTOGD8U6h8Gfc/bi6MjQgvQucpjzpLOVUgJjbMlPErM2LZ+az1+dH3B\ndblut7u/Rw8lI1CwEXs6SL9+mwbcPtGkOUTVQSRb46tlgw2P+jCM685Veutf\nE20sFfB3aFFII6Igz6MKjnON/wzSQeRrQA/9Qh+2PWGLb5jO0fiwxsx6F6Px\nvYtQ+xmRfF3vW99ckUMcWwrzxv+hdxZrkYd2C4G2e+3PziylGuikxtJ11b+O\nlFX+fneX90PHrGpoXJUPK6q9KRYo86U9FgGwUZwLdFnM5Ulo1D341wcTW08M\nq+949rme+wdv68CTlJ3dPvttIqrMzKIWKFTloktf5DwKZysOInFvtZdnBFFO\nvLQcSZ4UbXSFHGZ4djCZ4fwFsNE3r/3asS3yKOV/JpZvelWkZIvNYC6coIGl\nDdLQKPA7KdKgknX4J/SAwb1mmM+Tcnho6bRWA6TN/ksmELBaM5xHpgcZMW2T\nc2y2\r\n=KU2W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c79890da6d0bcf08c3d7c57e31df805b50394019","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.71fe9a067.0","@material/base":"11.0.0-canary.71fe9a067.0","@material/theme":"11.0.0-canary.71fe9a067.0","@material/ripple":"11.0.0-canary.71fe9a067.0","@material/typography":"11.0.0-canary.71fe9a067.0","@material/feature-targeting":"11.0.0-canary.71fe9a067.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.71fe9a067.0_1613147464221_0.4837519597641673","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/form-field","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d3694473d148fee8f575b56bc83e935bad88713","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.0fd56a86b.0.tgz","fileCount":34,"integrity":"sha512-5R5KxUVxEspv4Sl2zIgEmVH/QjQfLSQGCRnNyZ4jdVmq4bKSuD6VyLDppX68e7s+xUTD18ynzX5fd+mMHNA4bg==","signatures":[{"sig":"MEUCIEaWx14dGg1dVKuc72lqfq+8rPbI1FjqxLwTT30mnBNRAiEAvtvh3kk6B4Gb3TFL7gdDFf5PMyYFhi9771Maq3HuGSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxlKCRA9TVsSAnZWagAAWhoQAKF+yqq7GJoJUE4xFbhR\nBZLDCZHqVdxoVrsY04V+HeD7fkpu5eVCCvq3cnCy2IGqsJUDCon0TQJd6/G/\nokJ940Go9GLx8027k32KOeQUIjT/UMeWy4/noR8vdRAYzn+QZPnOwjWLmfC/\n9OpP4r2vKhbPSnlaoww+SetFS7m6tEHtxlti4KsP7bfWdpbVIhUXe1FFtfNd\nOeOHXo2pbPtwU8WEe05hYENfio08TLnufdwx4SzUt0acZa9tzi3FoW34VECJ\ngM+vkhYANdaXia5FM7B4D0cM2KveaomPrb7lGSEYOOhUelwJz1iAFPGNxjFB\n0krNjyhG4dWn1ojg/g+sqNtatL2VyGdZeVE7MXSFXY1/zaxJIglJ9+7kcXLF\nZRloh9Fpj+bv2Wh1TK8Zo2BSPCRDg5JPpGmh16AGnvUqp9dGo9zFD2buHJNG\n2cwc0DDj3DWLKeqxp9qH+IDvMavvYcfNgY3F2tJkzV5MetdH85zOdKj0Zys5\nzXsVlLEpc6Mes9Cp2wd07ExgAI/Qw/3qhdZ5+clyk4WtBJug6OAThzYEMMba\nMHl0xdu0blC3J6ytutx9+jb+1g+Pe5S3F0fynGNUWYKEhAEq4+UR7Txn5rcj\nPXis4dcuL/3tcQh6kQWpB5g03mRNR+ahpDA+8nEuR2JzFizjx5G0F9QB31fH\no5gk\r\n=X4qz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b5d7e78bfa318c864343a15754f4c5ab98160ff6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.0fd56a86b.0","@material/base":"11.0.0-canary.0fd56a86b.0","@material/theme":"11.0.0-canary.0fd56a86b.0","@material/ripple":"11.0.0-canary.0fd56a86b.0","@material/typography":"11.0.0-canary.0fd56a86b.0","@material/feature-targeting":"11.0.0-canary.0fd56a86b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.0fd56a86b.0_1613175114081_0.24997825814554542","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/form-field","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b28a744d6a964a3d3ac9e5d4756641b41e3c2855","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.f19bbc4af.0.tgz","fileCount":34,"integrity":"sha512-OW6bd4x3QpuXZQD73hpIYBcYQJuo1PJahaCAiTKH7mUtQST21uS4VdwwqRaWmkGw2kI/JgW+UcyF6vvmrpzu8Q==","signatures":[{"sig":"MEQCIGMxG2ey65PIdGmmr4B+OPhqYXbwZjyRR8nWKbIHbm4MAiAu3oHb8r9q/I6rzrnhslGT1D+5XIh3paKFju5AhFOgTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLEQ3CRA9TVsSAnZWagAA5i0P/jDYRM1pZAYAA0DQIRPS\nqAnfimJJepR5etxjgQjzxUQCu9xQLZPhs7g+Cc4FBWQ5tBcFxbK8U54sreGa\n9qXQU7OmmjPbOBS/+ga4aCo7TSZxDUe57PRQwG/S7g7qKjr+X56UcHaeWGbi\n7p11FgUjM4JNhea3zI/pa0NvdoKlMkwwENVdLKvq0aP47kGqoEuCEeYVvJ+b\n6ayVbk5C9HTA5a3PnwGVaTj/4QwOOqJ1wpDEAQY73ti58le4BhYAU1By7Y6D\nOjE04QxTRS07/v9pLfVpxbGXZx9f2IzysteBRF3RAUq6764fSWktj5EseT0p\nn7bcmMAxPPRXTVjim6JRnvD85BkiWyVdFfuNlc6hEEbwLuHLVjU++4oD/gmQ\nLNNo2D6M57MrkQmScXsz7tYhMswu0lzy5W6fWuGNG+E9kAR4g9523ayxdwE0\nYMfzaNjpHtlxrTKnCSvo2YLEcS2E0yAEHbo3dWuX5DEI3C0RE5ajq3pjpABb\nnYk5f+SZjKurKIxq6BVHrdNgrrzFy+utJqv+AhAODU5AtdL1YMRre0PzJbeU\nFsyAXfRTSq9ddXWWHM4l6Y2YEXSIeY04gijng8WdJ2b6Ho4pOpOQuj82oL+g\ngcDpVvMwF0LFPIAvrkG0WLrTUoqYy8aoLscc9AOIKh7T+bqakfWj2Cji/xWT\n8/lz\r\n=sc0K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"842729c260f5a3be9fec8618b41657a90e725af0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f19bbc4af.0","@material/base":"11.0.0-canary.f19bbc4af.0","@material/theme":"11.0.0-canary.f19bbc4af.0","@material/ripple":"11.0.0-canary.f19bbc4af.0","@material/typography":"11.0.0-canary.f19bbc4af.0","@material/feature-targeting":"11.0.0-canary.f19bbc4af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.f19bbc4af.0_1613513783482_0.18852762901338127","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/form-field","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e5b36cf56cd0356354fdcf79d6f579a049b895c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.f9cac96cc.0.tgz","fileCount":34,"integrity":"sha512-wORrIU+oCeriAEbwpKMxNxhXzT6wGzhU+WtZnYjlE/3Xt5mxqbX9e9khV0s6hSWPYtINVtljuxFgdRQnve+PQA==","signatures":[{"sig":"MEUCIQDKZmAJpBbVAW6EiVGA2wNRG+Rb13peoWhR3a8ARHbeQQIgffG0OxbjbZVLfxha/IvwnrYPcMHvrFoID6LnKQenU7U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLT/fCRA9TVsSAnZWagAAR3AQAIYz1YJuV8Tyg0jrXbqN\nlBDDMQDKK8q5NIPTgasGrwfjWKfOcZ7RhZlfUBpbF4JqBszYNXSH2LzWRns1\ncUH5zM4dy7JxGPW5woU1x1LA8WZR04gnvU/8uxZkmWEbWOlZJdc5qOQM6Hfo\n0QJyTIAd3rNBHUlvBo3CoErKCMdc4PaT9gLXA7MQnJHKS+sOuNotn5S76Q7y\nk6ig+F1TISiRK7W70dB4nu2Bmd/O4RvLU+HaWIPEH+5By3u4iOqSeaaqEc3P\nKO6M1ZJaJFBH64JjqAZiyUBj9Z/+/l7fcLCpzC7z2pKA5BzephKuMHAvcaQL\nRPxjOtRRrF11nwaL4lpYFNFRgueSs63JFrD7Oc4S6yB3xzW7J2HFV/imzps+\nGuM0UauCROAV4nGQ1h+G1ZkUOuenNtleRhghYKgyRj6TZR9GSVNEU2zAG0kX\nXzDti2P0B07p7dVABjBV/gJhQGX61+ar81l2e/PuOLTjqwA/Ejhcv0OnacZc\nyCDHvWsxS4L1s4wCpg75Ri6DzxJl3j3v2PT4pFaNx2UwSrMwgD6FTCw9/J4U\nwEP3gBouzbwbqRWnBqtQSd7mwN+j+26eibV1CFmlwrOObF0WJjktWoL52vpF\nBibpVJFIL9j6iY9PipX/2zcANJnwBU+MyV7dW2JUrxOEWHNEWmsROzsscx2X\nySaj\r\n=YFyJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"993e327235c8cd36a8c15095389eb149ada97cee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f9cac96cc.0","@material/base":"11.0.0-canary.f9cac96cc.0","@material/theme":"11.0.0-canary.f9cac96cc.0","@material/ripple":"11.0.0-canary.f9cac96cc.0","@material/typography":"11.0.0-canary.f9cac96cc.0","@material/feature-targeting":"11.0.0-canary.f9cac96cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.f9cac96cc.0_1613578207517_0.560965864538949","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/form-field","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30976629638083ca88b84a1e3b8230ad2ab8934b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.79ce0878b.0.tgz","fileCount":34,"integrity":"sha512-RgSYnJzO9ct0EUEq7aF82N0lGNYAWCuYn4CtfmoC3bdrJIIdlA9N8p5jEQuyo2AJjj4nS4oMiscxv0+umOlw1g==","signatures":[{"sig":"MEYCIQDaiYN0mRwG/6+eUsUDJCgMfV1Ht6hI2h8cSu3sj5JkegIhAJbApODh4wQKmD94JVLfAuDBXshy49LfpwelTvDXy6Yb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW2iCRA9TVsSAnZWagAA/xYQAIKwbtwFJjyS7/xSyFar\nc/YvV5EMZY1Cyjow4kYzLDLH1V+HFY2b50wC92S1fETKJQ9/CDNPXoz2KAKh\nWkCsFcrS9/ZqbKtbQowycwIBcIcyGKLKtotKOG1MyZELtuM19Tbyxf5NPsKm\nVNk3la3iQH8G+yW5UT0/CPN+QpHPLkUKMepTQglxDdz2Q2YwrZxi0P7VIAYS\nFbHlEtbVKxq3ic23WSpPszvRSsxvI0YC/o7G5Ld+bNzbfC1UKKhL3hf17Y96\nCn/N2W1Vm4v7njwrkg7mfcGvINAVvoVQEJcD6QfV5sT/QFQ6a/81+UzTRzdg\ncPBNGEOigMoWJHVF3kWWmSYI8GUsoOeR5SaoPN7jUSatilCG+2iufVtjXzE1\nh7jiWFYqSywFnOWFu0VH3oLj9E2ZqKnX4MW7xQcz3/aFUy6TqF6iYQvKgrSM\nq1vDmghZaHfc3ZKm9IeiQyqdwDnMASBSFNSPW6bVNDj/Y6JudAaCtIMopGGw\nxdpTirDO5mEV6NttJ5fhnohBet8QsCkkd1pT92N7KXQUs30XSk4kDhWIEWew\n3+175Gsm9/scGxlKPRtOjbm2ypfX4TWI0XIgtUKxa8yH3sHWdQZfcWgraGpS\noMFx/qeVzEsSAKqb6KOAJGdomDhsWv8Yz3k9PEtL+TUNZCR2RK7FREQK6+LH\nDcQR\r\n=gdYa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3941c218ed650b1d1767cd6b17652d4e1b5f7ac9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.79ce0878b.0","@material/base":"11.0.0-canary.79ce0878b.0","@material/theme":"11.0.0-canary.79ce0878b.0","@material/ripple":"11.0.0-canary.79ce0878b.0","@material/typography":"11.0.0-canary.79ce0878b.0","@material/feature-targeting":"11.0.0-canary.79ce0878b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.79ce0878b.0_1613589922266_0.207295203964456","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/form-field","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdf2b40fe323d8b2bfb0c3af8d79a88b31ced838","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.d6e507b5b.0.tgz","fileCount":34,"integrity":"sha512-k6SuyiEJzWqaWS9dpEPsae4wzgdfZoT+6ngLCCg4LFItjvyzEqFfDBNiBThdz2xOqJBKOXoJPBNbeQpjpVIsBA==","signatures":[{"sig":"MEYCIQCcjYIVxCoOnDkw/vnRGBuZ4DwaqRzBlrd+gPAZRyl3ngIhAMptE4ygQ04T9B/kJgHsLYH8dBVqHr0k0sUdrKsjezRm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXVbCRA9TVsSAnZWagAA3/wP/2wjZZawRcMruHCApa+N\n66qVgu+WRrakgGX1rXotllwD+dUhqeH3+wW9i0dmmf6pHQITJWgiTJdenk++\nHkhdDKMlDGE9zkxJ7C9OS0WGnSHsIjyK+7u+JuG/6YD7cyiyQpnCqzW3oYtc\now3RUtkhu4Fv7tKnPqFJ8evuKjSYeEqxmbXkT1JSzp20HJOn3np5OfpQGEIb\nPfDMX2nIrMJdK1DNFvjMksN6kQSt2BXm4hEj/qgn3yn7531rWjSek9lqQbc8\nL3robZ94V4sZdpa/S28KGuY5PGYY8HeCBF/2cI/EpTavjTW4SevOVg+4ylAg\nXe8gOV9kPUDMXrnzdZ+/t1YaR1mYDgj3l6Wx9x4qty1sUmfoQ9fsnHzM8KdH\n020DbR8I3QkKvcIfqZWc7U+/kkTrgsQvUZhTUIHrJvtMBXlOYF8wwjRXiwdn\nHmXEtPYSg840WSJoR3n/n1kSysxjXxOqHAiENuasEocnorGc58RKiWaAYpzA\nHTGgixMKN1iOm6rxkvlWOYKY9UFaD2F3M2bIKTNlRIBl0GSLiUMNfcOrN+tl\nmBxvoZ7hyn6gOXGCR+aSSm0Yc44ep7aFhzAg1b/l3jbB/lkrNCmUrCrz1YCQ\nlnkCNeEU33VkmQRq2xC4WiOjjwpTXcN7Yb7GDtgZmcVmuWjyLIfMl7q9XaxK\nLNHJ\r\n=Iihr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b20b73a4aa16995dcd0b73e46e4dc31f7914a367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.d6e507b5b.0","@material/base":"11.0.0-canary.d6e507b5b.0","@material/theme":"11.0.0-canary.d6e507b5b.0","@material/ripple":"11.0.0-canary.d6e507b5b.0","@material/typography":"11.0.0-canary.d6e507b5b.0","@material/feature-targeting":"11.0.0-canary.d6e507b5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.d6e507b5b.0_1613591899006_0.07724808629227709","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/form-field","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.f2658381b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c885464542a641abde837c9ab6929de75f608a0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.f2658381b.0.tgz","fileCount":34,"integrity":"sha512-T/bw5q07lab6xjk3XLrKAvimBAqUlyPStzG6d1jw/EO5lgYC4PuI9HUFKrwDFH0HzL0alknPZAU86kE3mBhwrQ==","signatures":[{"sig":"MEQCIGkj18BGapSBN2gm/PpU64Gp+SVeWuUectG4tYKhKvvkAiBaRPhRlGk/hwCEXwaQNX1pAvLe4Uc9g8N5ubVRpCGuzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZxrCRA9TVsSAnZWagAAZIwP/0ClXfUHaJiO7Cj3iBMa\neS0htfrkVQGn2c6qWyk2yphNV0zcsd0bSMAsMPiZLdb/dJEP0oozdMsz6J/s\nnSpB2vjbpwjOshuMG3umx41A6AmdnVW/I8s4VV543rCH/FZrDROxtjqyCE0D\nrV0L4RYZIXkaGcOn5oBN3M6MH2WbarVhJtLwQ+Ury45pTIuGNOXxhbTZ/Gzc\nIFMxYdzhjwzsXsPjNX9Oel9t11CX99dMxZ9biAkVXhu42aMA5MwLvrsoGxtX\ngYX38mJfljlL9Kg5QKy/t/6aAfJC1pChXSQasnyP9uF2LaylRZEQIg5ZnSUm\nRATMp9oZmPX/VCIPJa4BT7vH/NzRQwPmBqD4WxqV3Z0zwXZLSIeJuXerl9IE\nuGYjZ5am8i+EO5fuGwfOX5b6ZqzZsWTd4ZGHQtFOrRpZIf3Vo5tvHE3ONuiP\nVa3hF0A5HkppNTs6DCDVtVqkSBKf7bNtUgE8ejWUWB6BldIzY6GSeLAEfGkU\nfJ/ZjJEJWHHPXQT2D5oV6/bq2HKEiZjrnhN2LU7J+Ch7ETfi2p7tZB0T1cCT\nW/ZmOZ9/UOFN9hiIgIJ2IXa1clIP0ZOQ+LmjWRgstD0WdafWvd7nZpS7V3CU\nUyeCi/P6ry/zklCDdetewg7eh8gP+0wk4I/KB8mG7CNqMHaRcvwmLShWLOvt\nKmT1\r\n=cWBp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bb1b60f60cf9b1a4184aa52e590bcb4003d3c09b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f2658381b.0","@material/base":"11.0.0-canary.f2658381b.0","@material/theme":"11.0.0-canary.f2658381b.0","@material/ripple":"11.0.0-canary.f2658381b.0","@material/typography":"11.0.0-canary.f2658381b.0","@material/feature-targeting":"11.0.0-canary.f2658381b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.f2658381b.0_1613601898790_0.2684195489594079","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/form-field","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d64accc323064b42a839140585e903657923d238","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.97c4d4035.0.tgz","fileCount":34,"integrity":"sha512-nZ9BJillpgksVJgf4Qk0hclCMuni9uTExXcApBJbpAp52ytJM1WHNoZB3jVwP1/gattGWB3NA80SIK02jy8L+Q==","signatures":[{"sig":"MEYCIQCpQIRI6msDqiQ0wl/OHiENyahFTuO5bIQkYerM4dZSLQIhAKhKtT92l2WTtsznrr6JqWeTUgojmXojo+hNS72ag91P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdJmCRA9TVsSAnZWagAAYA8QAI9PhJgMEYOuoLem+uDx\nlcaWbMwZypen+y1ZYbibZb/qa/CS7YNpsj9PcgvXsND7Y+bIq0VIWJE9X3nF\nN40nbHBNeohsA6dqmmwfZnUGHiLO8a5BycQeVAgPTdhJPEKe457bWErE6Izv\ncz4l4bd3Je5YPJG/CJfc5UuogPzvl2dCATj9U1zEJC1GO3VML2CgyA8eAW93\nOWijWd0o4YbkKecJNoBKkfYrKRLjaxl5e1xu+sa6gUL0ZaBycxlr43Ghsa5m\nVSQl4QOp/nXSVsSAcYRuE86s+a2K9ZxxRhbXl2HtwQagJYLCMKj0WzqAsH9+\nzPB841XGo5qGHbhj044uycythdUxecxjX2kVFsoecAZKrb8wZRC7sT1jfXua\n8aYbCdL+lh7YA54YkiLu1dG2zRlYqaKcC60AZnY2JZRvnjMCLVI3UfPMt3zx\nivP6SMM9zlVtoZ/7IdaTYLduDy2/NHYcXBe4o9Hdz9d6L6Dk/FWUWSlc2Nnk\nxcKOh08DH2JDmacg15jUnYZf88LLgf3ZYlehGMLpeucoKEEmxWYpE5O9AiD+\nbwJUCk128kLXdcjy/aBcbvJoKjarqph+uZVZ5UqojQXrzlDfqepH0TaqT7FY\nNKAZPyD3KRAuCxDEj9Dsvv6YaXJ03pGpAiUbvEVIoYAWg3+iuQtVVWsHATWN\nLIL2\r\n=fzuE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1d9a223ae17277dc00b76dbbc4263232d38e50c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.97c4d4035.0","@material/base":"11.0.0-canary.97c4d4035.0","@material/theme":"11.0.0-canary.97c4d4035.0","@material/ripple":"11.0.0-canary.97c4d4035.0","@material/typography":"11.0.0-canary.97c4d4035.0","@material/feature-targeting":"11.0.0-canary.97c4d4035.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.97c4d4035.0_1613615717888_0.5120806650968937","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/form-field","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46ec85e673586e95e8326ebc496199c9e3951e59","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.f5bb4648c.0.tgz","fileCount":34,"integrity":"sha512-CHMQ5sP15N9J6Zob8ViVIwbsAWqH5TTt5VjVrfbFNzn6tzUuHyRS0D/gL45DpSTdLaDuM+wW2VIRNcZxwSPRBQ==","signatures":[{"sig":"MEQCICFfVGfC8+XlqpmmoZl7n1AytcZlXIorKy3PhiGR7eFrAiAupzDlWpWlHmf+1u+RauSvODeE3IQZs1mY09puM2DAAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpBVCRA9TVsSAnZWagAAbHIP+QEbBK/mlUDz2W8Qo1oe\ng8kmS5yOOKRzBg6OmDa+ts2tx+qtPFoB030amvHClPwxJ4keDdxyYn69mie2\nMQ70oRFnozuBfCEkIYwjrVEfJ1AfldSXKLBgs4xJYC8iYMeykYS0w8RT9paW\nO81h/+yDzftxWS+7A7acZgOtzqN7IcatNjPfKbrTq5RXEWmW4fjIsI0CGiUg\nRnu/Ah+xXTdu1Pgy+foLKXr4ZbrVCHewdPf5FUh9cYl7JJDMc5eIizJkI1xe\niglMwd8uXNQYxUfVytr1A518N3yozT56hkIKnt1gHvbWarB1amkAqWnrdWEJ\nxRmInjQ8CsyiO105lY/jGsDvr+++/Rb7c2hr90uzR47ScA09MZ+BuCz1aHw/\nmbx37UMcPPLl4i7Oqo9cPvTRWj1JAs+peuPQWVq7pzfKYNe9e4EpbU2kqyOM\ntm+KBxF2CVHRh3wx8IDbhMLcD+tsPp+2fYC/k813+d8qL5KXHTZTeuX+OeTu\n7xJBe+WddbOW6VY+u9TTo2Eq+2G7mB7QOBJT32ei4SyUX63frJ6DBbtAH0MO\nnwv92cS8Hz3sWg7MqK7gXoZrl8xAVyvrnVUGQ6z5YQGQV+qvVQyKex1S+sL7\nlUC4M1F6tkbTWL9Up9lRlUr5i+wNYLD9FuIWdf3UWTwNiWPJYwRnJh/crE2i\nVAOu\r\n=WleP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3abc3c2f94ce48fd3a6cc689419e03b8f7769ce0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f5bb4648c.0","@material/base":"11.0.0-canary.f5bb4648c.0","@material/theme":"11.0.0-canary.f5bb4648c.0","@material/ripple":"11.0.0-canary.f5bb4648c.0","@material/typography":"11.0.0-canary.f5bb4648c.0","@material/feature-targeting":"11.0.0-canary.f5bb4648c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.f5bb4648c.0_1613664340650_0.7070373399107686","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/form-field","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.302c7a960.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d69280be27cff77bfdedf184a06145a08dcc93d7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.302c7a960.0.tgz","fileCount":34,"integrity":"sha512-h/Q1mNZ6yNdlI6ZfJNjBPvwvYlgzAHaxd1YjW3C8JuAHM+wGwEhp5QbWpb605COwqbYEvebHp5RUXI/OcUsiwA==","signatures":[{"sig":"MEYCIQDGjB3z+NbU24SgB6yKPfVk2cHykJ7PHVnRgCMugnR6qgIhAPWlJwqCbvmE3PM+Yp7AhPy7yGzTgjlliZ+ubqizjTLX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrQGCRA9TVsSAnZWagAAodAQAIn0/GP8t8RwvoweFjOS\nEPqXXi1dWzafgv5biLv1DKURhGCRmbWimvE3TfU9GAFz8/3vbibUhLoR5TCJ\nMP45N32MYMW9ALIRoFAsXob5uxUCNLHvzMyCCafzSo2e/rMxuj+dfdMJzzQN\n/Wq9/A/OVfEdL4dSSADvKcrTia9l34kjGdM4zwpt4Uk51A1iZ8cr95wd85nk\n/Oe67pcOz2/ULA56LFPjU/omiD7Zz2OyQEVtb7/9u6Y2BQ0LuYPLT+NTZdQM\nf8kZChv25KYf/NXaQL/8TFPkcJx7nsdmVBi0AV1uWorP/e24n0XhJgBbctQ6\nROS8eYcg49IG++jGqpfi/C4jbOnx9eJRkoVRtl+I9ih7mMAymMInFW0uaHme\nR7odLFVk5V7lvZskMEIav7yfcGxVqgenmkbuNrAJxLIeZkSLZvLkEa0NpMB+\nujmoG3bcEX00kxNeXDO36aXesDVRQw0t2qc/my4WzZMGqmHd8ToauRqIoG/r\nW/m6LgD6r4k9wHfyp/MInbDDNKODWi2R5sFLlejgofESmnXWKHm2WrNKv1E8\njG+BJICXmKrDD5BU1QvuthZODDWM8FOnQK0KNZIemxvfif7A0oX4fpqLEtpf\nARy2/kKP2m91nC5U368ien4cu9LgZPaNZSaE9mAGFwXSCtdvmfXbPonyZBRx\nCAWO\r\n=RheO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b16c4cf1d0826970ff04a72b663f1838cf8c37d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.302c7a960.0","@material/base":"11.0.0-canary.302c7a960.0","@material/theme":"11.0.0-canary.302c7a960.0","@material/ripple":"11.0.0-canary.302c7a960.0","@material/typography":"11.0.0-canary.302c7a960.0","@material/feature-targeting":"11.0.0-canary.302c7a960.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.302c7a960.0_1613673477807_0.4380863146612006","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/form-field","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d17fe13e1be82db519c2e67feec5322c66d953ef","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.aa0aaf026.0.tgz","fileCount":34,"integrity":"sha512-dQbTwbH5EpMGul/cuFNf0qPn+jBoVRsdwhowxfx9ZqO+7aZBcdtxCx5+/nyaLfZLQHFd3G0vex9W+OBfDg/wng==","signatures":[{"sig":"MEQCIFyv2ITG+rOclMnuwpPm19Gq/S3UAUiCn1WOw7U9VwyZAiAg9yv4Cn8VBmD0SxYfgYnyR6NGwpuIvmoYS6tqSVHy3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":179603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr68CRA9TVsSAnZWagAAjzgP/A5u/VDrrZ0myIMqVlU2\nnyAJ0nERl7O6vFQBGeDGd9tJj7UuaHTTFUws4FwUk2jFQ+WPp0qrbKU8F08V\nVSs78GF5e+nF6Spv7bQs9sx7LoJYti3bvrxZG5ErujGEWtvpFL9EyDE7go1y\nkI17DHZBv9BFi/ouUbCYT3n7fP32sjKlXCAxjdgqnlbWO4XIXRAOxDN7J3XZ\nGdgitCZrrDJd3PFGbPSj6/jP7O9xSB0FcbgMgFZdb/NtlsODc5WlO5wLahDD\nuQL6SoH8X5rgex9/ao+swWjwhJTDdKzVzRb549icuscoVh+pH6EX+b4hvzx+\nSEAQycyuNyxNAA5zhVGKSbloFL2M6d5rLcIlYChHi9w85Ny027/5Q3g6XSdE\nhSIJeFGqeSRnf9L7QOIxQq8M7M35w7/MGQZ2d9XmJCTUB1px/sU6qDF+aITU\n93iAgMtDYss1CaCcitkoejCY905pBKqBC13/DEJBut81jRHJZVC6dKTW5h2M\nC/FcasPj1YTQrgpNYptVZ69x+Mi61qrr8Lj1YV5zfjzhlisHXpiK7G8I+Ke7\ngsWPb5j7yZSSZ+g7O05VVilCq+qqlMQxHo2riXAnc9el2X5Y31PwfImwZN0s\nrHovickhuyMWPf5kW2sFWyWZxE3WakUez7vRA7PBw1nyz+VQ6/DUiMoWZMoe\ncwzK\r\n=zRpV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"de542de1d7c4c8f5f51199fe207ef527fc1265fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.aa0aaf026.0","@material/base":"11.0.0-canary.aa0aaf026.0","@material/theme":"11.0.0-canary.aa0aaf026.0","@material/ripple":"11.0.0-canary.aa0aaf026.0","@material/typography":"11.0.0-canary.aa0aaf026.0","@material/feature-targeting":"11.0.0-canary.aa0aaf026.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.aa0aaf026.0_1613676220103_0.2734290446872971","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/form-field","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d3105248d8a732acb7fbea36ac080fa1b15783f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.07ff0c452.0.tgz","fileCount":34,"integrity":"sha512-H8Vr6NuVVoOZBp1mq6QM5msavkomCJK8SRlrIJHP/MSgZakO/zwFmVmA8iRh9fP8qW2RfJNlWpNQP22mKacXcw==","signatures":[{"sig":"MEQCIDfeMdzziCa6MzI+lUMteicI2lMMohfkC4hxLetacINCAiB7NDOSuWt4Av3la87+He0B/i+ScC9KNNVEj6B7GuNIdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsMwCRA9TVsSAnZWagAAl8IP/A4JR3uUTnz99Dhl4Nkg\nTNCzNqEgo5yG8T4hztdhUTysL+6BFSuiefjIDEZai+ML4zkUvfII9S9WNrvg\nj7Bo6T+aJkyMGbrV6sWU7RO3/7YnX7wAzo+5sXEJBUNkTZOrzDlAMpjQa6g8\nEGCgsPEsUj0OuGMlQ+n4DcvkHEYAERYaGhzvtClRl6nCxn70vGtbA3JXgbU2\nzZzkXLTl4Cbp5NoESQ8GeQjpg9BdIEgIdz/3QByp0MiiPYGfmHmfrNwNleq5\nwYEnllqZjjc5uM7TMOUyD87pNfv7jt4DX4VjTFrPB0gRpV4H85/0r90NMVzi\ny6lMXxu9MnUnCO/WFEagAu+tWBeKnXYoRDlt4pCmNvMnImHc+CHbU8rr2raz\nLHQROxAxEEoUzatlpNN5NW92X3cxH22AjaBnxnRmxmFxSiiDAFb8yJLKqawM\nWvHJeBhdvkVLgkC/7FoRTTiCpl9gZwReeqCtCgv2oXZT0Rdy3XtdPuJk6TNc\noDhxRMcoPcmayQ/InWcK/sVq8VJA5G5Ml1zWUbITZeCUnwpcMk4p7IE86Y2X\n7hxpIVpxdAweQyzgrbCHFrMb+S/Wp61Apt6R+pOvfUUrsbtqNoIw4XLrsH3L\n24Ad894cDs9uJEgweK2/yY5FOb16cqGHJRac2CmcMsoSL3Qlw9J7ogSDeYHJ\n/bmw\r\n=Dn4T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"52e3f1cc8fd4568a48ba4314f982d5613f53ef5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.07ff0c452.0","@material/base":"11.0.0-canary.07ff0c452.0","@material/theme":"11.0.0-canary.07ff0c452.0","@material/ripple":"11.0.0-canary.07ff0c452.0","@material/typography":"11.0.0-canary.07ff0c452.0","@material/feature-targeting":"11.0.0-canary.07ff0c452.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.07ff0c452.0_1613677360277_0.3074547213060683","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/form-field","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ff3c836ffeec063243c0d7163c471f5c7e801d1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":34,"integrity":"sha512-5sKatGRMNdaVaULLjLB6QsVQF89JO4YcH6fToiSyoBxWHK2TQl0hGoFEC027+QG/StJtbZyiTmXnIOb8lzL/vQ==","signatures":[{"sig":"MEUCIGGP9IbYfM5fbEMz8H2KSLT98XrtLFMmEVpAmjLRQHVQAiEAqmRc2KAiaLY/EpzpGKQPucVwiF2yV00u+gATQG0lXR8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvfyCRA9TVsSAnZWagAArLQP/2rxtFNBCSk1r0S/v0z3\naZ7uTxB+g6hOPSY7rYfC/ypk6J6Ht0DDr3X8qwFJZ3nFBuPq6KlFHlRLZLiF\nm3L/r9im0HGNlyGWUS7XEmo4ILf/GsIs5lJEuq8XUr7+QaCk7Oz+KSFhT3mF\nyEiMg9DCRo+H8go+tSCQaAHRhZ9x0UPRnHFh7QH8814SaYP5YShLbIuRjDJQ\ndigB0VzbR3pQQA6RO1xwR7NJB2LE0OdbQppcgC8VsPDK3hafIqgJKAK7Iwsf\nZu/o0CIDyVN5AgfRdl0JKCxFH9q79TQy0NqRID4FlfjVzzEkcrMjEhmq8GOD\nt36Mypma7L4q7Wt7Ro9iEDjeRSD7+nvBsip14WBf/BwAh4FZHZkpa9H2f7kK\nUBFHd6WzLV2UZdPEJYy1nndeg3xkYpaFIM1KVaTAhFTcu+GOHMUGVFvt1N95\nCm0Ly95D1ZfXcv0wBsQWFL5AfIqoMru8RWHgjvamzYOj91dfSeBI5xrE9HcA\nXD5/p8RjwtxGmlHpsqzCrjEB3UBnCZvTMHsUk7OUgcCiPyQRFIQ6CjOQmJJT\ngTzZZkITL0QyYNGyASa3zOeybR4PYOg7r0Tka8xoCTLzzhdUsVerNPpMPG0F\npwdySko+x1+1AC9k0YvxsPQ3I46Oufd24TuwLx2a6HaT/ZLgMPChJpOzGZGy\nGCW4\r\n=Ey/r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c23b9ab547a5ebb36a108742217a017fed1886a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.bed7ecd3e.0","@material/base":"11.0.0-canary.bed7ecd3e.0","@material/theme":"11.0.0-canary.bed7ecd3e.0","@material/ripple":"11.0.0-canary.bed7ecd3e.0","@material/typography":"11.0.0-canary.bed7ecd3e.0","@material/feature-targeting":"11.0.0-canary.bed7ecd3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.bed7ecd3e.0_1613690865574_0.8867659421134686","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/form-field","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7bae64175c08dcef8b37105fea539e3cd0d7ec7d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.06dead2d6.0.tgz","fileCount":34,"integrity":"sha512-DP9SXaxiFyJjZMV3foMBjPwyxwNPvWuUaMs2ghj6k3qh9gsdzdRlpvirEi/lbcvisv01kYrJzUWipu7Xb3C5Kw==","signatures":[{"sig":"MEQCIBfeGIxSZtfbHDIkIUlun9Psge4gPGkOGTjGzY1VVyu0AiBQS8nyVsIZ3o5rOY7XhjIzN8bUNe+n5LSXI4vx1yVx8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwg3CRA9TVsSAnZWagAASLcP/iYPKnyhAVLif7UGc0SE\nWbPlFjNmzsXEnk5OkvNg7u5nnu3NgUiFfvLB0p8DEAoz79/5TnhloPF8xUlu\nriLfrqdQOyfpS7Lkw3cKM+jBdO6yuIwXtIzUoBq9bujNchW7MqBsuv43QeML\nel5jzwn5j10gjIwplfeGe+HrMrJSra7Ge4AEWr7rRt12XV28gvI8mHYa7QfU\nV3F3ChjENYxSI7bmVFOGJNwn+ar+ocUGnDSLJAir2Y3aRPMfo6EiT0Z2Kyvd\njjzMLs4tiI3cdhyBf70S0ZSBuCJRTvJngkpvsXHLqSgf3+MLtFeK0K0VN75t\n1zlAUZA2FpJ/IWiZmUwkPsoGLnVvd8YKe8tze51OHqmzDOvb/McoRShX5yRk\nTBOnbJtAyTmnzAXrb7PtIBKhepFtt+gq3XLFODZ1M15rTqhEQnJ90MpCbetS\nst73CQq3HRQq58DIpnK1ZRKY5vRac0HYfcyvwpq+Ak5vK/XTSvlLVicq0mou\n9d2CSPxYkg8wEj0DHASoAJGmu7xcXAX/P4VVvKWqCY4xsGqP4s/HPjCcbfwr\nu2TzSFmEbFfp8d0dZST4uypsQg54qg+bhVN2gOEzxfHusrtUA4EVCX6Ob8V5\nNpqLfp/iyj/1L05zi32vwJY6ItEqD5EuR0YYvvAupi1gLUgpKFUhneA4OUgk\nfqi5\r\n=wC0o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7458ca9f14be94c1a279bd594f262289d278bd39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.06dead2d6.0","@material/base":"11.0.0-canary.06dead2d6.0","@material/theme":"11.0.0-canary.06dead2d6.0","@material/ripple":"11.0.0-canary.06dead2d6.0","@material/typography":"11.0.0-canary.06dead2d6.0","@material/feature-targeting":"11.0.0-canary.06dead2d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.06dead2d6.0_1613695030785_0.7408899924977117","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/form-field","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.cddb03553.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d891ed7c571d7d2f9d32b683ce667dfb4fcfd76a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.cddb03553.0.tgz","fileCount":34,"integrity":"sha512-YTTVjsecuoizf9a2oxScOLOD4/Rp+wJ5ECn97rHq1rBAN1zErGya9E4L5e31biV88sM0Ela4Sv3El+TInkUBgA==","signatures":[{"sig":"MEYCIQDBqsICo5KZcZE2LAdsBMceCkolefLI7KgrXID6nGzmrAIhAJrOw18H3lEd+Cqxg/ISGMKo54cP61Ldo8XLoDEA+ydS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLyzTCRA9TVsSAnZWagAAEp8P/j344ysx0qTPQ+14IwXL\nvd2ok9l2S93W1G3OAc2OPCUFi2w5zpql66dxY4c9J65cVd/S7u+R/rbbXiee\nQXyVgEiCBtghbtefzoFoUAdLzu49E50Jxi2SkMSS2xTm3LjOcrspVDuu11Fj\nWvlBMbSVHSQBLL3TETw7Q02kqEN0ZBy4qqFDifkOGTPgaI++ih0p7C+lES3N\nu2NZfrFAx0ktIyjk2Rgo60oIHXY6LP+bgJ/pZOrkK+yPDfbXyJI4QTtns07j\nXl8slvr7eOrvU5LIS5FAimLdcWrZyiv+/gVJwpRjGktb5J9supXvdlxZKS3U\n/8B0nlMiAxD0Rjx1JwvFpSPCf9CDX0hPvm3RVRHVGulWeXWA2bVPTay95Jor\njvgCNJdr+/mxmKJ1H8pT/UzZU9Nj+8W3+GXgu7fcGwT/6JFr+BBoR0ZDkvQt\nKVpZDc3gw2lfix07NhG+eoixa7aBa+I5V4+KvhsM/U/5TYNmqDZqBo6hFHU8\n0daHyF0bfseQSFsotWVOkFe5ng0T4Ke+wtYCM+CPysBp63xEynqFkRNDUOn8\nKUYY7/QkUarsrXXxNBfGHZIJBK/jKNozMzlrUFF+znPnPDwcq7nDT9eIUM/j\nakLJ/y9HREQyrkU3A1mrEffHQK+ikO2etuLuEBwhX98lTRJlhs5lWgNBB5rr\nSqXa\r\n=bJfs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a8deff13e5978e42ae51f60c844f7ca0abf64b45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.cddb03553.0","@material/base":"11.0.0-canary.cddb03553.0","@material/theme":"11.0.0-canary.cddb03553.0","@material/ripple":"11.0.0-canary.cddb03553.0","@material/typography":"11.0.0-canary.cddb03553.0","@material/feature-targeting":"11.0.0-canary.cddb03553.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.cddb03553.0_1613704402868_0.7113350183599323","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/form-field","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a691ce2b193ddc219d1035e202767721f502807","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.d6d8d0476.0.tgz","fileCount":34,"integrity":"sha512-ahZRKc71GU/2ex6f8GBMUeeanB3W3dm4p2YHDTGffbkW+xEifj2Ff1kLn5u8dqoigS3sZ8lyScUr48pvKsH5WQ==","signatures":[{"sig":"MEUCIQDtMvepN6P1/1UoOTFwVu2J7F6yWoD6AhFhC0Unb/Rv+AIgc1otihFvLQtrIMXJNwFus7xFpXZ2ie6XlN4VS78Pr58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL05vCRA9TVsSAnZWagAAf7sQAKFXRDO/6MC4Lszf45VX\nIqk6FDUgaonkIby7uF7uZvmu8F3Zu+PB4c9rDzJ4zysma5mKjEyjQhkfNRhV\nUmC5+Tp9W/Wnmk9cQgNSVkck108UnuRJ6oSiasEZJ127f4JOYvm/jcmq2cVe\nBccNs9daoAdSo3FqtZx01osTVySBneAqCK50sMMlBu38ve9QcVszyC1D2v4x\nu5GQojTcjAHiIfXvTYz7Q+sOoMfcdF5ZRg+MCaLkw3FgwXxQ2AsWZZ6IHDyZ\nfSvgKvZUc2YSo/Xgnh01JGzbGWkesMiCzR2WFrU+Pil3K9rR8IjEOwikNVM+\nyuiXBwsEdIpNK0PvUxMA0RRvYIAUMzMTBedMSIO1tJK8rH9rC00EDBadhyJa\nOeN8jf3lVkFpF6N7uVf+VWi+7HvR4/sxn8gBc4y3tCX//LAnRywNs3hz9HZX\nOvlQq8WQUODxpoNex0vY3khSfaWB3HGa1AYg8rzHY3oI+MNmirCzXl8hA/fa\nN9ZC6p2KLJta5LoQdB5h11VH82wCSxsnm6F6DD0A4yQt7PRyl16grVsmKBVs\nz1+pc4lLTR5+dFgvhd4F29yWICykWt2x29f42E9IlfQTBdfEpZA5rQUZllOs\nggNDdPj80J8Qd8Bvds+8bzCYIUX4SSQ3EsMSa2U4Tay2+OAQh+d++FalF+x/\nSyWr\r\n=FnS9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"17aa6317e2c1a8109a8bae34e962d438f170f811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.d6d8d0476.0","@material/base":"11.0.0-canary.d6d8d0476.0","@material/theme":"11.0.0-canary.d6d8d0476.0","@material/ripple":"11.0.0-canary.d6d8d0476.0","@material/typography":"11.0.0-canary.d6d8d0476.0","@material/feature-targeting":"11.0.0-canary.d6d8d0476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.d6d8d0476.0_1613713006514_0.33359175245427086","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/form-field","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f268d7cc515034864b167cd81e9fa56ecbcd906b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":34,"integrity":"sha512-RVkPtltka4oiaEGUwKXRBoKdAm3nX6E6Hc8vP5CKq5lCE3ZdOEN88sKHMBK2+kTabC/6Mcu26oGcLZkhITGLlQ==","signatures":[{"sig":"MEUCIQCTSyiB+3dEX8BKkkI5lV7zG9Gus1Bu55uFVd9EM1K61QIgAbfCKnCrBHu7qrgaV/2ipHA8flc0wwOAKwn32kGLn5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL90wCRA9TVsSAnZWagAA6HMQAI4YFp8FE94ELoDmLpcL\n9faNw7Hkzvl1H3BA8LZHWYDYI44Ruu7g8N0r4wyH3q+M5nfb0ECbUatniReM\nFPb9NrOJ+bDDjcnUUIqYnKMNMzHVYa4zzZ9lCZoKANBSwQL6p3so02G+l/kv\nj9Tn9bLojh1uciCU9nPNzmFB3AhplL9kBi1Jut5wRut+t6ohynGO0Fx/LDYb\nz6SCtvlSV3nZWVRvV9bXEpxQ1ORu1OcfSXfq2WW1vQHdaTPrmqWSRBX17mlE\neQHyV8BVG1Hx831yRLOvB382epTzthAc8DU6j9FExQHXfR8XVtcnFHaujHDD\nlFM0uYSXvQejQlajo1KkI1zFNBeh4mXujKmNXq2Q4NVlNqLcAvga/o6xfaIi\ndcMBigYxBmX49oGMlc4uo0QZ0Lj1LwT8SMHswQfZ0rm5TL5BGVPaXMLsITA+\nT/DOX7JBhyVsmwoP3X8k2qd7DoaIqVudHkSvIMB0jeEWIoW6wobaP41J051d\nFPa0D75qj93vmbOaDYNZYop8EhhqpmM74l82PWDlZnv6yJraWByEkSBKY/J0\nUL+05W4awjOVQhemUrm+exq12uBukpMztBnVlqxzID2LM9ChapnL4p4R10AO\nl1UMOX4aB6X7VKuaVjoaDqIzYGnG/ddqXhcz2HLyeNklpCzW32/jR6Cobidz\nV3+C\r\n=mdVN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d96f438a60c2d44b9a3f9ec055d1dad78d316e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.0b4a4b2eb.0","@material/base":"11.0.0-canary.0b4a4b2eb.0","@material/theme":"11.0.0-canary.0b4a4b2eb.0","@material/ripple":"11.0.0-canary.0b4a4b2eb.0","@material/typography":"11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"11.0.0-canary.0b4a4b2eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.0b4a4b2eb.0_1613749552041_0.1499192473496831","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/form-field","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.3201cae47.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef52c6d2bf3565779ab2272296e5c0b3ca101ecb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.3201cae47.0.tgz","fileCount":34,"integrity":"sha512-+mja8HjOSUy8lHURUfsbPPEzbzFs4gUNi8Vmp5ct72hDvNgG3xjvflgCf1SG+U9r1zNNmorZJBw4cXDMKFj71w==","signatures":[{"sig":"MEUCIGshTBlM/wut0vyBn3cBD0A6OV1YhwcvnF3NsBZxaaPKAiEAqJl885rlv/yLpF5JmH9e0okBgivF1QtkovGwHz1ZbdA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMEMlCRA9TVsSAnZWagAA2F0P/1yHdfaj0e1h/9a2YcSZ\nowAglm/7ZmlMJsDjVGXTDTK/mlfAdKE7DrzYvT6HDtuMNAqfnC4mk8MM4idl\nOJT89Hb8pZBuMOrovrPx0uHW1IYgo27JDz8jYNp+oYLgelwxSwGRzUPM0fB7\n75t7b/tpbpfAqyefX7ntDv27+zpuSiEMEfgGpwUR5hwVzaEcQqA7TcJwACFG\n8V0nZ9g/x8xoFSmseES27RMI2vOf83R2udeHhoqUnCooVQaPSxAcQCUKJdKF\nZ68GEwI1hhtmBZ5MACWrDRs/jLKQXxej5CVEOrCJ+JTbV6VquH75koA4lDjZ\nxBGCG9ZqtkeBOOYRCaKumQlfaFSu5lq8mP/KqM4IukitfIyYsxX0w3oO5j/F\nghqqCs9UzbSG/zMe+11eq+QU3q3jEkTjsGPJpBptbIdk/mcdrciaDlSvD6vZ\nMCl6GHGI+XPXucbZCE0UVp7x2pXgwyL39yrSBVoLDP7uuYiJmii7lovb3ccR\n2zCQd/ch9JYP+/OUTX99BxEX1+9PvUwoqdlkfzc7xr/P1Qoh57FVpS13IRMF\n9Fz97+BZuRfXD1NUpb+0Q9kNMDPqTsNPUyYZSL2i0F8PlZjYjax8j8C1tCm1\nvxvGbzSXY20/xSNxjrrlr9U7ZEKwnk8hLLCR/qsnAzNMYvXicN+i6rPUgK7f\n9SeF\r\n=gdGD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"274d3ca7227bee74ffff3d46ddf3ae266226bca7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.3201cae47.0","@material/base":"11.0.0-canary.3201cae47.0","@material/theme":"11.0.0-canary.3201cae47.0","@material/ripple":"11.0.0-canary.3201cae47.0","@material/typography":"11.0.0-canary.3201cae47.0","@material/feature-targeting":"11.0.0-canary.3201cae47.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.3201cae47.0_1613775653003_0.0032338734202963515","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/form-field","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"310aa52aeb9d602e3ce0f2d62a7a5b9507ed5b2d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":34,"integrity":"sha512-zWiNNIawQ4Qv6QjTF4YJHlyxlos6OTe5Ff1ogauA/ckyjVIUPdteX0Dq2Gtv4h+o1ABoQ4BE4KmNtqtuFcrhXg==","signatures":[{"sig":"MEUCIHXhTKJITEVa+X8jhzZncg5SWGnnnDZP2b5I4C+ALS2rAiEA0BMa8CvY4iAksShAE1HNb1e+cJW/aziRiBJr9zuU29s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNArSCRA9TVsSAnZWagAAJEsQAI+syDlJuovZ2kiPmWIt\n9oZLu49ev94/85+rewm2crv3R8qle33gxW+wj+qS+dgI81GKFYfZXNGNv2OR\nyK8ELbj/9apaVZrL7Rad8bXAnwOiNp90Ly/JcnfeL28MFrwcPigSQ7d+k/nx\nUmCLga0Cgpq1RHXtPsuGgO40QMh57cExKtYdbfBdX4ggbZC4CbFNwLaIRnpV\nXWqcv8/5Ae7THz3ThxEGAWpyltvrzN8/C9fp+TjB8QxR3MYFbe2RLNntOojs\nDbFXYc5wsme4S3yONZERNE4eeF/6rrvYuDuIErjPCrv/5utuzddty6uYraRd\nxdaMY+aHK0oK9sxC6xbFm81m1crHhnzyhkp5vgJc5zjGcdYUO7wdYWEsLdP2\nELaF+RI2lLui+rxuOlhD5n4tVIH125yAoqoW4CwVWX6PNPkqruOPH1UP9sss\nVD/VIOljQMEdheCIYNY3aJNt22JafQD3uyNdz1923OJf9K5uHZc0c+itSYYa\n5C2REWlBAnII7VP8Ic9IFlBqfhrMortUSHtMRt9quzAs3Y9T3meRvdTt5FSi\nKqghyy0Uo/RxA9M52TntDq1p/ELVrmWq9rzJkR2bQmf63As53VADfwJf2lAJ\nPwGh69lFfTUuwiTX90SbFWa/TuQDBhtErpA8Id7F3OgRKv7H3eQDQf+3L8zu\nJU7h\r\n=S5vT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b73a5cc3b15b450664de92ee70312cc1e8b17304","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f1b1fd5d3.0","@material/base":"11.0.0-canary.f1b1fd5d3.0","@material/theme":"11.0.0-canary.f1b1fd5d3.0","@material/ripple":"11.0.0-canary.f1b1fd5d3.0","@material/typography":"11.0.0-canary.f1b1fd5d3.0","@material/feature-targeting":"11.0.0-canary.f1b1fd5d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.f1b1fd5d3.0_1614023378330_0.4001032909041373","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/form-field","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f26606716a045226180cc1e90e1eb08f9435e95","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.7899e0fe0.0.tgz","fileCount":34,"integrity":"sha512-J0GceDtquorRoXq0HxocB25VAPbw7+PAVA/zEtpLCGkCvGVKqzO4KVEfbEzQ10NdN7U9HI27lz7r9IM/bMzJpw==","signatures":[{"sig":"MEUCIQDYgQD/UFhqX/PhamchIVfS7NwuGRImTqqyIaqXS0PTvAIgMfKMVwu4AvGsDTtplHqPh0tQ4BxZDQwmvBqKkdbgfcw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":182707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDQuCRA9TVsSAnZWagAApFQP/2kctMM+e1yDHaa9p4tl\npKxNhOmTffoIqJzrEbIY/cTVfcK/Va4QcKg6P2jOr2WOWZ0q5py/bk8QEgR2\nBks9CHE5CA3AONLCWeAF7a0NyIl7azFSTizUTKITNAX7vfOD8f4jHVQ27/5T\nYUBzC149y/GKGi2fuiYvbO9Cha6GzCCIkKBBJqunuG+fEB4IfIrggUMtwz0R\nr7sOzO1BCfZSDWXyjorqOIIk9GebxMfKvy30Xe+RRH56Sd3dsruNozrHW6dC\nVDHYd2P9/78kOJZ41+HvgiBYL8WWiMbQdh0RJnUtXDbkiOQz1RfhCIxoRI/r\nCWUijiDJK3DpPNSkKhnyzdG7bH8aPp2GWbVeVYeSgYbFvPpKTC1PsNKIHfb+\nLW26jxmY1GO+Cto2bMzWx1SdN0N7EqQbapZlAIy2h1sOfLIBstW/Nl/s3oDN\n8jHAF+lgPtSnRA+AzqrTglMl9YWUUQdY9jFIiKoNUM8ngDcWfLyW0nothu9d\nn66vj4OX9gv4cr0hdIh2pCnwvHOffzJb6x7ERPffyzkaq8IDv8hx4kURA9BX\nH3HimyspQpiG1fyoRdDY+oA3pXdvME0wo3bwySukqvz6IlIwFJIBePM1z1Tf\ns123cjds4OEOAXDsbiZgVj2q5dLMjSvKvcZnX8Nh3NgkjqzZObgxY/+RwrLh\nUuul\r\n=Vo9z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"73b260d2233a31311cff76e4c10438913b91c2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.7899e0fe0.0","@material/base":"11.0.0-canary.7899e0fe0.0","@material/theme":"11.0.0-canary.7899e0fe0.0","@material/ripple":"11.0.0-canary.7899e0fe0.0","@material/typography":"11.0.0-canary.7899e0fe0.0","@material/feature-targeting":"11.0.0-canary.7899e0fe0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.7899e0fe0.0_1614033966526_0.9712506522671462","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/form-field","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a976c099b4b35ba54664a1d1e677a8346787a1bf","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.f19c86d13.0.tgz","fileCount":34,"integrity":"sha512-r21wKAPpvp3omweSQmYwVOLtvuCDwTRaGVswE3WKFVOhhEzvlMlkzXY0DRgJZVZkOLWrd3RT6XVtkbmcfy693g==","signatures":[{"sig":"MEYCIQCIwNaWDtmp5oIG3K6LtxFTH6AdDyQz2O50E3i3Ab5nawIhAPJwtPyURyBUauKHdzx4Cf2tSBbwOofJaE2QD3vpnLJl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND6qCRA9TVsSAnZWagAAftYP/RQdjWhkljNaANkXPeoz\n3GEIpAzQWN/IEMqPGsgm/AndDYZgwdRVjqH9CTHAikVgGzTc+iTUR59oV0UM\nR0msq2WRwtRt55iujuFtOMW24Q1Mn66lL9tYKpEIlIBdcU4CdQ/xza9ztlOy\nOQX+ZVB02cGBab1DJ+wkbgnY6wcVihUHYioTszTItncF5csP5/FCpwkZUCmC\nhjPUQIs/s07iv6jyyvRV3uDRqDardmJfBl+/gSU6hwBvnTp2hyYrHfVt1uTM\nYY7xXK713czY8Hja3UXO9ULnVNHuDJ8+XKzapmAQxs5V7Vtufkl9yQJDmpgK\nCTu4Eucpemop9au/og0cG3/sYWv1JxZI6Nw2/1OPy9AGox/eCbrm3fcVDTwz\nhigVk3VfPHdBtsAz1Fc2sAPftg4kxS1TXVttfdt8/h7yxmtZ8o6cO2uGFhGK\nKn0mIaOEe73uTDd95za4gT3DKFqJPto+/PzQ0dB5DD6Av4MTDUS05FFHwTlO\nw5r3e1RG2WCmSQI/nGI3PqTAe/uCJbfozPKQ9ec8UDoh9EVZNcfgnvXAXvfA\n+z+Ny5qAIJqexP6JuRhhe0ORw7m4cwS5EKYKfVKC0IlGTQkFX0CNWE1mgIM1\nUjMN+Ye409ctz+D7hfJ1RQ3Af9P5y4n9S1bBn9m3HWb8AKCzgdWihCnyx3jl\nlbJV\r\n=OpOl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a4b2b851fa6f3895a9e915d4bdc5b6b6715a4260","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f19c86d13.0","@material/base":"11.0.0-canary.f19c86d13.0","@material/theme":"11.0.0-canary.f19c86d13.0","@material/ripple":"11.0.0-canary.f19c86d13.0","@material/typography":"11.0.0-canary.f19c86d13.0","@material/feature-targeting":"11.0.0-canary.f19c86d13.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.f19c86d13.0_1614036649989_0.7850484008768464","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/form-field","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.60e892d79.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb23b33e454c4ce868063002a57cf3ecc617610d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.60e892d79.0.tgz","fileCount":34,"integrity":"sha512-wWx2VhqN7brzxOzkR7CBpr8ewVToEBGPQZAPLeDvmFbAWxMl91GP2oxAlnZcttfnSzVdKaKyqkV+o9M1jg+xZw==","signatures":[{"sig":"MEYCIQDW0ugb1KOxffhFrXaotIpaxlw59H09azGwj04vNfADDAIhAIK2gLvoeYW9m3h1TzQWwKEGo21V4zGdSKCkNU65FP7K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFbjCRA9TVsSAnZWagAAPcgP/ApDluf32NAGDEYAVtp0\nSXe0V09X/Byrz0d65GyUM6OXtLfjYHll2qXl5PvJ3AQJci5+Dv+hNaWy58mu\n0lqTjXT9nWYErzgGQsBQZxBZd6TVBFmGcZ4NWwT5uPb09F0lw5cqg4AWaZ8d\nPMoRO0gTOl90F38amDAEQU6u3KK9PGcFiWP5JgI+2um1+7IHSlrfEh80J/5z\nRm4l4i5KtW2aILylX6DWJB8RQdOIxfyylP2dZQ9ZD3LmPi/bDAO+Hli6JIk6\nwQP2Z75am8fwK/xo24uEZhR5fXBYHG2J5Zd4o7pYm2WQlXjez9IUE8fYiMiq\n9Jln/4cpHiNFecTj97AmkVBwtWJH544c5ZfYr7rtjSopOCyJCu3Y9aX/9/bX\nyFdiNR2aAdT7aNkvPSEKJNepKgoMk1m2BzoctkWsdnJD5Yi2CwK7ARPUAxuo\nSkOxWOAlUdVUh5D8COWVrXLlRABpqA2pX3x0Nd2YoYffvoQv1173ZeXFB7Kf\n3w6WuEVe6NsDR5cLJPiJIw1plFt6KAsS7u1ysFWKKOoUt3w7HHAsCgCu9RpN\nYk4HQfTilaj6pyaTJUQs+o/KuYCfsy47Q6Odo8YOOLc8gIFEyXy2a/Q2d/+w\nXeIVFmDpvTvBVKAlTSRiMk51I+7q8uh90SjQwciKxMECQKw74Y0l8xmh99vH\nBJhM\r\n=+oGf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c94f9f392484897a962a9b7101ddc6d70e5df67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.60e892d79.0","@material/base":"11.0.0-canary.60e892d79.0","@material/theme":"11.0.0-canary.60e892d79.0","@material/ripple":"11.0.0-canary.60e892d79.0","@material/typography":"11.0.0-canary.60e892d79.0","@material/feature-targeting":"11.0.0-canary.60e892d79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.60e892d79.0_1614042850936_0.15006820331849124","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/form-field","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1008a877e454cad97af9c517ab797934a601261e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.c96bfa495.0.tgz","fileCount":34,"integrity":"sha512-EQOAJw6s20BHkuPxcDssAGEYmdViAdAVz2GDIggL/CD9yONI3/tn/HC4SXYH62PI8Q8/EZDpQs386Ha/hdsn6Q==","signatures":[{"sig":"MEYCIQC3cpg2gvh9HL3uR2syU5FoYoSJAbgsiekhgbo8gQptFQIhAKaxQ72d/WAxsHrOtqFdMlZkU/y41fiIMCerfxLPnO4g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVhwCRA9TVsSAnZWagAAFB4P/RI8JxxIkyP6YTTRodWR\noP++PBedUqYfi4LeYpGSgVpI8xyxy9jXzwLVk16EZFvBPCb7/AH8IeH7sJ0Q\nUXwF5rd4Qr0jN6W2y39w06FDa+1UzIkx2tsaGc2dxEHOuVowwfNKVkBzom5a\nVzvLH3Q3Vp6swXDaMrewQ5bnhz6ZYp80fCQDzjKi7nIgAiKFEjXfcK6kmZsT\nWrW79iOr7LQc1xZZQSDTelA1xnnpDC8dr9fGNHMCdXLvLLtv4iaFKXvnlf4F\nTuuUsQfo3YaZgvPw6V6MNVAiIkAWjGiFcXYYrHe+AYAoawQrSID4hnG9Fa9V\nDdnGwp58SFRkbT049rpxky0xn1PPWUZNx+ywpmBAcWQ6kOLqjupBMlGBPTAj\nQjTbOzSHg+ITSpavDj0x1vSSm/P3++CVe4JSf4RNjpwdRKm9ACAjWqzokWwC\nDHk0SuKlDp2bbxHLpgX/jnGqYYaBGAmm0v/Qu53Q5LO4LgyXhgZ/S+xXsYOa\nNC9so6RnAY/HifMKjPyHoJnteAnFUtfBWut/swyzrAoClp+yCfmufIIXuTrQ\ntiUFamvHZEskFMa0u4s5v20RTGQvZ3GebiPUZIDNfGZK9P4OnrvnrkMMWDfj\n5ieeSC+RdyiUEf4t8cBDS1ize2rDgeUTl7nJkvKsILpJxlSlJwMmtr74CJSF\nBY3C\r\n=L5iM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1fd35f98370bc606c6677b7045a8acf16c0ea7a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.c96bfa495.0","@material/base":"11.0.0-canary.c96bfa495.0","@material/theme":"11.0.0-canary.c96bfa495.0","@material/ripple":"11.0.0-canary.c96bfa495.0","@material/typography":"11.0.0-canary.c96bfa495.0","@material/feature-targeting":"11.0.0-canary.c96bfa495.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.c96bfa495.0_1614108784057_0.7424452541240856","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/form-field","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd5e3a3438ad45c69e9663526c43a9a60107c594","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.fa9b59f67.0.tgz","fileCount":34,"integrity":"sha512-zUz9Eot0iCwc9eZ5Nk+hmw85h8rBvDpq5OhWurUPsBec9Q89ORNbc3Q1xrBFDlzdhku9lozZPilVGVv0tifH8Q==","signatures":[{"sig":"MEUCIQDWrQlKRyGPvhQcYbue5WM5yYk70cpN7aLhsqa+zcrwJgIgEh9EGFub3nj67y98MCyO0RnjQfFa0/G2jvsneHS/RaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjFCRA9TVsSAnZWagAADTgP/0VrUvvTvC4GWWcObA2R\nO+rIbfubAHDaPOBO5pllRQpn/AwWNqRV+7TFpFUd9u1X+9wrgqaR77NTQGU3\nkmTtqBJhncfdfLydH4DekG81KtPSdgNeDGed5Kau9DEVn5bMZcd01o5Byf8G\nRfhW72s4VnOO1KbyvL1aV29hcW9AIgYiUniin0qYrr0Kq/JMrmZTa6wSdjeQ\nlLoh2dNR8gqQ+eu0wSffZJQzTurcaMrtfjtCkxzrjPe97ee4R+KSiXJRb93s\nIbuxEpxYfOeZWl60bOZo9eOvGtpUIMO6ArSLRcEWbslokntaRH68C6A/wrE6\nDxG6DuV1gmBj1nNTgX2ikv9RQZnj41HbT5iK65tl7l3ZHLrGm9FDlKXLEk8V\npRSQt4mzXoYERrCiod0l6Ge7Mo+2XVZ+pK5a5YpjcRyYkRzB4yklU9GUDEj2\nA48J519irx//iEweO5ymK2jRwCL3A2chkBhm3iCazO2GmLGGIX9yG3cPrBuC\n7Ewvr+a7/ZcjDlhrech1m23hXx+ViDeAJCFs8xJfmUXdV7Bs8Mhqb4nzO9GL\nI78L8JdniWt5JDgQ4/LzPSe3wv6JW5ppWlbNt3zdFpkPHjl9UjNOLgzPaQBZ\n6nobAVt6qJH3t7+ymVVH/XmFS68dIgeCXe0Ix1C/pAocZKZCGLnpNFy0IrqG\n9CQg\r\n=6ge1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5fd97ca8b5906f3b3097bd333237976e3e93d192","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.fa9b59f67.0","@material/base":"11.0.0-canary.fa9b59f67.0","@material/theme":"11.0.0-canary.fa9b59f67.0","@material/ripple":"11.0.0-canary.fa9b59f67.0","@material/typography":"11.0.0-canary.fa9b59f67.0","@material/feature-targeting":"11.0.0-canary.fa9b59f67.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.fa9b59f67.0_1614108868944_0.6440339873459706","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/form-field","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.869e3497c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb2478dca756539e55e40980ea00bbdda1879e7f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.869e3497c.0.tgz","fileCount":34,"integrity":"sha512-oBUcuezvsPFucDGH14yDfgBprLnukiUVHD7bcb/6EX50hb2smikmRf5aav70bPX9Ewblu6hzAUu5yc0rcWU6Mg==","signatures":[{"sig":"MEYCIQCzSa1OeMN0pyeUMMVgiIIuaG14PB1sSKK5bMXQp1dKxQIhAIbHvEAYvVafwDC+LQjxbHllhBHy1npjDDMYOHDbWt5w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjaCRA9TVsSAnZWagAA8IsP/j1WOEUcgbEfrTgz4xse\nky1m1K+T74JQlseDu4R13o+IEHWnwqWXR8vOXDQQAJvUNxAiOeqEp3SsscoR\ne2nAG1p2Tas988+rkRwoVwJIP2WQpBUhGCrSssXgJhF6IZ0kKZ536Qy1Clmf\n6EQV2kUphK9bgpdkSqWsg4PvRPJJFxLt4ZNGkqn/hrqvDZX/DFHJodB4CC+6\n91NcHprrXsqzYCP1WIB3UaGaY3OxWXJN5nK6Fy7h18I5HKDmn5hn2Bbm3vuy\nm49LynomUqN4m0shfLLXxGaLyT5n2gj1QC4jCy4HrW2EQJzpFfHZl0O8uYkP\nYG61JLS+qxb3opBvGddodpMNAmHPXEGb0GmGDzCzAoSad7SxNK5mCyuLxZCV\n3pabRSDmh0cnRMFS3piRRzuy07Au0ZFe6+kja6O8BiXLF4iwFAVADs57lQw+\nHXlTQs5+PIYhKj7VkEoSeB/qjy5n1A60Xs0L9RyBLtqRLpJIxmtdfxi989I0\n1tEhRmkwBgJla9Ak/rUNM1uknEaPCuXIr8GNzo2AB8j3G81yIre0S0qJn5xq\nutBF8LyhVY1foyxi0rn6Htzayw3zbzgb4wAjR6KTMYioZhzYDXD+WgZxNSry\n+nJEO/EB/3Lzf83oltszL/1V9ZrnPccMR8G7GAeoHFRi0gRplUcKL9czaJ/c\nz0Rn\r\n=jyk0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2e1e116734dbd0e962ee4e11a9952ba9ee6684da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.869e3497c.0","@material/base":"11.0.0-canary.869e3497c.0","@material/theme":"11.0.0-canary.869e3497c.0","@material/ripple":"11.0.0-canary.869e3497c.0","@material/typography":"11.0.0-canary.869e3497c.0","@material/feature-targeting":"11.0.0-canary.869e3497c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.869e3497c.0_1614108889624_0.8098999907397042","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/form-field","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce3c24c092c45ad71ef0979fc0f07e22f3dae40b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":34,"integrity":"sha512-mVa+JqqMSyKIImqPz5CAxfePaX/OrRBs/JvJ+DH5MO2MWMFSOBwl8Rlrahw2Y+/gifauSL4QVsXwA2fkddupMg==","signatures":[{"sig":"MEYCIQCilHA1O0WSzECaz88p0nC/3v6MBnZxkGU/w25aO13COAIhALxQfKBedAcQFmcP7IKMQ4H4k9VxlILHx7+bKgIjXi2U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVyaCRA9TVsSAnZWagAAwawQAKAEmZbGo+ZDTwCEWe9c\nDmyMdDGDDpwNHW3Bh2UnkujRSd57v+qHad5TClAVuyQyE29gnWG6xRrriEdV\n7zPCayDGlUQm9pOvJYeGMGOKIPNn19CevymwtbU8e1JSem7l2bLjpSYeNOCc\nqcKtk8ATPSbiMfzv2fH/dzQhmSY/c3UxrJVQQMLqPaWa/2RU6FE8ftN00G1f\nGjWAXRXFmqii3i3HZcmC5zYEl0DWjMFkeY5QlrnhW3SQrfpR7NYuprq50xL5\nzCIFtuPx4CYE0i7VJohZJR0254fyLWvy/bLwMJ8Y5YvJmJjq2Tb4TPGp/BXM\nZpUvlm+IRxPdSFH7He7v5SPaRtaQ1xkDrF+qfqST4Z1cIafXYsER2jhoYIIQ\nNHb8KaMjhU7F3evOT3nT2ZJN5yanUsoAmqOQ2hwEStq/UI8d4PXn3YzjtYID\nkKh1aZKLGry8bVNCZvaMNO7lmEGV0brsOrEzweJP6j/C8ajzkw3EWPI2z5E5\nAlJcvk26DvvzUHDD57QtPfHsRYWpdJxyQkx1XvQArj9kXYi3Pe3YAMv+NId1\nYr4eLtS/s8n0NT3PjfyYDa/e6oKW01o252uBjSFsdIvzSU+7NY7D9vqXvYvH\nARAxFRFz+k67qn+2LBU4OT5ewi10N2KZbGpAeuy87SOpqjq32Akdjn5jYCFV\nikJW\r\n=Dzo7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ec70d22f543f79f769bc5b509c9dc06cb8114af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.8ecd7c9a9.0","@material/base":"11.0.0-canary.8ecd7c9a9.0","@material/theme":"11.0.0-canary.8ecd7c9a9.0","@material/ripple":"11.0.0-canary.8ecd7c9a9.0","@material/typography":"11.0.0-canary.8ecd7c9a9.0","@material/feature-targeting":"11.0.0-canary.8ecd7c9a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.8ecd7c9a9.0_1614109849892_0.6793900452628208","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/form-field","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e122d52f91aead2664ee347ab78201cca0add05","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.9c85d505b.0.tgz","fileCount":34,"integrity":"sha512-gr4kl4s/Cy8XxtW1XeShe6PkD25lIVWSbjHA60S9SuJepEjFxPMtjGq57hHk1hDLQmnQBjyBHDuEhYy83RW/fA==","signatures":[{"sig":"MEUCIE3ZBy4VV6VpnOuuU8+XksxAIM3hjyXRh3HcBs5UfnM5AiEA7J+xmxApctZbmi6WrZGA3GFO7mo6RUwBLlZz4bHlL8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX6UCRA9TVsSAnZWagAAiCcP+gOisB4eGJMR9X2wl7EA\ndluuOcH/Pw2pmUpnUKUEAsl4d6+kMIzCAz34p5TXuQUB56C+a8LlEWEa3g3H\neoY4UgUfGAbx8TxlsfrW8/rsNmoR8wXf26lJ9a3yyX8u+3Mab9r+I2NBO3qB\nyTWDkwsMvyEsxWL1JRO9l1/kt6x3smez7KONB8d1P5dQ+ZDkL78QWGhwC5Yb\n4MO3/V7dge/ijPWlq3AeksmSe1R0/c7mumYFiblcK2S3R+vOUqqb+DGnhF1L\nrP5c/RBmpPW3xXZ98W8BBhjRvNmpV5SAgqBuD2vqgGyUCqUljoL/GeCqkPMQ\ntARIBJNEKf72fBDro+S9Fyj+nKZ0n8z/FlQTM+gychQ9/+Um+jguZH0HkNDF\nR4G4Mfnrl2YIzpu+yovW/S88bHuUxvWLQM0LSTvB71sP65VZJ/Z93WDxmTw3\n3s/3x42BlaO3QhpF5Z63AaPqyxW02DMmbkG0yFo1Ak6leSxFfputKyjss+6u\nePXmKf9l9AoJBNCjRaursw1SM6Z4wWSLUhVl+lwuWQD+PuLwY0/yXJHC9L4m\nmCaw7BYs3MbZPaD6kKTXX2BscryMEgTYSNVanJ4HrQ1i9OQq1DZblsDuuAWo\nht+hAwJQ/w+2B9COnApF2qE0j5KvOmfykWZjr6QnLjMt0J5lQz75KsheH+mD\n68vx\r\n=jJq8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"374562c85250daef48b37a0e27a506a7e81c56d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.9c85d505b.0","@material/base":"11.0.0-canary.9c85d505b.0","@material/theme":"11.0.0-canary.9c85d505b.0","@material/ripple":"11.0.0-canary.9c85d505b.0","@material/typography":"11.0.0-canary.9c85d505b.0","@material/feature-targeting":"11.0.0-canary.9c85d505b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.9c85d505b.0_1614118547599_0.615230325733098","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/form-field","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9ef941fae64c810ab6f88f3e1e8d8694f64d984","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":34,"integrity":"sha512-36BK0cHBPzTsAXIt7g/zO1U24ElSnOywHUjU+IXRw8VBiveoNOgH/B9ijJggU2fXrFYN4A5SBNkHQy4+A8qFFw==","signatures":[{"sig":"MEUCIDbkJah1NUiM+4XZ7qSKZUMK0txbK4Ds/9+iAP6hyaFnAiEA9HwHfheazIIcymBYNijU6nxTtB3np1fNbJTjkbEpLBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbBXCRA9TVsSAnZWagAA3QsP/3XcFWEjjcGFyBQZgTAO\npavtEFlL85QN/vhQkBR/hc/ujcXe1+OR2vnalFDE1BW688tsF/GIWpDH+GTN\n5yy2ZVqCXQz4e1gTNUe5fSUufLDoOZHBJNp1XoYbrRMWOfSNE/DFaM8UYQdP\nJGp35HH5aK5cgw6ItcnjCPt+3QoqMPMKtVXqhSZB7YfFXbdeYeOGye82vBJk\nFJZZe06LvtLXKNNoo2qxYzGOsETAK8WY6UiQBDB3t4wefZbQUsZuWYoMBPU5\nvTZaYi5ZpFzgXAwdnM5Bg5CH4BPHUkvpaCIVNsqyX+Dh5QwdaLc6ILJNTZXm\nwMl9KweHFo+X0zQYUWu3aEfnEoXuwb/OS9zeRVIz9uO0sz7vPWRVK1beVCJm\nDxo4IwU2MTBTGrrhST5rKz9PRBTRWVZwGkIF1Ji55WyR9+jnzcdYROHMAaR4\nD+8By8Ga6b5s8C4JkSjoMpRSelxjw2/YDRdDFOSIOV2E1fut0suHN/unD/gB\n57xnWg6g3aiO8hx/X2ucopCnJbesugH8oPBzp3qIgaRErH1C0jopXGhV9DL9\nemthfF6Zk3RxudpsCPyZ4p+pPYK1I/3iHlYaTr1IGR8L1aqwLcW/LvDGPNmU\nvgrgQ8TLcTl4QY9IPObWPQq54cUnYqm06x6FvI0ZoAXL4ihnGTocXwk6Uj16\nvrQO\r\n=7YeD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4dfe4e49ca9339b2914b3dfd9e5c12642a0fd60e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.9f2e85fb8.0","@material/base":"11.0.0-canary.9f2e85fb8.0","@material/theme":"11.0.0-canary.9f2e85fb8.0","@material/ripple":"11.0.0-canary.9f2e85fb8.0","@material/typography":"11.0.0-canary.9f2e85fb8.0","@material/feature-targeting":"11.0.0-canary.9f2e85fb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.9f2e85fb8.0_1614131286614_0.294738322565931","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/form-field","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"225c0aa27aba0c9455a58674f9ecb45b03373635","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.19c4f29ef.0.tgz","fileCount":34,"integrity":"sha512-iU00mzMLlTaMgOwdGgB9P5cxaAfzAHr1G5gu3P2eg4irTZk14sqbxiHVvnw89zARLD7r9VpTOlmLys+q6zLRqQ==","signatures":[{"sig":"MEQCIFrSar70JbZe3lEpbkro+YN6EQNS1pkV3OW3t7tHEyqOAiA1S/iHizifpOutTPYqXTIlT0WNVjFlq/HaK553KWce+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/j4CRA9TVsSAnZWagAA31AP/Rale36zd3TQADKYq0pM\n7NnU6Ypoujsl0S3VKgHa5pr9y+lXib3Lc05ujHcalQSK7okF1SYHeH2t7220\nWVSfPquZFn7pAELOMlFf15q98WWKS9RmUIfNeJw6svi7T9LrDHyxHYhbPfxW\n9hkigNg4yLNk3xntA+ApJvtwwj4b1uhN7Ty4T9blh9ARWPMJiJ81BUmPJ2pF\nBb13SvqI88BJDHNP21XHm4nnvQ5dC0HhAucRMfRS0bL9U+5Y4in5XlNl5bou\n0Zzh7rvf9ZQns5sFS1oAMXl2Xlo0WZ03TgUmlwEw3OC+CBtUUMucPZEKrIqI\nDH6QpvjZ0rvyAS9uaihPRzXDFb5xsTwE+ddRoRRM8z2ieXACt31n5cifuuY2\nFdAjNbXiB72bFVhHUmG7JZXaL+ddSSHniF3qVbhtoMfTTInrMoqBtzZCIPDh\nojEXjgkjzUZ3hZTgvOqVtUDpCyv1liDzBPnX4JqQyVOonzcs0gLsCqHH/AIg\nBMvtUWv4srVKCm28yMFCjnEMDCU8wqgpja9DHVug+9iwhrbW51Obri8yAxp1\njeawMDjRb+KF9od7KRWdQia7rBCqR/KQVtP7oPknduOZYPdeYC1XENqmzDVl\nveNK3jjmV2fHdGUQaucYXJUGHQfitVj5sfVQyAX/1Y89V88fxzVkKw9/vBIq\nDiy7\r\n=u52Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cf61b54810b37e81ab57d447f7d050104a2f6f46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.19c4f29ef.0","@material/base":"11.0.0-canary.19c4f29ef.0","@material/theme":"11.0.0-canary.19c4f29ef.0","@material/ripple":"11.0.0-canary.19c4f29ef.0","@material/typography":"11.0.0-canary.19c4f29ef.0","@material/feature-targeting":"11.0.0-canary.19c4f29ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.19c4f29ef.0_1614280951438_0.36123053332672206","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/form-field","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66eac9ee5c990d90b97e3b5953fb06fbbe0565ca","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.63df6e9bf.0.tgz","fileCount":34,"integrity":"sha512-jlzq51anTFjpnyN0cqrl7j4jh5taOuSP8T/PnQcLT9Fw2K+/ib8fGWGlqs/MGxSyaVEQCZQ415ZFJ5QrYQvgqw==","signatures":[{"sig":"MEUCIF0B52Qr2aGYk5FK4xS+TllVt8/dBU6urSbQLQFcm7FtAiEAscpc5rYgmiowoj5ldnKchcU6AtqMY/rZJOINeCtitSk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/xxCRA9TVsSAnZWagAAYAQP/RpBLmIpNDs6jG26+j0J\nYjpFpkpEZWxYl0NYV514bYtTfviXLeMl6nfFIFM1DFBI+8sgqDjURjPLe0fu\nahsw1Q2Faqm1R3aETKuaYj22mX/OACZZxSOPMpisIvFMk/++9ZRiwESEDffx\n3VVNOFMJM/AeXzgisQFNXrdE3zpnI2EiAf9HNLzqJGIKxFPy/dLwdyVhJkD0\nUQc76bBwLqFLcp1YWr74NL1WMoLll9UbKVXCzOB4JGQ6ztod3XGeIiqM8Kgm\ncEFf8NnHsjL+WlS1jdrOG6PvpYhsGKFcSnww4f8FHAWCYIYmV3vOxB8soRBD\nDc/QRwcdtDHXvDk5gZxe+KhzWZ801oZjFH41eIyLDHSFxp4FwPbofOrqtFyU\nZTOYSX1eWl3yh8gR/IqgyDsE3NwG+wTuRbQHZYHgQm7bGWx4drsSVRtm2syR\nEFY4jcZ6B7rEbrfosNE2oNzC3QDtvAXoCapvk+0cyIrnNkKK90c5e4SOMuca\nkhkh6OUCQ0VXsGOdO8k8Zm0LYBzPCywvGLGHTkjWtcjiwKpw5QRC71deBVMN\nsA4cWP2cRkJBjM0T4UiJnKFZT2RFucP0+R6fm7YMMcKvmujR8iODFYHv/mQm\nkvSgjNhOeVu2Lo7eBRedvJ55g/3ofAdVSXONc6k8uJxI0LMPjOE38f8iZ7ea\nxavR\r\n=lEtD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6d11b414d4ea43b5c780988e2437ee30c9f1c0b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.63df6e9bf.0","@material/base":"11.0.0-canary.63df6e9bf.0","@material/theme":"11.0.0-canary.63df6e9bf.0","@material/ripple":"11.0.0-canary.63df6e9bf.0","@material/typography":"11.0.0-canary.63df6e9bf.0","@material/feature-targeting":"11.0.0-canary.63df6e9bf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.63df6e9bf.0_1614281840614_0.12763093315646024","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/form-field","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.981ad970a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"540ef55e3291d452eb529e2430a317b63b75977c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.981ad970a.0.tgz","fileCount":34,"integrity":"sha512-t9UUWXb8dYzVknYM2zayxJipDnliBNHuQdnIh2DJ/d6QOwtPsMgyBClRpkWcEIznfn3hf15MPTrPHiS2qAFg5A==","signatures":[{"sig":"MEUCIQDHku+r2hgym6D1zlpaLG8oOazzDsK4xe82W8YKaYGjTgIgCHYBqXT9I0u0K3nULlYY0TldG56ytVmAuXVTEs8iRqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODvGCRA9TVsSAnZWagAA+6MP/jVoVdobZesiHxdOd4gs\nN/Ua2axft56AM4bFeCBqjAHE5n8rh/A9tTxXZJNyv1PZE5RhbhmffHbd6uFd\nMRY29QYtMjc/uxl1dhKsHCvwKxjXqpYne7DCldGojlJjCzQRByIfDxzs3eib\n9VqgTKwqKUey4RfWFDhkfY2elTbRcLiBB89Q2j7y/5h5KNwmhmcvRgiqn8wu\nIjjgesQEH19HRPGf/+YXGUnXxreibdactVBJO3SIrr461LyHAKM0efCLNfDn\nU2AOgzkdLE3XMqoFgUPIaWLhx1VBsM0+m3QmfgcEU9Y/oW7n67oP/2AfnNRB\noqgNZ7ZS7APr51mHPfwlNOInoijz1pR2pnFd46BgJGnYJd8BiJDuqvaEtE9H\nqOmV3F7stdQES+NV3IaWI5ibQt6S8HGIK8zjBiQLO4pzoE7xN1gAq0rc1gi/\nkyZoaUBZxhuN0bSKtoPR0sAfTSwQn2nKez+fMqmcDJ1OZgd9jp0pBABOZnCB\nGcYVRtL9H16P5CVHVdaCS8l/4B5m6r+p9Vqp9gDrB18A46v0ab3hdpNQKjKO\nuBxWCtg5FUBOVZLUYhw1liA3yOXPsVwOD0hSu2A6fq5gRpXVXKZInMV4JgQg\nVgWko2rZlNP1jlDGVw5c9RBUyRvU2NQaWmYYc6bc8umXlHXrp1sxhvmNzlsc\nEgy2\r\n=f6O6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0faf6e6b78f0c9b2c63f416ae85331d13aea198e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.981ad970a.0","@material/base":"11.0.0-canary.981ad970a.0","@material/theme":"11.0.0-canary.981ad970a.0","@material/ripple":"11.0.0-canary.981ad970a.0","@material/typography":"11.0.0-canary.981ad970a.0","@material/feature-targeting":"11.0.0-canary.981ad970a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.981ad970a.0_1614298053908_0.8584598856514103","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/form-field","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a26c9bc5d551088ed2fbf0c72d56ee255e16236","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":34,"integrity":"sha512-VVu/lpuTo0v4EBGo7jzcJJ28SLR/GR2K8UQW9lIR8jBEPeQvyKESI2cA2ASV0C3/GkZDnipLhSIM3RobY62Fkg==","signatures":[{"sig":"MEUCIQCr6HTlneoQU8qs1bXWuiQ/nMzlKzdqpJLddhTk4GssoQIgDhnCPcj0/HdJAo320l+9M9XQlDR3bk41U3O33K6E4Y8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUBCCRA9TVsSAnZWagAAhnIP/jP63ANSFbbbWeD5/OFb\nUXPyygztAbAE5laqvJwMus84y+aoCrXePcqwch2xEkAUhtlyD8i3b1BVpPvU\nhcmnoRaDfxUD3RfilwgBq9feY2mIVd2AoFhc+TScq/FJR/WC0hiNWfsZNKSJ\n7j6R4N6+GUW4BOKRIlUciWqex7DJm79aGYm5WyqmBGg2O8lcuyk4l15EcU4Q\nJ3S1DLZShGgcxdBaFOfEo80wr8FNSxMJmVUSEwLMFHB9teGmzbDXw0h/L95x\nRR6JNxIUA2sXBx7zl1FqN7CddmgYwf1tCWo7Q8VQFu3QVS7HAjabVmnkJgk7\nE/bVI2OR3CrSPEyryfJ487skd0LApEjHckMdOUu1QAHpivAz61On7vG7xD9a\n5enEc4ouTnOf1Gy5ivfhSWAFsFRAMyv9cONS8NYcaKV08rfgd70SO2sX1Igm\n8Mps5vDaMJ0dXVMgqR+O3HE8WC6zmrRddisnDtpfpsLfst610JjkSz0Z0SVP\nY3salwL+S4xvcX97NyCLw8WaM8TeDeKsFfCe7AQmOD7XIR7wSzomkIUqQT8H\nCDLZJBDUgXzm6duxXh0z2axm4cv6QpDyh8/QN2ybxYVYqeDaowIFaMFzRtuW\nO78nLqt2kOpdFs5kMUft2TXiV3i2z8Qx2Xej7JXUljrITKbYADUCwuauZX6C\n+3CV\r\n=ydVV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"81d489ae3f1defd63ee64de05a2a330040ae6406","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.f9c9e39d6.0","@material/base":"11.0.0-canary.f9c9e39d6.0","@material/theme":"11.0.0-canary.f9c9e39d6.0","@material/ripple":"11.0.0-canary.f9c9e39d6.0","@material/typography":"11.0.0-canary.f9c9e39d6.0","@material/feature-targeting":"11.0.0-canary.f9c9e39d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.f9c9e39d6.0_1614364738464_0.6873904166033706","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/form-field","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3de1daa0263978a4e22c23258a2e5e99827e2c4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.c97d7d881.0.tgz","fileCount":34,"integrity":"sha512-CFDUg3Y+1OtTwYPoLHSStfbNq6uKYUFfuSNAxacOIojNmgevr5ymg5AbIGHxuYjpRSnfxle+ZSnu4Df4F0wczg==","signatures":[{"sig":"MEQCIFyjfdmfQXOMqRM7G+WEpQv3npF1SkqVdCZZ23aop+8LAiBNclLJV/ALkZ4OmsV9+UT56GVEFsah1h5dRR1yjq8y6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVQ/CRA9TVsSAnZWagAAMLUP/10E/FCdJfH+RLYNRUh/\nCZ5ZE51rXH1aa+WunYrcHpASWQ3yaclQ1XkSa5k8BEcNVTgwgkM7YgfViMTW\nK7HwWy99B+HqczwH1R+xAAGgRv9wC3tpWoNUmEbDFhijWWQa3/DZ7ajMtFDy\nuiiJ77FUFCEsMy7FiwUGmGDol8LOITgCKq8smAQip/ScfjPxYuu/rLVFyejd\nDC2Hlk99BB+IKhYYJ3kLVyZI8xdR84vTRSQE/wfUDCusjOB7DXzAlaSC2Ogp\nb/ZVLTz4TW6gor1qwVUzdaF+Xx1shZ+f7/mzUkZ9zuY1E9+hW+Flm60N1DPi\n0SbI+wmbuyZpRXk7RDqg1k+wT6i4CSNPDnKFuMVHikteFccPykPkVnbjGhe+\n8yvbOl6xPzXekmAKxtbGzFGHw7dV5fDruoVvsQhiZCvUhJTQMuYwRjju8+ou\nfDlcUrA3mTT6m3NXas7t8jAkzOYYitraOnct7FyjYZt9U+Ck91XizNYWbQZ+\nE5TuNxVt3rXCJNZkXjS2q+ts4/KZE/rgBexkwh2LqW11Ktd3+8UwUsspQrk8\nSJGr6ODEzn7nAvYyJkZ1VKoZ5k9KKWu5F5yi7774Nr0RhMwpOnosAocpa7Ki\nqoao9hA1gW1NBSducDJGFxfZeaXgWQDQ0voBvK4JXfVri35l0PPpe9NnnAuZ\nLt70\r\n=AAz5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"27a49055320511cea9f431f9c62d44a6490bb64a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.c97d7d881.0","@material/base":"11.0.0-canary.c97d7d881.0","@material/theme":"11.0.0-canary.c97d7d881.0","@material/ripple":"11.0.0-canary.c97d7d881.0","@material/typography":"11.0.0-canary.c97d7d881.0","@material/feature-targeting":"11.0.0-canary.c97d7d881.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.c97d7d881.0_1614631999278_0.790174180843606","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/form-field","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a94c44fd545fa1f6f0381f28a2bb94290e5a31df","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.bf670dad7.0.tgz","fileCount":34,"integrity":"sha512-loXYimMopweG4FcokD1hgpN8HKMMzTlrnUFZLHyahpplJJVtKgOjC7+FtpMhdJywwMyHdhT5Uc4v72JUZbWp8A==","signatures":[{"sig":"MEUCIHo9yeIOkoN6WI2yrny8nQr7QVzhor13+d6ljZaLXuw0AiEApmkSJtuEIDVu0fSqv2mg89xVmvoMzLw3qcvjOr7O3sA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtZ0CRA9TVsSAnZWagAAEIYP/2eNxpG7516Hz5IYCKrl\nHxDY6OnMV/JK71SLWBn8mpWi9va/O8Qt34QW4LN5Egqqa+qSS50rVhFwawwD\nRHrqICx7YW7kOEqj2w+wMJQCgYwWOMtzz+OVwTwhkxdRpu+uk3zZW08p514e\nFYNhis15OBLijTm7TSLzUNpGqL/XO4tBQqj6LSgozsMzlVMOBsZ4D+Wquy1E\nBdeJvbqi6SlWTEwnvtR7Jlu6uhmd3EcaDTrWTq+LuXNQJFzdB/H9jMaEogMr\nNJIjL1/imQQptRBAndCk8EyP6D7gKVIu4lYg9/En7kKIgLw/7hMJZoZm6zv8\ngC0lxiWymFEAnHizMJnk84jrfaus+8DL4G1nBliW/5lJba5i9KrQOXuFBw7C\nJdCu2wQZU+IVgqvu9QxCffjhLzbMdB9BRC+qHos2rs9eeVbkl6XOeJnPX/32\nNubub7AMLjknI2+fzrMk+iGgENW7t4OWWaQKE/886Of8BXMZU+3amPxheUcp\n1NOcN42Ac6HCDg0xkn10owThptk5+JI0EwVT91XtTkypnY8zyOYgsrFjT2gI\n/3fxIUr+BkoCxzNUzowWFOW5bnW50MQBv+R6EHH8tFFWbi2RfYC1XAzDLj4u\nMIoOJ1p7LXjfqZqnF2AyRULVgZg70RE41OtTLIxG64SG6hh4pj4c42OmP1GD\nbEnQ\r\n=01iY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"61b03e5331bd5c886de5c4a57a4edc1b53878e47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.bf670dad7.0","@material/base":"11.0.0-canary.bf670dad7.0","@material/theme":"11.0.0-canary.bf670dad7.0","@material/ripple":"11.0.0-canary.bf670dad7.0","@material/typography":"11.0.0-canary.bf670dad7.0","@material/feature-targeting":"11.0.0-canary.bf670dad7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.bf670dad7.0_1614730867713_0.21924025387852697","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/form-field","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51ac2ed0f53b0bdd62f65e9014740684e1669d7b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.c7d98fcde.0.tgz","fileCount":34,"integrity":"sha512-RRtCnY5qzAPnsqxtW8Trx2JMip6Zxrfbp9Vc7YDkhuS9G+pEZNr26Kpe0zD0skPNWZdbyb/wqy2qn+PQisdrFA==","signatures":[{"sig":"MEYCIQCX/P1EG9vBzNVnH/FNCWDM6eoaJx91QJfgJXsZiq6vxQIhANoI4EJkgRHDnaHa8CeeqLKw4p3lmDRVbWqYj2sIeQmp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/I+CRA9TVsSAnZWagAAsjcP+QFl3UsWX3nsaDSa4oUu\nDvbRksr4nXCqvvLKsGdz4k/QvFiq7aC1EQ5IKfIBRByGRHR14bbq/hsN+h/K\ndUt3N6LMBXbA54kRUPryVTcQxrRHjtT3LUmJVB8h9R+JmkZgb3gvVpfJBzzE\nEKj/G0+I0T+LvAIOH44XGQt8rbUfToI+V3VcaraGcZhhCfV+V3DPp0Xu7olK\nNKIgiGl0jpd3LmTwm/A5hCsv7Ts1TVW2a3sdg9s+uoS1J0BC9y4UH8cq4q9z\n5fz4bgTB0/sM+V8DcGqWvgL7k/oljNpm2VANO+nBOdULEPL1O/fgIgyNvS3X\nR66oH/aTMlXMSH7+Y01V6o23ipJ0UnvTJ5sHRQj9DdKTF+fBmJfPF+KlT4jx\nalybhQOfhhKJZ9ehnCxwX7i8st+6qcYLTPWZ20L6hqcNZjos5LIx+Vnpny0N\naSbSoPQwW4X4dRFQH3Wnpo6QlehbYhq5llzW1SamU9ouM6vkCi0VjvSN03pE\ndPddbEPPEHY2V15giY2cHpOWiFcJQUO3Y072WM7un2/1jgiLVFAo8H9AEnCl\nED6C+GyWJyIuGAascb3AWpOOYAsR93Aamf1M2x+AHchWqQv3pnoDxlhzZLeq\nlE+x0EPPCPz63cF37Tnj9zg0JWBnKMawZqq0axscjuk0yI6t+C1Esb3AWo9K\n8wan\r\n=k+y4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c5c4c5b417df34d141edcb1fd743d83d7a2b49cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/rtl":"11.0.0-canary.c7d98fcde.0","@material/base":"11.0.0-canary.c7d98fcde.0","@material/theme":"11.0.0-canary.c7d98fcde.0","@material/ripple":"11.0.0-canary.c7d98fcde.0","@material/typography":"11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"11.0.0-canary.c7d98fcde.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.c7d98fcde.0_1614803518062_0.5397839584658639","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/form-field","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd96b34eace1f54dd80c4730948c8a5cb786f1d6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":34,"integrity":"sha512-NSj4PU3brLY69oelZyidVETPIu4xkKZXBEtTHrWyzfFVApLzWDarO45NeIKwewFcBLSs2lmmJphrSVdnk/gAxw==","signatures":[{"sig":"MEQCICQUTEIJxtnfpd0eojoX4ymjU+DjyGrfqoWQTxsEE1MQAiB4wSpo76YD+dr0Ue8CuIop/bCIJz3p2SGH4AkeTCVmEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":183685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBqoCRA9TVsSAnZWagAAcJgP/1set963Fi0JqT4is03b\nv1kekouIpT3HsKZNsPqUBwaTpyVrNbri/b2ZZkH71JEWgzFIkXizw9R8rNst\nK4r/6zxnm4+FD5xZhzrndvN7ImzxZVwKKvuMflq/nH/73ZxOMIPynHZV/hYz\n9S0YFaUERsqb/Oi47VOK3BOKsql3fh8whNZljUgMcG30h7PakjdXWXSRERwK\nhFiuoEmGiFkUHsk57V1EHzxlLY2Drb538LNX8f+R5FvyvfelxWrgAg17cREm\nTsRe1DQi6rO9VPQSteo+WROkTY01B2kzSNxdHOnZI5jyiIUfQbl+FXrJxKC9\nfrZOTMwTI29ubxwST7PsNVHmXlvz7ILEKuMnnOHAmq6oSDj7EYk46gdQvLhj\nw/RUZOZJ/dsnCyLpDq/+r1N/IVw+l7ar6s80IjMIlpVfCGCeJSV8uFmlyO+Y\nX6Kt9SANAaJE+aZB74Vu/YNC8d66DWTLKtz8YYJXSXGNjJhBuhgZKDS7U8o1\n2t9sjYJXd5C0D7/E+oEKhWfIufVVPPFn5uV9vfp7qDjL6Y9ATJ5qqwbJypkg\nze0kWYpYUoh9mcORawlGLuN9CvKyRYpPddeUTaolNK+yN27iQg/aoN2PN+29\nLvIy5tk1EwH1JxI1ESAS6KOuFqd4ZqwU6TV5VSxKoen1FeZNbIJFPNbzf7Rh\napvz\r\n=17Br\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"933905005f9c16276caed5327bc6ca581afabb6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.4fef8bc1e.0","@material/base":"11.0.0-canary.4fef8bc1e.0","@material/theme":"11.0.0-canary.4fef8bc1e.0","@material/ripple":"11.0.0-canary.4fef8bc1e.0","@material/typography":"11.0.0-canary.4fef8bc1e.0","@material/feature-targeting":"11.0.0-canary.4fef8bc1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.4fef8bc1e.0_1614813863952_0.07159835199820508","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/form-field","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba82dbc295e7d096204dac8f5b27626a9a3ae94a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.afae3a3ec.0.tgz","fileCount":34,"integrity":"sha512-DfJ+gDbRyl6DdWeNjYky7pAeEREfb/CUlfNzezpBjvfxA6j6bO+rzDLa2bDxx7G3r4nJYjUfvizdQ32yZxIfGg==","signatures":[{"sig":"MEUCIQC+kccFREkYlFyc4o2/xRdChUQhwPGncwej84d2GPnBUgIgKiSXj6IkJcA9mbFEHT7lhs2sEivE46T8QaQ9iayfDEE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB7fCRA9TVsSAnZWagAAm9sP/A0Vuyi2DUPuc3fU3Rk5\n+e1Mbjzo3EsZUfS3nQF9REZrTMx8VVxr4ZPnQKQywyi9I3qdOxczVMZ0Vk9t\n62aRSDpLs4MZUdh/hVeFQhcK7pYCVqkTPq6i+13uvtNfWI6D0osXZ/Xv8Ogh\nY0bp7km/KFgYMjFbfnk68YmQ4l5wGvS6eeeSCzj8a5oRxjKUSK4+NvuiFRFN\nMC/I+LmLUkTP8wmibe25N8A+i3ZLz4B7d9I6BFVof+/Hvw97d/afs/438LO7\nZp4CK6UzEv6l54zpdGst+dahZb5LARRZfMdwED3Z9Jw3RwEkUbchofIyOlFS\nXSlf8/gccqdaKP99WHxS2s7PyOthKZG1JHEoWYkSAJIt5EQ/sxPluwy/drv6\nM5zr4O4duW5ZZPIvtH/bggHYM5i5Y8LR8geWKQ9ogh8TwlemR0DERBDFYpgw\nSIfeKhzZ7gM7WbWEB4CptvWcEE6fs/e1q3uQA1l8ZnuMvkH3mLAN96tTx66p\nuCLyG7YkIf2Cu3TAru2qdYhWSIfddTDsgk9Hy8dBv4cX/eI2GEKRu5106teF\ntAKHktItqfT7U3ZuhAzKIBLLOvUsNHSujpA9w3mFa1UvjKbpx6eNewQ5huUA\nO2pOE8wicjIbmuNfDl4QIAlavVETEbl2VCwdZnBFxgYuO3wppsDKp2oA/9Xv\nnKA5\r\n=4Jpx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"054b07cc588568c82346f2cab8aa8948b77a80d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.afae3a3ec.0","@material/base":"11.0.0-canary.afae3a3ec.0","@material/theme":"11.0.0-canary.afae3a3ec.0","@material/ripple":"11.0.0-canary.afae3a3ec.0","@material/typography":"11.0.0-canary.afae3a3ec.0","@material/feature-targeting":"11.0.0-canary.afae3a3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.afae3a3ec.0_1614814943165_0.08098467328353731","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/form-field","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93813a05e104a57a3c39f974b77f5e4845f728b4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.0a0b10f22.0.tgz","fileCount":34,"integrity":"sha512-pbDyCP+BQpFggg6Nr7kskb6Z7InK+M4+GG+2oTPNRvtqejRgKccKfIAFwrfXRaVXGQyhEucANwXDbIpAUsJvSA==","signatures":[{"sig":"MEYCIQCYQpdqZ+16MbuTl9SirQz3XfHn5vNMGjFCCoDw5wKr+QIhANYUGt3EeNytzfoFSrPiYbcx162urtBNs5R+duzXWmVQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCNGCRA9TVsSAnZWagAAFwMP/iVUFad73CoBpBSHhWWX\nuZVR8QEEXwS1Xe9ONMZC0dZRQfZtVV03AB9Ax4Q+acxxy47F6URRbLnuPo63\nomBxsy7x0pgFidE0O6Ua1j/Eg4RNH9yDV7uWW/i4ymqBxMCk+1Q4vncssaof\nvjyY5ZMq2Kn4MxuOol5ECOoFlqfqNfdGLvzQG2SCHzkecud4fA/VcNC30+W4\nNgXByPJYvi0er7LB1dtmEiBNutL4k0XxqTfZGtvCt3BwAcAljcTVrtJasHCQ\n+gXq59Rk0if0bSsvDj3DHV20FuN3dSigxCKADK28n4bCX0WB+aaE3T+sLOV/\nWbUFJhlbpn9ARl8jMjcHQwP9vtaM4qC0Y1jA/ToQLfz0xa9oBzgvjIxSGHJe\nfo2xwXqAutNOaRCslGuVYdwy1Zb6gywBfykMuj3aXxLo8l9DXd/1SB94h7rK\nXRSpqcnaNV+bMhUKObi0jTGy3YrgRgVpXad6+fZbyR4wzqlJl0x4+tp3KEyy\niXQLb1q8SPv0CtQa3Wkeb+ePheJ6G8KQNIrVR3cc210AdSo6xTUaHT6xjimw\nXfrv7s3M6ueR4Ut0vm4nley1kBi5pbVHblzjl2Jddz++NpoLdbA9+8FG42DE\n38+96PIn2zcctiBR3xqMG3qSX3SAyJzSRmMYI0HZXO08n9gxTb4ThJAfS3Bi\nUT/C\r\n=KJNT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5b560f4bc4c4b50a124c9432e81b3287bd348abe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0a0b10f22.0","@material/base":"11.0.0-canary.0a0b10f22.0","@material/theme":"11.0.0-canary.0a0b10f22.0","@material/ripple":"11.0.0-canary.0a0b10f22.0","@material/typography":"11.0.0-canary.0a0b10f22.0","@material/feature-targeting":"11.0.0-canary.0a0b10f22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.0a0b10f22.0_1614816069603_0.8332443320316354","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/form-field","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c6960c8e81132f31c73cf0ee916a9958d8cee99","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.6f678a91a.0.tgz","fileCount":34,"integrity":"sha512-INm7XW6ytCRB7jIBldQtIXH8QAH91GxzUmXbHs0coT1o1aN80d/SsaRERSGCzPzkEfiYw+Ui67+dWzoaFzNR6Q==","signatures":[{"sig":"MEYCIQCGIJW+5VzBXNKfnOIjP2OF/TxCiPMVkp5kMBi2yJtmGAIhAOLPxHLp580ntvZ8DYlivuVGhZT/LtbCJQdF+U4/LF8Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSmJCRA9TVsSAnZWagAAdTQP/jbOFtq0P1CovNXBXOSR\nWr9e23sB4Qgy3ex1Fe2gsaS3VwQ1wBFU4zXYaV5MueFxBvdS4RneBn0g2z+D\nuD6V7U+153WSKWrUTmKb0+AHjaGPkvEdF16+fY792w51y5Kzps1v3umJU3wb\nln4G5FG4dfeKTWa6C0aW9lC7vbz5s4itZxU2jHTXMZpPhqI7vBySF4ZDGElQ\na7wE3hHg98rmiMVES+twt7I7uqXtwaHW14MVU+biYEi2RcxOeJPN5bi8cf4u\nlizXXSslnPE0ggzMLJ70NbIrtnEyYyVZVNOMAllkvZXhCY+HvfplL312Emzx\nldeKA1Mlr1TizvNVa92363yPUb2YFH7YMkpOFLD1ViQ1z3tgJW5flIZgEet7\nS1gi3bwDfKX0RLcaLWlmcJOfw3iaHqaxZoWPnybrwnGQVOySJeuRnCsJ5UDn\ns6yhJtVSvG1oSA2P/OmbQbhse9S3M9Ded8dt3U5XApbO/WdECVPXhwbeJfKL\niOkAOoSOiLWW04ZJEuophek7AVAcqKtJgN8fpVqOfN/PGSYBHDVzaM3zQKwb\nBE5PJtEXgoGB/gQie7jUPTZNbKU4aze7a8FRfbRgwNAbqc5PHOsk8TpSZnBl\nNmcEo/ZUdlWeN2v+8ilbI2219v6/uo7qtFU1TINE+t9CXrtEH9qtxids77/I\nslvi\r\n=je0p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"863e8a04081286602f8b0c9bf446655b9399e8c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.6f678a91a.0","@material/base":"11.0.0-canary.6f678a91a.0","@material/theme":"11.0.0-canary.6f678a91a.0","@material/ripple":"11.0.0-canary.6f678a91a.0","@material/typography":"11.0.0-canary.6f678a91a.0","@material/feature-targeting":"11.0.0-canary.6f678a91a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.6f678a91a.0_1614883209057_0.8041473127794856","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/form-field","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7187b2751132fcd33b5389d25e564d53166eb318","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.f5f1b613c.0.tgz","fileCount":34,"integrity":"sha512-wF1kjWM+MZTBXFtzHor2QN/rNhc0Ung9duKXiqSulixL+owc1F9n0f+AN1GdJUjxclbXXFIWAtyU46CYfZWtSw==","signatures":[{"sig":"MEQCIBdqTCrO/Fb9qMMGwwR0ShukDShi+o2kC63Z/rP+IOGLAiArKiCVYMtRmD0d/Rp/Epo1L8FmZuTdRok1Uw6N26fzWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUfmCRA9TVsSAnZWagAA7DsQAJzYVLr731aaE99O+EG4\nxwrDLPk/BCKDWyk8DRHhhgyy09KtopkNBCl8Ets7/FUR1xWOVIbiWj69iQs/\nXJ5YHri11Uu8+YQaanvGkQ8RsstLV40P2pDICpHeruAej1GhZsC7FZr+KajY\nSq7sPbNIHq898qVDaoWDbiPNus9htffmzAq+vc6jhPXRpcaoWnkrUGyPy6fO\nfyGAYfStvPePLSxA1JjnexMNaYheZG+4eVN9vR0QV1Fq8gw6Nryq9DKxGdTb\nAxdUYePfRO9rPwyPwnTmkFU0P34Xn3yMuy1p4VlQNIaho9SkIEDG0H3jCFyg\ndmnaRjNUCK6aCIZZSUnwRF5hC1E6rZalxPsT4jUALoIP6XltFsArMd+9LQVF\nuU7HTQlT3iEJDcY9EQcb5WyvT21An8D1hnQcxXOUlsaIREhY0ED/OgdJWeTt\nbUFFvbsBJM58ms4Qu3b0j/fAKVKkV0XuqJgoTpklPuI0UGMxskAOhNG2znCB\nTVdkmRKjwEhclgytTiQJZw94bO+HjMKp/o+q86Ndwlv19TatJZb0+MCPKTh7\nIEb5Ql1C1gAVz51toyYPqbSJVgCAOUggH3lUHbNqygg9OoK4JPIn+SfVHnl7\n3IKqPO8opDFYhD8WQSlHbIHAhFInhsubCsgIINfgjXT0Hq64GnZ0I71IXURL\nVIjX\r\n=oRMD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"20e2000d9ec732c7cdd0b5c15381f0a55f778036","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f5f1b613c.0","@material/base":"11.0.0-canary.f5f1b613c.0","@material/theme":"11.0.0-canary.f5f1b613c.0","@material/ripple":"11.0.0-canary.f5f1b613c.0","@material/typography":"11.0.0-canary.f5f1b613c.0","@material/feature-targeting":"11.0.0-canary.f5f1b613c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.f5f1b613c.0_1614890982452_0.14965541869898535","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/form-field","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.606e767ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b131eb60b1e27b5ffe8003a2d35953ede97a971","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.606e767ef.0.tgz","fileCount":34,"integrity":"sha512-3lIi6heH7Pcqa41s9IVR6AoRfheTNf8ohDFA8nJb+PnQwnDU2H7t6DsYGTkXtS2HUxykuN+KiJRrsnpdCFVDuQ==","signatures":[{"sig":"MEUCIDMjTtyVxMWWR/6uyx7b3wMQJLo7mxmYsSDwEic1lGQIAiEAnb4L+wdsnUFXRZgOQ0uFNV8e8IwUR5KgkeH4CpAwrN0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVUNCRA9TVsSAnZWagAAG0oP/iOeQ9GPDiuDrxCzZfMr\n2hzeLTC08AJejc/PdYFvB2aM6/NyqwBFmcWyHEqLzT5QpH4p9uoldijZy5Hv\nvv3m1sANt7sbBdUVqAgwMPR6m92sDcEbaJ18aslcDbq+XNZ6MEfaT7LF2dvR\n91y3ycRtdk+0lP7aR7k7Lrq1g1sSyCzG/KNjnq1PutAF+la9r8QgOKvhXXSV\nbeIBqyAdZ7liaVLgAggRQbkl1hGebfoFs8AqKoWMRnJUtSNc3DaQ4hfnVNF1\nR/1oeVnEfMqspZKe4XEFADBWIOu7xel1/Kwh12y+VPjC0Ucov+3t+rr3yIfR\n9PYCz8mc3wDeKKW493ZOvc1g09vlCGRckK4/l7gyCC/kVh3Ea7YTfZzudETy\nzLYvn2TSlXwCqQEK61/Az6XE5d8L5BOvEcbIuLiR6+049vRDOHep9ZYoWx8h\nL2Yos/6vEHbLYRjOYJtVYdvn94BQzt8EOuAFWXUczrMBvI6yfz6ID+raTkSE\n0aL31f4hrinD8oRgmOZln+VZrOfU1pE3w2XZlLLqSSuD9NVIBjMqtaxj7xXl\njr08pV1IweFcPjaUDihgLWEFRVSyXugWYrNFiW0RS3FUGR6/c6BKFyN+d32W\n8F3u8/AVCX1q8lVMWx4rGs/bctppj75D94jeHkXiPXq4sdqLnELLqUgd1HQ6\nUL3m\r\n=BJdk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"34c41b3553e1ca4ee49c0c36a1685f3f462d33ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.606e767ef.0","@material/base":"11.0.0-canary.606e767ef.0","@material/theme":"11.0.0-canary.606e767ef.0","@material/ripple":"11.0.0-canary.606e767ef.0","@material/typography":"11.0.0-canary.606e767ef.0","@material/feature-targeting":"11.0.0-canary.606e767ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.606e767ef.0_1614894349328_0.1449905712896431","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/form-field","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de4416f960bf03efdca6fd133c495fe2caf56503","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":34,"integrity":"sha512-h02OYB7FsU4K8TEGyzVFpkxA9iBndcbvAGJJ8WFe89kdFEw0YtcIrrgbn/szDhRKHpdyQY1CtQKIOedoxV6biA==","signatures":[{"sig":"MEUCIQDQm1KP8y1oPGH6a1o2bicOIllYRz6OvBvz8sZrMkMlNAIgL82eb/kaljwZ7eqkZSxsP13lr56HOCvfBAoOFQsYupk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwehCRA9TVsSAnZWagAAQzUP/3ea/QvaK0pnuamjICah\nXgesmOSjgnG6xDktgzntKINxLSC5mtg2+YfxC04JH0EoiINHO2ntJDYMpylt\ngxi1qJ3sbpDbyLg0WFsluICLinMLCc7yqYPQdrVux7grv7abpaB0X+A6khz2\n8WNWV81QIbwK47I5zZc0t4j9oVlNpMNuv3t2/u0HTEUTPsI775s0OYhl0+QO\nkU3AhaehTjHOKzFcwQiDNHfADkKOkOJiJw7d5ML5aX2nWd15BR/paY4h9Bvo\nnFVPQbjnM9HrcxRfAhacbuFVQRzAdfwG157cf+MGbFVj9z3xzRaw92f3Z/Gp\nbZQd7JW73ze123SrdA3tfljlGLVAF7QN4+Wp527l+EYOvhJoGHnEmux9r2IU\n43SrOCz8EhuEqmOoU8jj1FPRfuJIn3sKkZPJRdlNiMbUnewPVGAw7WANcZXw\na2/kzUl/ICw9LknataF4xuy5EFTRi+1ttyDr/sE0dGc8YZ+YdN/GPfJ8udbl\nAqQli4V1YwgtLviShqHC93s1SfCwWW3nyr02q3gQVzOi12gyGho2wjFoVa2y\nptjrrgNVn0+BvHnn51Vf1hNSceKOB5VcntI7h7RNmjYA969uUl5u47tE5qBX\nyTf1URhVF3o91gM+++wRFSU/1NU9blW1XT2akp7akFybvbhjj1YsJyrFlAYj\nqPxp\r\n=ZFb2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9a729bc3e368dfd8685190e8460ffef16eac8947","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f77a4dd1a.0","@material/base":"11.0.0-canary.f77a4dd1a.0","@material/theme":"11.0.0-canary.f77a4dd1a.0","@material/ripple":"11.0.0-canary.f77a4dd1a.0","@material/typography":"11.0.0-canary.f77a4dd1a.0","@material/feature-targeting":"11.0.0-canary.f77a4dd1a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.f77a4dd1a.0_1615005600581_0.4833069521911384","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/form-field","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3806bd800ab87ffc48d66954e431cdff4f7cd0bc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":34,"integrity":"sha512-cxefey16yGsCn93Tq3b6YRnwKbQIT/V9zK3RsMF7o1ypW6zM/hf+kNNOaHxBnPA0UPARS1RCREdGZzshWimAtQ==","signatures":[{"sig":"MEUCIQDF/r3+V6m+FUStDk2T3KZ2lswcDn+oJMdBLknkWRfacwIgM366zUIEunAQjqD9nnx7yXayYObEKXyyt/Cy/LasTtc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqjCCRA9TVsSAnZWagAA5s8P/RcVl0kAXDRKFCIPGg1l\nDmLqZ0I7VAU4UlN4arb/OZl2aLfPuAkWy1kY/v02cqE2KYSDx+8OI+L4Wm4E\n8WmgUaOF95VBvaZAQGXvydol3bZ7YW6fD8k2b5WBK++0LHeeZ7HZE3aRv1uu\nJJ1sTsiA659H5ulgvmIpzVgdF7bLJz8x9FJrupa8zKogmpk6JIamHkOWCDN8\nh5+K6DhxSLuWARF4a+WDWO3kPFf4VM5mcvbuZnKr3D6KMutpb6CApX+/rm0W\nPs6ko4b+eOdXO53KIFq1KjaddmvGr2DixUHNSJy9eheMrjXIeglFfER/MHXY\nXRhq4CIdgRF3dlczS22Vwq4uvioCpK6/crdqTLoHjRzno/41Nwos8kuUQ0vg\nsBX27+Tfsz/mzBziVP5aiGvQXgymZWbDpWpfYMpwBiCok484stfiVCg9LGD/\n+57eB8/UWTDaVoEm2eTl3hBfeLnuh9Voi91pf4V9zcQYB1lLYLCluqRMygaq\n5XrFKvG3xryiMWg1BIAn1WdSp41J0HklbrRbWRr4Hub4kmOx/hc8VDGKl5lQ\nVDHj0/AUrZ0+dU9lXiogkbW1ffq3WzY5yHJRNUMXG/2vYbkwQ0eGJxk49v6U\n+37m9ngq0DvTu+W8H/jrI8MwJtkL77p5Kh3OHeeLb6j0osHGpaev+UpfQCmB\ndmfQ\r\n=HZ/u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a0b889753d981e10bf70b9bcaead70c1549cf865","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.2d6ba2c23.0","@material/base":"11.0.0-canary.2d6ba2c23.0","@material/theme":"11.0.0-canary.2d6ba2c23.0","@material/ripple":"11.0.0-canary.2d6ba2c23.0","@material/typography":"11.0.0-canary.2d6ba2c23.0","@material/feature-targeting":"11.0.0-canary.2d6ba2c23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.2d6ba2c23.0_1615243458058_0.5027211173912689","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/form-field","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02da023579b1253dd2941988bd53bba8be969f06","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.7522dcaca.0.tgz","fileCount":34,"integrity":"sha512-QvJzzRTJmfqAzlsDGH+IKoidCMinZ914CP7X5mjZdNlE0PVpr4PoMWjql8Y229VgNEVZMFVuTPLYC7KP7BN9bA==","signatures":[{"sig":"MEYCIQCfByn7ZY3g1m3EUSP+tMrDaG4dCHnnPFRUUiGcYzyQ7AIhAJOBFUm98ssvqlOOHivTMWM7WNv6Sdvb+so9l0HpClRz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsD8CRA9TVsSAnZWagAAcUUP+wWh7766G4jPeLZN3nQy\n3w/mnS4cPzhlkaRs8duXVBJ+sCHCvrYEN8K2IJut52+0dMAntVXdoOwExOSj\n84OQ1ACH/9N/atnqdpstnr1QQWhdDfAJgXGFS7zX4hmh/TDtKv2nhVlxJEY+\nuaK6dtF+Mvgr31qLalEg/Xmp72ULOB6OGWIAIfumNFMwx371+xNpRV/QY4c2\n5QE5J2IagMo95VPwYbzKR+SAxC+iiSii5agTpKCH1qzsD4BULGGkNw9IY0GW\nknA8VIj9ld+a2fiPqe4Gmh6msIoHDi7IMSVDwZTt7b4orZSOyCdZxiJWoeYW\nt3Kih7ANwvym65iWFqs9jYrTTm6RR52CBt+eixB8+0J2u0xLkX7MhXfZP8lF\n4bvCigigpI60Jt0e25BHTR1KnTq+uZ61Mdo/Hc20kOcdAhlK0HcBEHuXKPYk\nX1PUBirVyzVwDJ+4F0te/7prhEGwPCqEUjdMS9/tg0Uvt/oUXE9Kvx+1qG5M\nUbIxnZJTJsPNdmAUtesgno7Dl23dS1LAW27BAcdRp64O1O2S8r0JeicvXN+C\npW9FvWfEWzHnuk296/kqu8cpbKzhihG+om/xX9b6gvJWMIpYx7GDHfCXJFO7\nite5hL3w1wXFMPcIHo8hSxVQ34qeo0tNOHysB654Xcpl3zQJ52zKKTlZWQSy\nhOUk\r\n=wimj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6e73ae404aecb0602a5da37f40b650181ac48062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.7522dcaca.0","@material/base":"11.0.0-canary.7522dcaca.0","@material/theme":"11.0.0-canary.7522dcaca.0","@material/ripple":"11.0.0-canary.7522dcaca.0","@material/typography":"11.0.0-canary.7522dcaca.0","@material/feature-targeting":"11.0.0-canary.7522dcaca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.7522dcaca.0_1615249660461_0.13654670787340306","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/form-field","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b605eb97748a2a1e1e523e6dfe8249f784cf383","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.5c0ab7401.0.tgz","fileCount":34,"integrity":"sha512-I/mt7HmHQbylseBEx/fPGySpTTwWU5F4+y2dMvbnxYHyYr2oLDac7SO4EbkojbuC8ciGNMBlMoXjhHlJg6Br7w==","signatures":[{"sig":"MEUCIHf2NAyH49JDHHMY+MdRRC5hk7c54df16O95YjNDc6dNAiEA42gHCki8XzxkjNP+Jq+Q3Gp02YsiTTQKc2eSyCq1XZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/wtCRA9TVsSAnZWagAAn14QAIDyIOzO/qptuHba5R2x\n0XhSRXRkRkQ1IigSeQP+4zsBpFkqao6zzSqfi7+KXQAk4tBI9fZlxuGq1MAM\nGSAtqrLJ/+vgbu6oOmbeJDSJceOaOiYQsd3f//C+spxk0i/mUK5mM5jCvL4E\ncM2bzbrNPn3Tl9dVIpkbUZK8VHJgL0sOqm9sNJLl4zDwPDOySTwD8sCEKnhL\nxbFh5MDmUQNtaP8t+KMduHEJicnG+OOOVaIGHP/ZsaZ33G19PDpnXugpvXER\nhdtspc1T4v8T1MuArCgsC9dVz0QnDNufMfVbWc2O4XS5fL/8DoegxXSircJB\nFUr9AKVJKDEcYMHCjcxIvrIyMHg/NLUaZperJryi/USKJuoTQYjLzvdV/dG4\nAzsxGWsdEg1bqXiyo6O2pIJUmdqsSG3nBtufZNC8nkpOFtrURkliyynVB4eW\nWk+NnBJPpWUmXo9zSFjXz15ag6jYygDlhDjGd/xTHJZiUsmOK+ltWtcatczs\nekMxPwIEedHLNaycScueF6aT/6aCBV3VPXjr2tFAIvEgzrO2iY1nrSpFqEbE\n884TUXXcm31iU5EtyDFXAkp3d2MrGfq5wQmF1dP7RMj/0U0RmyFK3P8YCX9X\nrMnPggaD4vasuBFHar46zyFeN5DGFHDUV5ZNuebMw9y5ZUwXfqURLo4DML10\nGv4L\r\n=oUon\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"95ff5a1121ca15128776896b8e4759594ec51246","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.5c0ab7401.0","@material/base":"11.0.0-canary.5c0ab7401.0","@material/theme":"11.0.0-canary.5c0ab7401.0","@material/ripple":"11.0.0-canary.5c0ab7401.0","@material/typography":"11.0.0-canary.5c0ab7401.0","@material/feature-targeting":"11.0.0-canary.5c0ab7401.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.5c0ab7401.0_1615330348589_0.1672845215683656","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/form-field","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5aef9bf47c03486dec4367a7166d74e53f8a24e2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.59010b6dc.0.tgz","fileCount":34,"integrity":"sha512-NXhotQguWtLoc8MpuJA9/z41HvePBA7Ye9gAYAH2I1N2CHrkTc9OpqI9hWzZsLKSjaUyknf/5lWjzm6vix44pA==","signatures":[{"sig":"MEYCIQDht2qurAcxX242Qb+k6UZXC2xuD2AIP9juPz3x0yGAEgIhAKBifcCTvcRQykSPOnw47Cv942Ohy/Ern1MSrYvji+oH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPp2CRA9TVsSAnZWagAA2P4P+wbJlLJefq6VCgrVdVTg\ndo+Q8lXVoRvfyEKBxmdmzK3SQbegSHMy5yaENl78GtuVcuMXVyfgJo3FKS8T\n7QgSIM+jp/nC6RPIjTymQ+UirK8v0bkSzL1EMSvL4+94MlMjpRd+uGnxWXdv\nDAMyhcCE3y1e6YZegPz279qYddHQCvWEdtVwQFTtgh0goAxSmNqM+f/5c6wo\ngNbbXTEHYVmrQp/7+rK/pfvY7Ago3yGZeYYNoJYSVcrI03bluNoFeNF7kGWO\np7lEIa8KPwanKOXflDr0iaOrqYxXJjmdBxDB92nqF83gwLEjOGla+wTbpWKJ\nAe8bT0wgHQ42FHAN6/RmRo+QYbzp5Gfk2+0Q2gsu1HpKRZCuFwtjTJKx55tD\nf1LME0SC9GMgNyB40+nSVo1Y3x997Dm7bq49e6CHjqQlsHD4KsBejkGuX9ps\nLfp/JF2qG7Aop2saa7boNLXdaQhrgoV7Yutm7bj/meRqjox6HGbRMTTztZUN\n0dUN5mCvpO/SEhav5MPrn7qYMMa+4xK+TH2m74MVGzXWYKtMVh/f6VVyWQm5\nHvNxDk8sFJxCrSjFlzJBUzHjP1ssVSMWCnJDoYn5ox6TL4NcwIB7whHaN21J\nNvcJfgC3kdl4GHFoEr9auE29KzjyUyYNBsdv76t0uGdMksMXIYc4tXPxnrvc\nrbyo\r\n=WCW1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e697574285a5102f4c1e5002a85ae33a3bf2210b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.59010b6dc.0","@material/base":"11.0.0-canary.59010b6dc.0","@material/theme":"11.0.0-canary.59010b6dc.0","@material/ripple":"11.0.0-canary.59010b6dc.0","@material/typography":"11.0.0-canary.59010b6dc.0","@material/feature-targeting":"11.0.0-canary.59010b6dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.59010b6dc.0_1615395446296_0.004226526234522243","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/form-field","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f693bb25dd2fb5d09e6577e3197f5f0f4b87d720","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.9e52f5544.0.tgz","fileCount":34,"integrity":"sha512-aaRacbfVUUq78iQCq1cDkJtb75QpcDptCmENlVZzsH34K9tC+gQpzz3GJ28yFHbXVYgDY4UpPWIvAthwoWgj6w==","signatures":[{"sig":"MEUCIB7RTUyFkgSNEjitDg31iKKG5OwwA5pT7LH21WVvEGfGAiEAwaZ4LuZUAenmXiSS6/tANV8flfohfHmkpEeLnhe33K8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVVSCRA9TVsSAnZWagAAHMwP/0fPX4DuK/Gt/Nuigh3z\nZqOgyxsmaF1c4Fx05hv6cxExnVT1ZEJcivTOWCdqigOGzahbmmOlNauTC5OG\nucE3yAtKQXlm/TxJu7ZN2+0z8aDmXRQtXRanYONYnBCLpnVQQsReFQXFZzS6\naU66xhqAnCVNms+bpHywXec0UUg1tKK7VaJTbUbZpmOUwHNoWp2ouaqD0L9s\nSjBqzdrdkqHpTP/XEl7YQk4dyIuhtitRrwm98zDL/JTjHx6VhoH9doPSqNGN\nExIGRz2/sFSLRBLMaxs2Giz+evf/kKkXBdjTQ6aeHZ0G4Lj+6030RvBaia9Q\ngmuTPDAyCMqlILzZ9oH32T5GyQQ/XCeGaqU932LqblvYu8fi5EQc1+Joli+C\n6vD/Ut5V2u+g0RL9wPsoFMGXDBEuNWtLkjVn+qC9hJRzXuLKPjkCWP3dmjx+\nQxFfPsux8jQul/DsXHKFcp+gxNIrd2JxbEzS67x5EnKKk8WxnmPbp90GuCOB\nGDlfFe8zbiZnfc4+jOeu+OLXZdmmO/9TDp2mDKwp5WBdlFNxu2Y0//PHACLC\nhnSTKi9T2MiW+DKF87FSBGvbAFHxMZf1WNhlHsiC745LT0/6NhA7i3/huUPh\ne0r8iJUANHIRmb3tBfK5XVsgFt05VYm0SBdqfbdwmzUgE4jijbfSMj5/YdgT\n1ltE\r\n=Qu+Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4763f125770ec8e3a6ea4d8f1f5f607371847e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.9e52f5544.0","@material/base":"11.0.0-canary.9e52f5544.0","@material/theme":"11.0.0-canary.9e52f5544.0","@material/ripple":"11.0.0-canary.9e52f5544.0","@material/typography":"11.0.0-canary.9e52f5544.0","@material/feature-targeting":"11.0.0-canary.9e52f5544.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.9e52f5544.0_1615418706251_0.4384786126401279","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/form-field","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.a678806f5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"772c85ddde2460283e6f1255ec5e33970d9c90f5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.a678806f5.0.tgz","fileCount":34,"integrity":"sha512-PUY/zvovm5TRIlsS4VDPYickIPugB9LLHf9ub1ly5gUsIVMf1RBYz4o4WZ9yVCHqjmXsDlV9XOZazmizvIb23Q==","signatures":[{"sig":"MEUCIQCNvEBigH1K3hOZXpnLHIa3nXyAVntapPNMYoSrYF9SwwIgXd79cr+83WDvTYndPyym0/Feoy9Bu3bL5Xrl5MKbuQ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXdHCRA9TVsSAnZWagAAjq8P+gIG3+WU/YhORqFValHU\nkWyANoU+T6LKRTdVNW44IaKmuOuCoY8jFzhhkYnLeLp2Em23dTZkcSB85gBE\nLlxvx1uC3EEKTPuK8k3Bf+OX7O8f+9R+bMwbjCoPraXMTdllZm0FHNg1yN9C\ntMLtfaBLkZ48p915yRj8CcsT3g8OIfXtp/s8sbUVye9U+/yM43k9vc4G3yrr\nGGRv2bY0e2xgSVvidfEfeCVYTFgIq7Xr6yHhMAa1bGRPb/L2sbYViWcdXlfE\nILRIct4NizFdN0qzYU2XlDmG6Y0yZqlh2I/SJvNJk6exWePXqNuWQPy61jmC\nhpJlJ4rhoN+hEB/nccHD03Dbt4ILC+s3wsYP3RK0uNRWH6Qc9YdUc6wABCxf\nIWI/xKlaJtIWA1kdDY/IKw6xPudCwQRycISm/q9qI00oEX0KipApIaSC0M7P\nPvNn921RdIWhKJLcp25n7A8Bi60Uet0eTEuil5WlRv4kAPTuvTDsV1ewlHNv\nlnvb1fHJzc57JxiBMx4+PxzU+n9JgiDs9G9bzFA9lEfmiBSxWmG8lbp81+wq\nLZ6KV6XUnByARTb09ZEjmavFWDTuvZ/pHkOc1ADSbujjGk6NbX7PmZ8HLiB4\nVBev1usmyURd1qL8KdLscoUaqDv8WyLJvoPvFzi2V5HLAbwuAWxG1Jq9OfJ1\nWPam\r\n=Bty6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a724ed1e64d54989ee4c27c71935f90fd5614f3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.a678806f5.0","@material/base":"11.0.0-canary.a678806f5.0","@material/theme":"11.0.0-canary.a678806f5.0","@material/ripple":"11.0.0-canary.a678806f5.0","@material/typography":"11.0.0-canary.a678806f5.0","@material/feature-targeting":"11.0.0-canary.a678806f5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.a678806f5.0_1615427398724_0.16178159383619906","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/form-field","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de554ad7ce71f911a3e90a00143323e2b607edde","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.b2d22df5b.0.tgz","fileCount":34,"integrity":"sha512-GgI/GMWiKjAM9ZuU5T9c8r2rn6C1oe21J8CEMfp96viMnfk0+5SLRRK1AWBQbKMC/PY+FdRLlD0hw8L0Y7YZxQ==","signatures":[{"sig":"MEQCIGKJAVAaDY6yz9el9DoSLLRLWPQ/g6HyJKZPa//njAPIAiBrgTI+qwlHuxU7W1gJJ+PuQXDxq3cqo8CtdJh/WmezQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk08CRA9TVsSAnZWagAAsUIP+wRdY7VmOjH1q08fUcMj\ncDbnpRYTqS5LApByt+PlKzlTJrN/1hfxVapRHqWSVpKgbeqiZBkSdfIYi3Ee\ncGyaOinQv51zLYdP2iDz4cGxtpK8R8C9bvVDxGEt7wTUQ6Ii4NTc37w+OE6E\nHYzZWtGpEDA2RbVLUEEE4gVvRWsw+H2u/p0ZiPwNgSRDqzY1nf6qBj4RHhMH\nnaaiTk+ABEl18U3fh+byNzlW1o6FN4jCF3uaa41nYRRJZ+qY1hyoHqyy+fpe\nBKOTbxeTaKK1XtDBSwLgt2XxLMA0t5K52rtP74uZ3u7aVz/vlFfar5XmRGWk\n1mwE6lPUwZ3PQJdzbTWTEcrqw3/8LHJZ7Z4GtSRdFv7D4ny8MEHZFJByE6L9\nBdTN8QhqR6kQqVVion/qfLT2BC1RMUtpMVNbOKwcKxJ021xjvQWZuHMQHL19\nY37JjGu59SowXHxPwsTYSIjpOfa3jBCS2saN98CQZGzQwFGplF15XqZcH1ug\nb24oxOuu/SyvmNgwQuZguqUcMjJq7NDUTf9/s6Y/1QQIuvaA6Tw84nhR6bnt\na07zhhneN2X5d7PF6oZ+nY7v8exT9EULuHpEfaNcec5ACtf5h9szlQrydmcv\nRr5gHubBL/xwfooeX26kJCy7ZMkICIu+AJ/sam1Iwd6Tns8LvJ8UY2cmD4f9\nb0Wv\r\n=ETpx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5c38fa8d841f5b293e55e4a22202bc6ea8220874","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.b2d22df5b.0","@material/base":"11.0.0-canary.b2d22df5b.0","@material/theme":"11.0.0-canary.b2d22df5b.0","@material/ripple":"11.0.0-canary.b2d22df5b.0","@material/typography":"11.0.0-canary.b2d22df5b.0","@material/feature-targeting":"11.0.0-canary.b2d22df5b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.b2d22df5b.0_1615482171777_0.7386497383664847","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/form-field","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.81911b707.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cd600c83ae94bfcc35a2bd7f3d8d0d476d90ec5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.81911b707.0.tgz","fileCount":34,"integrity":"sha512-jJdiMuSZxvHc+com26c5w6JkNqv9xLm4oRVlSt9TXTYLg/B0j3iPxtbKKmm9rTbd/AOD9vJWMEGRspc7Ev1ORA==","signatures":[{"sig":"MEUCIGyiQO2I50/QPWhnHKBBy/Nqormi4XsHMbK+qLuA1GxQAiEA0RA/KR5DxyqxkY9v3m41AfX37ptKhhrUxYqYlwCHRew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmAfCRA9TVsSAnZWagAALfkP/3eG9DbZJOIVW+DbL3wX\nxjijoRjkyWCL8bdfDx1asYNwDvP+rB5AEWT/f7Gr2rr/kHo04jRBA9SSUihW\nGJhsXRjmWBHwjOEpnkUao6Cs2il5I1yduNWnl9+qJVI9zCRH4aTf+L1bOVnY\nqu1+/X+AlPgWM9y22dTsaK3R0Zzl95GuKu0CO6VzSVnmOXFXbVGtZHiaT9/X\nUn8XjSfgvDm9BfaqOcnIPyol/8zQzCriRfNfOcVIrKpN03XwNrzFk5lE3iL9\n2rGeoM7AmWydBSqwyaURc3g6R2NLxPyXO/sj+TYG6hEjBYWkHUePKiP7Zr0E\nvYHI5h5f+QDLme2aaPBriarqAS8+usCNaWx2lN1KRZ+XnWKZPCBOWuKsL2oY\n15cF6AUvSNOsLqcnRHJYgpDGEQe/VKmyY4Xe1gHI3hUHlvOOeGhrqfKksxSH\nlXWuCTyKefwx1G8wdM84SnOISGMvWFGdfqHHk/z0kxRfT1jEoSGYA/QLRXVV\nz/Xhxzpe5BBYbiuDo/RAcbTSfz5JZImv9GaQf2ZviPldjGWdyfUN+Xq/IkKW\nzH4FSG6TSbXErzVYP6m/WUpwlFbOG2MYzbEmcTvn4l8wtoW9Gh+NO3pGmBQw\nvQgJKll92ks4DA9G/WqcdrY1lo7niOUU0WmFWUmRWHF7hUFVATv94AECvVwz\nXZSA\r\n=g8Jc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3c1bd5b1d6d6453c4f616633e1d16b1fe0812814","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.81911b707.0","@material/base":"11.0.0-canary.81911b707.0","@material/theme":"11.0.0-canary.81911b707.0","@material/ripple":"11.0.0-canary.81911b707.0","@material/typography":"11.0.0-canary.81911b707.0","@material/feature-targeting":"11.0.0-canary.81911b707.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.81911b707.0_1615487007250_0.6056436981146265","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/form-field","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b334b7330ec9d7f35dafa1a5de07b461aaa3ac95","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.9eeb35c38.0.tgz","fileCount":34,"integrity":"sha512-FzWx7ZawI1lVM/QiWOTA1exWHnnmejeF3ixDb5ZEXrW1PElclnvSIsIfyW+y0RfFYS/rDRf7Ac5VFJjIEx41Iw==","signatures":[{"sig":"MEQCIGLz3xTDvgRwSgzciNUNkM5QuxI+ou2APj8XK3Z490LCAiBnpox4KLoQFiEgoPiY1Lal48Vc5bbGOrb9VwBIXxvr6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnFaCRA9TVsSAnZWagAA7FcP/2QD2Vl6xcohgY9DF2hA\n+wXOdn8SAaYG8ziJjsS8cpVVIgxCyQmNLer/w9KldPZjOUd9OGhU7usxPLUM\nbpvB87w2LkT/zi0IHWWnYiHcaEZFkIXL8GiSqVulJYadeFAbmTs15xKo/HK8\n6jONM7PipGnJvTh5y+HBmA/np1tNL3qws1kl/h402tCg1vw/k+HHowqttkGq\nXwUoAgz3ojBuUyNl/kkQFcx5Pa2c1Y8mMIBmsKzMnSUmE8cFJFDAwsWcwapF\nhCorxtjd9SEd5oWoB3jHCfFrtE+DaZl1gdHKgLqZufl5AB52A0av7p8BKR7F\noNTQoK5SRNNLkKUhTTDmfeiscleGZAKBOzKX3PjWwC2pKq5E2tpa8z5gsdcD\nsW6gLR0czRUcKRQ2+HwZNuZvDz7gi8E6CfzU444D0CU3jrbMFhhlulErkdNf\nQ9l4Ie62rLSo6vSpfRZsD9j/yqp5YEGsRS2vjgO4JsDscBFdptzVng8fDE2R\nqucmSia2YcbeVzHd93fRO0L9ydqbeO0u9okL36KcUd12I2suqCNzX2Ot8ZFC\nrih4zQ8LRFIekC1/9tmeT93BhAgi/V9OdYDVA6/NUCkfzKvdpOlPTD7NE2En\nnNZ0oP2iJtJm77NMdYFsZLZkknyJZ8VA8gvrrhO/OT+lzN3cs2qKZHtB2jtt\n7n+G\r\n=+qdC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"147a2a556e5155bedce0b0f267f64c26cf87d0bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.9eeb35c38.0","@material/base":"11.0.0-canary.9eeb35c38.0","@material/theme":"11.0.0-canary.9eeb35c38.0","@material/ripple":"11.0.0-canary.9eeb35c38.0","@material/typography":"11.0.0-canary.9eeb35c38.0","@material/feature-targeting":"11.0.0-canary.9eeb35c38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.9eeb35c38.0_1615491417771_0.6883500777847569","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/form-field","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3d0be216bb6edd42e39925bdfd73225c39195e3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.12be3e95a.0.tgz","fileCount":34,"integrity":"sha512-0JdVZrURJLyUtvOgEDUVxFSvRezG0RYAcGJqIX9SFO0+hbXgu7zSFm58VoD2PdZm+A7oi7Fn0yLkznyN+1FW9g==","signatures":[{"sig":"MEYCIQCec2d9AeGWGx8gfzb0tUdaZBtmNyfWSN1NRXBaV1i2jQIhAIEp4uHiMvb1HPY9uoCpMWtqWIzmbTJS9EDo37K7bkiO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnceCRA9TVsSAnZWagAAeAsP/2xeJ/zOdOmuri5/i+Zo\ncpi+M6DXSG6iGgw2GgPdQ30vfUP06JRqZEI+AIP59/4wbXPdHb8HBmZq+F3G\nNG5HY/uol4xaWpiNtBMczM08oDFRviO30vuZ8IjhsmKKqO5PMf1ROBqkRN+o\nXRrJpT6+11Fo5mxpgxV7tPQT6OURwCSJsjMfzm2mwF3TuJwYm1QQ096UfYrl\n/z4NdR/2YsWSYFoEMb/Or2LQHIsOny+OAXYo8BVKi1m0ZLPhYRqP1kTq2LJa\nSLl3QfO2i72zc8cfkDecO/XBrVw6yZj7roH0j0dj0H81XywsMzbtwwhxz0lU\n7F4XO0wZPsaz0Y8kBwVtE6cjYH93G8+o3ArasKAelKoB9DC92VBSs20Yx9pE\nMeMo9flZFu5N2cRepkLBi4N44KLgt10oLSDFgGE3eEt6DMJVK39JBytco5ZD\nq1yFo78TYtKs9XvzCdHjBA4tLFwprGPX7DVbm87D+Dy+narNZNps8c/r+25M\n0qiBJfxJFqyJBgGjvRnWLH6HtKAEg+gFeQwfdP2fbWjVPL19nfqSL7lLMZQF\nyHE5tnqhpUg9mY1e+ibwePsylq1MP9q6X7PmZo8nVb/wd7sCuVdLzVHWyq1l\n63tiY+AVYN3LYEpc14bCw327orE2ZACRHnD+9+tAJGu1358y6mPpJLuQ4Yxa\nf4KZ\r\n=ZbG1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"883077446617b632d698e09818dc9d5903a7586e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.12be3e95a.0","@material/base":"11.0.0-canary.12be3e95a.0","@material/theme":"11.0.0-canary.12be3e95a.0","@material/ripple":"11.0.0-canary.12be3e95a.0","@material/typography":"11.0.0-canary.12be3e95a.0","@material/feature-targeting":"11.0.0-canary.12be3e95a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.12be3e95a.0_1615492893000_0.012376838786859024","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/form-field","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65dc76789b14f90237a9912b2a23d8591161aea3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.e683bdf4a.0.tgz","fileCount":34,"integrity":"sha512-vlfy0IM4DSct7LGkwmi83pkaHEXdWWn4xm3cGbqYkJ70T2Ddum/EZKzcQWyGnNYhyGVQJhUNEbKHdvz0Lw4Cfg==","signatures":[{"sig":"MEQCIEjcClcqsmNc4haMzNWVz4qNR8BZWykmo3hkHBJvSM3tAiBJjZJ79JPAm4w7cXuHE2KcqT+e6dRFdU6wEMhax7DRpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnjXCRA9TVsSAnZWagAAxpYP+gIoT+qMp2KPgcq5VRjX\nsb1AlDApS0aG9+UCAHdSxHPzPe7zDWHf88N2omCsYRCfVyWN3Pmy8PnBDr5a\nFwSJZY+Gb2oqUrjiBaYa2EjWGFI7tEUAbX2B7yPwR1WG6wpskBPgi2vr+R/Q\nGP3oT9fuabSM2Q5bzKGeLFm1xX8vE9LncKnZw2bMbgLXLgUme++CipBQIXMU\nkC9BM3DEpZ86wHGxZfs0z+VwU+q8XtSjpGJqOy9oltljIoWDombpdr6aowPU\ngH3/BhW7/Nq3BxW0YiLdEXZvcWOqaIc+2iQ9gJAGoWcndvOlvJEhh52Jhpy2\nuW+rgvNIRnenHCC6wXVnqClKpgL0Q6BmopNoBvWvRIrKFiZ6c4FU+f7o8yd5\n5IM/fp63uHmSlMR4BV9C+jnGrAxahM8/AEuCtWz+g8DTDo9bfOKAp6xSRPJD\nonuzXea64cebeYkyG+EnmVra6BnGO9avx3csKTsvjIZknZ/uDRUkrnEGWmDk\ntix0hZAjzSNBZh7qVZEBVRUwQywnwrrzjfomVmLGxS2otppVBjKnxNJakMCS\nvT1GN7d7YRkn5xusu5eEzG4YjZrME6ormu9LV3augXmUhzd4s/9a+vSjN2Sb\nC0H6xnzYacs2MZVQsAdxB2jLrEu2xSCDONMTy4Dg4tXNvcQvf9ilPgQRXSZf\nhChj\r\n=DTeP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0323fd7f39f825f8717fba8542628d111777ae35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.e683bdf4a.0","@material/base":"11.0.0-canary.e683bdf4a.0","@material/theme":"11.0.0-canary.e683bdf4a.0","@material/ripple":"11.0.0-canary.e683bdf4a.0","@material/typography":"11.0.0-canary.e683bdf4a.0","@material/feature-targeting":"11.0.0-canary.e683bdf4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.e683bdf4a.0_1615493335067_0.3331055126058109","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/form-field","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe5102a6215e5063bf48f9d76b45323120dc2359","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.a07b6d486.0.tgz","fileCount":34,"integrity":"sha512-Jp38nJaXm9djlHsVkqSWHJCanx97PTNypv2jrx+/TenKjOl+ezKTiL/C2dKx63hAeEBWKPzlSI4Gs5UBA1faQg==","signatures":[{"sig":"MEUCIBvdXqUQ1srt0tOwItMqX+oaKK1WFKHJvtZ+bLN4EbZjAiEAuMuO3thrVLLwOx9BogYvXi2crzA+Y2cRqtuuQgW/xVw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn6LCRA9TVsSAnZWagAAS2oP/2nTDGvIdHGLs/NQec0D\njz7ts8MM1RV/O9FBHvlkl9vUFGrhcKJ0+VUIwB5BRks4ftmol6J0wZFto+QJ\nAqiINxQIFERRlA6wqds2QaSgZmHxK+4h5i8DCmvm94v0GMpCaqAsCwNxT8WA\n5UwmMBK2U39QCCwKHPiy6RGpsxJARbIjJYrRqNviwpMQaW6evFHU8ZsD7gi9\n234SO7W3huOk9lUbImM22XUmIVR94IkKIQatNSe/RBwlu/rlwyHnPoSj6bS8\nWuGjfj1HQDq8eD+IGZDDarJjrTkfqA3RAfjWfVM8ZuE+poDCuVelGlIvodS6\nZcn6B7MKRujjm1GY0UWCskCrjCdeDvzj1mohsEDZUVsxFY5Z5LUegeLgkD7P\n4lGN9MYYMvST/Hai+yFE8czzCQulTPtfSPXwFxWwAIkVe023aJM0p1ywYWcw\nGfikiNZ227UOc2mBAfdcLCR2MJ9McTUXj2o0f98XwkvfwvZU62u4f4ZT19ss\nsANgNVH9i4+FfbvbZePS0Uvbz5n5Zp7hekHA7zc1Fani2AAjcul4hA9BklF9\nhdrc/xmip3HcHn5fpwPg/vMZd+0ZxPEGihcRIbzSf/2v/CJbmyH3Rkv3/Y9I\n0kDv2yxysQbypATCMpUDk0f+N7A9zQwqAlbnpi+v1GLd5EumNyyoHuQHBCpd\nXHl8\r\n=RX7r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"425bbecac77849f8786f0a32de18a168e1874c9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.a07b6d486.0","@material/base":"11.0.0-canary.a07b6d486.0","@material/theme":"11.0.0-canary.a07b6d486.0","@material/ripple":"11.0.0-canary.a07b6d486.0","@material/typography":"11.0.0-canary.a07b6d486.0","@material/feature-targeting":"11.0.0-canary.a07b6d486.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.a07b6d486.0_1615494794834_0.5463144461369513","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/form-field","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.1e0653477.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae02279fc89ea49ea11d1c4d19a56a56e09d7af2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.1e0653477.0.tgz","fileCount":34,"integrity":"sha512-q/MtznW+VBYgNGHb1y4ekA4S8PVcuDgD5m4TCXG0b535vHjzQjLCWDGKnlyD+mnDLilg2I70b+xaSt541shfwg==","signatures":[{"sig":"MEQCIEslfCFrcLlcuFEQfICxcWK5dc9q6TeohhM912+B+mzwAiAitrakxrM8fXewwS9vK6j0pV1shpyQTkKRXIoc5PscwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoBDCRA9TVsSAnZWagAAnQIP/3bxCmIP8p86ClDHRTPi\nkqH9fF69rtZxVMTWrmDwLMjqoUIITdkYRjAUCTOdp+DVJy0ct8AZ6mK5ZyBD\nlucYab5zYRi/FmrXAoK2PBqZ36lkC8/ciVFVYtegQxqz4hUvZKQzmgX9KZ8D\nsRwGlcksjAkDaK3Me6wGzp/HKn0QEE8kaviW0bpsb2wVY0xXeAkMO4Nyhfg3\nIP7Hra+zNnYo3OT7mLFDQRUpT1UmShVJy+peelsclqQes+PEYKR4uW4J/BkV\nCR7jyEkdNMIglF/5bc6r8GF/rJ+u8lQC0/YfdyllryfJDFNrSnSjCJNWUdfk\naHldz2s/IITgmNeO0ArIIjGhu4Wqmzibl5PXecrPfy5LSga1yZuuYgWqNm+u\n1yd4af8OMsvIO85i77oB8Z6T8J+s7Oc3NPc0erCbDm75TM7VRYkZF1UV+ppY\nok9h9FWXLhSPL666aLIfXU+fW9krUt90MmZNJC6rGzxvkIGcjFiNIHmQOOWd\nKwilVj1mIvfABbh7OkZObTUTqCmp0qyLt2sSL2qOaM16Drw+vuySYagqiAyE\nzA3o1ks9da8JWe/gQJIhL4IXkeTxAgdKQk8pbvLmvfof6NCov3OgrxtHPOd0\n5jiTg+OaoAH5aDPXHv9atrdUpN6KQgcrXKnIkng6TrCJ0l3H/MgqGXgelDZn\nz9rn\r\n=GpDi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6130e0fb82d7c39da4ae1e02df8f0851da419fba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.1e0653477.0","@material/base":"11.0.0-canary.1e0653477.0","@material/theme":"11.0.0-canary.1e0653477.0","@material/ripple":"11.0.0-canary.1e0653477.0","@material/typography":"11.0.0-canary.1e0653477.0","@material/feature-targeting":"11.0.0-canary.1e0653477.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.1e0653477.0_1615495235095_0.2967192479166654","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/form-field","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd1e98552d6ff7a5db0290b6cc5032a92c389ff3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.148e8cfcc.0.tgz","fileCount":34,"integrity":"sha512-HnzEqxQlPtsjk7MxGpv5Ak1EzQQhTmhafvIxQnSOEhQzMg9DmdDApac2+Lf7RS4Vfr71VhfwbYfvgNG34U6fuQ==","signatures":[{"sig":"MEUCID+sBngvhNDi3MB44gZ4RTwSujcvXbUxoIOgZNCQiOoEAiEA+HoOlyVdBBb0H1wmV3+t+IZUhqIMmZQP1iUiUey0VQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp1DCRA9TVsSAnZWagAA944P/ifczmo10gJQTnm7+KOK\nVbVZ+m3jAwxcazSfk2ORieM2X2NloHp+qJMS79LD1XxjDUnk+6neRT4vbulj\nbrd2zbVYkPjjQA8ZdK+rjr35RUP2z6XLMZkw3Agjm58n9bMI0w/yif4f54TO\njWoYTb8OJVtdFwOyAijnn2dL6dKQHbzhaC68HGebExHfnENlJWEne7wx3OrV\nQNGuWEIyGAznFBuDxGscONqVIxjWcWJDuMCgxKLGxtAHu8wLI15prY/GtyBW\n3zDUurhj7v1USv8dCD6KvVH4Z+QbrlBjhdmYzBBsg6Cbsvuae8r3g1CmgkQh\nfX6DiBr1E7JMS1thKzImiYWdi0AmbacSRyNBWr+GGwtR4mrAdkIGofunr3/h\nQeZmo+Ivt9ca7gOhgtUzge8djmSIultviVwCjjaPMNLEYGudy3zU88b5evBT\nB4NMNo0x2nls3QjKyEf6pDTGz2KCU1JL+Lj0tvlJStWPKrevC7kVeUQKUYdV\nfpuBAFS8LbhfQM7Z2se92aKP3utBZ7xw0qYdnMltuAcO2uWS9M2Kx8rW6bjW\njcDr9M5i35DN/m6wGljAadBEDkBLPtgrTVv5HEtYsuFTT7oeM2ipYJbWGaKY\nQat6yTtLFBkn+gS7Yuem67shrKZYbYC9M+cYOdpYSu8AD1O4kBtRyfAHeIbA\njQz9\r\n=flWN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2e686ac2d72b7a249bc4deb8b09742bba99ce581","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.148e8cfcc.0","@material/base":"11.0.0-canary.148e8cfcc.0","@material/theme":"11.0.0-canary.148e8cfcc.0","@material/ripple":"11.0.0-canary.148e8cfcc.0","@material/typography":"11.0.0-canary.148e8cfcc.0","@material/feature-targeting":"11.0.0-canary.148e8cfcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.148e8cfcc.0_1615502659055_0.8974105315302148","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/form-field","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.73a227194.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7a81134af4ec93b26d41b0a9345d4c7941ad72b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.73a227194.0.tgz","fileCount":34,"integrity":"sha512-Hd9wqlFOwYIlKBZGsq8mUuSvU07kdaSwjhfOifzXAC/lEipZ6EF31RGXpj3RLXAwNAvakukr/dWXFhffd9ppyQ==","signatures":[{"sig":"MEQCIHVx3GOmpXXZm8zwlVFOqgFsAICcO41v2P7ePDKHluwHAiB8PEX7E79xqJM/Rb/1puXJJnUWvcxsXWCSJVW/1US9GA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrSlCRA9TVsSAnZWagAANMoP/A/gi01NW7wnmsGMPnH9\nhOz08CvCCXUPWUkmUVC/3v65lNbCDTyKvQsx6TuRT3+ZvtTIo18jRc0razfB\nEa85bDWTvWqt7+8+YLsdtqOY7Hy6pJRZVEfUJEb2JB6NvjnCRRn+/lx3b/8T\neUkL+l/m61SwRR7GhK7nl9vGYA9+jbPkkxlkcLo4AWSXvjjuAabYguP5oIVK\nh+qDoG76LB8pgTYEHXMFzY6v4pG3MpKZOUhzvKKQVMTODrcpkdAYMXKm5m5F\ngpWWj59HqMYF0QqNMJ+7mIy1xpsuIQ/TyhfEG+zMlHaUddy0FLKguM1WjE9C\nUsKjK8PLeaMRTdZpmy5XcZjYtcGfLy2JBkKHazT9i5qSLQgLrzdpuspj0yle\nFyVAp76TrlU3PuX/jCMMO5T47Mzbf0gQcJedn0coGMKSwMD+d35xqBMbxjs4\nNjxhsZ8sK0c4DMuu5750WrWKXVchvqWfKphXPjZFsc02TR1FMlYCV4Y8MUB2\nRbWRHqoayLlYmqCy/YNEy13BeEvvPklv7ep5wj/na71OqgsgtJHOd4/0Lsva\nG7NlqwZAmrerac0F7KyVUvgVAnUBuHGrvUE3zeL/QOpVYphoGtu9EJwMqpRY\namMhhaUsGC+UpY5rpSE6Q6cfZ7LecxzE+DjtSNCOQW/ESkObJfLw9PlqW2QY\nvOCk\r\n=weng\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3bb5344393057d23abf5414ff61402a5091ac74b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.73a227194.0","@material/base":"11.0.0-canary.73a227194.0","@material/theme":"11.0.0-canary.73a227194.0","@material/ripple":"11.0.0-canary.73a227194.0","@material/typography":"11.0.0-canary.73a227194.0","@material/feature-targeting":"11.0.0-canary.73a227194.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.73a227194.0_1615508645294_0.6207192792289837","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/form-field","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e6022b4802ea416309ba7a1b4842e17254e3e98","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.f8579b7ea.0.tgz","fileCount":34,"integrity":"sha512-+Cm8ifVnkXOjuFLrGLHRhcVOZgOeqa4PA6/5OQP1Sp42gEf5fHUk/UG+Oitst2ZzZDRxjDVJNU/cQ7/KZ+hfUA==","signatures":[{"sig":"MEUCIQDZPzJgPbQmjNtNO6QdbdPYMci/X5pypJwOwvAWNGFNjwIgXT6rBJm+vgoW9kKM0jpp311dm1drRLztc6nkrPsC1sA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB1ZCRA9TVsSAnZWagAAs2EP/j2mv2LD6SGlSa2wml2p\nyre1Z1r4pps4Lg84ojvvPdWAkJCLMvUBjTHNRWFySaktYvkMd5Z72PYtceDR\nIlrhBsJ39+ETP52IVopl9TkaeLAur6XHTSjAWvjKrBYpEWwRrVFimLrWYyeQ\nQOhwlCdZUUxdsUPJAk3naQwJs+t7Y1M0VBmBxDxPEVW/bgxMncvJ1MHbbwYc\nH3b7aSGX4sG5+epBuCQ1foQaIsQcsuWWF8d88Qfp2MNb8zljxtfartTD3KV9\nTyr3/8xQYvrM1gAj/mJ64GgeYQgo/0jVxiXSawQdtFR5+UMePQ4YQkIvdrdD\nvBxrmKr2gwV/cV9D1yPZM8zAz+IZfL0fJU4FRjYlTDN4UOFfNqsMHmJzZta8\nF9q3iQvPV+rb0fh+pNmdHmzpVCm4mL1gId8h6knW6so8bM3oFpGnCRVXeU6Y\nNidHgw3mWq6ofUuLpHYXT4LCYjvRgMNM8ti2m2DRzBmLFlDrBG3mRZJIrnpZ\negfbmc/r/6ovGduSbn3J5BAHfZrvJYz4BbPw7cdJYD3UoBXpaNboP9h3HKIo\nvVjSNTEn5Rv2CTz51YidjjS7dNks2s8/pQzQPQODHf5kIddkKsIH4u6UpuH8\nFPWpEYodRIYF+x6MNH7KJU7H0PORLhjFUdegTa3paVj0TWvKPadjTPIrxmov\nrQW1\r\n=DQPl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8b1a0816c0d3a68a851c5e6a199c4a9ff75cce07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f8579b7ea.0","@material/base":"11.0.0-canary.f8579b7ea.0","@material/theme":"11.0.0-canary.f8579b7ea.0","@material/ripple":"11.0.0-canary.f8579b7ea.0","@material/typography":"11.0.0-canary.f8579b7ea.0","@material/feature-targeting":"11.0.0-canary.f8579b7ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.f8579b7ea.0_1615600984727_0.16789170484810145","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/form-field","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"161c5ffdafc9a66f02c04f37ea537857798d7aa9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.d2a39d300.0.tgz","fileCount":34,"integrity":"sha512-BgCmo9AssEIl2CuWX5XyZf1UyFIHyoCYXVHXVO+DJ35rv3yqWFDbkcby1lpWGYHz4HBdi0jvkJjCTI+gvyzAvQ==","signatures":[{"sig":"MEQCIGLouiWaP0Yt/38SoBRpDezG8RBtJdBAbIHHf/xbS7H6AiBuKQ21SFTqexokOVUZSuFw1KsEpGMoJZeMzMNSLALWaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/01CRA9TVsSAnZWagAAhRMQAID7nZ/kGcbvNYCpqbpf\nsn5dIsFsth2LXFc5afjmu8JMiKKqhlzPvD1rFO3mjKEAPXj1m6ppNZnLntzP\nyPvSDBCoWkUtf21jv/gW+Hyf31oUqbHqMGLuiV7MUFwtBjCMJ2v5GpMU4YwY\nl5+ikUipv9bIISMIcmSa4NAKsdBYkq+KCXEibUnDk2h5uXZRWGHqPJXruo9f\nRT56Biu5zeHWm/5BOdAE8kfYNl6tlVZID8cPKKQ2POPIlRM8pwtmvXFcBC6t\ngUObygps9Xv7JksjYz+NDS11he4IhZOeZppo8qDSzOTP9wFgtWYKskfBVOuO\nHQqY3gHi+uenzdWfPX3mgLCPAhOT6g7duV+FSBlmkPXmZYLUn/nHdsRHWhZV\nwX95EjkVw9X19QGjsNnIEcfYJ7zT0pys83rGtsdeXF5qLqX+EBtP93U0Qdb5\n8Dtu/Hu06Ot+InmU19N2qCOdJVFG5DjJRLiX4TCl88Y1+X1Vw/shMrEpDFVe\niCIlsOv9oPvD3bOSSt9Bb6nqlyjozJAupkDD3MCOh/PqIxHuK1EI6xT6PGjf\n6p+OyoT7j29c421e3g+Pz3SWkQVKl9D/oxlWiHA+9yHzGKxVsu6ezSsgwupU\nz7C/HuAk7eWXHzaz7FVGZSsYogoKwhL75a5ECdX/3En4sw4RSWqz7wvANWkK\nF5mu\r\n=Ye1b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4e928ba6e35dc70b34314c7509f647a6fbc4be00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.d2a39d300.0","@material/base":"11.0.0-canary.d2a39d300.0","@material/theme":"11.0.0-canary.d2a39d300.0","@material/ripple":"11.0.0-canary.d2a39d300.0","@material/typography":"11.0.0-canary.d2a39d300.0","@material/feature-targeting":"11.0.0-canary.d2a39d300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.d2a39d300.0_1615854901523_0.9074549699823997","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/form-field","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18a5a5f699204396b72e074688a750b5897c9c9b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.7cf67823e.0.tgz","fileCount":34,"integrity":"sha512-ErE2kxV9uCV02tM8KxYeIqzRvgx77e83bzk4mYRjtZR+PF8Vb8uvv1AoCwOyj8OMV6Ky3PIgHtOOPO5fpcW2mw==","signatures":[{"sig":"MEQCIEFVeljP07kCVpuBTlTqOSTzRrMFIwLUJtlEGXi4l+WUAiAg9+RF+8rRyqVIerHfHpr7qh4h9VNtrZpX7iDHsMEnCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPbbCRA9TVsSAnZWagAAMcsP/3pmlgLsY0B+w+ZZ6TDK\n5JK4N/StV+LwvFfNsGBPx3AbFo7q60nurY10kv03kRu7TRuQ/J3+IKqBslkh\nQXKikUax2DaQz6OjPTMMP37ms1rwLl7VnAeg0ncTGCwPTaZ6v17HEfW+1JC/\nCs3IYOA7WJ+08FSgp2l4x2gyP8I3jTVKVl6BGaPfm6ANmI5mbRu7nuP7sRGc\nuOJ6W05GixADb0lROPoIXg+2M08CoevuTrESh8mkywHFBciVpZqtbTNxyqNl\nkMZdOhDRc6SMIQDIEnjqW3p6M4je0Rj41hCin8RmVbV6hlT5fcjegUnZye4+\nQxRzpnmbSKTkm+STTqcGODM45ITMrzgyeg9k3hyvjqgbNc+8Mo24bJW6ai8E\nrCxwxUI+9NJpMX4DFsJZYgkimWQv2s6vXLwFMDdei8K39jhIuw+Dmu1dzSwY\nsTJFesu3YLC9lCL3z45ytyTD/DND19O8jbmJVzOEHKJ+PmGYiSR6KwHCZ6Rb\nzrgWlZ/RFfDJoQwdFW85DpmTh+AWC7loyWGHxDiZrPAvIFpeYN7NgWaiILdN\nUP9tDSAHlWnvdKfNlra9N5mp9C5JrAKV420dhI1/4bno2LI/8X1SZr9FqFQk\n8skJmalzCnWbwcZ/GFj882fgB6ehLaHoTwUEr5oqBvDvF5vj1+zQilB5qlnU\ns7hL\r\n=xKwF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"afabf42a48ec8775fa133ab10e023c1b5d2ab802","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.7cf67823e.0","@material/base":"11.0.0-canary.7cf67823e.0","@material/theme":"11.0.0-canary.7cf67823e.0","@material/ripple":"11.0.0-canary.7cf67823e.0","@material/typography":"11.0.0-canary.7cf67823e.0","@material/feature-targeting":"11.0.0-canary.7cf67823e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.7cf67823e.0_1615918810838_0.975869794730654","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/form-field","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.67d780c79.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3675d68c06993ee386656d6e5409109c6ad91e4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.67d780c79.0.tgz","fileCount":34,"integrity":"sha512-0RN7120bRsROcX3LJ9mh1ib4bXiR9Inv1TC5ANExPJbXvdocekwQO+J/tN6jOxxb8uiSiawCYOOZDY0/qZwoGA==","signatures":[{"sig":"MEQCIEtHDd8ZN1McIcfP9AsfWxHabAT11fRA11CBWaNzfHkPAiAugXqmIO+JKNAm/RQNS5H9rUIQZezsmg+m6bYUV/iVTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQtqCRA9TVsSAnZWagAAxk8P/0hA6cvHGi8zJWEvDw0D\nfD9GC0RcJQiQX7A+Px/WvVHUX+cHnn/TLyxcbNjNo4wsuxbZTnEbzv9sUBwA\nfxPNCRgcUttev6HzJLBuFf+uB5za2IhGNNIW43XF0EYZ9RSwJwPzT2m31ESk\nzoZmOIdV7fGVls6JnZHs9dEAlaimHo2ZVzG5BXs16zF3+8C9FZPgEpu2EPS8\n7GEaQIp0zso7428pKiw2bqUC9n5r+47182ZuNtSfAxYF7yTRjWpCTTc7WdWc\n/UkCIhPGifRqxUPtMZ2rAu+oz/SYzptbYMzmgBVfjl3jmgx3NvKqN8MfN2KD\n1HQWIWIOmNlAORXoY/EkwNwGOxQdPUVOgUbMAxteYKddPY9eeK90clOQegIl\nxzwO67e+pN0cCD+Uy5Loptc14iRowQck48TFfDvIgyXP1WLbSslWEo924v/B\nHpIGW0fhxf1uT3xR3Dpa2ficnh8xMikXojh7kbz9JVZ6Q/Gz4FqRItbAsFAO\nKBZMAWQ7HGh3HCrvkxsM9HhXYJUBHSHjUN+nAyYJrEo4kRjxPK4uVh8C4zLw\nnHSeZsz2ZTU/r4gUNU2j6L3XItpvUaJsNfp6GPZws1knDHdZ9VvJ0krY8+y0\nPG2BSaMxmZkaRnXZX+swZSCqh03JA7z0pY1aFBZUeZeDU5+0Dnukw4+trl0F\nLhE/\r\n=IpEk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"05a76ad8cd6b15550e685799fb6b9b5643d7e0e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.67d780c79.0","@material/base":"11.0.0-canary.67d780c79.0","@material/theme":"11.0.0-canary.67d780c79.0","@material/ripple":"11.0.0-canary.67d780c79.0","@material/typography":"11.0.0-canary.67d780c79.0","@material/feature-targeting":"11.0.0-canary.67d780c79.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.67d780c79.0_1615924074002_0.8130478811313324","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/form-field","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fa692299bc8887e259e882238f7d083cd171e9b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.0f358ddae.0.tgz","fileCount":34,"integrity":"sha512-OjulcguL9BR8Rt1Q0rZUeFJxZkfT/LV0IU/snFAOsgXDBtLQf+MxKu50GQjy3ayuFFf494d0zPipJmUMQS5/0Q==","signatures":[{"sig":"MEQCIEcQdYbhFKy6bi+WpO1pemMhh4P2NpYr4LC2jDWwK1YFAiB1/0tZB6/UhD/GSZY1frQRZ1Cv9fQsirngFTlibqPOuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS1ICRA9TVsSAnZWagAAQpgP/2mROq/hpNfKEpVaw3AA\n80YTy4MWsNT0H8U+F7vegEwi8g/VOqlLJEFwQP9Vch2gzVPMq1Ysw1mITEDY\nuXzNSg0qjIp9K5Kh13MqyxUDqa7Gg+vTiIRZU9glveUCI1v1uIMIH61hrxSZ\n8wbRGSeRbhlb1zwfG7BoEbK+nkLgCRN2IKlu5vZLC2xxRvm78wKeHXmB6dgC\nkKACAPzie0GsT5EmWIJSrnDxNoLALyd9ao8npI0i+GmTmcvXvmXFdremq+Zs\np6gVO4czNmb+O5q4/st2KMgYCUQPXpVQDtv4MwdcJzD69FkI2yXF/IptKggi\nHAnvs/fUtKccjO3MKEdWV/8AEH7xmKW7B0+cw47HAAXbFvwGre2F7xXqi/OH\n8zaeTABrkDlLs2HkGbKb4Y16/qPFluO018/sGWVD9p1am5CoSOgqIEP0SNz8\nhPweAI9mjtO+pP5Y6HVmUPKOG9KIOfT/IeVPGdxti6cSd4ZyWWORTweCDdXS\nYvrScSkKWmzLybpBcv7G/673A1wcBzsiy+AzAgIEp6YiRvuGJI5W16XI+3Xf\nrohI1MiiPlmrzhmsd94PLwaayZB3gBL+XONeYujrBc8hDnmUMz98sNQqLReC\nHfmCcQBQsGPxZhg4P8RbaTYqZf/feZHGHVaWNlIfRBjiR6nBZ0uNBB/NMdaZ\nuaP5\r\n=Dzp8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6acdc7677f01b6502d0b491a9816d6600ea9cbd7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0f358ddae.0","@material/base":"11.0.0-canary.0f358ddae.0","@material/theme":"11.0.0-canary.0f358ddae.0","@material/ripple":"11.0.0-canary.0f358ddae.0","@material/typography":"11.0.0-canary.0f358ddae.0","@material/feature-targeting":"11.0.0-canary.0f358ddae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.0f358ddae.0_1615932743957_0.925610878202034","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/form-field","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"033d18148ebc11d10b7c4d7f812ee14e24e66141","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.67eb0df80.0.tgz","fileCount":34,"integrity":"sha512-yhCAFDzbgGhfUZSJhfKG3JLJ7zUy0PSal00PMqOQRoJUDNVxVp0QXLDeNOXAXurVsqnluLltDUH94g5o2ltKDw==","signatures":[{"sig":"MEUCIGiQqpvsXWyQs7lRj/JjqRY0dgqf3xA5Jb8qIXHBeBtTAiEAz9S0yVnXsvuDKvOH19FqeHWGyvJB5rsAQP36NsyVS3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTOoCRA9TVsSAnZWagAAt4kP/09+kTramW01dfR/gGSq\nQ/IKpjI3AgPqXiEesQYlD83wElWnH3THPkoHv1bTVjlR7PLGFeMf5aC9pIF3\n/wbR/fCjaCoffrZqoZrlPz7z9duE7MzOlF9IiPViIYus7Hs6pWcQus+MSRNJ\n2LlSJsG7LALf1NzgPIUVv12YMokydSrugj2vnS7lJVok9SmoYiRS7/nwwxGt\nVdRMAx7e+GkG60iBbZCABgsWZQtDey0HD2aWIQzpmxtVS8o0zzsyn+XVtjEO\ngmWqeejo0HY0DyzbuzC0BbLTc2A3JZhZwqF0/igQP93Tq4HJ40U2hzv+o6yA\nYUib/vAvh9TCWAHhW/1z3WKp74tpmXIHoVibt/hUbSamz92YhHtZfjDnWQ7O\n1fc/eM9Cn/g7B2h+MSRfODgc2Bd6CrvfT7/s0vPX8FZ9ctv19rzpQKcdReb0\nO0BtvwGvR3l8M7RdLTcU+4Dh0vNR96URVZemCDVoINH274OlcFBZNNeI19xe\nebiBbWV+pgYi4YnFPAaMvWKhI9nv0YNFzoc70A9gV+MT7kqM/zZTK8DvTlEQ\nADCi+oZnjRZIrzfyyjk0DtCEdocJgC1a87h/wLYJS8PFy2/evD+IqiZ3KTkY\nQcMqv8df5LAvANzyVgvpEdo08ONxP1rcU8nSNIpn7AAWG5z0RfJ6mO3znihU\nu/O5\r\n=P4gk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5f5e9d259d95bf3abf565622edf7345e62993020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.67eb0df80.0","@material/base":"11.0.0-canary.67eb0df80.0","@material/theme":"11.0.0-canary.67eb0df80.0","@material/ripple":"11.0.0-canary.67eb0df80.0","@material/typography":"11.0.0-canary.67eb0df80.0","@material/feature-targeting":"11.0.0-canary.67eb0df80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.67eb0df80.0_1615934376499_0.5107408114651195","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/form-field","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31ef49ad968515f1062230147aa7d2d1f30923f3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.941ca3b3c.0.tgz","fileCount":34,"integrity":"sha512-TRi2LXy759ZG9wIogi/L0gI5kaJnH/NsSGMJvZj4OI/c//IC7/YZ+p3RrGrZnGQyqgYS9BAfad2f+k44GDIHzQ==","signatures":[{"sig":"MEQCIDnlcZfXW+Cw29gvZ0r4tmCK0TW7HoPIxl+pSufGOL43AiA03uMBlEfQKISo5FFGsADZW2oaH0HWQkmelVHptGSFyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTQYCRA9TVsSAnZWagAA11IP/jgbm/LvaR5aLRDgeBz9\ntrF7pyJXQ7unTBncfBlPF70qcFvHCx0zVBDwRBU6jgv5sP/JKcHDYzfABnu0\neSgKdz3DCnBSbYaum5eym81sou4NaOHjlsltVsjdpa4CPbgQ47xQpZidpAbA\nrzWEXuoUZyiDm8ai15vqauWxrMFTv1sWEAV+7kCNV91ZiOfGH8EapZXqfcvH\nO7ETWU51iDfTYvAY2NuXDzWf9cDacdCMUQNs35W0wQmgsmq2l6DBqsm1UwIW\nnUgkW5QRLpyhDI3dvm4Bv6MBwEQb3LiqMUCVE8QUyb3kZoQmcvMnr2IhhMls\nLCfGfbwUHbRM2f9baj3gXfiT4bw8T2AEmq0qOG+G8iYoXC1iwOGtjB35DPmz\n0iGwy4Q56waYsp80ElXJrKhsNex+ViWxt6mW/udUVgzQ3AhvHNwBEbg502Rk\n6pxsIw/fI0J3JthPC8YMiphaln+lcwpLy1euAOGkihcK+EMtRET9ZPNk2jrr\nml0lKaVLw8m3dRwWR/fNBgKDjwV4ZykQTHj3XVLGhKg/DLlWtFH/bkurEPq+\nchpCLAtwtAlLPl4m4C30ZdSKridQc9NqHV7Cn2+/QglMN9zmG9uDLoqo1oKw\nEscKQdGn0HysWuZkpBftj3XG8C2dYcCwTKYVvZNKsoCdLveM2x5YYeWLOZfS\n3ihe\r\n=Q9FX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"27181e4c2c90af170c9149616613beb6599ff94a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.941ca3b3c.0","@material/base":"11.0.0-canary.941ca3b3c.0","@material/theme":"11.0.0-canary.941ca3b3c.0","@material/ripple":"11.0.0-canary.941ca3b3c.0","@material/typography":"11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"11.0.0-canary.941ca3b3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.941ca3b3c.0_1615934488197_0.6651399516086494","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/form-field","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5b704fe1720d9dff36313c93e74c64a1a93496f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.3344d12ad.0.tgz","fileCount":34,"integrity":"sha512-29k65/1SIxorK+0pBNcmenBCNUYHg7zMRTWW8rraPSuZRgOV8uZ0gI2cXDB8x3bqYjquLvh/xIy4yI2mwEA5ZQ==","signatures":[{"sig":"MEUCIA5pQmRZOfQ9f9UERvzQrbqE0T1O+amY/u4sQu84Y7UsAiEAmLnvXTu5+Nuue5oQsO8eDfPUMuvLNwy2pAN2/tEEJsE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdOKCRA9TVsSAnZWagAAKokQAIp8ogrQ2Rx6P2t00GJw\nQyDENpPLBVhqphh0A9CZxxzHHsLXjOGhoJ+ftzTseNu0aorlpidFBbHjg5mD\nLVlbj19/FF7u557OEtwCcQonHcY/3Zzyiluu56BzSJ09PwaUukJDBeb5omEX\n/vSshHH3wB6+Cf0yVmTP9zhd58EgQtMWfrV78gopPTfAu53yZRtDJ8idOFpv\nH5M1N5o9nqjY0AGR1ZWjmDcpSwyTtF/J70htBn2IjZq3rPkeJZ2f4sfBB9jY\nusYWs4Dohj8u8UU2IbJxEiTarnHnZFnqIB+W5aJjnDGryG0KyKsl28geHtXc\nEx5zskIm4844qsw2V+Ed9sGXdd4d6Y0/ZqO1WRNXWt3BYAZfglTrglp36/Yt\ni/veJn/i3RXgCdPjX1a9x2Q/QCx8thFHfbgNHfXpfM9XqD5tVcuuxTGvCUhK\nbtCcMXeXyrj30CGc524NZk+r0EZF5YjU5gDa3OqzfflngRU6MpIADkiQB+cG\nOdwv0kbbKQAbxYVCtlK+GwA7LFId8XR0Do0aFakElER0P9LWLTg1kVJZnarX\ntXjL7YY7YkpWMwf1znGtr0msyh+ANu38Y4jdo864Lvp9xXc+2PbnkhC8eNzw\n7VCqXQP9Vszdoi1GP+BizRl0lJLtMfjGgr3hpvvuHb6LvHkOtkl1SQpzYJ+l\nKKHK\r\n=SUP+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fc17c547b4aa66b6412c0b0b56b75978332702cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.3344d12ad.0","@material/base":"11.0.0-canary.3344d12ad.0","@material/theme":"11.0.0-canary.3344d12ad.0","@material/ripple":"11.0.0-canary.3344d12ad.0","@material/typography":"11.0.0-canary.3344d12ad.0","@material/feature-targeting":"11.0.0-canary.3344d12ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.3344d12ad.0_1615975306204_0.7630406046407854","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/form-field","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.6072ed604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c296e330209988b1faf728b5f9abc81db3fbbc83","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.6072ed604.0.tgz","fileCount":34,"integrity":"sha512-Fz/GMJ9prY2V8HcNxxHKXvZLngOFRHge8iWYDBj9AtZPDeuNOUh92ZsaUQsjqtxzVIFLKZqZQs9k59dNaiQtng==","signatures":[{"sig":"MEQCIDQpyTnujNcPum9Y2sKbTsAbs0cMVZgTAb097SESczqPAiAS4BsxRhDnv+7XCy7Elb0ZDnqtcFNnLu+tvXcyGzQfOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUonRCRA9TVsSAnZWagAAqnsP/A//DFmfBGcd+ApOEbMo\nhCAnqKz8GgcuUY4ihjFegTyrKxLmlu3E4yify7F4WwEuGPG9L7tmxOpKams5\nXH9V0jjcl2YB4hf2he36G9+aTJYcKNErVSOhiL2VljA/vZ4BntHHrfYPDb67\nZ6V/XUZQwpS36YrsqWA1aaYYAXSlVbmItjHTZZehZOe+bEczsinBaOcJLNYk\no0PR0Uzf8z4c4LGbepyUwBdFVU7LlHCf0B4fbpOImqW+uPNE07yIJq5ux0pr\nUjq2zNjgxE6d21nGoB4L2f1bIa8LFVjF+E1dllhpJMV2LRuXVoEMj44Bj4qD\n6WU/7YCXeEOvtpNJgU5vNNzlxsZmoGdk/JWPHxuoqw129fgc73SD0mnMhP9s\nk3pwFlcKfiFdqRgQvKQ0wgvs3+oRf2/7wGofFtcnvfINit0N8SVjvtctLoMw\noDo0pyek2K29q/yz+hIonXFHiVU/wvcPlXsrWZri2M4t9FXKvGIUaffMnD4m\nLsnJ4hhIOSio2vjTBRAxBW59BO6uCkOhY6Qzse9f/UzK9WeFyfg5M5qBFol+\nCE9V5xxKAbfDEV3kJfkZ1eIw5x/E9npH4Jc6ppusNPiGQ+eI9/8uZgYLPCAh\n/kZAjmKzb7XxIoOZWZqjueegQEJ9yUP0uLAtR8ziNAcpG261aTXCoymE0VUM\nFTbv\r\n=TxCI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"219b085de7ee97c7b75e5f25dc757e7b5240916b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.6072ed604.0","@material/base":"11.0.0-canary.6072ed604.0","@material/theme":"11.0.0-canary.6072ed604.0","@material/ripple":"11.0.0-canary.6072ed604.0","@material/typography":"11.0.0-canary.6072ed604.0","@material/feature-targeting":"11.0.0-canary.6072ed604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.6072ed604.0_1616021969195_0.41377227334483413","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/form-field","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"578e973510c47029c601e963090fe1ca96c8a82f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.d3a6862af.0.tgz","fileCount":34,"integrity":"sha512-ehlWG1ioNDBkZrsvxV+VA0dG6hFah4qW49GquEwbEROAY54VZ4A2kbd74DfS9tLDlwDQpgTIBUcRmiak/cZ/CA==","signatures":[{"sig":"MEUCIQDknQGzJMCbGYsz1HhDRRT9TqycgcZwcEl7CnHq9/6VowIgL1G3K+vHZ3zOFUSUbyzxQEGr8xB1G/2bHnI7fci1MGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU32yCRA9TVsSAnZWagAAfocP/2rdInt7FcUKST5+rzYb\npopSP5dsQgj0qKwUNQLN1LmLY/reaszeP9e/gcC72YuTw7pErYmVfu7d5AzX\nD/uUaWEbf3g/W2ECNwRXdRjg7UxjGP4NmO5s6q3iPVNw4fIEcVIOHVIgyFfd\nQlZP18hi2sglHn0y+bU+a7aXeMT0MgnN0uOvUFAGXyqqfHtvoemA1z4zRf3+\ndPFH9uaJPDauPt0w4wrFZ7zGtOAuNRRaUMnkd6Q6hwKFd3C7AIc4DwZpFn7J\noY1aes1KM3fJblL2/czoICvJYgxE/RjuEzWmwM/tKgCKziEYzH8gC9V6xtjS\nw/jQG2Y8byfVLS7E240mst025InCGeYy0uFZ8XbojQsGH7OBkcvDjO40mAzC\ngdOa5j7HpOBqdmK7icxSjxetc0uehxS0vuaV2AIHMJVNdm5uXxC99kYnaQ7F\nt7AEhLYiDWx7TWs9oMY8b5gk19nK2eT656zfXN9gDNr6/PKxme27S4du01l+\nVODItGIyUR5rDMuWgeg9XepxOGU+K0FdFqHU7ynj4+b3cppla2ZLfx/binRH\nRzdTZ7vYBICwfGqwRCurtoxqZEVdjp3haKVte6g6jU2JKzxyV62iA70h+d+1\ng/lB27qjpywQGbrU+AwgUHmcI/VnKXKlGWytP+t3oVS7a4hYy5bXBVdUhOkS\nT+tj\r\n=axbn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ab10f53a050cbeb103a3ee070a9134ff428deae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.d3a6862af.0","@material/base":"11.0.0-canary.d3a6862af.0","@material/theme":"11.0.0-canary.d3a6862af.0","@material/ripple":"11.0.0-canary.d3a6862af.0","@material/typography":"11.0.0-canary.d3a6862af.0","@material/feature-targeting":"11.0.0-canary.d3a6862af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.d3a6862af.0_1616084402012_0.2337422720346618","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/form-field","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67424bb74e1baa5b73aaff2313c78e77761df66e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.40dd242d5.0.tgz","fileCount":34,"integrity":"sha512-hEkghMTtilbTlLz+pcFghawD/fRkyZlUc2hZEBMhhWNvZyN/qDuakrK+WSg/wE9yYEiO0Vu8TIV4OS4eLvg/XA==","signatures":[{"sig":"MEUCIDcnKjL8g1On6SqnnYiz5YkcZaluirjcG6fJZmqEjp2lAiEAp1OKgPFK+MDMyJg3EvjksTmayRx7/Q+yPl07HgbR6jU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8NdCRA9TVsSAnZWagAAmXkQAIDYNeGyTsDKNoCBnoJl\nlT/mIbQo/uwFSSJP5YQi3/x4+RkIU9S4MleegWlcv20eCjqAUNE3lglrrFqj\nMt/ge15jbC2KxuO/9yp/OSJEn46mdfBYnwoxxC6J3ieGNknDHof/UzIo4+Vx\n6KYOP9KgrE8VNvxdHcODmvUXZl+dIZ4LPTvyLmkFr4l6h+dDZ1zwt0ETJYwu\nPuZgjq3EBwlaeFT9TCaKpOh0TL3T8Pc632DM+ei818kpJxK0MoYawAlOWFtY\ne67Z0Hq+KaVV5IEM+wMPioTXtvptkwWFn728Y/L5NsTXhF0hvcR1fby1DTl7\nndrJNCe5CMjHHL/aUThfvoCF2+kmbTuHgH96OTZZgnBCiiWaoOod3Gmjh+Kz\n5EuTZ4pkMoZGkFvBvmoVaw5ODuuJIMfi57/t3snkQm9UsTiz/A/7aq1P4q2e\n5WKz9sYYlWx1MZr4uJmKvCsUP1LCqBUKmEbHvdFWAyJIKkWl76I8VhPUGLN6\nUARl/cQ2OJpH3IbFDvLdJlLaXw6ICG1SYSVlRgbawd2O6a1lQbX9vhoISxAk\nvnatLZBQcte9i6uLURopKQRd4jhtGfRsu7SAFuB8RH9Dz24qsIjTmuz0qZnS\nI4BZcZwthN/i+5HeokmgY/KVH698XSEYBw6GnhA4bOJ0mV9dsm1GEDga4kqg\nqVl4\r\n=nxg0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"07de383ae306cbdee42be69fa0a06884d97ec259","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.40dd242d5.0","@material/base":"11.0.0-canary.40dd242d5.0","@material/theme":"11.0.0-canary.40dd242d5.0","@material/ripple":"11.0.0-canary.40dd242d5.0","@material/typography":"11.0.0-canary.40dd242d5.0","@material/feature-targeting":"11.0.0-canary.40dd242d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.40dd242d5.0_1616102237385_0.13918036034630532","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/form-field","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76f118cbc0e25320dc7c375ed5fa87d9bbe3dfef","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.ec8f8465f.0.tgz","fileCount":34,"integrity":"sha512-kCiq2Y5LbUU2MmDlO4xhmI3/hNxInpPxeRn6dipvnJXZuKtyxtvfRWQOghm5CWA6tFlqk7ygSCRnKpZDNE5YDA==","signatures":[{"sig":"MEUCIGm9JPAFJqJeaQ1xqyMicIaJ5hbFKhar9iU6NwlxmSqAAiEA9SGJ04aKXzd9XbZIZp17nvI3CGriMm83+pQyf5IQKPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8msCRA9TVsSAnZWagAACL4P/RpRVqesSAwRCQCQt/5S\nY5DOyl11kFx+DlyMhcaMfrmxqdStf4dKmU56hXl/S+mFeWmLGJ7aHpnITMqs\nhKQIlf9sWig8/76TijKog/ofCD9X+OuVN/7luRega5hTrbZ2bjGwpcKqHQfA\nWpRLufMkaB/uxIlRXOqOd5GeAaWWxq+LfQY6EGwTyIC4TDME/BcPRCSFWUw4\nYz6/8ej90GPToOpnGZ/MkiiyritG+kUiRQ+xHePQwSBKgfvggiw7XWxQzPj6\nPL6dciPnBv5mhVL0nWLkNfpdzrEbhgkw9WtSOnzPcVPbA3OPHNHctb+g3acG\nOEc7udgB54uEWELKUZ3ZqpfOktISqWMYOW+AT+GUeCgkuQFFYuPxZbju74LA\n9nZ9VLGJPq4VRcuO2wULGREu1iUdtF6RowpZm+y46e7axuVGAkkt4rEx8+x1\nQChagLb8pFqc15wcoOLNZ/AehTHoxtW7GEpl57X6diZfE4wZ9J8LoBAkhYuQ\nlAiOQ/Wj9s+SWzDZiAXGjWHWUTd1N3+ts7Dqd/QtDn0IqALeDA9HneznvFzl\nJUhaZmq1wjqPm0YTVYw9R9+r5KoMicWvPmQOhFwq2BWUoZHA3NBX3/HIEaMJ\nZLi0+eq6d+pjdbqNsEsfc3T6RLP1pou3XFn1UiZaX85AymfDP3vn27PPVox4\nCw6H\r\n=M92N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"896f8e45effbe3c44209b4542bcd3d10a7f8421b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.ec8f8465f.0","@material/base":"11.0.0-canary.ec8f8465f.0","@material/theme":"11.0.0-canary.ec8f8465f.0","@material/ripple":"11.0.0-canary.ec8f8465f.0","@material/typography":"11.0.0-canary.ec8f8465f.0","@material/feature-targeting":"11.0.0-canary.ec8f8465f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.ec8f8465f.0_1616103852289_0.006292112300661623","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/form-field","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.da38969ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b32ef12eb080a27246d791e18105811748fc025","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.da38969ec.0.tgz","fileCount":34,"integrity":"sha512-YnnPrzG4FSfn9gZGaQUkdMoCcOWC1SqOvxLVQHkwVRHMiOH2mmouQPvC8DdSmj3LdvDlrTCUqcYirHFqsiUX3w==","signatures":[{"sig":"MEUCIQD4GeQT70FxT68P4y8L8GQV4EPhDjroz7IKgA0Tjpz89wIgCAv7WxR9iqUJntQRQ1fHqQ129hf9Zgc67u247eOdi2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9GTCRA9TVsSAnZWagAAH4oP/0rIty2M38uSdbQov1j4\nf6ZJ0qJrdHue3IAHuKcG9yxIhDcZ0Q2Za1GeKZTYq5YcEByB4DjxpdE4051d\n9Xs/nGdymMzc7D8JOivxIih0xXbxJM/6ghwXGtYzdlvWyntWWQJ0NGgfWqwt\nTEdKPEetmaQy3LO+ucBlR6LenLkAqR5UpYok5DHxTrmEkHsHgR9hQGldM3xv\na1fU+E1PgucF6TUMF0p/EWmqWogVf1GChiYF7cp8F8BeHKglJq5UOj5VGuu8\nXKptHfEhJAH67k5ora8WipmCU3BrfIJxYy6qgmnXBF4OUOYZU60e7fkiWeu1\nZRSGk/SnifSgie3kPNZUgN6cYGi6PEJbjYw4ZgIHDsoQh2VH7wzhPwe6AnD5\nv1vRBZT/uQj7IcQ1uuTdmtar9u2vYWH3d7tArZjp0wyDKU9AnmJP0MVow7fr\nV0F1M5wO5iXxsbKT5ozxhJMwrA8RbHwLe/Hz478nPPKaK6mhbtAZZc2le3BW\nJpWxtGPWnAf1NxX708B/j9T5ZZewInV420vLyBDu1KXdL2UwXLB33QsbWR5e\n2BhxT/AeobX4Y4ldT+I0lk0praBf53GtCnAiD1hVt5MVPfXMziAR/DkYf8HD\nSRifKBHea5aPRnZZAr77E0xCTTqjGj7zRSkGAnVOKZSpCozSSJYFMG4k9zXT\nA2ev\r\n=J2pT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b43d112facdf74c62e02576a918d522587133fa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.da38969ec.0","@material/base":"11.0.0-canary.da38969ec.0","@material/theme":"11.0.0-canary.da38969ec.0","@material/ripple":"11.0.0-canary.da38969ec.0","@material/typography":"11.0.0-canary.da38969ec.0","@material/feature-targeting":"11.0.0-canary.da38969ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.da38969ec.0_1616105875373_0.5116161343810661","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/form-field","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.f5246264d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adcc132e0e98a1e92539b42ab407631a1b918ae4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.f5246264d.0.tgz","fileCount":34,"integrity":"sha512-2af7Ixa/lJZO9nTeO5AYiL9yDQgoDnCGjQusmu2QDjbVhQeGjE7xKrYRF3VHlCFBow0Gr14mnSpJMDk0G2fIaQ==","signatures":[{"sig":"MEUCIH+Wp/hCY6jf0J5EjQ7dXC1G9okFWXGysezxtRPGS8owAiEA8MB0ZdzC6U6iHZ9NdnyiuG+cfsS0pk4PV1q0X1S33qs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/JoCRA9TVsSAnZWagAAkGwP/1AZLSn9W0bU+TDLyr7X\n4zqEDl0BlSAUZvHbgcXXM4fHh6ByOcWDOTOdXE/MouvCf9V8gWAzGF0XZKua\n9diQPLGzu/MA5UGKfT7Ji0yni5XYk8mNmxU5CtWZvg7fRIGrLTMyuCzsTA3E\nIWgP7sJgE+x5FzQiHKSqyZwnqIPrIIpT4NcrPoRTLJZY8NcSqRoVwyV29lIz\nYI9Dbui7Szpxf21MMvTic0mUP7CMwd2QcQ0tbLN75YXNRZsKyBXbbefSLacF\neI9vizfz55xSEZAfHnuP1Lso/PAdHCbo3qU7FnB0HtVTZBnTd/0uMozvsKrS\nuNMC4KWF+n+zY9N2RS6OnaDF9V1jIpW5kkQu+LTe0wNFTPAlEWrNycSF0pBi\nVc0lpglxwHaonZ+RLJPJNmnQzwUqobXvXqdCfJ/9zWtraMu8BaxpqcYLsDtA\n63UyNRPnCo8SB7ApQHfV7t45yWdqAZ7tsMDx4YogQZNm2U1ny+hrbtfgO2+P\nh0LgBxRoP1dvxEs9h87GeDBKpqtNFifcj1gMJ9HhXyGLAAOiL/TSum9nP32R\nrFFZ2EQz+vm0QhElJMRPs3eod2DjKO6S093A8KAbbN7971oQb3D4kvH9p4/C\nf6Pc0ZOzMlrTYgOozgt2BHqXebKC8ZsVv26eNSNAojMmZ2WT801SNT6PWcIU\nNqgw\r\n=kstU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e5bc1717405750210bb9d7e3572f0cd36c9bc0cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f5246264d.0","@material/base":"11.0.0-canary.f5246264d.0","@material/theme":"11.0.0-canary.f5246264d.0","@material/ripple":"11.0.0-canary.f5246264d.0","@material/typography":"11.0.0-canary.f5246264d.0","@material/feature-targeting":"11.0.0-canary.f5246264d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.f5246264d.0_1616114279580_0.9590522967392097","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/form-field","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ca4ec551995bb5d4cab6c31f879ba23f5f4d453","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.03d34bbad.0.tgz","fileCount":34,"integrity":"sha512-Ph18bzpuzDA7qjcgmc0qWUbx/tLL7LdKAKPd6888e1x73YUYe/YDjXHeLxlaj7UuYqdgagJ5+K6SgzYJFeNyLg==","signatures":[{"sig":"MEUCIClhjAQRoSKhGNcA0H1BvVDkusDcT7Erjaa2q30xECBcAiEAv+gPHbomUPEpwEGnWZGZtPA4sqGRB7hC2VgUd+m+MIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/WECRA9TVsSAnZWagAA8oAQAKMtuC7vhfiugyrSg6iS\nPtIs9ubQdfJ0sDfkCKHcA7Rhhm456o1viJjaMMtKEWnWopC2nHq8OyT2zCPE\nPqZyXz3BIXnbwfea8fM9iK8tydH9tuyontoR/WaurkJXmJL2zBEdsURb+Iec\nO6uQHMVqjScBeWgkJ/1r4GFgjz5IE3/Wov7rJHzlaIoEHsxSK+7Swps0Q0zX\nLqTpOyRZuYMDAhiuo3jRxY47bFMy4MyOXXvHfiTdi8Ewyt71UhB34cwNYTNH\nLJTiJ76WwtbzTZIEKSIWocmBHcCYxPBAoTJZU/pk5xPRq/zSiOgQyASzkFZQ\nVqJChvEoTvboVYuTmzQPZKDcSca0YYz499papwRlPDkHVdb6MsRxTcFeHQ4x\nnWPm4ivwOOggClEAkqI8ozUCzqsLjN/65j0SfercHgGygRUo3CnVsSlBw3Np\nAGWKUxa1GnZa3AA/sw+Aot3IVdg6MFLbKr97JODBweSv/5aFv2khoDowRcrq\nXr/lnAlSuW4YSq2nj0u8nAT6AenjQStqrN9PL+YfheH+rx7PaN1Xr84qx1pN\nV6NBzdzskoWTSvKgyd67474/sJTczB+3urO0Prd4wF7bHItmUm2lDEEe1Mt+\njrdpsrtwvxzUnyt5nIGaucNIvYw3IM7OHesQlKnaX7pIWPuvCm6RyR623KZV\npPav\r\n=kmId\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"650c89999524e7131f5808d28c8ea2fa15db0c86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.03d34bbad.0","@material/base":"11.0.0-canary.03d34bbad.0","@material/theme":"11.0.0-canary.03d34bbad.0","@material/ripple":"11.0.0-canary.03d34bbad.0","@material/typography":"11.0.0-canary.03d34bbad.0","@material/feature-targeting":"11.0.0-canary.03d34bbad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.03d34bbad.0_1616115076037_0.29679784949390475","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/form-field","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4e860b1a1a73aa7b3857d4062c2c097208d5bc5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.cbc57c600.0.tgz","fileCount":34,"integrity":"sha512-iP1/MB4YG45etixJ0bOBobiFgAQMa39Lm3XCxuIYAN5Q1Pltj8mrTjbM8fg1huYRCOxKEQsK1D7E4uBluATu9Q==","signatures":[{"sig":"MEYCIQCwAx/f5hACq8ddJfcXMLmh7rrZrX57dxmBKIBmgOQIxwIhAM+oGEFJsOHdqdyAgWXhuBnzeNKz8jC4xqgnIfVwA0Iu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/eBCRA9TVsSAnZWagAAwScP/32u6BXVQdZRH3A3pWGu\nWLy+R+ucdX1ebtS4NehPZ/A7dgeu6MHsClgOP5aiM+bqkvQ3KGyXRgWr8zIO\ncs1klOEYnEYt9O+Wk8tnc5CcJ5nw8dmrNBOZ99xygeOofLQ2/Q0n0XD+xmbl\npTBqH30PRiqSwMLTqba7fmtmni3Fc2H6uO8FIVLfQy0EBvHMYgjiyT5MQlJw\noOvwy/CX5aGlGtDC831NblvMOmThstH4doE/1x1ZFbKuMfRx3gIT49inWxhW\nLl5yZnM6OTIRvPFINIVp8y8dLxN16w3wAg2PiYEn4d5S7m6U+Fv92xDmgOT9\ncR8sN4Nmf9ZWFwhs6e96wLQ2UEPQvFbJopDMEdy9/hxnHSRXSkGLJKx45WTu\n3cEn+lXsAgBNUzcMb8Dvsr5Sqy+1B9odXw4Oel4BNHVQIdTNvpYGAdwypoww\ng6ihKt40BxfpzEt8LE6m78ebg4sVF+cNwUmNK1uJ9/GtCaK8GQ4ucg0Ix+gC\nr6E4LutJUwumfUTmb7FEZoPT1e9xj5lNricD1cFWQ4hbxS1b0cvMxsYVmjE1\nitrx/NNmVxjUwe/BZrPQdX60AftCISB1GpRO2awaaSGjTg9MBVMeOxQnyRzX\n0yRDhUcxQZVEH2xJWS4Xo2bfb+p5/fqzt8fBlPPhIUhTSsVPfv+gtL1px21m\nmpHY\r\n=4dIX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c16ee9654e2ac3913ee3140dbc31e34bbc443c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.cbc57c600.0","@material/base":"11.0.0-canary.cbc57c600.0","@material/theme":"11.0.0-canary.cbc57c600.0","@material/ripple":"11.0.0-canary.cbc57c600.0","@material/typography":"11.0.0-canary.cbc57c600.0","@material/feature-targeting":"11.0.0-canary.cbc57c600.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.cbc57c600.0_1616115585261_0.0656226473947179","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/form-field","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca08c3890164b9a5abfe9b98e1c459cae72612c6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":34,"integrity":"sha512-byIdOFjRX85T65vmEwU0sUnQqDMee+MMAYcxk372agjdp1jOaLGem7/znF7WEeCiveM/f1Vm1/pslrACzvDZpA==","signatures":[{"sig":"MEQCIG10Uv+gk2RYA6v6IvF/095o6EkxvT4II8CArh2xn/oIAiBZZUnLYVs74V7zfakwT1/T4qZFkOH+kZW2BBAPWnyqUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/p3CRA9TVsSAnZWagAApskP/2mHkaMiHmbOQ4fSigF7\nsItk9kJB/5bKWBONUVsC+uQs4LKBIcfSoHJVC7fsLzG6/Qs9BoMxbNppxD3a\nU4k8Pcsyx6h/HecmJZyU79QiT75+ZOFqF0WD2cmuGqFAK4W/0lt2JakmEDVB\n1Oh6JuMv8XqtOH52WTXKKaIXEEr0NzgeVyWEAohO27n5twIWy+JOfYDu8684\nOdjcXtqB0vclQrvCfcEO84fCeP3mltWYD3olmkYepGYk66DDV79liEE0a/EA\nm/g+xFkBA4r/DI0l/uIMQbTRy9K8MeTFUOid4q+xncTQ3f18m+yJiG330ZKt\nFOT8MaGdCmFvcwH0BIpT+KGCt3+j5tKwS+rVU4yHvEMiNdA3FWZY87p5PBWi\nMLqWqr3GCL17FB/IOURAZcAsH3oUCQb4RGaBA4fwHT382KzjGncVstEoBgpW\nHX0Ef4czBLxFXXXf0tT/G8b/R9snsWffDvaZBJ96XptVmdn8N/J+heE+RCem\nKHRlJEwhvUdxA2NYJSRutfZhOPXRM8Q5J/pn78hc3m8OcBpXjZ4HsYvBQksk\nmGDOlitTii2GeZ4mBzlQyUVNuD2XZ2tGvdcLoGArGVDzO7KSHrApfUvwEmAF\nYBS4kj4ysCIE8POz98ofhkOJgM+CR1NUS2pNm46p+sI9wU/doTM4ZwTMbYFV\nySoR\r\n=YaKC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7ed31c18c565964157fdadec7c7876ba58c6dfff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.d6c5bcf37.0","@material/base":"11.0.0-canary.d6c5bcf37.0","@material/theme":"11.0.0-canary.d6c5bcf37.0","@material/ripple":"11.0.0-canary.d6c5bcf37.0","@material/typography":"11.0.0-canary.d6c5bcf37.0","@material/feature-targeting":"11.0.0-canary.d6c5bcf37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.d6c5bcf37.0_1616116342716_0.06584547943750807","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/form-field","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eff2b5edcde9c8c8db0ce83d6674cb2f49b29883","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.fefc668d7.0.tgz","fileCount":34,"integrity":"sha512-NOQgZED0Bq4ZD0Fgf6hJzUUKMSBchb6C5qlFKyQ4VvMtI3THD8XOMt+zdEuctotjLv52tlkMQpulKSRxLxRuYw==","signatures":[{"sig":"MEQCIEt9DlWs4tb9yNRLT7w2blLJ4Jjl+5KynWH/VZKFPrJMAiBasucn1IUYKQlniNwltChnrlpuwAagB+HqZjTbn4l2eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/9/CRA9TVsSAnZWagAAlY8P/1dhiU5N4Llj6fxtHzox\nty/Fm8QyrjtV1MdYqGsiOl6+nxYxqKILgbN4PbPRxD6wM2XIu9FinAWXNUe4\n9TEa1beN93DyWIxKwyTFFdhmyPLnm+JgTQkFKq1sp2Xv0nTQSTtSkG8BvIwi\nzKMbjWxmHmp24P4PdeXgi6xdm19gY9xwIfk4H0g5M/LJzpbfeIbQQOylI0pG\ncoO6gMUyQSoNtAaHyrtF6uRw+tdilkyIuT5HxY6T/hrsZv9j7TYhqWfJFa8n\nsno8vJIL3ljlXNeKyX2BswWmQWLj9IWeqm9i74hmaH/0mgoGM1aAbYV21Lpl\ncGMfQzthCQ0DqcsvWylNzt/HkCsg/G+OLN7W0vyeDFM1zl7mlzSDb9AOLCpb\nqA34Ux4hy9UiploOwzy6uTqs0sviRDM/9o13NuNFtvoVeMXjZQxrdc/CSIyP\nEqYoATUvAKGJmus4pvv023u4EcP9gxeApdqjzWddIZcpAXurifNdGuFNWy4E\n5ybsX9Nu/08NSrksudx3O2NJbXAuXUBdlKu9m20XNhGnqNtGyONiHWJL7HC9\nTTAWxnBiu5pWD7BeBlKTNFL7AG/Z+VbSwqIyAKvdVMmTyYLNvDNKoflJ1UlM\nJg7+CMO32/oQ5F/MeuS4UFsMN2l3yYhoOW0nu47mWO/BoluplGJ6in44rxCQ\nv9AA\r\n=eSDX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7c976c590b16e8f3a000dcf5cf2b4daf6269aa21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.fefc668d7.0","@material/base":"11.0.0-canary.fefc668d7.0","@material/theme":"11.0.0-canary.fefc668d7.0","@material/ripple":"11.0.0-canary.fefc668d7.0","@material/typography":"11.0.0-canary.fefc668d7.0","@material/feature-targeting":"11.0.0-canary.fefc668d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.fefc668d7.0_1616117630821_0.9680441108430249","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/form-field","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f82c1942a36dfdb75dfabed940a3e687a23d1b82","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.faa7d3226.0.tgz","fileCount":34,"integrity":"sha512-xNm3duAcIGnXBUAVi2ARRE4kY5EwG5T4cY3CsmjdhvaCWJy/fFwTD8kxSQUiYPd/3M43xMRjGclIm3/IMvYEDw==","signatures":[{"sig":"MEUCIHu0pqvJyHUJaNmTq4z7rslAdibRhtbsIDnQQKYNHyjIAiEA4l/FWq9VuwCEJTdFJPAL9R/XlicVZ0H3JK1mVPFgK2c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOLoCRA9TVsSAnZWagAAHlIP/R3SYQdlP/GIEebnehCq\nyDJa6MYD+NhBEECgVsen2ZYkROSsoXe8uJF65oe44tXEzUtT10YZ2CWeUNxi\n8xI1UIFjmlXAY5c+YWHNW8uG24xYV0k2OEQyNWzgjGPENDZQkDhzzLofUnaY\nK+V8dvyNUMXUaCIspz2uSwl/16DfINS2C0Kh+/ul674yWuaKBEcgAR0DLQt0\nFuaJIqxaS+kPK9O0F1cAmB7gVjkhItPpap9lNqET+oDXBpR7w87iPxCYKZQk\nX7VQJu9fEygWstBFBUodGbWf+BYTWmjvS+p1gKarbUjxrfvkkp0o/OGa5AzJ\neq2vBGKyRidIcEgyv9SvgLkk8+r0iy8oDgO/8aMs+YHnAzBWtYQLAKv+7aKR\nLbIyXdG9kkFsLxSz0khS4O9AB1HJigfDNMYa1l1WqDJlujf+jSQOrnkcQ7qR\n8Tr8UGmTWq9R/Lm4ll8iRKx2wC7vtAFSkEreWR9uFDMsJp63IwRo3X8p2l6s\nk+lravvV/0ZZNnUlDD45XUNTTCTSFUzHcjjoAf4hssC1L6OV/RZj1+vJjnOp\ndLqqOFiERtszgCntSKZT6lQZt/UIJay3U7mu+5xaBZzG7T/oGisaFUXB6WQk\nwCnd0O0mZHaAGUPl39nqJZ9Qv2Zx3S3IKyom8nk2y8JJh0mB7+eW+ZzTd1La\nUrup\r\n=1DZi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c6038c8b2af85b70f2434939a69416e1593d5a36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.faa7d3226.0","@material/base":"11.0.0-canary.faa7d3226.0","@material/theme":"11.0.0-canary.faa7d3226.0","@material/ripple":"11.0.0-canary.faa7d3226.0","@material/typography":"11.0.0-canary.faa7d3226.0","@material/feature-targeting":"11.0.0-canary.faa7d3226.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.faa7d3226.0_1616175847755_0.3227909810982086","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/form-field","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b21b1a03c1f4567f79edf120ef304e0aeab5c2f9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.c60449bc8.0.tgz","fileCount":34,"integrity":"sha512-wi7l+XTYWkRlTpt/6mq7K3zBuEjTjJH7hb72DkbPrmxs7VGGrd1oHV4BS/xoeM8nNDMckSyUHNBOp3gTQMc/qw==","signatures":[{"sig":"MEYCIQD4mYqqA4aEhsPlhTFtpyClUOMI8/sHOJej4B7SX7Q2qAIhAMFXNVF6B/9OTJdLKGRkglT5uTZ2LDbUCWgNq+b7QzOu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOfUCRA9TVsSAnZWagAAdZQQAI9Hch1nOSRb4ft88w71\n2oc9gRnE4kGkq11z8P/cKaViQW1AXXSknBS3nwiLFvsAkSzegmFJoTyuvO0o\nI/TGhgH/f+Eqh+BuColfnTBkxH/bALoBwUJ8D/8iL52uTd7iTWu10xGVoGYo\n/rw1C2so6RTyl9UkkAQwp0EdyrKSWahxFB6jWqLVWlhKRvLgJn5MsV9fY7KE\nM8yX2JqEBiHmwhShIyCfjpgHmN+Rt9IPsvim0NPRsvzJxAl6siIo+pPij+6H\nj0aYKhYMBrwj54XI9+3OFr3n44ZSRGO+oRH6vfOvX7HMhV9F4V+hAKiHsR9c\n4gk/Zen/1+aaPTRkCJ+fSfbx8JkHnGhQkOHeiJ14258kyNx4MxRrTBXrFPtu\nY0vBoVVYYCmEcAy/+liuF2Q1EfNJa7UEOmhqzhYGL3b1OpJTRbrIQaW9vOSZ\nZmvkqXy8/OERHnLcfG5oLTVyg7TSuM7UrQOMbvbO9NjnuteWd47AMlKCGM0c\n4fbm4DO6gRdbKzunwOQ+pEKeSRnFResHoGLm7djv85flRjHh65qHZI56711G\n0+4OFRu5G0xewq1BoZeYH071rhxNYx4oaRUwNzI4tKQnxaOjnyRbwGbC6DW8\nbjhnM5dPjz+f4crBYWq6c+iGfIJfBhezW+zaIjlkbKzWV5EfXrIuuv64qLbn\nE7Nr\r\n=tiWV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"874083f8b4dbf457158a7eaf9924ce1143ef6fa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.c60449bc8.0","@material/base":"11.0.0-canary.c60449bc8.0","@material/theme":"11.0.0-canary.c60449bc8.0","@material/ripple":"11.0.0-canary.c60449bc8.0","@material/typography":"11.0.0-canary.c60449bc8.0","@material/feature-targeting":"11.0.0-canary.c60449bc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.c60449bc8.0_1616177108152_0.8809445571779022","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/form-field","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4eed0387795242dbf4f9de8086b29dff355b18d5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.5f0fc444a.0.tgz","fileCount":34,"integrity":"sha512-V1XEZRcgSUcCwGwQXs6Z0P9ulZKhFPgEmmvFKgB1rvm0rkaw5ELPPhSXmdRvlbarzQ0KxVqPomK6urIspnPPIQ==","signatures":[{"sig":"MEUCICBAL4ZAU5I5ICRobSDOJExK7JDX76LYnz/311VuMo/AAiEAuDoSxEq492gqvvuUToMrXmJEVLLBoaMKIdxau6I2Lpw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO96CRA9TVsSAnZWagAAnfsP/jKnHdQBujcM9Rh/XVGQ\nYvaGczvHkK/wwsfbedekYMekuKgjuMp1rDSa1ewQxLLeT0Jzt/E+sNc+HNVZ\nCJBo39Ivf0SIZPR6ISJwG4EfwiDwF0xn3KkbTZ71W+g0bATbCb0XFlTUh2kQ\nVGVKAyTw1KD95PA+QpGgQORC+4PVvVJpIrFJOXRHna4jSoq9qdB6Uzi3AwX4\nplXaxjGZCO6+Sf2M7NA4FlzZAKUCHqfTDxiE96DMThb/eneU1mgs29BHKE3N\nfUnotXKV1mhNIjETsKJOrlYelS2T43Z8G8AjJuZdXQZUcl1lOyQBqpHFO72L\n5bgfLMuSxh9o7M6NOgG4HPIMaboDnzSHT/4dDeoYombw0EvlAhGHND1Pbi3+\nQA2XQhJxuTSVE5ukdUDm92ZZrtcgw2B01Oqqa2ijCCjVDnjqFMIKbLQne9IZ\n2eRc1Wbu71p7VyJbKnAXDvZe/0ucEleY3A0pVNriSEyIDvdl+4aIlhDsNlPs\nxKfrDRDGbeN0oU7KnFw7aYqAU3DL6jnqVfLQxuRipDHSFj6+LO+3DR0uXeEE\nAUXqZz7ju4wraN5K0oGs66iMKQ/0i+Dd5XKUiAvYzbEGwrUHMaDxVP23qjeN\nooXCT4setIh+6gpeefMCvm4Web4VLlhM4OK6CIfKmBgiVwjFGw9ItcBPTmKo\nclQL\r\n=E+6w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"122f31622300f5877c850a516d74f7c692d0718e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.5f0fc444a.0","@material/base":"11.0.0-canary.5f0fc444a.0","@material/theme":"11.0.0-canary.5f0fc444a.0","@material/ripple":"11.0.0-canary.5f0fc444a.0","@material/typography":"11.0.0-canary.5f0fc444a.0","@material/feature-targeting":"11.0.0-canary.5f0fc444a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.5f0fc444a.0_1616179065609_0.2818567517181183","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/form-field","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.4567a750d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cec4db4c3683c4a04a6f59948ae8feac6262eb1a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.4567a750d.0.tgz","fileCount":34,"integrity":"sha512-52QeNO+eM1UatTsbfM9QJBL6FZ3+iWhLbakIzbznXW0vhcyQn3i8B0iz6xAZiIq6fSoxZVvKeqMyfYCmVpA0jg==","signatures":[{"sig":"MEYCIQC/rT7Skd28clkmR3tPjAEjQCA1newdKsYUE30tt+HtTwIhAObCF1WblgZVA4z3DDDi7WpqWDKrVeKVUtBFR3+OjJdM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVj6CRA9TVsSAnZWagAApoQP/18BSttxnLt9HQo6Arp2\neqLtaE4bfHj7vykz+6BX/O28kcf49pV5DxCB3GajrM+mtG72cn71RdWurelB\nreG3ns5plHGPDbEEoY/HRRkdGqstjKg/rQjulPmOXDeAHz2RLADqwhqTNiQZ\nfbJ+1y7L5+ElvwyTqydOuP8sSXOE7LG45WYxvNKSwngE73tGSXbfhpIf90Pb\naB54G3yHaVaJsUN6cYi8TfhKbhDkmtGELBMnz6RXH9HjaMUNR6wNi4c6k5WG\n5jFp5cEmYFx0R54K006sDdcVloxAkMn3l2VJKshhORo617c8XlC7cDZfkgtS\nBkn1jjlHTUsYvHWuTwUfRQKJsloUdMp707WirhSlBOGAYsWow03iLcRydk+3\njQ1lrzrUvTmcfTJfr1ZmlClVsPgfHb6qqSXEUuBUYxmJQTlmw79gkLIfSABP\nnqfBOjbVBjBKX1/JBnwAPufdXlKuVDjtMU4ZrqfYZKgSS8RMG9JoU9V6W9fF\nvI3tanMP3/YKsQrXU3kXT+V/F+25bucF/4Uf5tg8AkqkSxUHcCPPtltSpb0d\nmA4Yfz0hYZ8JbnMEVJ5Qfm7wz2sWZdbv50pF5ZAc7Pw+p0Px+oLFRZ9V6o4Y\nSr9nSkIGA67SgDA+qrrE3vcwo1igoRe6BqvzQYgYnBVIBxnQUdu6/tSZcYS4\nrV1M\r\n=aH8U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e165b3e1af02e963deb71d6f39a7df6962710c30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.4567a750d.0","@material/base":"11.0.0-canary.4567a750d.0","@material/theme":"11.0.0-canary.4567a750d.0","@material/ripple":"11.0.0-canary.4567a750d.0","@material/typography":"11.0.0-canary.4567a750d.0","@material/feature-targeting":"11.0.0-canary.4567a750d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.4567a750d.0_1616206074394_0.7879252191652808","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/form-field","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11f2e29479eb8c90bddff73853155e34e3952906","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.0cde52f5a.0.tgz","fileCount":34,"integrity":"sha512-Xjb4CCRvkD/CSfc9eSuXdzERMZXEnX0THXC0jcrP7IuMdbPGTtJ/Jf1IEqkP344Tovh/yS6MzJG7CUi5QK+5aA==","signatures":[{"sig":"MEQCIHCm9SaJQsTtuA5stXir+gEjg8ml7jvi+NI+kz2d2UOUAiBixPjFE7leFiLFKLAh3yioQzV8MdOeEzpuYM8LQB92DA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTAxCRA9TVsSAnZWagAAe1sP/jfPQUe2pUtKvNsyTYIf\nrQJ15zeApprauMPTUIotTRlCJCWmD0PpI+Gfl9pwW4m9O4SiZtyDNZn9mMKB\na66kfJ5+ouIajEke+gir4+WTSkswThlpaS5IbG3h14UQjT/2h1Q92oZMaO2E\nJM/vseQ8sHgoxgGeftxi2/8pYYHpqJaPZDt+dPM5Bq7044OSr8GukX/mg/GJ\nYZBKnrQL1pfSY8x+wNcfI4OQFKorfkeB4JywBJEja+DezbKo45S1+fFIVXmE\nJm14Z6AYrduDijCz3VMJ4s/mKwTKZZ5ootKNFLhXooWe+/cFXVLMffkOYQdz\nPRk5zHa1hUInCgUcAzq70qtng19m7ESh8u+Z63SWVFTF8OYu4AShOh/36SdA\n1Q9B4nsb+25XqfxfFO9y6AuABFKu7MZASn1iOlybrEnhq/fpMNjPkkVgoeuY\nMkR1NEkuVbJVHVX0u2ypYq2FIbSbssvb5Xbj+CpH/G0kSd+ZCm5+OsQsnKUG\n6z8yafzU74uoL4gjXKp+W0LsoFVf0MrDBv+yd2qJWYyRcNHrElaSpeWhdWbb\nWVOJkGWmiCZ/8rYX7lNTKh0fN2G8wdBWPnHdiKw8Rtpt1xRUiAEXD3oqeKW9\n3X8siQ1oMdk0rjAGz3Hj5FaY57Kt3JyCy49nZxQMFHuCSdVJbAY1hvX5aVsA\nxWRs\r\n=hQ7e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6f6719c5270f569fd2ab44620e89ccd53a31f98c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0cde52f5a.0","@material/base":"11.0.0-canary.0cde52f5a.0","@material/theme":"11.0.0-canary.0cde52f5a.0","@material/ripple":"11.0.0-canary.0cde52f5a.0","@material/typography":"11.0.0-canary.0cde52f5a.0","@material/feature-targeting":"11.0.0-canary.0cde52f5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.0cde52f5a.0_1616457776884_0.762536315099928","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/form-field","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"565481541d7c418ad2a296b5c2d9e54409558074","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.48f4b67fb.0.tgz","fileCount":34,"integrity":"sha512-lnHapvCkg6rNFyjvAUxfvq3XX0d30ODvqtsPSGsIQbEbn9ilV5hLsF1eCeaa4sSBvTerdb6+T9SA2sDJy+WLow==","signatures":[{"sig":"MEQCIH6oJpJPZ2SqiCFyhgLP5bXN9D824hdkLpv7cJ/83x7MAiAbx7zSQldLGC3D9iv+lWAj0RvDW54ys0EvqrsEHQDfug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkdhCRA9TVsSAnZWagAAyPsP/A7vzUZAwCQTYlxe4QLu\npBQIrKx0FqKI8wJDgF9cjQpILT/neP9O0T/Am3tXzvwR0f1CF3nGHXkcGfEX\nJHO8nXk81HCuluWgpIAJHB3hZR9tPBZFTq7tJjghzQQ9zVtIXMlU7ZINUdEi\nrBaokZWRT8mZlBOcZ7XuAeNVS3OsQWxWw0aJ6QFXl8/j24LdaG5+nZk7qolx\nqS3S3vhfAlmPaI09bVIE3s9tOvkf53+zzVqHpYaCWf/XTxT+8nXmqDOozbq4\nr22+4zPhwzTkTIiREbth7nse3/HTQ5uKwTQfIUtwtu6plMYdNXb+EGm1MgCl\nwYO9TWW2c1fmrt4VYOeTL3fzl3+ApsFB0UN3APSdkzd2C7mI4Sz23aXNFvbL\nSsiabBLtwrGeEUuMbwdR2yR94V8Cf6mPre6dR5KgugkofxxGUj9n5awMR8qo\nOKBM/r30Zo4dav2psovpAOXBddbouG0L0VclKy9nkIdhm41mfkmMsXyDRh2t\nj6yavrFKZsvmpHnJw5qukhVzchuGan1wpR8WThuU4Nkwsye99mmFmxQiPNpH\ntCvTbYejhmZdQa/DaquJJT7OtGoQG4HYZKd90diwEqRINnlNDHud7AoeFpWj\n5tyUrzwTui6AXblt09HCAge8AJpHsivE4LaWymu8CKLKP7jf579WCjbW16F2\ntaXc\r\n=L2+j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f83669b240feaba73206d330f10c80a9aa31c1f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.48f4b67fb.0","@material/base":"11.0.0-canary.48f4b67fb.0","@material/theme":"11.0.0-canary.48f4b67fb.0","@material/ripple":"11.0.0-canary.48f4b67fb.0","@material/typography":"11.0.0-canary.48f4b67fb.0","@material/feature-targeting":"11.0.0-canary.48f4b67fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.48f4b67fb.0_1616529248884_0.8947086214345725","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/form-field","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"431b02a84183a2c5f6e00d676b3d30125136153d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.0b8cff734.0.tgz","fileCount":34,"integrity":"sha512-zaKkTnBoVi8fP423Ow5L00EZbtZEp2Jy09fTf1/jruUPk6IiLytn4bAQ2e/EzirUCfSF+xekK8KpbIusUNm0dw==","signatures":[{"sig":"MEYCIQCK8dJgSKlgknyjHyERPb0gpmSVnhxHJXXu/it+PZqdNwIhAN8QDx9YKsh0dXBD35NvOwB1Htfo4YZfomBdVDoyUjiK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWknXCRA9TVsSAnZWagAAeJYP/1HmJzG9r6Ya2LKsHmGB\nOOmEywHS5tXCt2shQ6V4nGKQYYzCNDAxn3FHgLKLcIA7UhjbIzX6G0HiGxxr\n2zAQdAG2Rey9LvfIrAoRe/IPLvms3Cq1esCra9rLhynX8rmYxHQ+wFo3ucdr\n6E4TWaAF4qM8eE9mN1Pes1Ju/jG6MEb6WbgYxsObPMSbqJM9szeqTuZGiFJQ\n+rWbQBEOI5XzZiWzFGhky/0MYOzBBwv9P+kfGBF3R0DJmS1obPXgL/5e2OhP\nE0KZA3X7On40MU+2xksAfzfdkpBHkh22jTeemYfH4zvgn7m3iSAv+R0Hv9LO\n3rsWDM5IZln5G0DADmuqSBW0T+q58PdXdRQMvcjvQk3nzfF3XVzHZ0qzvt2D\n7wHTMltzgBkeZPW9emqC73ynZVziXcsBhQvxMLzgFuQ+cxM0RiaFOg3X+9Fp\n54yyO2T+ZcgX621QS/1eSRKEuhWZEALMlsisva3sjmPQXL9Mb8FInFQdggyx\nTzrMtMRgM55s3L4GSoCTtusWbBxIHe2pTCcAkp4Ye/SxPSargvytNSgnSsdB\n0WinyQUJSDFRCCSHWsAObwrAR1hNyR5ocmRwN2NxPIUWqC7ixUjznm/IWqa6\ndn3lu1u8NUpIQvs8dj0quR5QpEnVUaBVyCC676Kt5LzHIAWvkz/jzjF1RgU7\ncuS9\r\n=4Ve7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0371cb1671557f9e1d8a3bee3ffce11bdea058d8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0b8cff734.0","@material/base":"11.0.0-canary.0b8cff734.0","@material/theme":"11.0.0-canary.0b8cff734.0","@material/ripple":"11.0.0-canary.0b8cff734.0","@material/typography":"11.0.0-canary.0b8cff734.0","@material/feature-targeting":"11.0.0-canary.0b8cff734.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.0b8cff734.0_1616529878639_0.13009104601183052","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/form-field","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.8943b991f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da8afbc0d09854c778b9d4dbc5165f95f7b91f19","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.8943b991f.0.tgz","fileCount":34,"integrity":"sha512-VF50USkmZHtYfytazWK4jBVz+sIYvo/iQkPeDOu7Y6HAO59W8EWZMzyqZRrx0zQqXBpOZ79kykhHfjgMuACw0g==","signatures":[{"sig":"MEYCIQDteMNg3NuqNfJYEsLSdGIEB0sJvgUVhD1uxEh0N/DAnQIhAMSASpHGfJKVldBsuxXWmoUv2h9/nEU+eYoA3SoPtMAT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk+yCRA9TVsSAnZWagAA12wP/i7ajNRzauAzG/Nx0Cnp\nzecpdquOEjdqOr5YYYv7gSXu+iEL+bfwsoT+MmC9n7R2j3eMm+O43+2amr4r\nGeHpea6DqABFnNBzRywEaRTPfWaDhPcvL8oo35X0N8OuH21YdleLzjBgEeyf\nDa3q6V9ZEXVCSnBjztH8EZQdlE7cf+vHtRgLm0O8dqhKjleC/SWh8dm45uT3\nyjzcyafRfIbgvKjRRp8YdE45VzPq+tv/zV7FF7X8RbKsHNzbLTwWp4ZHuDZQ\nMz6IeumJmHre9HsBT3icWRZZ/vILWnWpczZMNsQfXnzYEbE82AA3L7Yuc2IU\nEJZKqi+jY4Opnh0GcS1ApYSf6tQA35mqm3RhtjZMh6X3mrz//S3RlnleBGdn\nYzIGMFHMX7EohDFM0WdX9EEMkEjpBCOqrQGP/SN4ubZnCAhiVMHQ/52KD0BX\neqssRgDGX/3NhcTpVzTNjSyE8+GoA4qZNXdkyzmMyFb28Z0RjXs42r8vFMD2\nef9cNwMH+AvnKC4MOlis2I5BsVg3ZLmmk9PHwN59vGTkqSegWro62O0mGeSv\ntSJ+JwYSUC8uVxBX7f2ufydjHFcu2tYlRw2KC0kz/MvQdPmtTdhcQHVdaUtG\ndLaSKy+NJ+F8gk1b2soonM3wv1JMbiuX9KQHwRwmmcryXii65qmJbNA5xv8F\n108t\r\n=dFSz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"85cb2528143c5117974441e499367a5fc252b745","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.8943b991f.0","@material/base":"11.0.0-canary.8943b991f.0","@material/theme":"11.0.0-canary.8943b991f.0","@material/ripple":"11.0.0-canary.8943b991f.0","@material/typography":"11.0.0-canary.8943b991f.0","@material/feature-targeting":"11.0.0-canary.8943b991f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.8943b991f.0_1616531378330_0.6836769698382086","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/form-field","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2630aa09ecf5a8460f74220be86995e501996e80","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.3955d8d3d.0.tgz","fileCount":34,"integrity":"sha512-bvfNy/gxLL2EZn7Z51FChpTPjAiqxmvMc5bz/bYuDZyjrGcxUsgd7Evo6NuMpZWHWrhfGREE3559AQ4s1HRhww==","signatures":[{"sig":"MEQCIFbns7XV7IyfMO7oka5avq1I9hwsNYjXN1LNjdGUF2JWAiBmCtRv1FNJkFMz7ZZGBIEIbvHcap7UYs2gpzU7bcbhLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW5AICRA9TVsSAnZWagAAR0QP+wdpbWAhoqVU4Iqc/+TQ\nqpCRbUptK/kFQR4dOZI2ueNdsvZ+cOUJX7DOVEniVNwnp4uK1yhdwUgw1rL8\nvek2KviPCZJnkjd460EvoDl7UsXsd1r8yh2S5jCADyODBy7lWvRfsezjeoPY\n0aW+BetjqWvSGFR9mI1tiAVBR+WmI2VWfz8LUC3QTeLp6nWPqg5Z9IzZeCob\nmaWfPMTX6YCO4bfReCMpKyosbbEX+MxZTiMXCYGidXq/5QxaQgA5V0NGEP53\naqW07r+gdEjz3jE02wjq5cT1ZfSGtoC3ggRbpWxDVZbfbb3HnoVRvUzVj6rU\nPPL3vNUw56kyplkzj0mgq773NcmhWmeOEQWHJ2pEpsnpuVtKoc+6Yf80fLW9\nqzIS/Yj9+NxQmbG4FGib5qUKMzIjHhuX2CH+gb7xH1vtJS0b0GYtMN5+k95z\n4T0EJsSFLnWJikf4kopLeVmZHpvZEDGv66Rf6OGMlblnCE2Z2x6iYx+K3O71\n0/NXOAPPwcAJIa7Lek3m4OcSl7a3QAfGebCOVLxB/Ni+Rz042ZmZ8gwElFom\n6XlHOEU00NjoAHHXToV3QisStK97FoNGZ8nAvKhSXqTbluozkeSkC/KPXylt\nsy5kRQ2iTH++lWa+VjyMwVIY62fG4S2rCVLPfpajKl5Pr2lA0I7V7hDPYabI\nCada\r\n=/7NF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2679d736975b17823079a52aad1e329d8c2a3b71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.3955d8d3d.0","@material/base":"11.0.0-canary.3955d8d3d.0","@material/theme":"11.0.0-canary.3955d8d3d.0","@material/ripple":"11.0.0-canary.3955d8d3d.0","@material/typography":"11.0.0-canary.3955d8d3d.0","@material/feature-targeting":"11.0.0-canary.3955d8d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.3955d8d3d.0_1616613384160_0.3194296548287652","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/form-field","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"245809a32caa9c33e19d466b415e9bfd50dd1806","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.23ea2d85e.0.tgz","fileCount":34,"integrity":"sha512-9ZcvKBfCjrwOVu+rYRJO3VJG5VA3UK8YfRRlTKaD0nLEUgeVN/UH9UZicU89wRoNYoDZ+HPPLVAB9LowdZZmUQ==","signatures":[{"sig":"MEUCIQCiE4CpnnnHGkzjzzKrWbCPSyn4gqKw6HEcYYgkcyiZswIgXLd0H0OpkK8ab0XeWWi83P3pIjvUHhlyPzNF2i8fOXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMk7CRA9TVsSAnZWagAAQdAQAKTYFx4cANPZNtg4/mhn\nUOBthusOTMJLfVrMOY91G4rS3tS2i+pAKMAMlOTiTSe0WwN7w9kAWP4aszGS\n2sUhELsOotz5gzjYc3AG2myCKczi8nXcP62jqW867beYvVLQ49PJ1E+gEIPt\nVOFr48rlqrL9s/EEFSo74cYG+cgZ/a3f649OpV2gcnDZrwdpYsl/DFSeybUj\nBFIO4VErrQDn8UJON75U6wcZZk/CDGtYQJRAsI6PISKJ1jiJz3ZMrnUTpzCa\n5bJk31WvYx9xaLPmE/YGxV2GCz8Sr59gL7Z5iChq1FNA0syECGEFW/MM+gQt\nQo5/wGw8oVUkJzV2CYNuPiDUmjY+TZkj5Rk4SQmVaaYKzCwIUWA4wDx6Uigo\nclX9A3eU6ar81FlP3Py+W1mKO8KLdPRZe5pJuVbJCfazT/gDH5NVP3gZ+fS5\n4u69mvQJmXyW5EBgfSoI4FhbeuHFoHFtpFeNX7mMgDeFxfSdM/HBpK65wL38\nDAQ2tfldrAw9yon/Ja0M7Onl7gxPxEpzVaqxcfAEr8hBYmr1QMLD2g/jeWQH\ncIjK1ivcOo3uY1SLbkJ3x/IneDOCw6wvShyr6q/zZoJNqyLR32eH3sBbMJH6\nr+XcLSSxfnmly/1Byb55k/A4ceywbO6YqYFFsKh3lWTvP7NQvIoJUBue49a0\n5Ci+\r\n=+ILe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"705a9cbab9462d9e300da18c26d7992aec452ff4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.23ea2d85e.0","@material/base":"11.0.0-canary.23ea2d85e.0","@material/theme":"11.0.0-canary.23ea2d85e.0","@material/ripple":"11.0.0-canary.23ea2d85e.0","@material/typography":"11.0.0-canary.23ea2d85e.0","@material/feature-targeting":"11.0.0-canary.23ea2d85e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.23ea2d85e.0_1616693562821_0.5841473945095801","host":"s3://npm-registry-packages"}},"11.0.0-canary.e3ec22f45.0":{"name":"@material/form-field","version":"11.0.0-canary.e3ec22f45.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.e3ec22f45.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea6d96ddf4f7f944d5502b14b4dac2ea31a7575c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.e3ec22f45.0.tgz","fileCount":34,"integrity":"sha512-qwYsKcJ2QqrNDAKmWSm6gIf7zEAycP2KElCbA6sQqMq7aZSGALqfzff8otzE1UaQZvuva262fCInqCmEAG8KYw==","signatures":[{"sig":"MEUCIA/XHuVtyr7+ouKhp3Cfq9zIWn2A9Wxz0sPw2PNfyTINAiEA4sSKCQSKGsWtas3WRXfsDrmZb+vgn6XmHMgeU7UIi3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXM7aCRA9TVsSAnZWagAAa14P/j6EvK75Ts3ObzhWX7ts\n+AlEd/nu2FSzT87Q1kcbMIGt7GhE27cZ2h0QH2H9xlQi8yUVv1FmHQiXo5mF\ni4s5BqPBAY7sdf3RCqdaSWkxmGGwnjZyyp5gUI019ol4rsO3Bg5KonIAQGtd\n50NBo0FfNJdWfNudXG6n8FNHHBngdUiVMNLrZ9vJXG9z/H44hppOWyQVE4a4\nRryVoQHYzyBxWBjgZSiHyNxwyBtGEjYUvyrAaMHU2EXZ2DAzAzvuzIynaGsn\nkaUvuiXNpg6jaba6wHTdpKk/1yehFAF1J6uxxfRRImfmLfR1CiG4XsDzyI1z\nQHONb67y+V5V2jdgxeyngG2zgUXekLNykgbyGv5ZW9fSLFfB243lN3ITGuY+\nO93TsBAPXMM70yK4y0BaonV1E97GUPp5lD/9dHlw9/roWBwWEWm41Cm/XHWQ\nxf/6HlKCUCFTc6Da+LQqRkPnGj36jZakdmy0RRJawhhSSz36VD0N19MXl05R\n+T64QBMdn/QBSXNltlyH/cvsmmbD7pJhrzo6j6yOdRDm1RLhdHUKWZ7qSBKd\ng/H+8pyeqyiwvx+01oZPS6rtQAF7uKbLs9ugcqkrF+T+1UKinNeJFAaafP/k\nnAa2WRgDmMiN/C7dZh/diytRaSVWa38MX+sMlamVjTlvyr2w/T2M825HAUwI\ngCff\r\n=MWxE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2827fdf50a2ab264554f8f307d61fddbab82c5cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.e3ec22f45.0","@material/base":"11.0.0-canary.e3ec22f45.0","@material/theme":"11.0.0-canary.e3ec22f45.0","@material/ripple":"11.0.0-canary.e3ec22f45.0","@material/typography":"11.0.0-canary.e3ec22f45.0","@material/feature-targeting":"11.0.0-canary.e3ec22f45.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.e3ec22f45.0_1616695001876_0.8461301710630167","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/form-field","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f27bf2a6a4501966eaf28f3a620307d713f13b5c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.4ceb42220.0.tgz","fileCount":34,"integrity":"sha512-63Tlo+DWa6PSoLo4S3fuuV9LYSi4c9dV7aBn+upJLV/wucrsV3MFK5WTZbpNgWRIuOO5UY9nYted8OR4rlAQDQ==","signatures":[{"sig":"MEYCIQCAzFFPQx9f6jGT/wKw8c+I+8QZjqUIcCZbxVSMFXwiwQIhAKqvE90XHdZVjlhX/oBcJ/QFwbmnrF06BKtBsiq35/7G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZPnCRA9TVsSAnZWagAA19QQAKNy9psOWcdjtYUTjD9s\nq4Bq7GAt25oZC3oHao3d0m3ADSBq+UErP+EV1Dxm6TPtPAYgezgClpw0kM1K\n8pnW65WHtCitZx9xO138bRWp7gLIc+p9nd+EEYHstQuXqch25jLrOsvRKpTs\nb0E9CSmIFx6gg4PynbtfweNd024rpuGaxA8XT2ttr/yo4cjhaOUCUcoH1nqJ\nwf7nunAuoHD425LNJn4OyOPcYkaAEVxS9SNmvLtL8XpbSvRJM50Pw3Yah3oj\ndT8wSz/jFXDYqaOsRoef4HkgGTsFgjp+wx138RQX8W5ED/rVq6D8KHZKEkiA\ngNjJvNJbI7KaUoN3/f4IvvFCv/aFHBhdkXjWWYW1KbbN7jyJG3b3DMVrQYa6\nt+exwmqWTCYPCjXMD2SkSgatejT04hwpY3CNUfbTmJ5waqk0Q2sKLAJMBr14\nOIILzkRRSes6K3fDiVD5Ak1RIwrorXEl/CidQ/Yu4xicqIkYRY4VIgulWnIp\nGtcRy3TpMf52yKPV6/Ve7J1t9/qt+ZmILKALDjhEMRsXvBx+domTVANuksQ7\noYgwklPKrUUzg8WT6NE4lMTrWGr2PnW62Zp8oyHjwcC9/WDQnNOK1rQciE8W\nTSBNQTeV94wN9yjDSnh+RUFBXtW9INfazjsPL+Fsn/wQZEYqRfqn1qYn66ZD\nFf+w\r\n=g7Wm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"75fb611f33737c857d1b59245ff5a31676d7f3ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.4ceb42220.0","@material/base":"11.0.0-canary.4ceb42220.0","@material/theme":"11.0.0-canary.4ceb42220.0","@material/ripple":"11.0.0-canary.4ceb42220.0","@material/typography":"11.0.0-canary.4ceb42220.0","@material/feature-targeting":"11.0.0-canary.4ceb42220.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.4ceb42220.0_1616745446990_0.46373841247656244","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/form-field","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c9958c013d33a6bc57ff6d35281db400d71cb40","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.dc9c84023.0.tgz","fileCount":34,"integrity":"sha512-fvRfHJEiTCz/Vpl4dXtnfbl+MLT8dHcEucyLkyMm8IqPPiwPoqU+HBTRlqIqi3QvGbKqpwjZIXfeH1uTpkkOSQ==","signatures":[{"sig":"MEUCIHUDNbbt+VwWszTqak21DCIr5/ziv3CxwjIgLPMibEW0AiEAicDqXLfw5C6yyUoZ5F6dBhu3ZDJtK0lWXEyjB/O8SZw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2R5CRA9TVsSAnZWagAAjaYP/jjC2fycQGpm+RdfAw74\n2eLxkT5M7XuQ5co+rXtr6Kgc1WtEd8OaBfRhVqkSrcXasifx/NDTeTQbGzRY\nl1tU5a7TYIIBSpiDYCkucEfNkQ2hUOJ0Ob3nNE/sqUw8GGs+RvCZJeMiP8Jg\nSkRxyW9YZteV3kSqEPcMIFPGX/YyD6u6KaVpXR8fSg+1/j2O7GyHbmDHmBa4\nd7w8UnMBcPJ5wG+Ab+C/SWL96QRMmfF8CaKtLCT7/Qyp1rUXAgSM12uTIHup\nW2E9OcalXE6Sj4pyJZHZWNlyHq1LmzgtvcYdV41h8CBOGLsDBK9Ke7yyeeNL\nTysPK6G6CQlE/dZkxBor1K+ZVUUrUrmNOihweH+o7Xm4k2xkKJqxvDKUEVgI\n0Zcg3so59t1xWmTa/JSBVD9GSYab8QeVWPhYob7EcOmSEtOB6sfxUP0jioVw\nxEI95pOM4pFVWm/TizCN46LH7wf2LeUzeyxWIrrG1eJWX7FfcecLnVm+MKdH\nESB52UQW7SXH+DJZbrCJjwLBCisZNqdJtc0hVw6CZyRfRnqOzAPtRBGpA/5p\nNFNvqKwt7phzF93lgCocl5dF5zXwUNGi2RU9oUtt+pe22NNF1IGaLLDPnax9\nuAWWodqTAcmY6xxv5Nr93A9U2VVAcgzyDGZZagXSY0IHVcZl3RA9cmvj9r4z\nzBio\r\n=d/N0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d7f7ddbc4309b6a8ce5cca3772255dcc6acdc701","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.dc9c84023.0","@material/base":"11.0.0-canary.dc9c84023.0","@material/theme":"11.0.0-canary.dc9c84023.0","@material/ripple":"11.0.0-canary.dc9c84023.0","@material/typography":"11.0.0-canary.dc9c84023.0","@material/feature-targeting":"11.0.0-canary.dc9c84023.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.dc9c84023.0_1617126520884_0.43076183440780946","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/form-field","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.56fc26962.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b811994fade3dc856826ed30868e0ca377e6cfb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.56fc26962.0.tgz","fileCount":34,"integrity":"sha512-QV1tvftcgPdW1AHrgQ82mu4yJZa8HAQ4eF5FYlALlaJHWa7H9Lp+ESKxZcg8w8IV61itP+MHBXu1npuSmCZ59Q==","signatures":[{"sig":"MEQCIH9U8x+byiTpUHYMe7SCj13ZH8jJDpVnINd3sZAbWorYAiAGs12qcC29jUYeQCZw1m9VmzqmhHXTTV1xillpUzL4Qg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8BkCRA9TVsSAnZWagAAdUwP/03h/P2/4R5jGCqGsoSC\n79Sm632oPCJLroLg4/v4GCt+ZGrm278jElP6Uy4IGnQPHwAAHCo9ddLPNiYI\nC584zCeJVuLkc7EcuT4AZBhu1LowyLN+LG72w+DBhbOpSGTDyqtUyQrGl+uk\nEJhiYDr9isdaeSCTuFLx5IqNEFEuyuMqZHrBvgk3MQC8xQKXuktEMa/AnFab\nVU1LFbmMJ7RPaNFmuGKekMT/OhU6Sd8zbrKyVcyTrE7od4gqcBw5sjl5oOOk\ni/YSgY3pqP81ewmE6OGei60pAWgcNaNkAXO0o7Jx+IatDh18XzoqLuXrro0H\nfkWktNmC7QV2W45aVlrui9PMEZJjRY4L5w0zj6VWCYOaGuJzT7R1GdDzfQRf\n6rjympd34yd52yyFSAZYM2fs/mJlvmcjOMb/hUNzsX99xWvcB9nNwkjTB81e\nXmqi2468uHUvH2w7xs+qD5pwI6SscEuFhrX27eeHPdfhOwCPsuPJ0g9bXVd8\nynGFPUvVkmfjUZLep/j/NTFfbhrLnMoT3Ikt90es6MM2GKFPeHzrTJRd8lLn\nGZtBe+h1YTCkFsQVb6MXTU0qCeKOoPNLJXOK55to9W5D+RjZzM3yHJQmelRH\nSw2DF/51Z579MxXtp+buxAqBfWn5nB9e3vEosCWnGthmR6PXyj/IdhbaJjO6\nfAWo\r\n=GNtk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dfdb8792d4ee8bddc61386ac6a8e7e216c1681a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.56fc26962.0","@material/base":"11.0.0-canary.56fc26962.0","@material/theme":"11.0.0-canary.56fc26962.0","@material/ripple":"11.0.0-canary.56fc26962.0","@material/typography":"11.0.0-canary.56fc26962.0","@material/feature-targeting":"11.0.0-canary.56fc26962.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.56fc26962.0_1617150052196_0.3623963791344911","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/form-field","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.bc318250e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86a7b3572818503f244915edd0b19e25fb250e7d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.bc318250e.0.tgz","fileCount":34,"integrity":"sha512-HuT4KOP+zBQlCFusRFsc2y5t0TTqjiVJIv/09aUKN83SAlrN01wMWF6KLAOJzOxcLXlgWIkz5WOGccmX79KQ/g==","signatures":[{"sig":"MEYCIQDe8hftoHvhOHgTvN37XuAHN6X5Ukg+PhpP+EW+hDyj0wIhAOCZ9o3p/J5n+OJkRToIqDy5FhaArNyRNJbFI09AQn08","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9F4CRA9TVsSAnZWagAA1icP/1hvmu0e5SQlxw2tgDt9\n1hrCAmPSeWqgOdAILJ5VwM9oCuIW6bLWxEpt6ta5H3ndeyWsuuk7jeZZIFj5\n+ZJ8CbT6zLDfO4ENE8SlANJR36hQ3VEjNOk32oVb34d1J/jKl2g105woHDVm\n8NJlpUcZPJ8Out4lOYZPFUUs0pWEJmJSPiqmPNisSdjbeW19+BWajiooDPa2\nmX4PwiYa2JtEKRVHBubnTJrSMgzM3ggtFpaON/zs832NLftGhkAUYjje5vwF\ngGu9Oh48hmNBs6HUzQER+tEFz29EG05mhrblmuVYQOKXbZ0wsZ+EFQS7oGtt\nXmyW+rz7hCOW4HCkscwaPyIY9HCjryMd/AvUrl/cUpshaqH2t1pqSKecBRmp\nVxKxVJglMFMmibkDMYLxlicaGm+C83++wWEy4RdCzDczACZgPBckgPdrDEU/\nJRxeGUyGsesA2MHjykI5Awoe+EF5QmcuZSn64BDyK2AjTIoEYMArA/xCkmzZ\nYZh2733Ef+q6Ezcr2zVPvtkuU+xyfjhqr6ps5evOgXFHaOobULxIszrzhMDW\nUJo77jntp6MHODR8kyXP56JWkv2dWlWPFTp3djUw0O+UVg6TY51/SnLJraF9\n9H9t1cKoKb+ak1jbddnDFXhPNdReo7hXk2OnuS7+yajVfvKMiMURKSRT1jcb\n4jVH\r\n=3n61\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1de1daa9e4e0ee7a779d524a027b9e7566841b56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.bc318250e.0","@material/base":"11.0.0-canary.bc318250e.0","@material/theme":"11.0.0-canary.bc318250e.0","@material/ripple":"11.0.0-canary.bc318250e.0","@material/typography":"11.0.0-canary.bc318250e.0","@material/feature-targeting":"11.0.0-canary.bc318250e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.bc318250e.0_1617154423904_0.9138025835804533","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/form-field","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63c2221c5d80626ecc0c264d59578b3fcb96148d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.edaee19aa.0.tgz","fileCount":34,"integrity":"sha512-Bbq/A5CABGK+S+T8UpMeB7+8EPIJjAsfAmZaMrsLqXSJikAUC7qavDlzBAIkJtMmikkqgGaQT7203pbjFSYWEQ==","signatures":[{"sig":"MEUCIQDh7vxVBCl6FlMiHMfVCGXiG3OKOdfD8TvOfAXtEjefdQIgcR5lZ8X0Xb/UWr6/2AKjbtY3VtSklJu3AG56WEcy2aI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9pgCRA9TVsSAnZWagAArh0P/jb/FR1iLXJ/VLG/xXC5\nTWZAx/zVPy2/LGrm3EQv/B8eBDU053PfFvyTEQoEo9vx9gAAHhS8mMvm3KlI\nizGsVdjlT8Yp9sXVaz5dYeT14adgpnR0zxoBidhctaLfFRBfm7XmzXsPY1so\n0F58YkYmknqFNwOeJASSL1ztXh/hgOFojoG63JOP6yFbaepBW0/nyXOwxOLr\nxp7hJq9p5pwZNlPskdaTQj/wsRlUDJ/DcC5zqqEz1Z7UeZ9QVHssz2Y6Iahl\nXmiz2VrYyAICEb2hD7hc+hY/A55DVHrSQCe3px01HQRdMYl5VLpd9XfZrS2a\nrh0gaQxH3RmDBDA6bwXz/RnLEycZ6QY1DCGWC9ZN7m/8f4Bg0Xx1FWBhUt8c\nPodjlTCnG5ZJPYDg8tRk5ZiV84qub+MBld3YmFtC9fckdYZ/sngMHm5msllc\nYECHd1pyGCa3FAe6eBIkaDFakrjVtPC4QbhWz7eSyPBc7k6U5K+SAUwRZZk+\nZYXN8ZBujULtyHSi0n/s1U8tU1vbq15Ybizh8xRWIhyJU3UQc77xJGAkDwm8\nx6U+/52v7jQw0JjJ9H7NO8Mu7pc1UjL420KhRbazvEUB+9EQMmujC027aQCy\nt7t0xWxPx0xmFDDOwt0QgZfsEvEAuH2Nepf5qV8V6rDMoruVK7z5PHD/7Czx\nFh2q\r\n=iBhS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e2249b4be4cc5bba6887f28ddb9a3b9cc8ee09de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.edaee19aa.0","@material/base":"11.0.0-canary.edaee19aa.0","@material/theme":"11.0.0-canary.edaee19aa.0","@material/ripple":"11.0.0-canary.edaee19aa.0","@material/typography":"11.0.0-canary.edaee19aa.0","@material/feature-targeting":"11.0.0-canary.edaee19aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.edaee19aa.0_1617156703477_0.49645887819290135","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/form-field","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.24609b822.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d39feb6ebdb9b702d3c21c84ef7bc464b3df09c4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.24609b822.0.tgz","fileCount":34,"integrity":"sha512-ZvsPiSZSVjBWwVTDzuPsGCkzwPZao4NpyIJQ0nvti5+WgR9I0rZLfUhRZZFxbjZ++xa9eioFb1RXEGMel4Ts6Q==","signatures":[{"sig":"MEYCIQDxqLMYw2rlZSHl8+4F541B4WfbvCfjy3SUN0SAYudS0gIhAPpmlVPWq8khSii2X6D9jT37ndUSSZsORLNZYZmiXbc5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOIkCRA9TVsSAnZWagAAf9kP/1Kd7rTcF8lBilEdwwBa\nFDma6GWq4i+x3ESlJ3qxVRz4oHQUWfGk6laj2Zr/hqlSZSrKi5bDefSFMego\n5iv/x+gjD8Xw1ZgWVbwMWzY/6w/bXG3OGIoDV+R5ZiO5QBlkNZ/TcfuReuP7\nPSCDGuHyTZzs+N0AP4stDnMkbccvgBYYe+592GguzsHigXTNWxuxsKBV/uqe\nVTzaAJMmi+WepNuiqlKG4EOuXScc3cvYbqAGu1bFvqJBWo2eDC6INo2m0aNg\nLddqrWspQROv4ifQOjSAvzezSfKGLfDQKTL9QHDhKArB/MKSnukrsPbXySFw\nfdnpamBMFuWOmnP3u+zoVzG3k5de1xjFLYS92x8I+CeTNkPuZrlHqlHMRXPY\n+0caepGTKrnopD/hQtHGtZm8LEq2SRc5kdyXoJJc1PQ3kCmJtAJQoBqkvuXx\nbILRp92tz5yut/A6zeML2JIXuZv1x1ohHlNiUXw2Gwzo+WH8Mn50eUmq3QSa\nXmv9DR4Rj3ZDId9Zi4EB96QFViJWnTSIslkyXQeVu5YbupfUEq7BZAIThvQu\nh12Cgji8JVtkdnJ2p/TQAka+R9DSuP7WB2kN22XsuDacBWQK+y4/9UurBGft\n9vDdGViDMPopZXgAL39RoeI7psiVNYoFauOkOJSMwCsdPNRtRoicWgqhJhXq\nMK3Q\r\n=niSS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"50b495134dae6937c2262389aba694d7664f78c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.24609b822.0","@material/base":"11.0.0-canary.24609b822.0","@material/theme":"11.0.0-canary.24609b822.0","@material/ripple":"11.0.0-canary.24609b822.0","@material/typography":"11.0.0-canary.24609b822.0","@material/feature-targeting":"11.0.0-canary.24609b822.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.24609b822.0_1617224228240_0.9781487845716632","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/form-field","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ba8dc212830a4c34ff65c05ad4c712722d809ca","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":34,"integrity":"sha512-7M3w1oDjzO6ubm7iq717/Mm4jgGxpGivtVNrF+B6BbhKrBeGUB2e4ZrtqkKRYbeHR7wXTtqZZoA8xZBapOx24w==","signatures":[{"sig":"MEUCIHKAuCxc2ng2nQL9STJIBHSo/xgOaTh0Q+oV6ktnGfoIAiEA2B8GiBYCaT6O87wbew0hoknY+Kedi9SHKDGOLGTRfho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeEtCRA9TVsSAnZWagAAXxUP/3pDxhkn+IDoUyXw904H\nautP7ANPO1aJmkwmCxtQGyZ1U65+yTLHTTEcakF43dl9HOYSiqe9RbGogO9U\nucnntGpLwxjta9VlhIXgCukAtJNr5Emc2JXWP9jXUgtgAzJFiL7WEOfYdmMR\n5/aM1kCh7Z3zxrNviODumQ9QmkMpNEWspL8h8+qIC7gr8zAmFEZmLdGnFJ9G\ndt7clO+xsT9qb+FTWo0tzlIGOc088ro5/ADd4XCEx2Yw5z60avOLtOkXAEzB\nJCd5+5sBfyEjLh+aXfzk5iJcu3mDUrAa6Q/mbK8qw8/GsCGIhBt2vSNTlyIS\nzoCTaxozv7PM++AjLJ94L4cwFd3cKqMhELc1TWtigAHBP5k7m68cSXs1awHB\nNd6J29zr6MzPRHBoivzJlT1HNo3KFb+12R92C3blVi6hI0OvPAkvb5xebqIA\nkJNMLTN4YvoMQ/Bys4QtfuEs8DopRoYBL+qt6st0uiF89oyfln98wLGGOCnW\nl/1ykB579pdR5MiR5IIOQWBAV0kCHg3ki+z27Da1uR/cOXM+JbbBoqQTXoWJ\nUvt0V6Zv//g5Djs9mkA4cGQq1dFI8gZguTnvqlBo2p1H0OcpOM11GbLpOFcG\n/YTF4jFVCTVqsYhCDXb/Z3z/K6lo2rKcQFVjOAl43hhmqUwS0Ppy6dh/s2BK\nA2E9\r\n=/I1J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dbd92fa1a28a9b31a1e4eb476b15f4cff38986b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.b6cddc2b7.0","@material/base":"11.0.0-canary.b6cddc2b7.0","@material/theme":"11.0.0-canary.b6cddc2b7.0","@material/ripple":"11.0.0-canary.b6cddc2b7.0","@material/typography":"11.0.0-canary.b6cddc2b7.0","@material/feature-targeting":"11.0.0-canary.b6cddc2b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.b6cddc2b7.0_1617289517268_0.8339340701082101","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/form-field","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.94937c78c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"512ece39ac50ab191941714add135d45b293bbec","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.94937c78c.0.tgz","fileCount":34,"integrity":"sha512-bvmO0gw7k2BJwenfkSo22wbFXkULFsqIoWjM5STFAhCQrcrcO7G+oIhaRqwBZSKpq7SvCEhjuiLBIzPNxUSzxg==","signatures":[{"sig":"MEQCIDa9gTloftm+H0gIvJFGsE+8Df1Yu2xM2j8heEAfH4xjAiB7MW44tZLZtRuU3YKR0Q98Ik4kuheqFGllPNWXgyxwqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjSGCRA9TVsSAnZWagAAXRMP/A7YLaJmqkyBSQt0DXqS\nAw8hgrVSN8x/JsEoWmA9J71x+S6NY7mJf3xcQlKVaQKlFhhTSf0ep7qtGgnH\n7Hjz/u+AD3OQrI2Uy8RjxhyHmCcydirspY2T3ZfxsnBX8EbF6Gz/gvqYN56L\nowEWc1FolNMbvYk6TaUpQlJoUTYcXExRbFLFYcEL8QyNTCuu8FD/0Cbe4+LA\nThuZYo32nfN3wCEwm9jWJ7rcKzEQ/jk5DbEiH3318JzWYiBfFR/mjnw9rQbU\nQGEIQYzP5t9dgX0kC4jqnvXrxGj4LXAUIc7yR2Fg9Y9mSKXDaysAgOXuCliv\nqHfLijwnRRvWZz5AUBYVGfDvxycm0nLaO0t8RoKun6MzjL4/g+kIw17cCfsc\nHVIM+6qAfjWzDgQr+FLTVFpK7esFCcBScMWRaonqj3sc/xW1GtW8RiisWUlB\n4QfiPG8AvFuh8nkWUJBQtmtZ+fzGyaUtc1yeHFNpqMJpXMQDaEA3rwHTW8CR\nBqUUwBm17hq0Z4tpH03WULQNtZCrnvULcrcAexODE6Od7g+XfKPUamXA5/qs\nwXo9fA+mWFGj0gjFnUT4mftMa68TZ2INdS+Nhin7v9hx5ZUzB8de865Qi/iS\nC8WC+bYJav6+2grNicstHXe6rUQCUThPGImjKmqmvP+IoHNJPcR7EvW0ozV/\nf8Id\r\n=G09/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ada608c773d2657680fffa3be444debd83967f00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.94937c78c.0","@material/base":"11.0.0-canary.94937c78c.0","@material/theme":"11.0.0-canary.94937c78c.0","@material/ripple":"11.0.0-canary.94937c78c.0","@material/typography":"11.0.0-canary.94937c78c.0","@material/feature-targeting":"11.0.0-canary.94937c78c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.94937c78c.0_1617310853526_0.032138252629980935","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/form-field","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"084728af646c67894602908ac09c3e6678e352b2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.e7202cb57.0.tgz","fileCount":34,"integrity":"sha512-1jiIJzbZsmtNnygMa+uTcIPEyEycY0oCzP158+AXkOPRoicq8TOc8TtWiIFD9uDrBrUfSp2F7Ir/jS2If9SMzA==","signatures":[{"sig":"MEUCIQDKv05qJDO4XOBCrMRrZkAncGT5SiQWf23MKyFPI1hMwQIga2aq5Kai6y7gl8tVei/mnvXQgBZPB/07y0nL8AxPjac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk18CRA9TVsSAnZWagAA2+sP+QBugPmi+LAjByyQz4Cc\nO5pk5z9E7GrihL5VBKtEJZ7NqIBsU4VyC1zRajv7AM2d6JyGugiLiU72d4D0\nnSO59vyJXsnak8rkoaVy7bUoOjxjldDw3LrvwffgO632MI0fB2IuzPgRhTFU\n6/OqTG2XQHVMIW0J1XIOxHlUD7lo5ViW9hIVgRBd2GouY/C8BWx5XtCM6QhF\nQ2x1qKxIjWpYuW0Y1U2wcXqIpwmBdCXeZuZ6/QkRG8a5C75/YyN0Sqw2AQuu\nY7KN/N4kFEDNrUZuTyG7/gA2/XFo0OCo7OzM31I6bAKst8sVvmeF8Lj+zoYd\nuK27Ia/5gy6RqiYjeEpPvnjtpLDDARxsi2yKmUjNqWWt9/pmHmvx/uhpOrog\nJ160bGpDOHX7w7Bovr0Pdb0uoRd34GBZckT8S6CiRaoN8kqZXzu0AiOsiuma\nuTYnH8BGBjsr4V8op1piz+4pgpeSVSYHUDQjruduHppLGucTe4TiH9oMbHlp\nNdAK+Ey/dK/GwIpcp5PbDMa1e4KsW1XIUD6Hc6FvRrDB2HYqrCtfAy7aKNBY\nNQKwFH3VRx7ZrpII1+m8M8Qg8qPf1wh/anObeFy+/osf1nnUK5i5WnCn8+EM\nlw9YYA1zp9E8KejafoR6w+ZR7BwBvPLdpjnNc9QDlJhh+B4E04sgGiU9i6tk\nNtsy\r\n=rpe6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"113d79c2879cb1503ff12c8064eeb38ada16b472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.e7202cb57.0","@material/base":"11.0.0-canary.e7202cb57.0","@material/theme":"11.0.0-canary.e7202cb57.0","@material/ripple":"11.0.0-canary.e7202cb57.0","@material/typography":"11.0.0-canary.e7202cb57.0","@material/feature-targeting":"11.0.0-canary.e7202cb57.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.e7202cb57.0_1617317244095_0.4272937115898654","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/form-field","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.1f636b205.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4075291f84c08f9c443fba63857a5aaea536874a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.1f636b205.0.tgz","fileCount":34,"integrity":"sha512-N+OoYjtLRGdOqrs7yke+Jpp2YjdgulNY+mu9JhxeyX7UfAIFV0051l0wYgCZA5SZJ4fL3BhYXOSI+VXD32raEA==","signatures":[{"sig":"MEUCID5t5N+DVzdz/h+I5u1VSC2LkDS5jLPnqvk0MotAQgrmAiEA7dAatrfQyuxaVZgzb2uaUUwgA8IjyHcyPQ2tCZAdmDY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5mICRA9TVsSAnZWagAATwgP/2ByLImLH0pLeJN9pyro\nGf7m72m8rUCACWcrnXozCaJTjsigoN1iOdjHwLseuTyx0gF0H63oruFoS6jP\nifMUTDn4KSIZc8eSYy4ax0HlAuU0BNQaEKquGcvsDoo6mhAviT3rSirIW71Y\nqriBlG3GVD33cwr5nRAMrpSGNL+Mlh4kA0N6isv2BKIoIlgTLndhU/FSzQoU\nWBstgMYtexSzRMhoTUL+6oA/s+Ts59jMRMaC5daRTQxdSJLXH5Us/tv3A+QL\nPwKx2kTmqNJ1epVmHwZIPmlLHHzwnZNZ6YKQwyAVHcgIdigADeFOAIglhAw9\nH1ZUe0uuzwZYNRu8sPLpjzsoSmgfplzmEQViDyEC1bToseblG0F5XWH3giTn\nm4wdLManwWByNYPhMeFMSWohHw8KgeOFhxp284Jheuk3F4BqV9otFA+WedMm\n2FecjN/XMeRTGCwepXgL6deoi7GJN0TlM4f/HUh0XZIMNXhR87uPXv9BIE4v\nbWCgEFP0s0nqLX4Gul25EDAW6Hb3K9OsggZxuKHhCb4cRbtavE1QlU+Dz56o\nfFhxRvRpbUeDkVJ6r/38fpUyXczqe0jLyQLqCvJGX9gmKlOn1YW04OtBd9pk\nk4a5GjHDb+K1fbyCm6iiT2HQXJUihPBtxO7djVq6/J17dNlp6K3v+l1d3+My\nwQHz\r\n=3vVk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a523c6467be13e8aeead7e4e2e5f20c418871bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.1f636b205.0","@material/base":"11.0.0-canary.1f636b205.0","@material/theme":"11.0.0-canary.1f636b205.0","@material/ripple":"11.0.0-canary.1f636b205.0","@material/typography":"11.0.0-canary.1f636b205.0","@material/feature-targeting":"11.0.0-canary.1f636b205.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.1f636b205.0_1617402247859_0.42411174965008347","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/form-field","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.94f50b260.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd81ad49168c24473cebff78a1d974b5b849de06","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.94f50b260.0.tgz","fileCount":34,"integrity":"sha512-p933KqQU4PYJaPynz4AySfbwOPmY0jux4pJcQigJHotmWrvB4+FULlDu4nO5n4N8iJpKEtht4HGsZ7CebmoJ1A==","signatures":[{"sig":"MEUCID3EeItG6HSl+/xYadSuWvFS2d6jqQD8mxZWYsekZgY9AiEA3BeeJqBhA2sig31s8eB7hOgcVj1FmWsT82kjSMY3Wi0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaycrCRA9TVsSAnZWagAAEoQQAJ2eT3GRIIxyKO4EuadT\n/DHUvTsokG3nQ4GN/cQsZNfNFUl2SBRTfmJoUF/1/Qv641g+Enw3XQBJYvxI\n5M+uIeWOqip+amUIeesuAeT+UUxUrxQpxQ3hJwX2x1/8ZgaiNXxRwzezrTvM\nMRdzwtcip2TrDo/LL2GDx4mjYcPiWsg/oD0NPM6TEHL1SKB0/LaCQilpaO/y\n0bCLatiCtxsICBUiwikXMcu2nwLLxscgmnU+TOs3+jrJM8YqKCgvbqM0gCVO\n5HkAuAwbS7GFzWJj3rONoHYv4wZ22gSd6u2nmnZVlnJaHuUAY4KEny27ZAfm\ndOxBPGeBHFJHK3Y/EhnsehfPdEEj2a7yulAYYXPFKVrn167wJv0MnbCdr1Of\nVNpTyjAAvL8AK8gK8ykxpUs41IQZ+xlx9F1dvTkSiA708ITrn9EMcZfOt5SP\ndwkWmVj/YTbECmKBlLa5ZURoUcOH+7aMpzQ2larQ2kUcW6Qf+ys3lJpLgKGT\nyxdxg9YnqXmiIRJ/0wl/4cYBgRTD05aQNlH2qeStWJp04YhdXMfh6LfigV+3\nw/c5ABofhwlNq3WJGSaQ1wB/QauTJ8MybH2d+xr5yxAQT3kNl6KSiceTS692\ntTLD0EXw6jQII2v4Ali6dErmlgPmvJXCy29t8n0B9wwf3cCH0QHk0S91KQ4L\nlK6g\r\n=X3Yj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b5f84c677cd669d6958748a69435b56ebb640bc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.94f50b260.0","@material/base":"11.0.0-canary.94f50b260.0","@material/theme":"11.0.0-canary.94f50b260.0","@material/ripple":"11.0.0-canary.94f50b260.0","@material/typography":"11.0.0-canary.94f50b260.0","@material/feature-targeting":"11.0.0-canary.94f50b260.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.94f50b260.0_1617635114644_0.10598028386811675","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/form-field","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fed6dc7429631c5e11de831d9d2bcd4530269ca7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.a4009b80a.0.tgz","fileCount":34,"integrity":"sha512-pHoOKgfCt/eprZqreNlZm46uO2revDpehe7GeoE6x8lexJPcQJFYgFcoQ3h429383zIWMAzn8oUNqHkg7LZdKA==","signatures":[{"sig":"MEYCIQDw7mDmCUVe82MKWEqp5/kH3V5T72Opqy5CJdotF1Fq8gIhANzqZy0uL/Lk0U7N7LTuFm1lymmHmUaN5bstZZ1xNArh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4iDCRA9TVsSAnZWagAAWBwQAJwgfAjNScuDWSSfqtwY\nlYsqqSG487osRwGjkAzKWS0OquW609uWEfBZBOWISaGDleyu8miTr4XWG+VL\n856j26OOxEcx3J9uSjIQ7qaUbo583GgdXDBqznSr8zwCoD9H/+uzzDVmqoEJ\nIZ3D8k13Z8qzCUbX88fwoW8QQ3MX/RYzYvBalm9I8W8GqH15bnWyb5GkgLmI\n/jrzwuznU8mAryhj8nSrbbGKuYBBNsys+euKT8b6uHUAUqSs2eh5tKfPe5NS\nle4vGcNcIa/Ccvew+d1nI4fqZHY/7SbM7hnK4PoqUcPD4jvWTbqU+NYDgmPH\nJ9B9HSzGq03+sqbA/HdJML9TSILXf6Wx3oiD2w6MQeHVLAKnEFNftK/OI9lc\nv6b3OK6LMkLd/urA8Q5e67ypw6qOvE/+hZN2rltT/QOsrHD/cRIE8WThSYxI\noDO8HtpcYXvfIDsKWUnYpLDL0jhkclL6InjemcbNCoLkHzcwjZE5LdGZVbWb\nnGou77rcB0z23N2GOq03xJo5sB/x9wuQaKIuhN45peXD/Wtd5RyX8kinakGY\navCsIQTb3nPHwkUKla1EY/BVzEecEbncXgdmeJ9eZWL6YFX/WpisveS8WZqk\nu1E6v0QtKBJSuH/i3gL27OSOEe/5MrZjOA6OyfJ4YqhJAy/z9TfdkpEoooHd\nLYOn\r\n=kR4a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"35eef76af32a43b61b6a0fb725dbb83cfa5d3421","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.a4009b80a.0","@material/base":"11.0.0-canary.a4009b80a.0","@material/theme":"11.0.0-canary.a4009b80a.0","@material/ripple":"11.0.0-canary.a4009b80a.0","@material/typography":"11.0.0-canary.a4009b80a.0","@material/feature-targeting":"11.0.0-canary.a4009b80a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.a4009b80a.0_1617660035104_0.1162071004716716","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/form-field","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9de03ad8f1aeedb2a0c62c9f50cd476d96cccf55","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.15604bd0d.0.tgz","fileCount":34,"integrity":"sha512-Ncp1DsfmAyb8tYw5z6EVPWx5ZHd6/RDc3wnLl3Pp/RGqDgIUmG4eXPR10V1cWfN7iFqkH3BPRB8d4VaMviA2TQ==","signatures":[{"sig":"MEUCIBegdQbEEc2fustF5Uf1igSF481EytapqqmQcQV+rcsMAiEA6a6pY4LlyJmRjqE0pIC8ag/yrE/PsgETf6QBe9T+Z6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5JMCRA9TVsSAnZWagAAeJ4P/0xCw/W1ETvz0GR3CvKI\n2UqoDUZqzj8H3NYWH2twEfqQD1TdprZvmgIb8wk/HiMNwk8RfS/vokXvB76T\nCzUxE8NzlMQ0cT8u5VJiw/omAo7BCy4Gk8EJrWcHOU5ArzIJ4cAeKyz5Pw9k\nIV5Y7e8/sbJqI8/MX5Gwbrc0/8uh7yugue4eIvX6INJrEDg4XjXkmzJLFE0D\nquOlB+jhh1msHzWlJgTgsQBoOfREEdYrqKnV+EdDKMeIE3LouqSihQcglZnm\n8ThQNJYUUdXntamF0lCY2AGtvpQZnsafDWDwSykc2f7RjBs/SLZqHsOgdJvt\nxFeimzfCIkKFddWehXklUsFk51oXyTopMv7adWD1KX3Sz68FQz4NxZSWIjVs\nJkzKPGaZzb5bz3ISTWZzJk2Dul1+/SlPxWwlw371hIK81pPhH8Qpe6/LKJQq\ndqt0HiCiSlvkIYhF3S55GKd1vDxjumPSa22iAVgyTHJEmPQILSq7SgwNjCwe\n62Bxcl2QbaBKWze1vpOT+ELLG+B/eJgW2NqAvdN8MaWTRLAMIQCCqmduUBfH\n06WtdR6zWU/HefR1F93FYsAXog/KtCwWv1T0FNf8MNiOTz4nKc5668pp90aa\nErLC9aS+atUVQcss020nXrEUeI3rd1bUGeg2At7Oqr+dq5gpIJxrl652loyX\nWtBA\r\n=l6U7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ea3949c02ab8da1a812a2127f1fbc7e7a3c98532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.15604bd0d.0","@material/base":"11.0.0-canary.15604bd0d.0","@material/theme":"11.0.0-canary.15604bd0d.0","@material/ripple":"11.0.0-canary.15604bd0d.0","@material/typography":"11.0.0-canary.15604bd0d.0","@material/feature-targeting":"11.0.0-canary.15604bd0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.15604bd0d.0_1617662539694_0.21332755006710902","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/form-field","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.76da7876c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bc27dd8efae6682031228ba31a73207c0dfdecb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.76da7876c.0.tgz","fileCount":34,"integrity":"sha512-BrQycMs04vDVq9JH6Fh/SCOy/ofw2CelMsBIaAoubo5mNH/rwm/at6nRFZtGKE22xpw+QCHuO/kdplYHPJRcTg==","signatures":[{"sig":"MEQCIHqb737FboEH6WD608FcrPYlS3YtNIXxGkdQbCt0nXcDAiArVQdOHEb2UNvFftxtYHeaiZYM1iwNitoDFCYkfvLRRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ6NCRA9TVsSAnZWagAAdCMP/RfOWvEQ/zWSSh2Ao72d\nYTuhaMR8kqxjHqyIEBz1uuSPTMcvbcQqFdpkHHzQiYs/UcTm/D/MbfJbncZw\nQqXyWnLlccgKbEEVYumVFf+SLXLI9vvaCay4rOsBfGjXYUQx6p2B86BMh0A6\nO7OF2cq8qimSJ1/q7cxwAreuZDP7E+dk7UP072WFI7vWQmMvOM7tgideMo2W\nBNeu2aAgTD1RHdTiRDGdlfsIGqzt2sBd6LlsMVvHcJq5KGOyykreOxNjkDbx\np8eVGvb9jra81HHzHw6FGAzhc9XCwq7Q6t4qABfJNNLVkW0JFIrvXt9G82tD\n5W0sJnm6Vf8erIV0wJHkM+JjmYsrvm5wqR2bEuobcLWkm63qKR/r245WiYVE\n13Jiz78i8sThUPGhrq2ktpqyF6TxTw+RUsRXsgfvEKpCOUEopLsZHWTCnbG7\nNjd2fU4fCU2CmP+ksMiTH7tr+p9mw0m4VMO6KKB2X33PWjImGIrjuUDFzptm\nWySqERvTusmesV2od0tE5Wk0u8WSxWE0yUek7EuMvmpuInKosxp2c4sN+zng\nJizgXE+5MonWNjQosk4UrkQBYX18g7lsvx1BhHlxy3wLL6dCcfEmdgno1wOD\nNBb6nbSyvZlD/n1s/RpJsdso37O228W8YbszQJZD755P/hUZuiU9YQn7lMIb\n0wzf\r\n=Gqam\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4bace63831a45c0c9e6f786768b2aad0d79087f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.76da7876c.0","@material/base":"11.0.0-canary.76da7876c.0","@material/theme":"11.0.0-canary.76da7876c.0","@material/ripple":"11.0.0-canary.76da7876c.0","@material/typography":"11.0.0-canary.76da7876c.0","@material/feature-targeting":"11.0.0-canary.76da7876c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.76da7876c.0_1617759885041_0.6886783191587906","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/form-field","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f4238ab981fc58cd621b3f02f0b87151629b875","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":34,"integrity":"sha512-Pitc8kAfKhGlFOtW7MgmlJlTSEgYyJde5VYNBduE+8cZr1PEbU6DDKmUQuG09yBgJauY7Y0/ZGVVmEw5dcj7nA==","signatures":[{"sig":"MEUCIQCIMsFkyTw4de4/m0KLDYBuJRMvNeAliyPubhDCty7BvwIgFVhNDGo2+h9DyesDN87m0Iy6cWdgeZ4431YaS/i1898=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf/DCRA9TVsSAnZWagAAmBQP/3ulIc8UYOEiaDPS5hKe\nXILgPx65YoWAfSdw+pc/9v7EVDi0HyYPD4kFCzwIcWTxN/3+QsYFGHoR7Xez\nmPOBXu55/fsf3BZv42jkOI9am60+KUhEaa+jiTip31HiuZeCb8TPjTbfJ7Yy\nnMwTSQIMhWsS3z7cQU86UcCWS5LJZ54huQRT4zN9fcEndRLQSCYeaDc2G4vp\nCfkx9z0ZLIToxRP7LNue2530p0qP4tcXy7O3aJHjdQioKYTG3FFiqKYmCHZS\nVl67crcADEp6bBKB45wURrrCiFheUFuKaDSeP6vfU/Gn6Et2HL3Z8LzOlt/P\nvAyRpc8lffXb/GHNilMATFlS+xq+XgOz7PoCBrlvBvPmQVrvMWt4aDd0dKVf\nD1NyIyj+i51v6rilLwCz7eOOSxLdqTRE61EHeqZyceDg+hjoz0lxdZbASl1n\nC/Cqy99RS6ETHVTap7zwSVkehjTvodtiQAqad5v2dMIUCFuJaFSO13jxuheC\nFhEiDAEF0KWOXvYn3EYEYEnAx6EkdAHoKOB02onGQdFakmCZ4kCg1EQkavlz\nYsMzqJR6PBGmuN6TqbtITXdVZsi/JvYPFTam57GVgrCezAvkXV4VmfAHPC3P\n0MV/K/rQi91eEKFjhDsl1QEqnQqC2un/LCyYWr1TqMrLd1wxvHe9yuCnsFaK\nWGMM\r\n=QYHK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f3ec57093899a7f082bd51cae05b398c31619392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.6bcb6cbd2.0","@material/base":"11.0.0-canary.6bcb6cbd2.0","@material/theme":"11.0.0-canary.6bcb6cbd2.0","@material/ripple":"11.0.0-canary.6bcb6cbd2.0","@material/typography":"11.0.0-canary.6bcb6cbd2.0","@material/feature-targeting":"11.0.0-canary.6bcb6cbd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.6bcb6cbd2.0_1617821634906_0.7166815556791333","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/form-field","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1de00c9e4a78988a61a1b2128949d47dba3e1cd0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.c91e8d141.0.tgz","fileCount":34,"integrity":"sha512-+0ZNvw5eB3i+Ultab7PnprEXgJOx0Hj/SA8OBZiOJAmlq6adfL91dT4ayOx/E4at91QSy4jyg1RireF8FoYRYw==","signatures":[{"sig":"MEQCIHASrT4VcqH7KB5fpDN0AreKLnAv1ASPT5p/WqsBxvUwAiAxcfdmJiPGtVcJ5odsyuD3TSxHFUn/nV+GSZDu1enhag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgCvCRA9TVsSAnZWagAAhVoQAJYEOiZQkIxn97/eSlax\nj/plR4v00IEW+TAo3v+H8wFiUtAGXDuBf7HFRHtk9pi0Y1DlYjocoRackjnu\ny8O6yhbN16FeVDaNy9r8DUa3sscbV5rQcdK1dVpUxjQK7aBy3Llb476kvHn4\ni/CeB1GZ05KMNO7D5ktRZ3VWQVvRZVoLbAzYTn0bBLFwKtbl4Fw8yQlVifhi\n8DDr6R4xLcwmSokhhJ+Z2hPm8kLEtTL+2TrTFIa6xpwrKbxsnx5gNR64T4yT\naSHEmY276FtkKu6N2ATQJKqtrsKwqS3WrHs7yxeMSWdcam+92jaaaroeTpd5\nS/W+tKoTi1s/0QZPVhUkyezwWVpaW86RSo1PE14yTbVP6TNiQVd40b9KtGW7\nwsvbpkYEv7m8YL0q55Pu8VqmITcGeAZSEuA2fPTS1RqN2X18bJFby2f51E7s\nMGGD+smoCrcZdOu+NJSxrvFRIUA+8mt+IZI07tAE7INZAcTs/rUEUOfLQUPF\nbUFKei9C3MYId5kUicKcexEc0ny5dXGdII/zkSuBv1KY2iX8HzIwtzk/agBq\nWu8crFpYw8qD1XzRTqSF+7Ntcf8qb0nqJWvClIV/EdkkdGUyXYDu33u+pJFr\nfYNWuFxzvhJqSzKiznqJ1XyzBTq0K0lXA7LyQoSoIpunL/26N6Zca/B8a2J0\nOFWA\r\n=i+Ws\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b13009a2b12843e6eefaa0c3ae66fc519af7bb29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.c91e8d141.0","@material/base":"11.0.0-canary.c91e8d141.0","@material/theme":"11.0.0-canary.c91e8d141.0","@material/ripple":"11.0.0-canary.c91e8d141.0","@material/typography":"11.0.0-canary.c91e8d141.0","@material/feature-targeting":"11.0.0-canary.c91e8d141.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.c91e8d141.0_1617821871128_0.3012912966400769","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/form-field","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.f77c50860.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"795a0b8b56c4928ffdb4dba74dff28d2118fe5bf","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.f77c50860.0.tgz","fileCount":34,"integrity":"sha512-8E/JlYUfX2jQWi1YwPspd5dgfcg00QwYcosP20z0IGpUFDogEFKi3u6Jbgqoyo8qipByGXDXV5n48bXOI2/GSQ==","signatures":[{"sig":"MEUCIFHyd/3wqPrG/Z2ezbd83VERGOJgX089vwK+yPxAdOWCAiEAhyFkPETwuTuU8d/K7wnUuUyncrxkTwnaRmAMMPDyNNE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyLVCRA9TVsSAnZWagAAgAcP/2JHlWGV1eQXW8LHc3j2\n6weUsH/Zgdzr6blph0cgjnVOBJRWIUARdxrlt4P2rosonY+sARd7R5axSGsV\n3dpyoyQA1gOTuvaYrgXC4VQnDckufwe7nhzlxYNbO7L3hA1uw4SWBtMzb1RP\nm8NuKeyUHFVV6mHICp+QNkHyecwwuHjCN5h847+HSxSXoGy1NGIHnFtxjVVa\n3svAUvuljB1mN78G1v2QxgHcP+HVn0Bgpy37wSF7WydHVYE2HfuakiU1YEZv\nXjw6bDKDCgsJAEzPfw0g7po3ieIAPj0VR7tx77FVeHR9Vp9aYHAau21+Xnq1\n7nIlIX2Id2vncdmr/04pT09Pg0jgZ5YgS2wpnA16DF3WLp8D1o7BKFrSSDS2\ngZaFjIqWWxSdsGMSvZobBOP9egxV3rIPRrYTwHHXIkr9nimG/qpgvv+Gd4vR\nl5ukdjHyTWYoRFn7WvAwswhyvmu+ZxerO+RPQYxaLPA+44xEMO7djlS502UP\nrZO3GkW7ix2SRhJ3siVE23CoLBF79TOWi2DFssETx6ami5wBZXC8nSC5o5C1\nvXIAEpVL+wVTCbuYEhzJd0FdNRPgdzTWlkDXMsC26rJxPivLAcQEn+MDVoYJ\nxA2I8Z70APrBEA9sYi5aciOv6qCkECjHl3mtxWrFopCZG1D+EXIKj4gs2Kwt\ntRK0\r\n=KRY/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d35db9665d4a8a4f385b134c9c1a23bda8668fa2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f77c50860.0","@material/base":"11.0.0-canary.f77c50860.0","@material/theme":"11.0.0-canary.f77c50860.0","@material/ripple":"11.0.0-canary.f77c50860.0","@material/typography":"11.0.0-canary.f77c50860.0","@material/feature-targeting":"11.0.0-canary.f77c50860.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.f77c50860.0_1617896149258_0.7023207181331967","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/form-field","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae1df61b2dc81c48193b305b8f95d75a22bf181a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.367d88bdb.0.tgz","fileCount":34,"integrity":"sha512-uSSxgmFe0/cbQeP2P33OXM28Qo3VF2HZHHXB5CkuA85IPTe008p40c8iJ2VnC8CfokQMKE9aWX+MUqlD3zVM/Q==","signatures":[{"sig":"MEUCIQC4LexRTIpFxsmCHlyeUEN6+dNHKgoW7QbDi7CX4KpslgIgMjUjokrdeJ1Di9D82CnMpTZDApq60p3PhHrAtyuyMa8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzGWCRA9TVsSAnZWagAAwcoP/1iVhNPJhax4mX4j2b/N\n0irxUIb8OCd9WMTGEF1akv0N28+Ngilym1bXYtt+zoanYVAd8FDES2UVOi6/\nCD7D/2Ae2xUGGBCplVspjGaOeHmv3Qjwqc2vuV5Iu76Jq0xzODqAhakVXP2+\nG2ksLvWx5Q7Nsr3gNnRTX0AAQ3EMABMcFSoeka8HgQjLXjdlFrWjxCr6n6Bl\n2Qq+G2vSWcqon8Zpiw7kKYX/E/sVsqSim6Zko/rpY/+CX6rt21V3w011k9l4\nO4UqSF8ZabaBvVRUda0OwIv/jEdwQXb7tcP0ICgi1IjwUoMXp4sPZDJJoiBn\nKDy4z1iVdt+nmYxhImQTFYRuo4ORp/PxtdOON0FWWDGXiAfyU16BbEYRXLfn\nfeTAy3hHjUDpr69TGEW1o75kQwK0wMwnaFq5t9TAtQk0QAQJHqezNI0D0V+s\nOAWO+g/khpQohmCoSRARlj8bMmeody/eQW5klCL/5Cz21HxqLK3zGWlIVtC0\nPEe71wo+tIsfJ5xwpbE6qE6CVqlFUzxtU59cV3YUtQ9FtSvmA0kRhaxFEHNP\no8NnLdLXFgrnbLlngohmYRD/+4g4Xmqpur6Yq0kQ93FckJqh99Gk9VTeirb4\nN3Q4sBthxJRfP3jybcunZ4NeaH7/kyAb2JSNvPQZWuBXYvVOwe6sxu3yvMxA\nOny0\r\n=qnOI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ba9cee87fe351c7e76ccb32f2572bf3ca91e88d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.367d88bdb.0","@material/base":"11.0.0-canary.367d88bdb.0","@material/theme":"11.0.0-canary.367d88bdb.0","@material/ripple":"11.0.0-canary.367d88bdb.0","@material/typography":"11.0.0-canary.367d88bdb.0","@material/feature-targeting":"11.0.0-canary.367d88bdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.367d88bdb.0_1617899925808_0.8946920638292153","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/form-field","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa1c2a58b8dda8385586b8cc39a4543ebf4d7398","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.0ec437d3b.0.tgz","fileCount":34,"integrity":"sha512-BVIFT/js+h65V5m4Q0Ig4bsRgvy6bE7rhuPB1nppeARlOzaICVuRfAfFuu4MS42janp9UK3iwTF17VGbUQ7KPA==","signatures":[{"sig":"MEYCIQC/nQ41eYlQEVKnSLrSXxZ4GHkVhRZ9fFNScQyKXXR4BwIhAOjh0o+bTD1Jj1qj5POKadUdt96QwckSkNGpBCSXJVIY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1sACRA9TVsSAnZWagAAbJ4P/i86OZmWSv/wYKMUVmwE\niZVOg5eI/fll/uLsIiupFdJ/tKsaZjbtiiazmf8eLIpoaZ+JhtlWIwW9G4G5\nzsPjdXFZ/3F52c+3h9FQ3mtbAHo98yBJmhdalaFk7wJKvyNfhTNRyacPV/Oh\nthdPCbhplfY0B60Sgm1kMmw1VyxVS08gKuTaba1osNlWGKhjHFNc0RJ6mt/C\ncP2owdOFQFG65VQ8fsGCfLI2mTcsFkQvm15lrqUBdITVLmCU94WG0duMD2Wj\nPHTAeBWrM8iHYhJFnulgwDnC+wcUoDHZFZwl1mKmQ7+dsYcS01hGx5AT2AQz\n4numIVM5uHJN7kL6WCEpDY3IBvSCKKUQjFs7isF5sB9RX4zpLiovctCvuK7i\nst5DNmhp6xpMF87i9CuupDYndd0birZjvH19DmIiHSHIP+hBa7Nfz/bS3C39\nAEtsdb88zuyUpBVDv/YPKu7lSHki112iS0IHsVfIxbaB/OQMvyscXpocq8Dt\nyPIGDzlOFV4dIZBBJze+KIopC/jJKLjD7GuFh6eh00jM+FQntzx2BhbdbYn5\n+cupChtCKnIaXERTPBCVjCSbCtCdRccdMQ6/2xqikeN4wpJ13hv7GUlA9Ei3\npAwGdUs8hTi0uCJI+mVRtR3iOIjtZnAgG9nY8roA9e4Rdwu0gyqJUSFueHvc\n0EoH\r\n=pcGU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"50ed2429a570432fef9747a954d7c31d2dd11f0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.0ec437d3b.0","@material/base":"11.0.0-canary.0ec437d3b.0","@material/theme":"11.0.0-canary.0ec437d3b.0","@material/ripple":"11.0.0-canary.0ec437d3b.0","@material/typography":"11.0.0-canary.0ec437d3b.0","@material/feature-targeting":"11.0.0-canary.0ec437d3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.0ec437d3b.0_1617910527596_0.776178947706553","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/form-field","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e20a7eb441083874ecb0f7df1f3ed44332f101c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.b2fa996a1.0.tgz","fileCount":34,"integrity":"sha512-v7H3c5z97PUNeNF+myf8wd+10M8N8YsXMdMTjYqjVl+lZigN7a3Jg64dSAtbslA7K+lqFegt/fOHgveA0tTGqw==","signatures":[{"sig":"MEQCIFjIbSv9io8FVTZRQvn6aSpbWuNJorODXBk1PuSCCSCcAiBSQ2lPGG9NPeYDepVThwEP73+nhDu+TEREZhoJAFosdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG6RCRA9TVsSAnZWagAAFA0QAIzKzB9Ymo6t0Lqs3OKd\njFGdhRFbypoQDVt/ZtYebK13dTRoMY3/khiqLZfgg0XWpj6IclkfgucBlCAJ\nrldJ+RjE3OZd2IR51x4KsVNjHD4Hqk/Fb3hbc3/vyrPF/0/TKLIwjoG+i3Iv\n5oSkUYeR1BepC6fDI1CG+LY30+uD1aK6UC+hqkBEdn9+YCoLyWfSAZT4YPSZ\nl7U2MXRs/LMRIz16XzW81ybcnhgRyIWPY6G3d29w8mG/Aqtj141wRN89ACVe\nUAs2nM4oULlvNrQYuUubRh3uCCuPJ5cEnvGvMsPeWf0nhaPEE83rQWpEyorH\n/ahmpxizEHnP2iBELNGP+H9QB+k+JZ2YDDdtA3+zKFywnrFuM3j0tp/gL0Jl\n/VFapyhqvKK7861MW6u1r4tBbClaeKJvmG6LPNLRxHiuobpb497HYX89suDF\nGosjbWTRE1cfGxi0x+/5Ui3bR/f0BGdEb6NDwFiAf25oWhX7jebd8vxDmATk\nHhyL88F+TStBsKRJ4Y81WV9fQdXef8OcMGTCpLhpMp3YkTWbD2Z3TlmSPgde\nZ/jByLcfa934HlD4r9XBD+M3m/6YQ4BC3uDkznj2uH3jEiiW2HB/OdeTknpN\no0zMRg1d7h5yamPNkQq7CtTcqpCcbeU/Qj85f+q/7AJ3z6MQfuP/Ts8ONh+J\nrxn7\r\n=1S7A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0b4eb5b2d30d6d9a7b20f57164a2beba3c20d65e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.b2fa996a1.0","@material/base":"11.0.0-canary.b2fa996a1.0","@material/theme":"11.0.0-canary.b2fa996a1.0","@material/ripple":"11.0.0-canary.b2fa996a1.0","@material/typography":"11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"11.0.0-canary.b2fa996a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.b2fa996a1.0_1617981072718_0.8049740709825668","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/form-field","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.24255c408.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ff0fc0f7272468852734380a01578839353e40e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.24255c408.0.tgz","fileCount":34,"integrity":"sha512-t83WUUrxfNwm899vI4x0qSw6B84XhGlrPCxPC+N0oPNPTeCcXGB+XC5TOMP+LadspoPXbIxp947h3EMT/jIVCw==","signatures":[{"sig":"MEYCIQD+dpywcZxxvNyE1dEmkBakBvp3iGMzWx5oyMn6ATqv7gIhAJs1fRmpl3+p/8pcZjJkZk7x0itEkqQfqZSLZzHJFPPg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLUxCRA9TVsSAnZWagAAc7MP/if1mgfZ4wHtE+LnEvBu\nofxspqUXqytvy8MeksE92DX7lUw8dCGa3AIwUTO2Xj5+Qpe53GKRCQ0qCVCT\n+2YwV5INYyEJ8m7i1T6Zf+mx8k5L31I2RfuUzPg5EfiRzhzCaZZ9JedYkizn\n/Z2QASATvKtyw3oLrfyCY3diAWEzTBAL9R7192311Y8mWliGKmpdvlBKDOog\naDKp7DWldt2PmlZV+HJ2I19z/0Q7Kg9AkH1erDPW/55g3PHwzfOErzeVlCBK\nPYKjzTWylwoieJpPJZgdpOUVAnRdthH0NbxMwDqVrljcmYYZlTIYxpbeDtAk\nJyGJsFV3HJZNgAFqmh1YUhMaMK+4UJLx6bH/QElNcGVuvLoqOe/oNXdOodlD\nwR3lwStlXb1qGE+tO49V4tgOUyNyl1zTL4N3W/iZlQUAy09/Pf9LhJfccY8T\nGDly3KYFh5CV+/GzkeKaTTWXhj4qMOkLMqqxEdLtBqRETZd0CdCj+GOI+Jdv\nvMzE/IjM5KpeF7d0tCxzkVRP6AhPq3q+DrqnMbmB5tAqDJGjJNf5mudbgoLm\n9U5PJ7Vyn21qjaOn9me07S4SXGCa7MAmlD1GYVdlqUMwS6BxPvEAf9s/d9nJ\nAuJk/lPpVUfAwVyhbU7ed/GFshfxTd8/2uAw3V5mQ0/MARNK+92mzB7GeL1B\n6DGC\r\n=2hRs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5cc224c5482fd736af03872db458f031901bb693","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.24255c408.0","@material/base":"11.0.0-canary.24255c408.0","@material/theme":"11.0.0-canary.24255c408.0","@material/ripple":"11.0.0-canary.24255c408.0","@material/typography":"11.0.0-canary.24255c408.0","@material/feature-targeting":"11.0.0-canary.24255c408.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.24255c408.0_1617999149843_0.26255100281570076","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/form-field","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"896b4b22fcbf4e002170b4967c7cf00b73233123","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":34,"integrity":"sha512-rFTie6OwCRa6P84EoI643abWDP/QquBz9X+HYKwaZ/S50UOZcBE+HsHIPzhSmU9okRLXlZUz7xTbgKGBTGITAg==","signatures":[{"sig":"MEUCIEEZSMvCe85XzEWBjXisK7Swh1QEHaVTUjv0dYQJcLBhAiEAwUIiL4hKqf8qtKLYe74/OrSsQHwrt5xPjdgo7z2lSpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNr1CRA9TVsSAnZWagAAVLUP/1zH/BdZiw5vxbvKd1Xv\nLok29U5vExFdh/JiHAcb2LRKnEHyZnSuDFVis31y4fn1rBh8NbM9o84tUIZx\nU43Tz/JrUijNu9uFHZUjBfC+3fV2nJgApD0mKh301f+dTnH0SBri5BMytb5c\ntg663mZXAdDfuO1X4NU8GX1sbHPuQ3CkUb7S3ReLGeEpGuEkjR9o29edV86p\niGVRoybwant3bTgiBTUa3pewB+Rwp+4cDJVuC9u0o6p+vj3QfD4BnQFGXmBo\nE1GERZQCIVU4S9PKQaE8UffxVBSnxXLefCIFwh626elPzcygZFVvfm1OCknd\nY0rJjL4gxKMzvF7yuo4mSddoNl9k1xH2X0AdK2V8RKtKFeoU3DTKD+l2mKFA\nTSGl0O8RQjc9oUCbb5+FKqQz9o9ajeio8UQ5icmZfcjWL62OkQLRKSZJqufk\naPqj5/wxeHIMcwOQdlRVLU2oR9Gg6smJRbQxF3eyyu+hiZbmDslyziQq4xgl\nirJTatYTNf+ouSkhPmDaj7vN3//4x74+Yv8Asg/03ty0KSmVY2jWyT70vvVq\noaxyfJ4FLiJEz+UvUoVXMTkjQfMC9RxIQAzaCxO+kLn5OdY3qc4OPVdIlLH+\nmokFr444SuwqGuF7JUjKOPuysJr5q9voKpJwKZVneWAWR1pzqg9A1EODHCEr\nSYhN\r\n=yJiM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1e1f0ea898fe101863062b7a760600cfb1b095e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.7d6a4bb72.0","@material/base":"11.0.0-canary.7d6a4bb72.0","@material/theme":"11.0.0-canary.7d6a4bb72.0","@material/ripple":"11.0.0-canary.7d6a4bb72.0","@material/typography":"11.0.0-canary.7d6a4bb72.0","@material/feature-targeting":"11.0.0-canary.7d6a4bb72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.7d6a4bb72.0_1618008820826_0.028588939173849637","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/form-field","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.352b295c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a2a18335fcfa8a07bc01e6baa3b3807bb131ea9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.352b295c1.0.tgz","fileCount":34,"integrity":"sha512-6gq792CEMLo6pVPL/7gB2KXxcXcQwQrn+pYrRM7yeOIaLHYXtBvTKIAjkG/4yOi/i5k/flZm1cE0YMUTC//HsQ==","signatures":[{"sig":"MEYCIQDqYsOT8K/qmlzUmZAqvLPKPqpgNQmmAyqXojH72LBvkwIhAJWgQbqv0Ni3BpD/idFml6zggvb3C2tE1KNnY7LouW2r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI5LCRA9TVsSAnZWagAAWiEP/jBiZnsvb7qVa7G+5EbW\nCUed5y2SZj2A6pAYiwdoLFJfQMl6dqcQitMi88On153n+diA6VbmkL6Jp598\nRp7BW5eFiwfMXO1Yvd21xAMYphdJwO6/BR3LboRVkG1rAeq+NCmP5/kOvi7h\nXSr91TT560ppy7PDuKIqRo9WgN2MsUHNfn0YKLgZzIhBNgqD3bP8LzGI6Hty\nVchx2jv/mji9yOlj2upKdbOUaPZoXALoB1qcuiOas4PgxrC3YKSTRzILCO8P\nlJ1ulODu0yWCUI1cHv/eY1lu+TaBV4+TJYWOZNXfFUxyB3Ig+P4p6GQuwuYd\ngM/o67SZ76qOJ8DE31Wtw5kb/VdkRp9ALRbH8B56RjdEzN9k4LOjz6jxBT8S\nueJNZaSpAferjsqziF9Olx5VCopYMtZZkrJ1C1VnFqa5wRsGV46ZEnehjwJE\nplvOsDo5BukPOMdYOsP5W9eoonENIeAhv5KTxkZZ+x5KMOx6qQ3+/Px1NJwY\nEqltEzX6kFFZcn4nO78XDBJJwjV6hCOtjYMTuxIuPw26evckJsuk9oHzypzL\nr5WOeV+AGWQFK+kImF+Lv1YZ/lPntaENqua7kawiZJ4mE+dsKqDdGYGaDNMl\ngsTvhfZqcdEXJC02zUYe8IZ+d391afKdk83Dx05fooCIUz16j2zwERcngabn\nOKBW\r\n=Pr8V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"472a00ecb08e85ff1b602e3bec15d38f2a028f69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.352b295c1.0","@material/base":"11.0.0-canary.352b295c1.0","@material/theme":"11.0.0-canary.352b295c1.0","@material/ripple":"11.0.0-canary.352b295c1.0","@material/typography":"11.0.0-canary.352b295c1.0","@material/feature-targeting":"11.0.0-canary.352b295c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.352b295c1.0_1618251339045_0.6459484223076313","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/form-field","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"452dbfc10228c8b7d3ba3e9129952545895588a0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.ab99b8064.0.tgz","fileCount":34,"integrity":"sha512-bUSFIFS21TWbkXSDgab1yVGqCuHTGk2Ju+PzwynLsJ+u1sJpXOmgzhqoiapzo6rVhiNLiIdbv1fEZ9JY4wxQbQ==","signatures":[{"sig":"MEUCIB+7y7J7vD9SHrtdqxN3EVZz2okuQ8FJ72bMHr8YytdZAiEA8CsoWEO+YbUm9kVcQej+Q9hdWWbW6m2avtEeELQw0UE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda4XCRA9TVsSAnZWagAAV5UP/RlcylUbL6aPoaCEVqXk\nRsajdofiW24xurncRDLOrkJHI8d9NWKUl0OJxPrhvRDsgGNlZJRHsBovwcTx\nwNMiqqujmd1JjJCcSXG1cPbgkQ9578oiXg49Tyhn2uNpoItuBpD/cjH7MlO8\npIDtjfiKux5Q6SahmSPJg3lnGt/CIpjq6zVTwR1MjtOxIglUOsBslDiVApKE\ntw0Fi8P2LBacqyssOm6V3ZtNyL8wUj2bG370SI9xwRq0BngyBqOAQqv7adL8\nBGO0UjWnLApZiCgV1GBdJaXZWelobyp0OySleiOJnKKt/Q2my1SQaMJt6RS9\nKxKgc+SWie0Zj74+68lK41A64JIrqyRKodD0h/u8ko3NJCzgGpZ9HQVDbZ4M\nJ0RQvO7asD1Q1IjmOf9lLwuAiWScTQOsE7WVnNPomHMuv+7nH1NTGv8HoJCU\nc0vz7UBFaJUaaP9gTlG7V+iEPL+OucQ6+sdb++ZWPD/80fJwvSpDOqOoGpwh\nzWHbjOjxc34WyQIrF5lNI9LD8sehlBrio9j8ps6X125IAGn591tdgg1cxmzg\n6vXcnyq/Km01EIq9rQEAiMqYFJ4oFKvB/Yi7eQsuXgiUGlCwoyDmmtXxw+wI\nkdNyLChBdmQTrV8LxXYMYt/4SXTDUV9PuuvKUsaXGDi8Bt0pgXnC8j2pqdiF\n2sG0\r\n=pTVU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7a67c09690e367ad8ebdba2d551f6432c20ccccd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.ab99b8064.0","@material/base":"11.0.0-canary.ab99b8064.0","@material/theme":"11.0.0-canary.ab99b8064.0","@material/ripple":"11.0.0-canary.ab99b8064.0","@material/typography":"11.0.0-canary.ab99b8064.0","@material/feature-targeting":"11.0.0-canary.ab99b8064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.ab99b8064.0_1618325015039_0.28462124756894047","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/form-field","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"112ca365ccc26db4cdbae7b99bdcafaadd0916d3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.8f0a11e32.0.tgz","fileCount":34,"integrity":"sha512-Z1U648Mh27NymsvCQzP6E4MwvII9vfz/zwY52GtDRvKPraU9cYVZ9HK6m5axnfZlYGG21PrDRYlC8t9Wb0+DYg==","signatures":[{"sig":"MEQCIH1v4fAMBIWhMs33AF/xDhlTSQKMtU302v9xZf4XxDyVAiBlSPhVvZ3ZhMiZ/jNhpZsLmvDbzZIFzaqpGRM7hsCd4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0p8CRA9TVsSAnZWagAA6VUP/RfJbLtYAySztm9qEi6q\nqebgBzZMiLhBdvMPjzQDhLk1H31NvjS7qj8o6f3oEwSJMaqQGCorEYSFOKed\nNrxTP9nD+5jquCh0VVis5jfkaXWd0C8ed/Mo+Oi1X3a2UwmgJ3J6oeguuPt1\nuusuO98PVZKnulqrLn6qMpaAB2Em3ujoSxkVU8vmsnqb/0PUgOIfPmfqY4VP\npS4b8a8AhVYD/hsoflPmUs2Ws1tSfmwFRW55blmWVZhwcsOgs/coAnHv2NyI\ndQw5WeSizsG8Nvlusz4z8x1T+dlFnvRZIr0Clp1M8dr8MLKmrsk3sWyAqJlR\nXB3f59BDfRCgtITpaSbvX7sweb6XDw8YQ1Zq8Bb8/IZC4cVqe65IH10XzCtC\nGpEpzwHt2CGoDw+mFeYS23bdeV8d+yi/T6FYPwPFGrOfRSdSpTLcTp+rZS6Q\nlkEF5iLjdky0LhGkfZcouOlnjfzJLxHnkGIkb8E3nJ396bGNiIwfUX/07yWM\n/s+u7oeR2QJhL+nChjLuii0d45SrRKSM+kW/Y0YrTd/cSR4ogfe8FBU3hKOZ\n2LwaHnlFCYAYfEBAalu1q7MXing7OkKyDnpwb9z7ZxiQeVmD1gv1bmMI7HRb\nD7tEyIlgDXfQl9rBAhTNk2/sm48IceV8sdLPc2HaO0TGkLn5VGrbsUefM03y\nYF/Y\r\n=MV+7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f09b2c0c350e2f684e84766c95eed5c92b5afb0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.8f0a11e32.0","@material/base":"11.0.0-canary.8f0a11e32.0","@material/theme":"11.0.0-canary.8f0a11e32.0","@material/ripple":"11.0.0-canary.8f0a11e32.0","@material/typography":"11.0.0-canary.8f0a11e32.0","@material/feature-targeting":"11.0.0-canary.8f0a11e32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.8f0a11e32.0_1618430588223_0.5174221833688109","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/form-field","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56043718a50f7a3e33e3703eafa6afc084696c74","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":34,"integrity":"sha512-QWR/e4QrGkq5sCyVHE1wfKfEuAIvLV9VU+JcgJO4pzSj2YwZwsu6DEVu3V9/92edrsPSG52coM8igMD4U73mAA==","signatures":[{"sig":"MEYCIQDAuJKbbOmawDEjOzcc7Po/SL8KVarKlCaWtnaAbxK+swIhAPtDFALHH0vkhx3JmmT2sDcMg9UQKOgylMpxEKjlRGaN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIAeCRA9TVsSAnZWagAAPcUP/11DjiJox47W0seRnpCi\n505TskRFCFvL5eex9JIjBCUHZPA9LWdfHEhTSrQhSUGsoXG1FlDGc/nJFpZm\n74oIIvgnSOGnQ+DcO6pfsFgYXJG6+mBBcw+r1/9FdL4S3KPPjt3+duimhAp5\nnNQVzQ15u14fcqcv+IZYOG6Qh+oOkowRMziiJzdyCUtfFejnlgBIuLDEJmzD\n9BxbWlKc1v2DKnbQ+LSTShoDiW7MvHqUnUATyq6uup8lShv9tcNwHKQfbSeJ\na6E2WJY9TR/73oYSxQK0sF4v9uleqRsERRbxaWxd6G8JrDDWtb4IZDQPJIX/\n11AKpLDD5SGYv8ktgLwFOnrt8lckagXu/eduGM+LZG/1pHdFVUdJ95AuYAEH\nigjLktwt8C/EqGCi2j9XqQHHKPyudvRxwXWLgOeQlBd5ATwM5i/vSbW7Ji+g\ncMC1R0If0pnzXFXZ6VYlaf06b6G2kQ6alelB2ZJzRg0TGKWWLF+D+rvBJjM4\nf03tKyN1q5vMlaLoe7JiuashwU/frMCuJtrV8aqbKiPg1e1YV/HgLGQEz9ft\nzuUn0bLX9k0MycS/bmxU52rgGeMy7jpDd/vcLDOJNTLUlcCZM0wdFunDGlGw\n//SrWmxAo0ob+fFdFJosd1ouTyR2ll5KnM34LkjiEN3Z1ERc/ITs79+YYMJN\n1kh1\r\n=75ce\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"eddcbd64f4309f4bf5faecb13428405a28774f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.f5c6db8fc.0","@material/base":"11.0.0-canary.f5c6db8fc.0","@material/theme":"11.0.0-canary.f5c6db8fc.0","@material/ripple":"11.0.0-canary.f5c6db8fc.0","@material/typography":"11.0.0-canary.f5c6db8fc.0","@material/feature-targeting":"11.0.0-canary.f5c6db8fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.f5c6db8fc.0_1618509853790_0.9383881557432703","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/form-field","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.3793a3143.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"258f49fd3eb72e19d77b2cdec9e1a0eb4a6c16d1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.3793a3143.0.tgz","fileCount":34,"integrity":"sha512-b2+vzVSQE3z5AfiLD2IE1W8aj261bfMx0foJyuNTUqc7NfCksqBSCHyaTVb4Ml2udmxTfmdgCfowPRWYApvJIA==","signatures":[{"sig":"MEQCIBmzhjkPDDrFdhSp6aUK8pjB+cUxmPEDkRT/KKKZNMO+AiAIC2kMqp2tXlqGT3HPvbkM1+GMxSiDgLSLlHAJxT2RLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIZ/CRA9TVsSAnZWagAAnAAP/16lhhygLezYkafUCTqT\nJoLvisNOYmAEktcI/ltTx392dEmtrRAJcjKU+INdgSoioY7U29ZZmtTr8yvv\nbefv4MC+xmbym6GTDVPPZaavEVEJBjYvAtPtCJ+Wiud+HiXt+yRztXYYL0bM\n6j3qiyCbjTc4AVLql7AZPtgjmrAODgLw2GUJTUXcP+SkUq8Fmp2Xgq5Bs586\nmBo4e1UiL60GxyFZHv3IXhUrFzSNKBBeE+Gh3y1RA+VSDvSnSzZOp9S490h/\n7wNBnmkAqrmwJJRlQ9EWf9H3qi6vezwU1+fwN3pVAok6GQ9hzWHKZ8l+6B4d\nqbWnULZ2ifwwAdI48NJxI/U0rSztpjaDHsloWiNEV6mrqs1R3kNSQWDevck1\nDPYV3NaX9j5/yPMrR+K+QqLUIWo0PpvYIu0TfdS4egVaWYtxTD2943qEVgY5\nJrIaoI3VGsNIOJF5n/2/uVZFT8vqZNkezN5XAW6Bx/GSuewisOrPT+PHe7Oc\nicbwlQ7vQ5I2zdvbvWPU1mxEfLjAcrj/XPQDisSlsQLuec0peCU/J97QM2h/\novqp1w9qfHQ4xB/0DiN8dsa3Mh+yz4cdTFvmTbfsgP144EV/gctWQumOaOzT\nhFmv6jMOR2iz44nLOc1o07DL8g0nV045Bl103k2MDmQacAELfuPwrP3A2YZX\nLIrw\r\n=c1T2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3cfbed34975d8f2990425af21414290a96e2240b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.3793a3143.0","@material/base":"11.0.0-canary.3793a3143.0","@material/theme":"11.0.0-canary.3793a3143.0","@material/ripple":"11.0.0-canary.3793a3143.0","@material/typography":"11.0.0-canary.3793a3143.0","@material/feature-targeting":"11.0.0-canary.3793a3143.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.3793a3143.0_1618511487056_0.23166766898094893","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/form-field","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0efef284dcbc2cbd1b8796e4e00b326ae4b643f2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0-canary.bc104bae7.0.tgz","fileCount":34,"integrity":"sha512-eARRS3B9yippO9lKlJzxhTtf7/BAdlUdp90q/Dgo0+Qdc+/CCw/0XlpEBn7OYw9lmFWFwyqObfzKompmNJzsHg==","signatures":[{"sig":"MEUCIQDv3E/3yeADqtyqvgV8K6ncx6SGGaw6XTY6Rvd0ey04lAIgFmry2m/GM03A13zZa9X4E81IBqKwgUah1Qe/3uoZ2JI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJgECRA9TVsSAnZWagAAX9cQAIqyTW8THDwWQdG5D/je\nygABI3bdTJD709pJt1gpAmRawdwTvLXrWCYtHJx6snNumaaTRGog3+YBoQZV\n8TKBjESee7eeQnyiDR9IG3eNm7LnO/4NDghknAAGMBmr9otNXSxjjWS5QBcU\nZUlF9PcojtBbC2XV3oSYkIgM6fl6gE/XPEkB92a1T3GlkcSct8Udp8hhbIes\nOnTChbv9UM3g/MoXrmdu3Ro83/gdcEJx5s9c8TjpDfZ++xDHhXVILLoBoUMu\nM1jZOh1BBJVtJAAtcxf68R+iEOG/ZmweD23MOXeDX7NE7twvgZ/lW4D8Qazk\nvfDeBBbGOip8Rh8d5m5OHzt7dv9Trz9fBzu1n2IYHWCk8Fqu+5zNR55xTuMk\nW8eCZvMU9R98fujOnGYi4Jnv4D4mjukf41IhmRrWkbNGN3h2gc64PyNClayB\n2MKzZ2S6F+pB8/dT+iJByJ++TgF9ECBD9unKuPDk48GklaAoMoql9JYlEMeT\nBQERpCNX9KBMT3yjlhVzpOgXZOwDZfSHWAt7nwkT1sd8X3ciyC+VVwxPlOUl\nqrPCqP4iJKwLPIPnIRW6IEwMLtz3DTHHmwOoWaKuvfSY2vz3VcNkFGvM5zE4\nOsX5Udnm0xCdoM2kose41b/qhhck6TgWzc/72HJgABTGFViArXZCYAkmHRbn\nSmPL\r\n=0kEV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fefd0309d7bea91a430a20913f05f501364f2ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"11.0.0-canary.bc104bae7.0","@material/base":"11.0.0-canary.bc104bae7.0","@material/theme":"11.0.0-canary.bc104bae7.0","@material/ripple":"11.0.0-canary.bc104bae7.0","@material/typography":"11.0.0-canary.bc104bae7.0","@material/feature-targeting":"11.0.0-canary.bc104bae7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0-canary.bc104bae7.0_1618515972266_0.1189628567576495","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/form-field","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f70f92632986b215c393be5f5ee21a9832ac282c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.3f342c3f4.0.tgz","fileCount":34,"integrity":"sha512-hKG2btKas0h1aj78C+eYElYZ0SwDki7ycvCDbH3xxPuc6PbEM/Gbbn/meOno2Rx/WbeuVX+WBnwjJxL0IRfumA==","signatures":[{"sig":"MEQCIDdBEwzB2K1UxydNB4ofTjU906MWzsCI+KVJDH46zXdZAiAAtsO9QWroJwMj3VruOVMIhTOXaOE/UbT7utAn/BB9Cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMQcCRA9TVsSAnZWagAAA4cP/0ozEaquQVCYHImkdOAd\nOxDUVEOMWOUT/PQbfM/VXgkD4M0QVf4uHF2vdB1iK0qdm/f/dzewBabvydSy\n3eZE9ZG+2ECnJRaFWCLSRyPgOq/zOdaeMF9wqZH1qGI1uEdO21Y7WQ5ww3+e\n+cirDCKp2g0qKlOk8HsYTnfmSqCtSUxlJ1SVgasVu6yHTGnBoJZ+nSn0mCXZ\nvZ7WGyn1NDybholwb5gHGnO1D00gmLM0ZO7GzHgV/yM3NiFA68xcQFDXw+Ho\nBIXPFkKJKNhH9n0Jum0xfW7Efwguv+ZWHlBfLQtUDGS0FEIyB9emI3bkzOTs\nkP/4MwWciDCIUHFBt+D7c786sG9heAS6k/vUTscT2aozjXkWxnqDcSvRtldj\nFF82lmF7CVsWv0NwFyJZvOm2E6uxZgIXMFcj29qKyFfIvUVqQVEw4cJ/KY9f\nTkuIfYbEuTjN2bBjAoD5lblQY0Rl8wT3CgRH4kBcCvUhrXWwWFUruzvTrxT0\nDpz9CuMzx/OMp0IdjCL5eXz3U86QpJ4wYWPQRhgIiLCBEtRUw7JfbZCsG+6/\n9s1Gp9jNxp0MVsQob6VoT5P7B36wCVceuX/4uFaaTwbqrwfGhY9dJ18vf2L4\np5aSRBcIsHQOH16cyH2/0Ls7OtHjBVvLsA6ZH7dGqf+qex1U+dhAVQ/l6ENa\nG/AY\r\n=Xj+Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d82c002d3f314f99c3413389c77960016a48bfa7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3f342c3f4.0","@material/base":"12.0.0-canary.3f342c3f4.0","@material/theme":"12.0.0-canary.3f342c3f4.0","@material/ripple":"12.0.0-canary.3f342c3f4.0","@material/typography":"12.0.0-canary.3f342c3f4.0","@material/feature-targeting":"12.0.0-canary.3f342c3f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.3f342c3f4.0_1618527260245_0.6502884614271112","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/form-field","version":"11.0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@11.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7839c78502b38503d631b0acd107623b8ccc00b5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-11.0.0.tgz","fileCount":33,"integrity":"sha512-w42PHsq8A+7cgrgBGT5j0h3FTgjs7qvLJFYlwp5QYayC2qTZQa3VsF3OTxuXcn3FVlFnBCwILp0+FfWfRmaH4w==","signatures":[{"sig":"MEYCIQDVotnGUpFjKsmRVE7cdCviCsum5eiQVtEQ76CzsodjAwIhAJY2Zf6jBauyBize5466djnk2Jj/SdWIN++NOYSWkvlX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMUVCRA9TVsSAnZWagAAwAEQAJp3xXIAC2b52kmAREgc\nKnRjShQNUkccNJ5anpvfHlX2yOz2djE4ZoOFkadjVTbKc06iRYLjp5Hyw3Gm\niILUVwfqHm7ctHXYDfEsOkZYqIBS3VmMzowLWUWPENNaO5rSIyoMaIobVoZB\nyP4Rcl2zNxYtb7swh+li4JZpOnHWQ29DzyW7waPbAwStJnzcZpguE/7oxGRh\nobfhX67nty2U//NL0mabKQ7zB19KQeh5Am5Yb4bvwTnZTZYfybcfl0suwuxj\nFoWb5EYmyo6fWjwIH4U/xmTRvfsiAFVyw4dIC8rcXZigb0TngORqG7MUVOki\nC2TZP0n2Y7IrqDTkFyWJdkNovpmcTxUzxA4T9WgxnrI+bvxF10QbzpzgDIqO\nSXw8Q+WSCVZQ+U/evwbpxTbhno2LILGq1FhOsTMWI/av33xHbd2e5RPKpoyJ\nVHHvkCFH8pumnQcw3Ndjxfpu1apMdKKHK1V9B69Icu2kMEMPgY1OTt8eGKSd\n6hhGBkGwNambBk0qzZfiSbqZjCUxfn9nJFe3GazdMSvcs9Xgua0cY4ZeIuCa\nFoDEG5gwxUlOa1847RRm2kgVLbFpHlcrwhlopwDLGJUHiO3dO2zPU9EoCvAE\nmsu5DFQYyiZ3Sv4OfCwPrsMwoT49HBp+INa/kh/wFYKT7BEw53kGJnj5HLYB\nUQlk\r\n=cKSO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","gitHead":"3f342c3f4715fd3587f327ce4ea6b5dd314c5c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"^11.0.0","@material/base":"^11.0.0","@material/theme":"^11.0.0","@material/ripple":"^11.0.0","@material/typography":"^11.0.0","@material/feature-targeting":"^11.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_11.0.0_1618527508869_0.03164900162647655","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/form-field","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"097a548f549a90423e3d649adc7a86eb0898220d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.2ebfc5374.0.tgz","fileCount":34,"integrity":"sha512-s53v/uZOAF9Fib5qsjCCUQIIvkCs4JqOE+vNTjGV/8gT92uKMKoUs249hYKIlvq6NymTzmphXLCiCvQrOPxAqw==","signatures":[{"sig":"MEUCIQCpRdsDuYZ/ulOAl+9zh+DDw3/VicUx8AR9/ef/NoGTPAIgQrvpaLZU5QkVd03Gbl+pc1Xl/zA/k2NBfmo86X0VivQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefdUCRA9TVsSAnZWagAAw4YP/il2NMYbhoDSb7gJDFzv\n5yC1s3t8sIYYnuJuADK636VfPv4Sd2syFjhQBf0QTd4yk5Los0meesszdDPL\nyjeqODEzR+tybXiJe71M3LYCLYToAMYpjKPvlJkI1z7tcB/G6sBJq+y9bDkR\ns57zYS1G6dscxTvBbkFaUl9beFeNMvGOpKpfV6CzJWgGCYs9W5tZfi5Wc1jv\ne+KhTg/v1aFL9Mdgxqlaj+0D2wIyvSpHtV8qJHQGJm3ETp8+FeO3X9MAGNdF\njRSNb2kWM4VoVdTH5OpU7aqGy9zu4yVEPLThT1cJwpWvz8h+gkwfRB/U2hva\nBcv3I6uYujABSerhLZVhCJIsFArlYZdWgMnz9z7iLi4C0RhdsE8bH3wNbjfX\nCpu+OBKIZP5LdSEGZqlmMoVP50boblkfwNgc3oykeRFm/9CTo+Z0WUwaATZS\nluYdVw/o1Jn/YxI9de1CqFT5BPbd8O1XmSuWX5Hq4lE1OYxBWL3H4bC/ZzJl\nVxZL3JJhcxs50iH6YqN9/vwUmkv8ENaOXgSI7365IVh6Ch0VMG1mh+z3xU+q\njKJV9x1tHshIPzPkUCl/iX0du7XIh6WTx8rRRHdGDfDHUztoxUVTvEVC6VIa\nNCgm6gxEcARFGsAsl8mOO46kSeo+JjwlXdMY0ChN0Lxq0kt0jjaZqptyT9S8\n0ztT\r\n=oj4j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"603bba9493212a7e1b6350d2f12e7488ae1d9594","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2ebfc5374.0","@material/base":"12.0.0-canary.2ebfc5374.0","@material/theme":"12.0.0-canary.2ebfc5374.0","@material/ripple":"12.0.0-canary.2ebfc5374.0","@material/typography":"12.0.0-canary.2ebfc5374.0","@material/feature-targeting":"12.0.0-canary.2ebfc5374.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.2ebfc5374.0_1618605908344_0.021577028933675413","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/form-field","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.5631828e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c714f35e2fb3420ac72802527ab2e82ff8874799","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.5631828e1.0.tgz","fileCount":34,"integrity":"sha512-BOiSY6yrupa/0ht075cSH3TFhT5ongpljehrua7u0Q1y9cT4XTzkgT467uwHoATLZ9FwPQt17C9CYGaX0saRVg==","signatures":[{"sig":"MEUCIHXw1j7GgwC8yZVqNdUQf1DqrdjqC4Rjl/uSFd4wEz9PAiEA4guDhvmKRhfB3KpZh0eUlWDEKiR25I0/F6fW6nm5ews=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepJvCRA9TVsSAnZWagAAKOoP/Rfo85z6NqxDe0tu+gSt\nf0X4LlWhQ47FDkMa7qY0J6HIZgI8qY4m1Ajg4k8kaueRyEoJHKaMfcDXwQ2G\n+wKoNb8bb4EDPoFRcBPb1PleI1v+tD1C6mG/PnagUgIID2cJHUfXawxwpVm4\nn3XS451cW8sP52hxDLVFQPqcAioJdirS5qHgZpzN85ZFKipjxw9x1Br4suFt\n+9oXFmsnrZ28kJBOQ3s2UtB29hXPbKQaPF8CpNirJ48H3VEVbLzS1B6ngT4V\nJUvrl3HmNTh8Z+CMBzuLSOHedmik88gicPD6cJu69R4QuYKlPxfGu7SuAspx\nmrY54nOV2qMnuEEKHzwYTDOLOK0z0IJGJN2+3EO/EsaJSvSIyZqOCbyGAIbq\nWd2owlLYsiwVgUaR+8CfJjkeTk0YgBK3PFy7h/7g9OgoKlIXlwDvBxBiJvNF\n/lUkKhG5/tzZYWmREYrTOECSHLe+2dOKNSr7yuJjAhFBL/ZYWAkV4SufcE5v\ncj+zaENa2ji1ebbH18Gm+grzMh234ZmjM+iTyT4OtB+9En70SqOJ+uJ8T9at\nSBu44J5YEgeqhKkoxVqGHQS+4NmdEJja9UilmOuUSOx8Wu7xVpXh0dtOkcFj\nRfsf2vtATVjhuHzluVGpu1Eq4C9tsBPMP2Oo3/2YjQUzcilQPUImjJR+MD0c\nLgNK\r\n=3kXj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"497e1a2527ce0368b4038766ea4893675ced3523","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5631828e1.0","@material/base":"12.0.0-canary.5631828e1.0","@material/theme":"12.0.0-canary.5631828e1.0","@material/ripple":"12.0.0-canary.5631828e1.0","@material/typography":"12.0.0-canary.5631828e1.0","@material/feature-targeting":"12.0.0-canary.5631828e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.5631828e1.0_1618645615087_0.7594876573901925","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/form-field","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.bd685395b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fde0bede2d42270e71878d73fb07f09ef939826c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.bd685395b.0.tgz","fileCount":34,"integrity":"sha512-BEglux9mu6IH8f15TiEG9UP/IOFzcoAgu5yGm4eKsU351KQuY0e4gJiMd9pGWcCvWmbQunDJsw12ksWzpjDVAQ==","signatures":[{"sig":"MEUCIQCpoBMEJVX3EF/l3L682AlutOn4dYesgv52TxKO++4h+AIgNf+PT4GgXn8B+9qvYs5h01pZZ6q9L9pO70MgC71l7iE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc7WCRA9TVsSAnZWagAAy4UP/A77qigldGnkvGVDo6WW\nye/10J+r1g3W8H9toy+9kEOvtZQFcJ26peY2e634B218SQSGr6LCFVU3oDlK\nJoJpPla+P+w2e934L48nvkWyINEiCYHvEJA5YlMunYFFSgtWvKh7zD6tgZIk\nZUqQBr3tT96meCiOgLPZIAaj/g2Zjd/dIva+XSzKDoK/m3vtK6YebElLnnIH\nqj+RNi3xsczZNwVH9mJaf8SkVZhkaJe4gDZn035IJh7DN/X4O/oKyRVJ3Pos\nYDL/g6NE1U3Zd9Ma54OaQZFnNKGHgPCzQLjaolC6oZ8blbm5W45wIRo4fgok\nG4+gdPbWX6YXZSQOBpyOzJCdulOHkd++2pls2qIgmwyhCqoLv/gVwANuyIJr\nAaKG/Sm8QXcO4uy5o7WzRA9VNkBej2yRBWoUnEMkT05rnsFwhE6qdk1ySsln\nagjMqVQAwBp8OFANIekuBCJ55r6S19at5J1O9sn9dSjiygQ2nB9u6Sc+vGL0\n0c0pVtNcroZdA/yxle6gYTnpQwxjGKBKPHbf02GHgdDkyM6AYxBYRtbQLBRI\n6ri9F61RI14ag/m+5BxWdr+dyCwXjvaphEUegGYE4v6HZMHYH+EOm7r2yRPJ\nnkLPxV6y5SrdVcIhnrMQAC11jl8X7Auc3bPWwXmzys7ZzewbRPFkts4B3w8N\niwc+\r\n=xVN0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"69c7d9ec7c5de65144c3b2a9b283b6baf7af107a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.bd685395b.0","@material/base":"12.0.0-canary.bd685395b.0","@material/theme":"12.0.0-canary.bd685395b.0","@material/ripple":"12.0.0-canary.bd685395b.0","@material/typography":"12.0.0-canary.bd685395b.0","@material/feature-targeting":"12.0.0-canary.bd685395b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.bd685395b.0_1618857686197_0.7011951568380712","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/form-field","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.b52196498.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f48f0e7c93c2490030bab7e865b45ece162d476","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.b52196498.0.tgz","fileCount":34,"integrity":"sha512-sB8SGLp+qLaVqj/azpbTO2iy+ZaQ/JblewWPUobV15Dgg+1Ql5kFrNs6FUXzgyp2tHujDbuAhd0IyxdznjcXjA==","signatures":[{"sig":"MEUCIQCHkgab7qTHBBi5rCadsRpEn6IlQxK+laaCPMovpc4SVQIgfeT0qrEYhbuNv78giV83vqGWcy9RgPNrQpaMiaT/JlU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeDECRA9TVsSAnZWagAAoc0P/iYeQ923wHihthlaRfM0\nzV5SKnJcVqnULdmj4QpolPlKVFt07fGXvjUzE6ww8ka5EKkkiJFtOJiDWTaH\n8brB/FLiWPdJRnd8kDfk+INtoPBbQYvNpgivWSMqNHnlzHGFOmZlo4F+6HNH\n3WdSj1t5u8geSUyFwZdm1NuXFrPKUww9EJgBY05jhrJESFEK7xlD3udlONei\nvRr/pffHGo/hRYpKwtVczDdggBpM/CKl+lIjuamHt2IiFDcJBLhyirmJw9fD\npFGcZI+p9xKPxOYf4ZqreQaTCdfC95hUN2LSyoKOmtKPNtUPHP7fN/pgp2xR\nIH6Mfb9LcNkZkzbqt7qeHtQcaj/U8VgGNAVjIbYcpRkwIs9XDviHREvkX/k9\n/fhMgQhtb98fUzCp9gnmk5zC9NFLGIMRUgi9y/Qido8h0SZ4+MZO5vkmVNqP\nVs7Rv3WO90KvgAKpYet0al0eY0iSHuz/ViZOZXOVj0NnlQ/IRnjGrSTZQ4Sc\nhBVfJB35DqBkER93t6K75Sgyof80TbAPgmQzStpP3fdOpnz7N4nvDFHBDywf\nwJlYC3+Yv6oK5KU1PjNmLBRNeLQvzutQVmW8jaHyufuSoclz593CUVKI+LZi\nMjLOtLrLHIsmUuGOsLP4NLJJqE7tj+srw7LTeP6Gc3jrwshyCd5lagk2pflC\nrBkD\r\n=BOe8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"953cfdd3bde4c66a4b6b90171d4ee702958ae1c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b52196498.0","@material/base":"12.0.0-canary.b52196498.0","@material/theme":"12.0.0-canary.b52196498.0","@material/ripple":"12.0.0-canary.b52196498.0","@material/typography":"12.0.0-canary.b52196498.0","@material/feature-targeting":"12.0.0-canary.b52196498.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.b52196498.0_1618862276169_0.37757599712360035","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/form-field","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8bf98810991da35eeee0b422a3df8156c801d11","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.8ba3e298c.0.tgz","fileCount":34,"integrity":"sha512-Z6FWpebQh2Zz2ZkpwaM2qmFD5VpEK+quoEwWHoWOKC4GazClZyDueA5MhETuUnxSeNlZdct2KgBc61XY1S+fCg==","signatures":[{"sig":"MEYCIQDhDH3dKWqygwN8r65Pq2Rr6Kk7MAmH1ByZY1843kHljwIhAIDunp33huWAfCg/gXs0s9TDyHURvKTMIsoYgULne6Q3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDHnCRA9TVsSAnZWagAAY70P/A8EzcpQYnWFXhSmKWUE\nxienWjpKnbFDwjJ8/yqym6pBoYk1vPDkerx4e8kQW26VP67BFImH3aI4Kw8g\n2k+Oe+aZe3QGFczottu0BVM9PvAAMudZmTjhZHkM2hdVJDOFkzMSldMnmwYx\nLUfCj29CqnbtqObZ7Ld7sGU2AE1bc+HDwqhL4MhJRvuFNqvIksItOridS5vP\ns4r2AJ0ste6Q+Q1AGmySKMitfOrcuOzTGZekSGMVTYKIBQ99H/2NdO7YP0aP\nHHp5aGfgvmc77EvQKdBJxcBvBtdehrFwS06DDJEEmsQwRLiGipTHNfAQzzrc\n7Xosajzla0lHfK0M9FH6NhYEyVQcF4u+/Wb8Xt5scBXf3RHBc0p9Pj7sSjcT\nNmmR42bZiNPswXpIwFhSY2NpJIoaJN3kl8KJI8GnM76MFyLfwRg9srNmYxiD\nvT57G+Tw/qVKJWORkf5X0nL/3cXgkjCjfTkYIyfPmqtbS1jU+S1vjE7JUr6/\n1ZyTClNbOxTsIOldlelGpP/AHsPbtvyxavBqee46lPkK8FfnRIVii5BFvltP\nFR0CdWJqgvV2Vmni1iVgKmD1cUtTBBbFLYDknd7LpgsAJ1HRDaRvfhIOY+v+\nPZSkJojKq6a+djQocNAl3FaAhYSuUEke0OUjp4EDPaMq/fObPTBdET70rOb3\n9e3Q\r\n=PvUk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"206fcb6cb686d5de97867cb4e4005926e2a94501","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8ba3e298c.0","@material/base":"12.0.0-canary.8ba3e298c.0","@material/theme":"12.0.0-canary.8ba3e298c.0","@material/ripple":"12.0.0-canary.8ba3e298c.0","@material/typography":"12.0.0-canary.8ba3e298c.0","@material/feature-targeting":"12.0.0-canary.8ba3e298c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.8ba3e298c.0_1619014119335_0.6426749367546167","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/form-field","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.c629eab71.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc57ebe4b3caef7b8f6bb829b3905c1548637009","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.c629eab71.0.tgz","fileCount":34,"integrity":"sha512-samFcQBZWg3B8cFWKX+eeZVZSe0T3aihacOCpu0LVfRifY0YtFI0Gs0ds1Y0K6pY+/fomM8OOApgCwba7eeC4Q==","signatures":[{"sig":"MEUCIADWowEVV4lvP/Zcsc/rs/UiAj2KbgZuSbPQzaNzjRBOAiEAoRPBzklCJC69NqLmZSEqhYBqVCDWpzVdszwnTRFvRfw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIOfCRA9TVsSAnZWagAAOS8P/0JrZe5O76Mnfyr6JOu5\nxsrLQp18R+eziQbmIaNKSPLriAB9EqLHVjA6sR2xEolNMBbVC6neoWGfVkvI\nZhsqbquF5vxLX0j+x7ClobI5F61aprOMtFVMiL+k+b8Hjfpr94wMyu/zAWB9\n0JjG8a+6z13PsYnZ2QR1snbLcftDigxY58H3WfL1EGzoo52zEVilUQt7eexa\naMo67eTna8/R5sY9Dtcj4q+LUZL/BjryrvStgBlWFYVPOQMJyK8mP35Y8rs8\nxIzjPccozffNNEZCG6Ic28m00yjmV3Ec8QSUXSkJLbnJ4HTfcY/O6jqpVsVq\ngdf3aNP3ta1Dzgav0ldDISEZn/GaGM9gWgvdBUSJ+Ynvy/z0qe+EQC+AJhWI\nSNWYUjiMy5q+/h/DtXSIfRWTiAeInanaRRZdTglOwkOHjK8/B4nODNgKoaLD\nvSIxFHTAwrB4rqbZl6XBlwpjcmpC7kY8jX80+N/ILWoJxS3IZOTHNFEHWkKf\nIFDlYBxMZl1sYfDJ/732OZIL7v3+mnKyFNR/TtBLAHenXYa20CUKGBJqFqL0\nKLDxbRptlFbQItM0v4Vshbb24+Pn1IrL7OyRirWPv2GCMu0ba3jmv/xiZARl\nYGuYG1Er3vrmSeCa27pJFRph8uVfRZfHXHa9RoEaBlyyOD+pUmmb+4mPzStJ\nWfbY\r\n=6zd4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"13ae4a821cd20abff4520de3f38c689af7cd0edc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c629eab71.0","@material/base":"12.0.0-canary.c629eab71.0","@material/theme":"12.0.0-canary.c629eab71.0","@material/ripple":"12.0.0-canary.c629eab71.0","@material/typography":"12.0.0-canary.c629eab71.0","@material/feature-targeting":"12.0.0-canary.c629eab71.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.c629eab71.0_1619035039263_0.23825354627648943","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/form-field","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d59ef78fd15b9f5a2a8d955cb4b89b0f7efe725","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.8ace3b810.0.tgz","fileCount":34,"integrity":"sha512-ZD52WvYGiHwyONseat/z8USDPnEBKAcbyp/DGMyNGhNm6PijsjSmkwcRQ5KVd0XyYkju+h4olOApXi0gFM43DA==","signatures":[{"sig":"MEYCIQC0DZM5irna19NjBkScwXpeLBo6vz43RespjvnG/kScwAIhAJG8wZ/bX5MkDd8evewrnNlufRNBfm/HJKF8l1SKwVQ6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI0nCRA9TVsSAnZWagAAcygQAKHe2XplvX0QM73jS/CI\ncotekgBod0UztWkifYp2gAWjS9ZMpCeJ7nzVxoNs3hvsqhnVQrG6YXE1bCbk\n8nYT+npOg6Qnl+Ux6zc2UhzRbbvPwvtru9lA8qPSJ0tVajdedYPTidvtzBdZ\nUALDvcVg0qnKbYoxGKcsaU3K7WwB/TJfUTmYxxJ9Nm426Zf/4LrcCsSIYf5A\nseKbvGMjoVhiOxsyM8SFRWhoR2BiHeHHeVgytc3KgC1rYSqbCz85nA+daTvP\nJgXgw4nGx+gbl+DpXY83lgEfJqXa8Zm082C8kec0529m6ShyUa7Pnja09qQi\nLOwEvrck0ylOm8uf6tiDNx76QThm8kRf0RZqT6pUi1fBovfQzTY2XGv4CazN\nyaOhlcDzwAHxHqN1cm9WrYQB+61jtspfNu5j4zJtBzBOyzVJmjt+rYaA6Vgk\na9/9maWsitdodplJVaE5ZfR5NuPKnhq3zwmzApVcWvOENZ4RCCKr+PQpu7N+\nKxMhhOChrFYy1UcjhnMM1Q8viHMy6pNWLcZFNMRJyaEdp5tgwX9/Fr7ryT9x\npf6n1EevEvzyrBC4K5Lwu9015WeyDiQ2muq7AjCEmAwcyQ4Mo5D9nD10VKMf\nWmjal4zH8aBfKLcZDgQjBUPhbGeErefcje3c3e1CaCRVzJae6T9y8YFwa3O+\nMUsv\r\n=rqj6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"622173e8e2308a6104e06bf943b6423381a17e5e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8ace3b810.0","@material/base":"12.0.0-canary.8ace3b810.0","@material/theme":"12.0.0-canary.8ace3b810.0","@material/ripple":"12.0.0-canary.8ace3b810.0","@material/typography":"12.0.0-canary.8ace3b810.0","@material/feature-targeting":"12.0.0-canary.8ace3b810.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.8ace3b810.0_1619037478965_0.13081497417221843","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/form-field","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba58530f18c1db533ec0555d7f453938d428388d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.70beaf42d.0.tgz","fileCount":34,"integrity":"sha512-SlZJ9rNnzw6/4PEeYIAMlbK92mUNFj9ndgbmttksJVNMnhddZ5Phvn9GuaNlurrNu8l4YV+G9U5HvxNm8F04Og==","signatures":[{"sig":"MEQCIGjesx501BXXyiqIH2JyfsC0XPOaa9fNbd352iu19TltAiBIiua5dZtfn11rXgUb+HvD6bPb+P/e0pLCZ3G0fuUlSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI/cCRA9TVsSAnZWagAAkpIP/0LEgiC/qvSdImFKRMrz\nEHsxMgrfrvZBTLKSohiJFE9pzlB3gCYSt7FnId1iiYU5aPM/hi2fdsAP9V1b\nbxg3XyhD69Cj/2Ml8+5a6v0xA765/rvt2sAgwzHQo/Sq4WERs4hOzx5MJR4S\nfj0xx07JLFaT0IyelafjSSOALqInpu+Qf82Sq19nHA57Ta3W+Ld292ZUTkbf\nFni63QCVusjLwh3kuL232lOS9EkroUUl5kV1IOeVRbl+v5oHaWyVJdjdR0ju\npsMNPPH0DgtYC9mWVzrn+ycH1qrck60/m9/1Y+gbjSAHcGONNILWt6ewWUig\njzMvlEeSru0Gj24Vt4aWGE21pwSEcK/iv2OG6iLLLTR5P+CZVsu0Jxqq7iUi\nsk5U4SnD8VT6EAlms5fr+idEjzMqmwjdDDSErzjdjDRpWP4HhQ8v3AXOF2iX\nhbzKC9ItBLLPyHEZrstCJTe/+sC0+L/KD3MuZPmzPyQaX1QnSBrQ7Z6tpoDp\neJEKUqySU02tKXt/8E11KLSwySILIkBG7zCG5eIIFCjyFqWWmrPvGK0FpiCC\nz0oCkT1JtXbmSBi2FjJMn7ZQuYn/h3vrRpGaAS1nC8r+Ux0Xw/0ctQZ/SJiY\nDG48fA99jwqvPkd/YJkjrWbrwPqiFwvl/DK7ynJVxCrTYfiRrwYUUdXNBXrT\ntdqx\r\n=IEnh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c5b29092fb8fcd0102b908417d8ed3d61c3448f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.70beaf42d.0","@material/base":"12.0.0-canary.70beaf42d.0","@material/theme":"12.0.0-canary.70beaf42d.0","@material/ripple":"12.0.0-canary.70beaf42d.0","@material/typography":"12.0.0-canary.70beaf42d.0","@material/feature-targeting":"12.0.0-canary.70beaf42d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.70beaf42d.0_1619038172297_0.31998114464862404","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/form-field","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.cad489689.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a191e8514fe6697138edbd6a3352808e2da7f3f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.cad489689.0.tgz","fileCount":34,"integrity":"sha512-k2BhtItDJ9bF9E90pV8HSpWgauM3vdrziTIzD5Vb1pOMD5a1WmqwK0hdyD9dFSKF8ZAmt/aw0afy2mhruGJsrQ==","signatures":[{"sig":"MEUCIQDKEIZLU/TQVy79JLBQdqyLej1MenY8eW9aUFvBteeLbwIgSequoM/fcg8uJx+Mvk5lwuuwTMINQfJ6MMm3EDAbVio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggakhCRA9TVsSAnZWagAADa8P/2p5niGEItRPSOKM5yz1\nucfr16AT+eGi2ZoRNBgJF7Edbj/Zg0xo8Xg36gVv0q7SY48Sh7J6DMbRin3w\nWf95BoWjbBWpawEv+7si/w2byxeIK2B2ixnJC+PSWeM+oJ+FNzxRvXRJRsmA\nZGgUAFduNwxXLFehGVMULP8tbDC5IecuatWY9wOWwGWhABVyqZz9+VFgaqFo\nUvP4U2RY2qotjKFh0K1MihSioRGav9J3QZ7ZkZ9RY/dNn8YHk68ulR8QhvOw\nn9pVH58yiIAxozjP8FsuYC24G2hUBNnPi2vjgy6lTLCbtXJ1fJ/FMeIo/PwN\nZ6IzkX9/fRfVeQuMDqebjEUZ9dwn52XQp2zT3C212+1OaK6kT3c3wE5giVxW\nEjXrlX1HpZGrizrnqBFdw6tCniGszGfLYaoMTp52J6GH8mzi2oHRcbWIuDbw\n3BEkg7gWlNvNnD9oegK+3KV7f/BbVIy32SKwaFwHW+MtaVq7uaBfiZOqW3u4\nr5FpTOCkfVJsMsfvrhDc8if5hY+LiA9bnnre/bf8eAvDDtn8I76XvQQ4RCKn\n0+JbgTC4uWYBWz/9qYwPysgH7QpZWV6keML0LBjMpTSlhSz66vxWYLCXZXa+\nEGwBsb4rogSXGKirOvoPcS5E8abpZUTtW8IDSIK0c5gwcoLIOE0UDDFFbMj1\nCGzv\r\n=g/ey\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3e5c20e059b33965b63d0073bed7e300c57d5781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cad489689.0","@material/base":"12.0.0-canary.cad489689.0","@material/theme":"12.0.0-canary.cad489689.0","@material/ripple":"12.0.0-canary.cad489689.0","@material/typography":"12.0.0-canary.cad489689.0","@material/feature-targeting":"12.0.0-canary.cad489689.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.cad489689.0_1619110176618_0.12886946726987203","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/form-field","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.d928692b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"717f4a2672a3d617a84aef36ea1fcb8fd48e794e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.d928692b5.0.tgz","fileCount":34,"integrity":"sha512-3ipvIXKN8CiRd1+cyw6UXqx61YU5/qTTVqQHozYZKcTBsKFZqXmVRMcdxroa8X6oHToABU19bSLpB84qd03QyQ==","signatures":[{"sig":"MEUCIQCS69gVqoeX01XxBTDSnDH6M0wdjhicjbdWHY2O1A55GQIgIaUGDCsSJkV5nFmNjgHzOw0pEE30JhbCBfSNOvGTYmg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwUrCRA9TVsSAnZWagAAAiIP/iYKr8tKPXW3zdFy8jpw\nTtxE7ANPZ1Q/IaPvTXdIZ+K34zjs04v/BUJuc7UMOh6Ucd9IKIrlF1P07EK3\nla6jnrNcET2c5KYLP63tSDsgaoIm261HVv6IOCWjxI2kybw543AV6PlnAEh4\ntQfXkQLlapJ1ZOm8JeTY2xFT9DPKg7HfktvvasfAMsY7Fy2IYjdvOJBIEIrj\nFp2LPIf6EJh6ZbNqs+FivPel8cBymq98OH/PoQ6C02SJKLrvLZrrpy+XxTjD\nxgE23BW2nTLxique5Okv5mbH/FY2zMSuzgcucofURhararu+6hMRWM+SAvdf\nVJtWJVAPdRZqrAdzfhgK2ObZFNNtDKNUEEQi5yCWNe6rYv65C0Yrv6OmDhdW\nAoocBbsF5zpJIj92+hWdApFpZI3DbA/+BbTyMcdHhq4sv3G+CCL77coyJxYn\nAnoEHKzNBzHW4u8aTU1gbYLBS3W09CXUbznFHR9BpZumbE6k9qBC7odIC4aC\n+afztWqva9S4BwNZG+Mg3GwszZi4/SBsrTVRR69TPZkuIKKIXD8hVZSoaclD\nrjflt8igo0aXb4lyKjbhIUJ6/FKaiT4ELoo2QCUmhuO+eujzGktCM0J8JIaM\njDWj2XQrBAYClBiBxuls9qA1JTb7CXHU+u6ZMXFaTSicU3Trx8n2ANkbjjdA\n8POl\r\n=7yhP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ced6a0237d36ed84c4d277fc25a11d9453108e12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d928692b5.0","@material/base":"12.0.0-canary.d928692b5.0","@material/theme":"12.0.0-canary.d928692b5.0","@material/ripple":"12.0.0-canary.d928692b5.0","@material/typography":"12.0.0-canary.d928692b5.0","@material/feature-targeting":"12.0.0-canary.d928692b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.d928692b5.0_1619199274684_0.002240175412309142","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/form-field","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4ae826f8e6aa2c610363bbe914aa676819b12ed","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.8f68de8f3.0.tgz","fileCount":34,"integrity":"sha512-jTQuy38z3e+lVb0D0tZnlGpN9vdeAFFzO9ZaZI2qP4/hg62K2ZBXzzkUGLBy15D7NADQpHO5FjSw2xc0uzPEfw==","signatures":[{"sig":"MEUCIG3UpXlLce4w1kzPf8ZLEBy12r/Tl8SsNe3ASihlHJmOAiEAswQCEv6SKAI9aZOwU4c4imBQNv81huufMX6+aJBALr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw5BCRA9TVsSAnZWagAAycAP/1o9qGDX6qZGteXkbXlh\nnOItv5+ANNVrN9OWsuerePJPy8ljHMcdAwzpWRZIWz7ipbjXqI4smCRKgC8l\nDfsoTkTMGa6bxw8Jm/hajtEnuUjI1xPPP1E6rPEfT1+scdw8zMfPYDBp4sqK\njtsEebou14o4MlGnuy7l5mmaPzkvQdRU0aJ1XozOQpEVidMjnvcaHOm4CNdc\nwwXx0FQ9a256RNC0YrENBqP3BUYgeK1s4YUmEQC6NbbPDKL5Z31dKtCU5xh3\ncaYf6ZWgxtbM1E6zTCuSRmTHWhsFq5rfwgbbT3T30CEGRYcnz+37hKvIDrhd\nEmfBUe2kvSUwKcklUZuu/3K+op/zFpCzr59RH/7pJY0vDmAudOjtvZYQW8+i\nLQCOKz3s+oj1hEYEpODvY7NgfWs6cguvKI0Rk0rmiNvLn9y8ZM7fNqDc6AUp\nMxRce0l3rJOpkAC1f8RyHu7jeTBRhHx1wDiHMKNHKOu5+Nmj5a/Zy+h5I8Ri\nB/h4vKMFoTi9gs8eQtkcvOSFHBvtr66spgAw0D2oDyi9Ig0Ge6jwRFGeEW2s\nfA5L6FbE2iPh/dieSVJ43UzQvRiqNcIhERu+YRlGdLHDVFuvnG5K7j4x+bmr\nOFChh5U16BIsihS0NpQHVnGzvnOyyYcfMCfpmYG4bGLjlEvfGROl4WRSy5ba\n4Aky\r\n=HvL9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5bf06e910f57a544c428d7559d72d5fc2a5f30e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8f68de8f3.0","@material/base":"12.0.0-canary.8f68de8f3.0","@material/theme":"12.0.0-canary.8f68de8f3.0","@material/ripple":"12.0.0-canary.8f68de8f3.0","@material/typography":"12.0.0-canary.8f68de8f3.0","@material/feature-targeting":"12.0.0-canary.8f68de8f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.8f68de8f3.0_1619201600213_0.7859781112916764","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/form-field","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.05753cf77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa7f79e387c5c4ae4d8d73e72aaf1c8d95d5d291","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.05753cf77.0.tgz","fileCount":34,"integrity":"sha512-EhtaIrpy+Vc//vAhRWNVmOff8lg78GEPruodr7gU7AK72RRYEl85JLHX8ckWbH8cSe/9KiPlpxKbUCnKf1qmbw==","signatures":[{"sig":"MEYCIQDAv/h8XCrom3BOTdqhVwLzmEBIvqWVNq7MkcOpeKAAvgIhAP6V0wwCmjBY+09D0Fw+dC1RsRYCkHogRnME3ULH9z58","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1uTCRA9TVsSAnZWagAAx7IQAI3qlPcTepZv5rb2Qmmg\nHhj9+WfrXS4vNzUKVDZj6YAPBOMET0kB1P0JPx6qX5jRCyTp5/oCBfBJ6LwU\nuG5Uoe5DijRpS4anuw63zXHJtAiFZzXjJQe3erK/Fo12mhbhxJImhpBUGMPY\nT5QddSBx3fc3bbqC5u+jtlLyHV4nntbeawgRXegMO4QDP9XVd3xzETO2qWtT\nsBhShczt9SDC4oatjR1n7vErsMwaZ6heBEudqecNd0j3dAhaYzgdBJO7Flla\nXwy9OBTi7CIuf2o/RuHk639vlzWqEm9R3ohKRTkzVtzdPYGkzqImMv1NuGfC\n12vQ8bQkrXSGqCuD7jZPyFD4tDy0eWkXyyX9zdMaVoLacyzoY5D7OgnBpTi9\nXsZtDlQ8mL/BTq3JL8UKWW/Jf6yVahxKXLObvAx3Px5BC8CDlwSPftLaqzwI\nY7Ykd7NlVcdaz82M1f9n1TGvgAmjvX+uL2JErGqh1Ar+tCfHKnDiVaLGg7gy\n4dimNC4H+USvYmjB4MzGb6SP+Y1Btq52PG5kQBXYenfQtlaBu3kaa19DCh15\nXJW9CderfdjU+TXcd3ewLzq51ShgEx33ZkkxxMBhlgAwipP7JaYsoVlYr2dW\n+q/f8AZJDq9fuKUl9a56yDc5HIgqbqYJopJ6pDjvWJeVmqPyn7jaVAJ8I0bA\nzWJp\r\n=Bzwf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3557c74d7c4f9400f0a8d2c88bc2610c1d600199","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.05753cf77.0","@material/base":"12.0.0-canary.05753cf77.0","@material/theme":"12.0.0-canary.05753cf77.0","@material/ripple":"12.0.0-canary.05753cf77.0","@material/typography":"12.0.0-canary.05753cf77.0","@material/feature-targeting":"12.0.0-canary.05753cf77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.05753cf77.0_1619221395058_0.29448026323510246","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/form-field","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7125f38005559d89d06ec5667f37dae158f256d8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.ef43e6d96.0.tgz","fileCount":34,"integrity":"sha512-J6ZqV3cAu93JbN1om4OuWRc803rgcGF1EXTfj4IEfhrQrjdX6ZiUzsKeIY2WJyFLbFsI5k3NEK3D0ESdVkdE6g==","signatures":[{"sig":"MEQCIDQeB5Ld6y+KBYdldYzb9jSAEYfrCpHJWKDibYsdhcUOAiACiY557tJmW5M+Po5giYZBH0yEFyxfn/pjonOSCZftMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg10PCRA9TVsSAnZWagAAFWcP/1PjnaH5YgVfM/UpERU7\nvNcYJGDDdoPlecls69OhWfryuXo7QuVNNNcpkLuFB6s8vcZot908jZV9dtL2\nR1xTwp6k1F9+IVmw8fXBs4B1ij1JmfTlzZXWL+j0LClTnmt302aPCqIRSWCK\nuJdGqMJPvJVN22pWIh33pa2pmuKU7LoUeJLX4C+gWcgd6YFg0on/3onNIlMQ\nPW4KOP9ezVh4myEwJGmEcG/RJvTyDjbtK9Z4SraXP4C077Jn4ZioJKpJ6wTD\npdhEai0x9SVQpHDlYi+Vll2rAyMB0f9uX/4txRTxCr6ujXJ7D8QLsaGvIM7w\nnxcsQ0CY70HGAvYUNHeOt8SjpJxgB5kgw9S30piQn7xmnK7wci32cHdykSdb\nj2/wVSsxa5Iwh8dySWNWtsfxSDk419fZRhQlXtbqt7ITXy4AggRzValJ8/it\nKCi/kDYQY2Jmr5luAD3qYIc/unCzdZNd082icLs8FXQE7HWZ9EVM8Eba/HPN\nJOE35J5+VLfXmeOtwPXHloacSCYolJu0x7Y1YTJoKprQey7B5Nt2Hm3tkXLG\n5D9vyOGA99QNftsVEnZKlQ/kXEk3dbZone3zaRN7OMWhPPOQub1efJyPV7pS\naUsKy9BljS/46x5hA8juI9v6P/9pjLY1TKA8ObswIBI0dKqqr1rHMx0S+KCs\nsWdO\r\n=HWLJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bf61e37f943b49cb1c3287501ad6fc31f8c88687","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ef43e6d96.0","@material/base":"12.0.0-canary.ef43e6d96.0","@material/theme":"12.0.0-canary.ef43e6d96.0","@material/ripple":"12.0.0-canary.ef43e6d96.0","@material/typography":"12.0.0-canary.ef43e6d96.0","@material/feature-targeting":"12.0.0-canary.ef43e6d96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.ef43e6d96.0_1619221774546_0.057534412761218956","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/form-field","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb553965532bed5077d12e0e79401757afbe79c0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.197f64fa2.0.tgz","fileCount":34,"integrity":"sha512-M1ftjVlAdkw9EKEHemXOPTVewbTVEPSPOC8j3beIk1EF4Cy+yploYKlz6ug8COhpIzfIJH2x0KKZgoD13V5IgQ==","signatures":[{"sig":"MEQCIDvfClpEmqY1LPW5Zj8OLSOgSmy3MBViHDU1SVAKlSwFAiAWh3EKO1c4gJOrhs+T5/Bgns/kWSpIFuYetY+iwmdazQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvPrCRA9TVsSAnZWagAA54IP/1S2BChABXX0f7qMGWjJ\nUO/Kwe0dvBvbaSMvvN2DMT9YCbqdPcH8utIiXFvlLiTbHxZWVLCVTsYoXxEz\nL8sFrFms+KDZAAQRLuqqmU3gZJIWfhGh+1bnA82So+XUfOR/KYEgUenLsaop\n+Sq+5gojjOJyUAFNnPlOtNhAWISLTljUW3uy6rP1rrBicYqYUwCrMwp+4Mjb\nFvjCccJ0hEqzvDYmsMn+9KNwt7/V4fVtdHQXislxrIXJphKP+z0fTmK8Hzg7\nOobLYvZgTBk4SwE+CnUpd6T3GKt05bdN6X/uQ+EIBPE4Et0uWQ20K7vMhFr+\n/K/0izFECng8AGRIJW1FugMdfDKRb8+FgaEiC153SFtPPVXQ1+TlaEAiV5uH\nyVVXub72ldRtI2+Gr8yqnpKMgf5q3XNE1C94NvFU3cjqTcAKD+x19vpEf1SP\nHIR7w65ef4j2eAoP5rZLVMtOAJiNKKG9pJzAtJ0lz7uP9u0I5l7bRuqphMTS\n+LaZY8v8jHz6wl/nNsIVpf63XhXxtL62All2WPA36GCkwlRmJxmvFVKiCGkJ\nUlrrkw7xI2kvrkuO/dvWay55kaIxSLvMN/bXhkkpg6eVrvIwfRQyXWDMjBGi\nuh0BFO8IyHV4/pojh2aOPW9BukmbRGpIrw8RpuIci54S3RLIWqn2ms3IKFI+\nZpep\r\n=bz3u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8ddcd6186c353b0d99439cebca29eb95eebc705d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.197f64fa2.0","@material/base":"12.0.0-canary.197f64fa2.0","@material/theme":"12.0.0-canary.197f64fa2.0","@material/ripple":"12.0.0-canary.197f64fa2.0","@material/typography":"12.0.0-canary.197f64fa2.0","@material/feature-targeting":"12.0.0-canary.197f64fa2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.197f64fa2.0_1619457002409_0.7552838679542526","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/form-field","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a91536f9da7d61581e4480b19c9cc9cc41bc1929","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":34,"integrity":"sha512-EeL10tT+ul8lRvjthHcsLCw/XkiA1IxDH6CbDnjuFsTuPMZdwaL8XZd0lvkyOdNzW14fDfyzPJ1rTwCEo02fDg==","signatures":[{"sig":"MEQCIAvYx0bEDYkPd3r1BmkFGUYWthpDp+D2LymGPZtaJzZOAiBuHE8gebkM4fX6ZuOKJOiyfGwtpkcjrwPMzkr1YAwCsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189598,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2a/CRA9TVsSAnZWagAAmToP/0bIcTPt7Lgh9q25k1gH\nALhuu6Ike18nGstBSRjXn0cf9cU9jP3yjokFmxe+DblZjqfRZNSF7lujN2pR\nkHVGYfkoPQ+ikYU4Bp0HXVRqmK6K8qpwHXLcl6aXhDsfqqYfudnmBbHs7Jip\nFIrblIANbsZxqzjcyL6IZGPL2Z9b63CMs0QOX51txcTzUtyEI1f5y1dKVaxl\npq40bK6FaTBXP2O6efhwGRDBRQd/8+c3c6C8kMlH4K2mIAh1UQwCO8BV11ZG\n+qeO2BVhsq9My4xtz3cweI1mKhoUv6gwMVGm1w2r7HxGv+ymhmKAs1hEFx75\nnybGA9jen9qUoaNQYgALNJuIy8PG5dIjrFiJR/sTRpYd+oDwSSiNuekGRytv\nuMlvOM1I8K/fPiMhwylhxcu8ffIMf8MofPZFIVgYbQDBHRGP14jHQw2wyBsL\nC4prx7XO/dYe1tXhoZLefiCjAuCqaVDpCcTENwGy5MqmFp7YlS8qzvkDeGUg\ngJNeL83c9KKrrM64WVMTgzrIuXCQxuFL+r1c3Sztzwfmwu2bhMymb5pRd2Eo\nszAeMSI4CFLkaAPY+O8ooFcVZNANLY56YX4+wTP62uHDL5N7/Jdf7RhS+8Pt\nGxyGlfabTs3fXQsYS7OnkZjoxsPVZp5GBHph5iZcJW8TLbEbCa/jPV2b4mp7\nP1bm\r\n=9mM+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ed8a5f8b1756d56e3973815a51d6fc7e51c366ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.55ad2d7d8.0","@material/base":"12.0.0-canary.55ad2d7d8.0","@material/theme":"12.0.0-canary.55ad2d7d8.0","@material/ripple":"12.0.0-canary.55ad2d7d8.0","@material/typography":"12.0.0-canary.55ad2d7d8.0","@material/feature-targeting":"12.0.0-canary.55ad2d7d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.55ad2d7d8.0_1619486398492_0.5494012056590711","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/form-field","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dd2b318191bd0d348e02a83d2c84c0519d91cc0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.ec4ac5234.0.tgz","fileCount":34,"integrity":"sha512-27MBJiu9KGRV3zuQS8tlxtM7+07A52v7pLpjhqAzjpZZQxiaWCQh/9eaamqIhVkAflNFQvpyPJCdSPUgU2UaPw==","signatures":[{"sig":"MEUCIQC1Xyf/++J3VoUYYM/TsOP/9XPWeRDdYgc+SXpo14n6SAIgMdY/DqNhnScpVmMzWTtqCTnkdjWlLqpdTH4okZ9uibE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8Q1CRA9TVsSAnZWagAAcrIP+wTvDkwANKNt8DQ7Ktxe\n5VRso5wGUeKuNtif1JBMwfUIDhCqv3pBsQkZshrnU3r3OMXRvW/6g/FljETw\nobPV4UPN9xabSnkn8cKntC89F1rg4izDk+foFAmZGP4FF8K1KojdcTMFD1/G\nYMrW/AJl0sD//MErDocAKFH+uMu31brJw4X3BN/394GkxweXEzpcInre/Lmp\n7C9gPuXazez9nK3Oz7XfcvWruhsGMSFHVZ2s/RPqqP1vX7uY6rNFgBvr0feJ\njoct40McGfJIjHT6LTU8R+mT8QG7/9fkDAEgRRLb0sqp+cvCt/Z3hU+tkhQp\nqIE6oi2tgO0lgH/hniaj1azINUmcNT7FDEdWLn/NLzQM6d0vgrlen11Sal0n\nIevvzLeO7MU3ao1OHtCTSw0mkVZ+aQGCl0TsCV4wI7AguXyQsELd9xpB8zD4\n+Q1/TK6g+2YqKzdvoYCCKvOAl9K3sSBcCfxfWQ3/E+xHnqQorxOuP+Y6XBwt\n4i/TBocn07BVtQpc6+tr6IwX0GP0JTFIWvrcdBPooI2XjhJEH3QDOL3wpUPB\n6mpRLtf94JgqGs/7HVWuDcONsLxyCzGD2nYdnlV5u8nrkb52NlZ8LM8r7V1X\n4z36Cx9idKDfhoIcAjGHCS+wHZffA9LIUeaHzR87Yybx/kzvt0L9Q8tfJqiK\nV9Gx\r\n=HaX1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b189e0be8deb45b4e94790f21c377c3884f551b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ec4ac5234.0","@material/base":"12.0.0-canary.ec4ac5234.0","@material/theme":"12.0.0-canary.ec4ac5234.0","@material/ripple":"12.0.0-canary.ec4ac5234.0","@material/typography":"12.0.0-canary.ec4ac5234.0","@material/feature-targeting":"12.0.0-canary.ec4ac5234.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.ec4ac5234.0_1619510325117_0.5179194193486312","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/form-field","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66a19c7c749945ee1547b7093556900d81934ccb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.b0579acdb.0.tgz","fileCount":34,"integrity":"sha512-BV48Ex4w6ttYgDaCFIkvb1VUSgi5iGj6IXS8fac3py2S+gWXKSgp5xu71/FF4UaAE0AGPGkLFxov1lzOtPU31Q==","signatures":[{"sig":"MEYCIQC2LRLI+hLErs39Xi1c2NpFc/dh3CE2EvBpmhTaZ3ukRAIhAMhgXEhM0rcchWaHjtvOAwst5rTQLL1VNrZHSnESuH9D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh80SCRA9TVsSAnZWagAAmsgP/j6ITVCz9UTLqMXaOOdS\nGxiN4FZ3pKqpFEKpzGcOa2df2M7EcmdW+9wMMpBJ1UCZI83Y0GXPR/zv2LGJ\ndoQQ4llMYq6+PxvKZyQtghngGI0NwqwOlMidXh26PhyLoEZPqODtOXC8gNrH\np933xVNLV0+L5uiRqmkwEQOm8oZYVtxaOJsEiz1wqjQ63m8VvGAtOCuI/D0P\nQMPO6w2QGozDR1DTmVNi51mgNtS8rY4C8MvpXANYUFFseNR1D26MCkYx8PxZ\nvplEKUKyvwyo7FDDiozPwS56VdoBEDeEZJfq7Bvt+g6QdwpGKjJhdc5IwVxd\nc4/hxjp9o3EEOKFWHTOFhwUwEWoD9nsa3haxq97P+9jO8dSj4QkQ55HrmlXU\nuumz7SestRYjgsPf+ErZlBVOWg661nS7wONcDCWpr6NeCOZRP7YI/xSOLrH+\nG0GXaj309xGfdBv33tN6LoXmKT8y57UamzdvZhI625ceHUvIKGNSVO8xU3rN\nZuXw6nGV++4ZZ7KS55hMX2VEcGGn7RjMikjJoKRTHECG9tPWSQW+1etols8E\npq4gqxP1ICQPd3Hy0RlFKkZNLugprv/WqtdZZ5cMvxvwLsIrA5berSNCRL99\nHyaOWeRoocezLEL5Viu/vsqFeFviLwISgCgwqk1sW6A01EqWUpTGECs+0K9E\nTP8I\r\n=qhoH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d1f704610766e7d0c46b8a40beb1848121809a41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b0579acdb.0","@material/base":"12.0.0-canary.b0579acdb.0","@material/theme":"12.0.0-canary.b0579acdb.0","@material/ripple":"12.0.0-canary.b0579acdb.0","@material/typography":"12.0.0-canary.b0579acdb.0","@material/feature-targeting":"12.0.0-canary.b0579acdb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.b0579acdb.0_1619512594329_0.3870585578608763","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/form-field","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43a6becfc53e07dfe8a15ec16d8349c9663a9cd2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":34,"integrity":"sha512-PzDmGYI1GmmEoi23Lv8qJvl3dUaIpn0Tsia5lRTWDEr25ONvSgD7EOGGoCYIi64yvBlJvlZee002DsyfpFxhBA==","signatures":[{"sig":"MEYCIQDYChFY9ltFNnSSFek+3U8iEWENXHxvYMxX/F5C8+sDNwIhAN3Cu2oMxf6k39rHNWUpBQbBy2V8zotoso45KxfNuQ8J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHrQCRA9TVsSAnZWagAA9R0P/icn6iAi/MyJromief8n\nB42lnUAycML6L13+WiZcZrXqQ0cEQnoz6rdSKsMUW1bNKmVo/DStnpEOsnWA\nCOGdFIjSa0gsrbmVI7We5SR7CXQ1QbXbXdm9I3llemX9k1E022oZvvCXltmu\nBEmx9tPgP/jKdk1K+hZOctonuNj06o7MM6iyihSdygHCS+K9S4afdtXfaLsX\n7nycFrZmohDk3OSYN5o8LVGASd0UtqIizcLNDr8qVvsCEgLO340HI9iMcFXI\nj7lO6Wf5YAZ9YHVoQ6XHZIHj46mB7L06oe0Sp+1yhfsN4GMnbdiVuKMLayk+\n1th6lmO1FzajiquQZjETMY0RNlgHLMUpZmGAgRBdJTIDi7b3edFYeqFLMQgQ\nGbOhf6eyuAzlekHHHdJZF9G4iZ2CNn5rvU6AMr4MYSDc3vDj43oFUi7a4uuz\nVhZNhRBnc058VrkOINgK4d7bOCyl7J9xUchieDiBjRs+jug6To51ucatpf9q\nK8JTvGpfOsAcLl+1bO4jGIxDY6X0T0AjGWyKa84n1vHJwRuG41oE9E4p2Bs7\n/XwWYPMteYLMMaEpvWqfKGZYpGHVdNf/8vdVRk55RJ/h1RdreRy527P0tqny\nAMBUaSqBpJZr86YOwGHp/RgAAI7gTJ7122xQ5qfKKe8jijb4oh+NBKI1GHqi\njq5i\r\n=BoCs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f55512ab74610e3f3cd0db70822ad9b52b9cfefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.81e2d4ff3.0","@material/base":"12.0.0-canary.81e2d4ff3.0","@material/theme":"12.0.0-canary.81e2d4ff3.0","@material/ripple":"12.0.0-canary.81e2d4ff3.0","@material/typography":"12.0.0-canary.81e2d4ff3.0","@material/feature-targeting":"12.0.0-canary.81e2d4ff3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.81e2d4ff3.0_1619557071583_0.5823531182639945","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/form-field","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38eecfe37112985ecef16113e729762bb4d12806","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.c8edee52c.0.tgz","fileCount":34,"integrity":"sha512-wadqV9V2ezYBctVQ/j5gyc++1/o9lEtcBY3sGrXxmJCPwjSFDLBzVFzMINlOE28KYDmQzFFPDn/3JqkbhnJTiA==","signatures":[{"sig":"MEQCIB1NJXBK3dk/4FRplAD0TAl6aVJ648HWB8CQ7DYUheiUAiA9hsEKyluUjX1JDSZ00mnEq7jpIz/I5uVcD94TxnKzYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIYpCRA9TVsSAnZWagAAGHsP/ihCvQRP2nHELm9WY+Ae\ns4yExRglllu5nrG0aQCgkz15eMBVLbKGzVXl9DeOAU2WUa1QCd4tQSObZEJE\nrXL/OdeQludXRGD0D0/5YMzf3iwNPBEdKfUkFvO75Hr194k9UELSbknJjZmM\nXbulw6e58sKRljaRpNjiyc//rpg9dfSQsuqatDr2YFNvSHMBjUU/DjcA7ppO\nFD0GcpmtRbufEfvB0l3rKf3nCHxakqLs8/tel5FtilS3LiygQMQmnXfAPe83\nUshUVnfnObi+7WmTlOwyzzPvaNRiy4A/35+TsR4al+VRAYOU7e4WARJkBq82\nYzUTKacCWc7drfCPJzvrQvqitJ1G9LYnX2avXxyBGpRUMS0ZJ2yxuWlRtdRG\nkB81zBcJF9ShIlan+vmJI0nIo49HUI5d6L28xSvyn0G6EPWS4RGE3nVDRLrt\nqzOTiF94Ej3M971bLo+jLVmwxusEVKbv9/0kGaXtKqZFisAsOtUzoWFm2ZTS\n082lWHbcbABIIQBNto2DYf8UpW6AG0ejHi4loH4qoEA4ql3ke3qlnb6swo0h\nyYd/AP2Kplo21OoTILv9eXsDEYhFMWj3VQzJQtC9yBe4nPZZCOG2PRD3DiUV\nG4AF/OaoxP1EkKD87veoGc7NubzdQSUrJCqkoSi3R+yKet0YLr9EjhZetWnI\nVyLr\r\n=nl8R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e8c7902721c81225e1c8b750094cbe6ac4666a0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c8edee52c.0","@material/base":"12.0.0-canary.c8edee52c.0","@material/theme":"12.0.0-canary.c8edee52c.0","@material/ripple":"12.0.0-canary.c8edee52c.0","@material/typography":"12.0.0-canary.c8edee52c.0","@material/feature-targeting":"12.0.0-canary.c8edee52c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.c8edee52c.0_1619559976814_0.4838586009050414","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/form-field","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a881e9729561a3622380abf41ac10be97a28c1c6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.f5b6110d6.0.tgz","fileCount":34,"integrity":"sha512-qaQ8RrbCzJrbaivp62+AEGHwyR+ZyJcaV0Mv5msNyecpUJk9QlExKG1M3Ws98EoZ0YHyUOqnMO8ot3WL0DPw2Q==","signatures":[{"sig":"MEYCIQCUD1PyQlkscFNuYpDP2Mo6/kZXNWqWH8bs6lc+V6zzFgIhAKlnK0rPWodxIWGUOEFQ3WafS5mm7kOjjDIxaSpvyAnW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIsrCRA9TVsSAnZWagAA6DEP/2PN0Yb6tA0WV9lGBSfV\nmq9z5RWuwoO7EQ6EwSkOOCZ3tE07TLOq/tDHKu1S7gRSxITgwLxT2ckA2KFJ\nJzClgw8XXoslJeZfIH8+1BEvd/q6aMkzfNFIzUiphDhBx2YMnowYJftQy9uM\nHkpm2dPK6C/K1Zh03p49T6mDErFfNfbhyKsf32i94N5kmSXX2YCOIt3Dr16K\nCRSzbhlW37Snkc6ZMmjybSpBCfTFk+21TVQzhZ1tQT66ZJ8OEg+lCuMP/X/7\nCMIwrvmc+JoCapwb09S+jk50BPfbBI+G2JPKJLfw+4GqfJ5uUaw+7Ule9DiR\n/cvkKjR/MMoea1+RLC2SkjV9ThcepNk142wy0WjrMh8V2hoi1S7AzaO6dlZI\nY+5FzNhb+XghPa7svFBUWbtyy5wpBKCyrfCvySxL1iU1ZUCPLN3oXvrSYmtu\npO5JCe8f8HSlON9iIYCl8ru4TRoyNl5Y7nwPENfx40/ONKPOUySLcKUT914u\nsRyraf4ThBcDdympcnabs8vbIingv3gLHvcE/ocBZ26QbPTLlFAkBq1+hRxK\nTNijQCTAUx9ZLdiW369NB9S9FF3StFoCiRql76MTNLqYT9+VHKongkWKfb46\nmrxvTsQAAq/atQJOZyNl3zyAm5U3MBmsBy+/POzjXyUdCfofOBIhcEYD8zVT\nuCPx\r\n=4n5A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c7be6486c9ad6826105a70187add5afee2a6b50a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f5b6110d6.0","@material/base":"12.0.0-canary.f5b6110d6.0","@material/theme":"12.0.0-canary.f5b6110d6.0","@material/ripple":"12.0.0-canary.f5b6110d6.0","@material/typography":"12.0.0-canary.f5b6110d6.0","@material/feature-targeting":"12.0.0-canary.f5b6110d6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.f5b6110d6.0_1619561259004_0.07870308331397236","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/form-field","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"469e2fbb23e0d5a5003ec9e31faafeb3d15e6d89","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.cee9b9e22.0.tgz","fileCount":34,"integrity":"sha512-4db+iymGDhUXVo4I/WXVzhy/QecYKwZNtjjgPyiZ46mNSXzJsmBEhd0l3AiNkMCNrrKKf+zjfnNG9G9F0JngKQ==","signatures":[{"sig":"MEUCIQD9Xqnrp9QIErjXuNJuqKApF8OP7K7wDpIbXBMq2ZqVkAIgBDXnZN9QNMPXzbNOBwZUl8uJ5/0/UMx8S67zcLNZjdQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKiSCRA9TVsSAnZWagAA/bsP+gJAFnK/W2v+YQmCLFPO\n0PN9MXAVIPHiUV9vgXkMVoO0hIjZGPD/os7pyGgZBBDXOC9ndG6HrzTKkofn\nV6FAdo52dKZ1r0tT7iHR/mrv+pQVGiTpRDoKTYq0DMv+j4NWGHnzzY4QXeeb\n/xJusmByRqjO9n8t+ykyEvyt4g5bTvy/isFJo+isXasNc2WDR8q6s7MwpXd8\nrH3DCJU1l5O3zOsSoXO1rTlVVdWb+0hE+fzA4H8Wv9lwAWxp7QmyikBXjatR\nwvMBPB/tvSth+uQtGceoTqJPgXv0VRVNMo+D4r+XYn1O6nncuu6vjBZEGrnM\nHazwJQ/U4RXZ4QvtshTpXhgeRhO8yMTTbvIbhHaCUZNjmjccMZKJ0BEKzj9Y\nrp35Iu7NUWfJSiDkUj9sW+S97E4vzYnz2tBimujouVv8ovUBa1FC4jNJ/K6h\nS82qKqcknY0hIwS03uLK/gX9D2f/lBGyObG/iQKOshQ1FWFd46x2Ffpz3z1i\na7OzhB6TrDfxt/8OvYqn2d7Po4pRPUwIhIEJuvviPc/3jSGrJFkAXlH60AnC\nLLCYsyIrKmTs7NqTJj1w0GgYrnh3CkHwv34avWh/pn+0RyRbSvEycMm59dOX\npzTTftnmPTRbwcMMeyZdfcRcjgSmP1OVZLqrL9nl9PJ8n2Xf/2fODb7DtF42\nz7aD\r\n=tyRp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b0c779970f0809be4565910c1abadeed4dab0377","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cee9b9e22.0","@material/base":"12.0.0-canary.cee9b9e22.0","@material/theme":"12.0.0-canary.cee9b9e22.0","@material/ripple":"12.0.0-canary.cee9b9e22.0","@material/typography":"12.0.0-canary.cee9b9e22.0","@material/feature-targeting":"12.0.0-canary.cee9b9e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.cee9b9e22.0_1619568785551_0.7817327269143799","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/form-field","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d3750dde0aa71f5d5e05544a4d89b15827eb5e6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.96e83fca7.0.tgz","fileCount":34,"integrity":"sha512-5NECNwACZW8SaN99WDsGhUwTPnypm3rI/HY8UME8A5YuV/mAdo2VtL8JmXIFCoM3RIHYfoG+vIRxJGqCKULLuw==","signatures":[{"sig":"MEYCIQCKElHCZtO7A5P35cv5Lj87VIEohW3XNLnfysxV4nCOYgIhAMxYpg0FcY7+cyl9A7zZoJcUHunKG7giHSXOQy3O8I98","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiMzkCRA9TVsSAnZWagAAtHwP/1ilerQZuaCfy0R/u4yp\nsR81qya5AUP74uJiTjC2t+yv++ztk0e20Gja15U7zxZ/HScnsPETETqrKIRI\n1IJcn+mm7IM7IePhljS/qyckWjtZZdy2KjWRsDKMBETqMyfFhayTpIxssfNg\n/hL3Ae9innomIYHTT9w1SJTTosgftqX9kN9T5Sx3wliWNjhIglpoUHyXugXU\nE1zyoNp50lYMf2yB5huD0EN5ZJviHwNcCTPDnPi03ZmeV5pJTR3J0CfLS52M\nKJfPnUjjDwGQ7UgXqpQXXqGZaUtntsYIN1KKSng9z3adwIlWL6StIgnGbte7\n0oE0gVXpBJto1GsQVFUOkcbSyXmwvOdN6kTK1iYG1nlTRBrqekhvZPcuECR9\ntRByunuxa4tlExzguzFvpClIAm24j9IOW3ptL7ICZdyJ44eWJn3yiQD+THti\n5NxrQZnEdOBFvdo5rg+iirAhCo1StG6hrsS0dc5Kfl3TIpoq41EQqo05Kjeq\n++214dWiy0T8ucHE7isGTQSW9xcs1KV3Dmy9hvCK2Vrh+Wgpq9jYWc8zzq6b\n6e/gS0Vm3EHObOstGFoNIu70BMY1Qv9QQDTzhZEeaUKw05q8MokExnD2Ac+v\neaknIWGM+zpfAPY3pJPvo6Yi5n2MR3tygu2lxf1Qwy0Bo1bEBhxhTHY4Jt2/\nJBHS\r\n=r+yy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"377f0025088676d544c1393884e5f27e96143f16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.96e83fca7.0","@material/base":"12.0.0-canary.96e83fca7.0","@material/theme":"12.0.0-canary.96e83fca7.0","@material/ripple":"12.0.0-canary.96e83fca7.0","@material/typography":"12.0.0-canary.96e83fca7.0","@material/feature-targeting":"12.0.0-canary.96e83fca7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.96e83fca7.0_1619578084331_0.2883389794848983","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/form-field","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78c0ceaca313b6e1d8143f8232c6718205ed687b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.4c497bd19.0.tgz","fileCount":34,"integrity":"sha512-UZQvr4amUp0RGKFnROgEZlTY7wc9uWjY+5Cit/ecMwpEKuZhYVFtzAKG8jmnjTsaFyO1a26KNTvdfF/pPs6zSw==","signatures":[{"sig":"MEUCIDEgXTC4MXduWKQnPZHrMmLBVp5kjSbuYq3k0NH36my0AiEA7AVT3Y9WvErrBBTtmTucvuAdyfPTNNljsMI8ZrdzMFI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaEnCRA9TVsSAnZWagAArNkP/3dqb5gWLxFSecVZyILR\nt3AyIFqbEWcV+v+HIZ/UQVF1jOdOhtA+HXeaPW/uPQSR24TOgTnOU+vlUlD+\nMW07l06AD87Fw+p3UnsEogBDTWCdnue1qQpneKWe5JZ6MAeaQwfFbmYAUERp\nYfEXQJ09GBg4iLp3DAbihpO32Hxx6vSwGpjmHZ77S/p8cZE37fCjzE+3PnU2\ne/72UugB2dXPJc6g6hdLb5v4MbcJi3adKAR+NMEtZFqMrqZ+Q9G0cJj9SKnc\nHIZ7QJtT0mWgOrIPFTtukJbTCMTALDujmnE0mmNskNur6VpqD+0p7trsDJEL\n1Vmk9/0ZxtBVreWQCNZorFJnRZBtQWXBMtWTe+FIQ+kJsyipxJ0qVQvqqNC6\nzkSp3Z2ZJmjuQnmPhbVGjZcsvHFYkmVNrRPrEQ79p3stXbd7igL3/7fQ9OFC\n7eNAPccxiV88tICQjQyMwfJnfmYoiBzRUL8k++6h+68hALIF2ThnMB+mOEc/\nbKjgKJG2j6w7e9ahp3UHhDiAxhidwodJ6IaD52E5LAERBTkVQfANvW/8dZ2E\nBZjouliYrJLve12G4k6UljhGBUg0Eommu+s0ClRYZlcv5DWqoVRIQychSHzj\n2/5JS80W9yDCfSwqxBe6vSqDmRcDcmM/R14lE8DUmqsypkScrqoIEYnAElbQ\naOqR\r\n=HSZj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"beb4a14c8f43815a21024c26a96e3c53851a9b41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4c497bd19.0","@material/base":"12.0.0-canary.4c497bd19.0","@material/theme":"12.0.0-canary.4c497bd19.0","@material/ripple":"12.0.0-canary.4c497bd19.0","@material/typography":"12.0.0-canary.4c497bd19.0","@material/feature-targeting":"12.0.0-canary.4c497bd19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.4c497bd19.0_1619632423309_0.27775454282290113","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/form-field","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.105b15b96.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da27022225354864e9059c90e503ab61f94b49c8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.105b15b96.0.tgz","fileCount":34,"integrity":"sha512-iCdu3odWu6VWQ38fe1X6zfyni1w3T8aKCvDD0c7DJ+lF4e7z2VQCyINnB0BVSBFQidnuPtIjoYFck/1l5KYAxQ==","signatures":[{"sig":"MEYCIQCtUYBMN11hTN5gFyuEZADdTUemdmaIqlfUQNYCO0Cn9wIhAIOCeYmDjnxuqpRuqZq1xa1tbhQGdz/4lZkRE3EcQf3B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiddbCRA9TVsSAnZWagAAZzwP/2PZfZFPCf/WN0K5ktJM\n1pBcioXmKfg/PkuTTbWgehgHdNGY/WokJIQn2bQv+6Qtuv1TDl/yWyLqt1eA\nDdbApTbG0f1Yae+DqkdDTRajdxomoJCjO80jq3hEIrkY7P2jJSeJ5ZrJISOc\nkQ4p+E5OorfcOaF7mGMqmtXQ2F74TgLIuCh4U+TP8M3tp4BLvhLIrWy/SfwM\nRfsrQ3IaLz7+LX+oX2mz9exk8yX4y0yjgOxJ0kfIwOVIKgJwEwYSMIgdTeAp\nMUc2IZ1r5hv69UtgEBHdO/PuYRK44yzstfpn+XLJyPWhr7eTX6UhXDVTnryt\ntqAkEPJZfwKYsAWuPzSTgAjAXszWtya7vKCsQ+bQI2H3C3nSZe+e0SdL8WzX\nwDjs5AkxxLhfYqTcVqE7Ucv/JvqQpWyXmB8m4JK+NcZ/xXriJddN39DeQP9a\nycQ4d8OcG3pj9s2pCx8znhQCO62Cd9Lupt5NCktNGaIvbn+mx+9T6nT6wya0\nfZV26Vd5TyIAYUJHUplcvMvsnew83SQ6kSjUbwTznKux6Py5ohs2p+eSxt2F\nVpo8aQ49mP06dBeyslwONVTSCnq0vhZepmbjIf/ZW8hv3qLvy294oTRzcd8K\nJUi4hM+IAJQtJ++WdDg6MFNoK8kE/EjILNJOkKJAGCyHGMvHi3zNUq++axGt\njCkb\r\n=I718\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"762e9351a26c1968c772104d6d64f7874c81528b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.105b15b96.0","@material/base":"12.0.0-canary.105b15b96.0","@material/theme":"12.0.0-canary.105b15b96.0","@material/ripple":"12.0.0-canary.105b15b96.0","@material/typography":"12.0.0-canary.105b15b96.0","@material/feature-targeting":"12.0.0-canary.105b15b96.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.105b15b96.0_1619646299477_0.9613826933332452","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/form-field","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d945e4156eb3922da9ced68a7ff972ec98b34f7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.6e20259e3.0.tgz","fileCount":34,"integrity":"sha512-KiXrvstRlMlg1KKTm29iv/A6Jq887f1j0ciWZdP2aldRAd/FCdtJ2UxqD36IGYs2i6ARFkLCliATW4Q62xKj1g==","signatures":[{"sig":"MEYCIQDGXWMYDBV44vqWfGAWgRMd7tKh6Pz2eIPQZLqbCfBK+QIhAKs7N1NLgdd9RcrGO56C+NxHbNfE51Xv0uxxzUxTtuRh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidhlCRA9TVsSAnZWagAAsC8P/3+RCXoKvESsqXDZ+9rw\nX3WTWk6Vk+Z+XIG5bSZrgchNPRjnHyYUiMIliJEAmNARXbFFuqsKKM7Ri5cc\nznMkf7bu6IcDrdddA9g4sKQMQyhuXFYyQ199RtWRwPIvl9MApIq+gAnnc2Eq\n60Xm3eaPiyZofuG6Gv9YF6qmMH1UMkOMLJPUSKzPqlg8ARgSbWIYY+blFuW+\ny+4grPnWd3ljF3qRJ0QVz7LdqPrwwKW0U6ai1PiOM2sbX8s8s29CkFNQVuen\nFMAadx6Jrc8A6TQz0HKXgaRS/8OPWmfT56qA8fLSiHvHiACaKPbkvUqEKmaf\nMrlQ0tEhv+LqsMpFJrNxiopszzn3z3mKUdwaf3qBR0GcbBubnyStawisdgsF\n/NiFx6L6olZzqDI8tS70Rk52jmec97c5CXZ3x+Rbdqvih71zOa+s0QM0DI6L\n5deuuLn88VQRUXDrRV9siPtDdx2TuJuTJyASRYdCEWrKNavVRZxsNm+8OFWC\nX8SgYLfrWBppIv7m33FpQkMtckh+iKzkPBRGwHn5Tya5Xl4OQzi1QSgTwTv3\nXiP1foK+H6X0MK23bigz8joNgKh/o0/YP0t6eI6EHdPHVo/HJMTbBoTQEz/o\nMtZWZ/UTP3UD81rdq7w6rL3qlA+WBLu/n5sKy5xAjC3PNySB90bi9B4Yrm+6\nqNCE\r\n=1hkf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8e07864b42f463f977fbd0f9264b8930da72711f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.6e20259e3.0","@material/base":"12.0.0-canary.6e20259e3.0","@material/theme":"12.0.0-canary.6e20259e3.0","@material/ripple":"12.0.0-canary.6e20259e3.0","@material/typography":"12.0.0-canary.6e20259e3.0","@material/feature-targeting":"12.0.0-canary.6e20259e3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.6e20259e3.0_1619646564494_0.0639942717546873","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/form-field","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"625ebfabef411b359e694883913ce49ca0e9a35d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.0f79a5d74.0.tgz","fileCount":34,"integrity":"sha512-7T0lQgowiNdlDeMQKJdk1d4G4jus16ovnuq3AR//dwy6dKXwOBXzB7eQZCYgPP+t57/7RkVwY9bEqEOQNueFlg==","signatures":[{"sig":"MEYCIQC1MnL1ay9h/xMStbc+rVPwxTjySfgI8EVYv9OZWY6b3gIhAOIDL0bn4l0nli5o0s/ZioaEqLgv9DlpCHPtXweXxKaJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieT+CRA9TVsSAnZWagAANt4P/0744f6jJrjyaPazz7FY\nk7mLCQnZ3jt6Cjza92Mh/qyzj2CqUq2/8w8dJ2a8kD7fBmKrpOOOUGc/XGYq\n+RddiVUHOEVdwFSKVKnmmQoD5tVBw/xm1d1bIU7G20UcZitqufw3zEcz8JUV\nmDRoPryJnNlj2/nH4vKVeUUm7IjorPrxaXh60MBXu0NTxYHFyUJ1aDZScCuy\nC57SJSOWgxWQ8MX52z6IMjZ8WBoyrHvQpRRF4ZxxXA6/ZcKNQ595pkHYEWgJ\nsSkaYvA1LelqlgmR7myDNnu0UDRQnPf870fmR3VSYKIddpYHc9q6IS1xpC4O\nzqY+AF3cJH1YDv0XFKjPmman8TyJEjbxP6A13tcbTGSdZO7iV5E1G3ajR7u7\n7/RJ4bqLufuyFk01NnrunVP1L/qwjFiS99+hMCxftPB1hxRHLlcEq4C1+gP3\nGEui8/tL14+FgAJeOl8oESjH9mZzsndehtBYJCVhs5hs57bIVPWgOmW/xsuO\napwuahWFY7nFzZdqc+IPaZRQEVX5nUuf0KAQmLZnKEp50LsqksDbBzi+19/J\niWQazucfwuBGV77aI9C0qpulgi4VvyjCxIAEUM3FK669n9+nJB6ZvJwEn9s6\nOhL0yHcNe/wMJ/dN9IwujD0cCXZ6Ex4bduZ1/2ChtVMyf1cusQzDWNKBmzuM\n6uCu\r\n=vd5d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2fcb990c07fcc62dc025eb258f87a8f04f08fee5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.0f79a5d74.0","@material/base":"12.0.0-canary.0f79a5d74.0","@material/theme":"12.0.0-canary.0f79a5d74.0","@material/ripple":"12.0.0-canary.0f79a5d74.0","@material/typography":"12.0.0-canary.0f79a5d74.0","@material/feature-targeting":"12.0.0-canary.0f79a5d74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.0f79a5d74.0_1619649790187_0.5548199633395945","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/form-field","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28d2a1eea6732537a674d46550e04b3c6014b68d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.84f3db9ed.0.tgz","fileCount":34,"integrity":"sha512-4IXVbMnuGcZeL7wfEp6K9mO+eyZfv+NA9D3FBRxZxllVqPHg8KGuZP0pCgHwYtGSBbC7ZZQ3QSR0bWaizaF+FQ==","signatures":[{"sig":"MEQCIDsDEi+piXNPP/WvQWNpqgh0B2Xxq4acVDAs2oTPzw/NAiBVFN6I+WxFCIVxkgPkt1CqEa221O94V44s7JRrEPvmZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisAjCRA9TVsSAnZWagAAbZoP/RuwIYuydWpqwsTTj3Ie\nSFojhLSWTgQanR4th9MHrabqFFurIe+OdeqJpFOEGTjo7xuYYYCiZQFdrIul\nEO/M+yGfn0VAWAFEEwV1apToUKZ8sWT/+fwoIEs3oziySLsAyb6b+8cUNzvt\nA+MAAi/WsShADj3aDivtqK81ySdnhsD5VQZ1Z/OVyWnq5cu0ErT2ZEPXVJEF\nHRENpSXq7CHKv5gaqqK0id14S4xgqaRiQA84werlBfiMEVXhBiPKvgCR0Iw9\nwMpDUiQVEb0mY/v1V6sRfr59SY6Fk5jzlg9AhazqK69p4sjiaxUFkar1eacI\n3AgSJggYBexz0dgiGbNgGCLpSMJNUWzJjVpAdlXlpR805DPf0o8HT/9zFv2c\nHOVorg89nFuxjZhxH62so/Iwlg/oP4/jL60WcbGEdBWlp8shdYOM/qV/u5nA\nNxVIBsUZcmntJE5xbLBpFFI7QdAdrcc6bm/ufIYWaJ1vYkRe53lkU6KuIADR\nNv+r0ak+V/Xe91+CyZlvlHG0DHRGA3xB4qPqF/OTqekeJrS42p0uveL5Ebs+\ns0cEdHIjfRfvSie+YZV/wfXqcASbG7U22dmlJ2OCnlGQwn3riL9r39CBrVLu\nbWXPaZHd+6QgfKjm3sWwZ9DCVVwOtS0kPGYEgLLx4B/uNIkcbDLMzyaPBTDB\n995a\r\n=Bhea\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7c4b7e41edc7737412479194451432cfd33839b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.84f3db9ed.0","@material/base":"12.0.0-canary.84f3db9ed.0","@material/theme":"12.0.0-canary.84f3db9ed.0","@material/ripple":"12.0.0-canary.84f3db9ed.0","@material/typography":"12.0.0-canary.84f3db9ed.0","@material/feature-targeting":"12.0.0-canary.84f3db9ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.84f3db9ed.0_1619705890916_0.4816865855421688","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/form-field","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"358e684085e6b9e6651897a357660acafdec3f5e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.8fc29273c.0.tgz","fileCount":34,"integrity":"sha512-TnAhsbpHD+v7gty+M8m/+zz7lrunwN3MPOec9ppZwQYfGViE+NN/3gu/+pZHlQimFNI190Xa1Orh2D2VETNSWg==","signatures":[{"sig":"MEYCIQCHe4R9Nit5XsW3MVZd0HK7GLRJRW8vbywS7iaXs/dTNAIhAP7m0+bNd0RVEQjgmg8D7SLXAz3GOglsl1YxwRrgBMAu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyPrCRA9TVsSAnZWagAAK9MP/0swp8sjGUwe0rWGriCe\nf1GW4u6b+cdRDVsgUms3+pGhf5HJUx/9Fa0wP9foyhjYZ9UE2nIC9d0Vdteo\nkFpzI2QsNhMnxkJUS81J4KSjnnjEgOZmXIEtyLI8lnzytyNX+MRf/UreWqic\niMzzVZKTbaaykbM0xY37kQ9Nh31bw12eiLFGWnWfEr6wAMxrL64acIu1WHmY\nZ64F6H3YbWv2WfMPAHqjfcOwU3H7w94EAxJsmjak1qj/mQRHiRCd4dAXgDBt\nybqR2Wc7IkSAXBAqHlipP/jEp0TfmkX71HGqMXD08F+HmUZWyIBqFitjEHtF\n//2qGNNmxVpTyTY+QRV4jnIWtvG5KjY4rW8uCdPR5uhZxQuVt15CbtKTMsqZ\nIBV0kQiqE8MMOfvEG6vw+Ay+SA5D+EGqAUJ87ZUw7qFhZvk+u2thg5QKsHlH\ntgx1UQdL7c4Lz0psMRWEXl9wTVG3vnXev72unmk5enQgLW1a918J9tSWF1Ww\nCv4G5DTEAaqdrsaMDeQlO2ykYzzJC8r66tG7tXsXEASxcWCyH90D+O/VzULj\nSC+OS/u+nfveY2PWn93aXtBmtN+PIWzGYzHa9C4MFleMY9LEJ6IXp3xsppzn\nTfXJwHnV+qxli43aAhlLTyDBni6Ffyqbea3r9mECs2ZyACA+mcBEbU7K/l1w\nee4s\r\n=AQ6n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fd877c3e50788fb95663fb8213bcd66f347cdd0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8fc29273c.0","@material/base":"12.0.0-canary.8fc29273c.0","@material/theme":"12.0.0-canary.8fc29273c.0","@material/ripple":"12.0.0-canary.8fc29273c.0","@material/typography":"12.0.0-canary.8fc29273c.0","@material/feature-targeting":"12.0.0-canary.8fc29273c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.8fc29273c.0_1619731434663_0.8735555810387841","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/form-field","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1cab49e689951c55ffa67d6d21a3cc15c21d086","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.c50d20bab.0.tgz","fileCount":34,"integrity":"sha512-fI0s520XdctzH+Nd/4TocJ5a6siTAEb5QPx2jZwnN4UR676CV5dgOCdUD4vJKmMfFE8LIrLniEbuUq07t9kHLw==","signatures":[{"sig":"MEUCIQD8eJ6D8tdok7I3f1XQlnmH4HZxergbgp6YMR48bCFFeAIgavVgFmxAD4n84xei4tcKj7ZWsTQfLBMyiN76YTzRxaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizrxCRA9TVsSAnZWagAAY7oP/jYTtFgs9W2+ss4T4fju\nlf2pjKMkoMA4QQbBEx1PBd3fdiJxAzXL4crECCHmTYVLbJ4ouTxGWmGXdhm9\n/cw5ljUHQCCIS0KyB7IVki+VxUM0EopA35L+BTQIttu8K0zh0zPtWNiggxaZ\n/cNt4p2uSm1kPvl+U42Y5sierjo+PrTnDIoWN2BZhz53r5JybPu8+vrXGl8W\nvoyYxYrdH4zNLSZXwUYo9ZCbeXvqj3CTRkcgRMKCrDYo89sUaN7Fc2wxlYyD\nhT8NHNih45tVHPn7rophMV445jvskZFgMvsQ917dQxHSRjJ32Ob9Th1+xtJ6\nzlYWhyKBmkoFXiRW1q9L+/137uukUSbAHzqEHXfHCb9hVGTYOrymYY5AGrL9\nqc7I53inNLJncAC2PdzHI2YsfgfyL20jr1+mTAyBPYXix+jWp6+e9dzkhAF2\nB03uHlhP+DZG8c5zOJBqo0hN0B8iivGYcz7mgAke+zvFkomt1M2SMqzApU0t\nQ/qZoLcVU4CNS+Qg0jJDVVRqCPxkBb2LAKzEDP1LXEp0bXnEXD/AQ2CLDGmT\naoH8F7/5B0blVcF8NdldHcPnMW78yCBvhwwxvY3S5xz1lz/RPWFhxNe9JzKo\nlmmyIg6MvLkWLvfmwkz4bxHnoIyAnvPe5ToORX1XYVMTVbIWeaaVsFdMH52P\njL3c\r\n=/LKl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2aee1fe5eaed5267b0e67f1610c29dd399d323c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c50d20bab.0","@material/base":"12.0.0-canary.c50d20bab.0","@material/theme":"12.0.0-canary.c50d20bab.0","@material/ripple":"12.0.0-canary.c50d20bab.0","@material/typography":"12.0.0-canary.c50d20bab.0","@material/feature-targeting":"12.0.0-canary.c50d20bab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.c50d20bab.0_1619737328997_0.5906081966931065","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/form-field","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.474836ad0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a5da29629228bb592e1ef5324edd54229362864","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.474836ad0.0.tgz","fileCount":34,"integrity":"sha512-qU7J3/SgBR9c7z6h+QC0DjHs6aUbtFRTwj2s9/VPSaK4t1vZVx43BCAnCGwmV40qs0eSy8iP8SjNYNEB2+ALxQ==","signatures":[{"sig":"MEYCIQCIS92K5WP1N9zUdrK3xdA5/9plmtF5lBRPaTU8ajLo/wIhAKdAxyNWoVmBkTLzdhHfFeE0lGLBu4+jYZFkfSZJVGS1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjM0TCRA9TVsSAnZWagAADBUQAKUPtt0Wb0cIeWYZH5Gq\nuKlSmlm3p6CC+KVh5lCKjBglKLNKizp+3YQVfyIIiH88f8KYM8ig8Rc2aAGF\nY8gkprbu8smRIe16DO220kfcBWy/GD0jQFJluSwvQnEvJFdYUEVE2lesbq1J\ndjWB+D/0uy/rxRJyPfzkzMP6nH3FcDQrNG0x2aoXRHlq14KBddf5gynAdEhk\nJqlIOwtPvdZBJ0nsum7cgqFfnjBn8y5Y9deVOSzSdc6mYcd2TrRV7I4S2p67\nLgq8ZD40ug3VFIj2OG1orb/9/UWvOd+M/kBGTTTxG3pgbjpUVukA7YDpG/PE\nKkH5fbBICoXb9ohaogNzhxy6lmHLkSoEF/dOAPEcMbwNAAYn7lanEgCfPfv6\n1yApX69SCmcN4nH/VQZVmbfxJQzHVd4N3hX9dJ6hkGGqcaEwi9qQC2U/hMsS\nT8ZjRbw1cxE9/C3tQEFUFpCL20MiXEO6m5uw8wz53+xzriNqomZN8IVS8BpE\n34b8bZnt7E3oa91IkHOE6DJsiLM7yBFbKy27I3/XegPHnUHUE0IypcDWnuIi\nEjziYUEHTBkft8V2VCrOY82g4JwFPCHm+yxZwviBrCvx1TcGk6588RvjjB6M\nY7PRvBTvgKV3mIy29sBt+antq/zb8J25h2l2etIj3r6kEW7rbHvuBUyMzK//\nD56m\r\n=SbSa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c9a6db3013566afb165bda88b05607f2ee398718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.474836ad0.0","@material/base":"12.0.0-canary.474836ad0.0","@material/theme":"12.0.0-canary.474836ad0.0","@material/ripple":"12.0.0-canary.474836ad0.0","@material/typography":"12.0.0-canary.474836ad0.0","@material/feature-targeting":"12.0.0-canary.474836ad0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.474836ad0.0_1619840274890_0.5482213097265207","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/form-field","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7f82486eddc9f985963d6073ab311c90c25af8c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.f5ad92287.0.tgz","fileCount":34,"integrity":"sha512-mk+naFscM1+ilR5e3VouYIurQe/C6ObEz8XGEn11Ihps7Aw39NAxvLVlCkz9kz7e9fLolnpxcG72eJorT+5f2Q==","signatures":[{"sig":"MEQCIGssxBpz1sdtjWS0tnEiUUMH2Qr3qf+dKpRhQ/BwQ81bAiAUNL4nzLtZIA22JJDHyt4dCufehapOFFnydbDabFWxAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD9kCRA9TVsSAnZWagAA+sEP/1+XOtBflqWGNWr5PWAz\nXHJcWOaDncfj5ZAqwX2eRZZOyf2Nx1ENiIu15O9qPYbPlCHtNX4kyZKUJMca\nu1+Az3uhSaWFPEc5Zz7Fu5I0laUSJzCNRphs0fR3RrU02AgpEhIeRm3mfxhZ\n8yNRWW8SnnW0Na59vfmu8naSBuauPKhT0LHSGbJ8lxvlg8GCIuZglcOwhvxe\nWOQPGApreZllp9wsFDePrQOJq3aomilD98SrpCmRWpGKhMcT3BoO0OpwmvwH\nPxeBUg9JGyCQQFD4KZuKMQFH8cQzdrWqvi0dtnU70oJ/Bn+wBz2vcP0uXsuM\nPNklYvSJgNBbpGOV6Mrs3rnqt7WHL09b0JaD+RlUP0ePG76Ax4YEGGzXac9Y\nw4ycOh/6DapPSZhcWA5Hs5xDnHxrnulY1Yl+2a3CtDCYKuLWAZKWsB4CVXtf\nAq5oZS+uttMKLAnpfBF3pEjfUVDXbgjF33IE/u8D3QtNAR5UBUjxkbiDGIA5\nak+b9YESUZ0eFB7x/E8+HxUAKKi0T4VC1M0O2YA8VOy990VOxrV335t6qm3L\noSSNno7uuFZ9HcK7/Rpsd5GCi7Uf0Psi16Pc3kvI7Y9DcitRXlopdn38fUg7\neDmYCKf70aQTr6U2v9vfBWPwYjlOR7us6HBZZqFQOhD/0SlnaiUdUQ32zReY\nnBCN\r\n=pSVq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"493c206bef4cedd10981093c61731e1c1547227e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f5ad92287.0","@material/base":"12.0.0-canary.f5ad92287.0","@material/theme":"12.0.0-canary.f5ad92287.0","@material/ripple":"12.0.0-canary.f5ad92287.0","@material/typography":"12.0.0-canary.f5ad92287.0","@material/feature-targeting":"12.0.0-canary.f5ad92287.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.f5ad92287.0_1620066147786_0.8029104600217352","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/form-field","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.af453daf8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf1a78195ecf630228bacc154e42995496b5c578","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.af453daf8.0.tgz","fileCount":34,"integrity":"sha512-oMdxsBnNLK3Vt6pZCw9LhJbzAU9BjDs6an4Ejj+P6DRomYSctliVcvuEXs0ckIZdpVovi5WX5IT7qIn4VCPkIQ==","signatures":[{"sig":"MEUCIQDKM8ypk0ZRaX8RKUapa+AW+YZL8yNhjUyqJy1BglNwaAIgEkuqWTFJjvwGX0DViqil5aNepzm9LFrbtOV2amkLB1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEazCRA9TVsSAnZWagAAJwsP/3NTJX3FciN9Lf/0fkUO\nIoJ/eq5Y1/sWvbmciWRN8KLAj7mxsh6ZS7dw1mVXgBBjIXZMFsKudthNe/Lw\nrAXHn/7jVm6AYyOY0GiuDgkd3BvG8/KseJ+bFcu+viYdxiQ2sI7G4rJMVTP0\nkbvLS5eO0k1Pq3tLwQlv9RrZW002QfF6ayJIi19KPMEvjxzmj1LyoLrssS0U\no5cNQl8ZXf8HdbiJzw315lHNSXL8HCFuY1V+qZvxBdwVXgMXwR3EE+zf2okh\nEtTghtQ7yIF7g5+fSA9XvqHEO45rDOOeNanni9eOLnrzbQo4myyeOB1sDGZy\nsyu0r6kJsr7PIwCzS8pXhJN2YWPgdDaWhJ88UcvY9EYWodX89PY3mue6s06X\naK0dPC2Av4RTX3arYx4ElGXsFuBMxQ9RM712WnZshKeSA090RA5iFi52Ufax\nsZab4wrKz2Mi3zj8hWetrXs/T9P2tAkE4UeFXe9HVnNYZqkE5oxc59b4JfP0\nGPePVLvvWhmzX4aGbmDmoShvtU8EuPvaj6DVPxMZVpCVa665M6eRSkpoAAxM\nDIZEX93WMGX/gzHLo9vz/lgEOMrOcsbMy7gYMUY2voxQQMDHegFKAB4JkF6Z\nwK8Et3tww3f/aAVs4ZccOgv6divVMnqjxjblkNTdhDxngBy7tQ7qcU1QQFWE\ngbTa\r\n=BqlX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d55347cda19a4d9469eff68955185d9d5e235a16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.af453daf8.0","@material/base":"12.0.0-canary.af453daf8.0","@material/theme":"12.0.0-canary.af453daf8.0","@material/ripple":"12.0.0-canary.af453daf8.0","@material/typography":"12.0.0-canary.af453daf8.0","@material/feature-targeting":"12.0.0-canary.af453daf8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.af453daf8.0_1620068018765_0.5450756167687141","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/form-field","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2d2c73b5379e7c89d4613c2b46e3bda7214a58a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.1f1918c24.0.tgz","fileCount":34,"integrity":"sha512-+sInJjC+mMnfrxtRAohPOqsE6MMcueaEK0tSd0r1WDUymj+bU17jPtPOF/7ZLLSXM3OGXogkUNxPGy2A6ZkAHw==","signatures":[{"sig":"MEUCIQCtt7DoNqZk1jKRQ71nRqavQikuzucB/Ay5DXzgqHOL7gIgMnZXFG6B4SlUsdLbyn6HfhT/mkG/M8Bsx9wPTVjOWno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE2DCRA9TVsSAnZWagAAiM0QAINreaAuGfg0VVR4bnUL\n8+KeNXfsJtKyteqnxNyRGDhBxpt9SmdAqXXimsYf2ruAhTHPm+UBvSxeMB4R\nIO1MgmRmguVQIcTaem2W36DwNC0NnIoYLArxd1Mi1gCvKIVsUB4/IiBGW/ZB\n6omo/BQKPpckpcdoQuj2b//akUcmuRw8D3Gc0rA/x8PwKX1lo/q1BWqVcenR\nN3A6nqQ/wDTSMvXWipAfZXB4j70dxpN3hmqXv0F+2RI0SQ59kEMfVeJv8jhF\n+BXi5XP1mk1SWqbmODHs+kxlt026Mn9VHD2HQidHclCwD623HCJgCMWOLFI7\nqSaUoMqMrNFAQpMb+3+TNa8V7mT2hiKM7GwehyIj2YKWCtKCrmvRcQmw/g35\ncR6Emehb5Jx5Y1obCgFFeMzWbs5Sahf4p7cyoW7IZtqBQBbHotRGIwuP6ffr\n3fZBNhwar9Uv/rvchKmIo/B7mbHUDexPkoDNWWgndxdWX2ru40P/hLGn+ZO5\nlW440bKbrQl22FVoFtbsOkEHWruArF3j7nfMRoNzyFogC3DunLnWvHnEDr8m\n/oku2mvq8yBgAMHMmqxzOFmtdFjFLnI0RAueebx1cx76PiQpUOS7IURG1Aue\nZzlljryeZsshM/OwplJhoejjZkWMaW6ozprSycGeYrSqBJ9Wc0yDMxTeozkS\ncPjE\r\n=QJRd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cda2e786bcb73ac46385a1c6459a8ab7bd9ef6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.1f1918c24.0","@material/base":"12.0.0-canary.1f1918c24.0","@material/theme":"12.0.0-canary.1f1918c24.0","@material/ripple":"12.0.0-canary.1f1918c24.0","@material/typography":"12.0.0-canary.1f1918c24.0","@material/feature-targeting":"12.0.0-canary.1f1918c24.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.1f1918c24.0_1620069763124_0.47164753569141404","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/form-field","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.33148231f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ad8bfc9dd9ecdb3bfa64b09f5c9f14ba98380d0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.33148231f.0.tgz","fileCount":34,"integrity":"sha512-9ns427kyj+00POQmHmAEGjK+ED1FiGXS4DQheS+Yn8n991xIiY25Wglc3+haCqzbJOVBBVDYi0OCFNuyAQfI5w==","signatures":[{"sig":"MEQCIEw77l9opVKvrf8QXqkmzQOCem+uBj3BJxmrAmxqRyEsAiBunr7n315jB/BagV9/ZT+Vzxmgg4q8ysZQbWJIxQ4Xpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFFUCRA9TVsSAnZWagAAEVcP/AkGxM3KBki7WGJcXOUS\nySraEJkamIP4cET06+SmXshlku3WfvDx/62kQ90bax2ST1lZqJ3YbMhm5dcR\nyKZZu2xZDRKXVS2aBuCi5+PU+uXS1R4AbI1gWMpzGrmGZ+UTS/SrmZt8FDFP\nFRhhBKoPCkCf+JuqRviFqTP7ev8DN4UNfj2whXMo0Ba4chq8IrMviby4UB3D\nSXCoynNcVB8wWsDnm02wDzK5TkJEb06kEyt7hOecgP4QgWw/irI5aa5TblTY\nA5fl9P+ZKsHUiOM400bAm3OjxEmXJWADtO3MbP9NDZyN1m0CmQT5WzxpmMFT\nRtrxI/0od6Tv4qT24Z4Z7QytJ3o+Zl9UvFxGDyiill14KjQQ72bRF7MLRe6b\n3m2hkBuI+OBeBYLlOWjku3z/bQze+0tZlD1ZdTSpBmCRXBnLFuUuhOTgwwy2\n02JxzDH2GSeQ4Uyrt2tQCGsdWJuhfjG63j0s/CHHjvsqy4n+4s9RTK6Pu4TP\nnzAbDU2kL6cra12FhBMrXhvtqKxQPAtvl1EwZxNYwyG+t7kFax79F+1CscdC\nZn93X43csNWbQdRV9EtcG2ccg3AGpHYPWlJse/oZwa1V8Y5Bek0sVvjKY10X\nEfrbWbzRR08pMLz0GmxJpSw6oGo+rGvwv4ebxbH08yaOsksgXEJedEctG5F+\nl0ws\r\n=az8U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bb5a14b15a74fcef265050ad96f737d0acf36987","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33148231f.0","@material/base":"12.0.0-canary.33148231f.0","@material/theme":"12.0.0-canary.33148231f.0","@material/ripple":"12.0.0-canary.33148231f.0","@material/typography":"12.0.0-canary.33148231f.0","@material/feature-targeting":"12.0.0-canary.33148231f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.33148231f.0_1620070739546_0.31936111799072653","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/form-field","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea077e175626703c3252a34f56e6771e58de2adc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.06b76fa74.0.tgz","fileCount":34,"integrity":"sha512-A/YQ5wVCOEFx5oGu6/s+K/hi6StqhQbAUJYAlBsGFrGlzTfH65KmZnJCGNjBzCGLDnMsRLxvKAGo7bdDphSOtw==","signatures":[{"sig":"MEYCIQCjn0FmxVm5+3Fkxzw7Nj8Hr5YHruoS0lchF/Enrh8h+wIhALrjm0Jn1GCMZ1Hy1FmKJHnfId+ftwnR7yTHmB0woOYZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFL0CRA9TVsSAnZWagAAjoIQAIwuYqlN3+8e/DdoLBpY\n8OcNWNc8sioBW3yU1QfFGOiu7qo0xdlNqSzgsbzFXVkP90xw2mGBIZgUvUsh\niA0YonIw8MtXOOKYJBEk0hBUTd2ea0r7ZcXyqvSGp9yZwzvLtMR00LDN6v8Q\nPVq4Xh4t0gK4f7P9uoeQMgu960ySUv8wff2Mia/6eorZlxUcGSmuHuKRn1UG\nI2yWTpypNYgKGQFPAQc8aYWvbT0gnqCnh7zKpDVXVRMmeELgsBwSwyyENNV8\nsLcXzVIPLZe3Ms2f/OCp2+O7q6vrNntkj0tQwdqN/iapvEzIBnOR8q+QnzQQ\nR63NOpsuTW5bOyUTYW2zw0JkjvYCmIxoPqN7Xi0eARvwh5GWv80rMTOcu0Ll\noicgQTmCj+kHLSNV/5Te+2VAiFfAN7zVyMWwC0yeifJFJT02MVuFzb92HSO4\n4ZOP/Bd8lxGilvLnzy08uaCQOSUqwSHfCCfBs/SvlDL3GRpOxJdw8q2CD41t\nt9M2setqPaOkKKG305gk98+M2m+fQG+6VR3j/JfkOueMP7U57XBwJFaY7hlU\nPwJjCc2pwwQNr4vqQAg9HdisTtpo7FOrHzJ6JuY3e3OEZwy2h03C1Fpjz3We\npOhv2OKHJkV0XyvXfF6Nfi0msloxSrAK2Q70mUeTZub8/1qPdC6SL7asIF7D\nJ4Ry\r\n=Qbqp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6a6a73c9687e196677329640dc1ed025d13b44a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.06b76fa74.0","@material/base":"12.0.0-canary.06b76fa74.0","@material/theme":"12.0.0-canary.06b76fa74.0","@material/ripple":"12.0.0-canary.06b76fa74.0","@material/typography":"12.0.0-canary.06b76fa74.0","@material/feature-targeting":"12.0.0-canary.06b76fa74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.06b76fa74.0_1620071155233_0.2453776586765941","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/form-field","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.7c5000473.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31f06dbbbd9a3ecd103fd8c5d884de312db94b1a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.7c5000473.0.tgz","fileCount":34,"integrity":"sha512-IUmzUaeNbqu1UVUNTkBI06yjsVel3BmjuRKJEFEGCHndSjpTKFXZk9thOKL8RIF016/lbd5ZWgwvgaDhP2AU1w==","signatures":[{"sig":"MEUCIQDBtDgxTpwYjEbDUnss9PRnrfbRRpTwnEMh1sxfpBRxvQIgQxsEPJI6YXGsVfbLKllP5grSe3aTFWOoZ4aLNYC1Ob8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHwxCRA9TVsSAnZWagAA+TAP/2BPc4mgmg3WJIgu40gC\ndx7olfYw56KJOl2jlvNnPS7UshkiB4r3jxVDHkLRBEbsszdoGZVWKx0km/Z6\nCqg+mZ1yZ23J6AAxBVhhsrgLdEEG3j+juin/dqNlvic+26AsL2z1MaplLY4l\njb4SXt/nxzJOL2XeG4I5ouqGYxxLRJOBBBJd9ucO6jfeROXPKJhtG8ILeRwZ\n4cG+vzRe35pYrTQiYYMy/shvroyXpkczXpOntpHJOLO1DbViDH3DU3O8UaYh\nVK/OdqXMQj7WqdIFBB7ASrAIGEPSfiSekJZq6SF+d4NSZhkKa55xtnD2TEDB\nBFh2tYdMNQHUJTM/NBZBQCW4dtnFNEhKWlNEET+ZgepPumNV+WeFlVFWhIcA\n7NYoLLfase0eH4M7QqZN9+YJjhQ3J8SJFsI9UZGF692C5vJjRgj+nAOr7eDW\nJ+jMyLjvJ8wARe+IEgf3Nrq8/lOj2lU1d8B8NTBIk9maDe9DmSBMxU+C/tZo\noQwNG1uxgSasfA+305rmKbBJ9vIYpAy27cp2yi+oqc4oq/MlEwr7jEKPWGs1\nN53P4WuDRXyMniApVSJm5n3iDcViDfs+LXlXC8rjY7YGVfWvLyrVALCm1NF1\ne4QjVpxUD7ArHhFb0Ur2DwaeDKOIU597/P0CzBYluCNXlvlihgTgZuz2NBVi\nmQrq\r\n=2JwC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d53e0032497f2efb6a42d541ce5cd2072711f86c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.7c5000473.0","@material/base":"12.0.0-canary.7c5000473.0","@material/theme":"12.0.0-canary.7c5000473.0","@material/ripple":"12.0.0-canary.7c5000473.0","@material/typography":"12.0.0-canary.7c5000473.0","@material/feature-targeting":"12.0.0-canary.7c5000473.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.7c5000473.0_1620081713330_0.09496872452585614","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/form-field","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.de997644b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92a3b42d016239b0ce0a6bef79a98bc03a3bc42c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.de997644b.0.tgz","fileCount":34,"integrity":"sha512-eS5d7Mve0LuwHZiA1ZfgN/CmNHbgk7JKzZw2OKd8rgY4aV+u28YcQ2b4BU1RdgX36DY0k1QS9o5ufbWGCJUwYw==","signatures":[{"sig":"MEMCH1CIKOCdA3NSDLDusYo/eRwWH1/AeEDSUfH0bR5pxRICIDH5IFeUw0s8xOZRrOKDAzdLwH2i2nRLVJQaQgeeq773","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYQ6CRA9TVsSAnZWagAAttEQAICyJnUubvIanqhtEcSj\nFTyPRP4Y84FeUpIDGdilaGAx6iUlQghiq2Hiv2P2Gf28o2pqeh0qySM0OXFL\nGjdUo2UvCYuh8PO+am3/mK32kbd8+F+1lmomqgpmoOS+x89ek9eDgLwAVsJf\nBm/GGGoKtQv8/y7mgE92f4sING9+UgDfOhlYHpAg2N7EhGS5mB8hlwb486Nh\nnf8ejHzgOWNnNkWRAQvXMA4zfIMho/RACTdLa7xKoGTFRPSSo4TIhDXnwpcm\ntO5aRXvpmXEMHp3ZOULt4Zcm7ZbOBNIsyC3Da/a7TMtSLNgZ0DHpmg2O16ls\nSuO4kYBcXE27J7ZlagZGppoqL+g+p3TSVN7eiJI49flHBveXmnYBkhPqE2vJ\n1cKXZXS4CHGGL6tD0vubyzXaAdpQ2apnXaBV3gt+6smIT5Z9vSNVYOQL15p+\nC3DSLGcCiCzh4bX8qArydL/Di1V0AnZ3TfFTp4UzGYrQTDQKC2QjrxBtoiNx\njywjq9wANIsD9wnhiL3o17kC0S/soWMZ8mp40RW5jI++bL3l7rh1hKEL1PzC\nR4HTqADlizHrfruARHi4mADmqSxBJQ3rWJ6vqPTrFEplo4LFQVl02KUiazrv\n8H0+dGTs1cBBBraScJZVhdSdZMEGMZe1XSA3bSERDjer6JN7wuVcZqcvJfSO\nxnCk\r\n=C6gU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"efb97e2ef70bfc07ed9b429041e4f201bb0d3a53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.de997644b.0","@material/base":"12.0.0-canary.de997644b.0","@material/theme":"12.0.0-canary.de997644b.0","@material/ripple":"12.0.0-canary.de997644b.0","@material/typography":"12.0.0-canary.de997644b.0","@material/feature-targeting":"12.0.0-canary.de997644b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.de997644b.0_1620149306377_0.7167619196419477","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/form-field","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ba8262ef1601e6a09485be81256356624e7bdb2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":34,"integrity":"sha512-HlCN1sGXW2MswqA6JMBJCp+6WosYvPgtZgu/FOP24pWXC1nokfF0LIHwRxuyE+hj/mh6S7ZCy8dp2MfJRsKzIA==","signatures":[{"sig":"MEYCIQCSxRoMtWtcAq69ppLdI98IYoiTKtVgj6t1IZJLpWSKXQIhANQY2gFz+1ZHSNLf4h1KGTMeNChug+knnqDIhXd5Al6v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYqDCRA9TVsSAnZWagAAY1wP/jp+oZKfuzp4SMhXS5Ev\nuQvAtIzU2iH3CS7+gVWg3xiQBUtBz+S3OtSheL80Psp/3XDiqDdpekD1iRyv\nNBEYzuyI5Ktcytbp53qQT+DE9+X4KC0ACjJ9cBOeutu0enONxwwMygubJ+Hd\nNYHw2eX2er3IYuaG4nvoWkLe+6alxpvOk9jA0I4ib6RrpFLhjEXKtKv2MpTT\nlI7Wv3QGSJj0Sen/yJpPz7N3AiL/8/zpg5mTJsQlOYHTHzoqFjO5JZA9f/S6\n5erajISGZBmtTNLsPyRQWfLPGnVZ0wMRHSfzI99+nwlQdfsAdb3DTmge4JYq\nGbuDOvSXho4BDAGAXuwtmU2hBxVGKg4cQY3ywdUVyJn3gdxWOQs0tBQL5biy\n8X3GGFuz0ZJYZgqT618xHkdrRiTUEulOUe2fpCOXqoNx47uHniGFkiDZGL1I\nNcCuyR4d0FxZboUt+eEMSUrKfdDs+QhB6Uyeow41eEWRfyrj4dSXTtcIA2zo\nNRcpkHu6LTyGrqViP7h1i0TW6R3IhyP1X3LKuWE8u59Juqxbkma5IjgIppIP\nnT/lDb/2I43Quv0UC5BJMHCoQspxswn1Q2mFvHE6Vq8cUglEQ3AM0ROxKU1W\nYK9tcZY2nvWRAxJ/QDLVqiPujb/L1S6WunY7uI07LxPXZrqUr3uRz195h3MF\n/jYj\r\n=W9Vf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"473ac5e3a11b87616a0dcb004bd5a9411a271f6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d4d7f1cc2.0","@material/base":"12.0.0-canary.d4d7f1cc2.0","@material/theme":"12.0.0-canary.d4d7f1cc2.0","@material/ripple":"12.0.0-canary.d4d7f1cc2.0","@material/typography":"12.0.0-canary.d4d7f1cc2.0","@material/feature-targeting":"12.0.0-canary.d4d7f1cc2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.d4d7f1cc2.0_1620150914880_0.5997781587341604","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/form-field","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.be999eb08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"422c78630e59dce44bd6ecb72766400e8ddd87fb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.be999eb08.0.tgz","fileCount":34,"integrity":"sha512-Fb+/vp/3g9/CSBVoBQNFtO65PZMPxjvlhb/M4IMyQvkE2mcmFW9pwKqrt+sbRbEBBYR/qWeyxtHB14qhULNOww==","signatures":[{"sig":"MEUCIDaJxncAp/0nj9BpoBX8IuI4PJ0NVsc7iaKy0a+SM2JbAiEAvZOUnW4AOERXzJEWNwV2RWxUffsXLFo8Qm70Nv1bnTQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYuwCRA9TVsSAnZWagAAQ0QP/jMKABht7ZptpooJZsQK\nlFXg0cWeAUMbqqUULcy0HDlJzxcJCkpIkTm+6KJ2EONIuXYb/f/p7cL+pB2c\nuB9ZZnThCPrBKrIUBptRHbLEGxu5POz1HttYKVUy+QKiL+t3ZpOwZhCC4PaG\n0p+m+1XVKqnGqytSGToZTwK8lMLLFmv4vGFh9P0mYDMfaPGtFbzseIccf+Te\nLVfUvjcltXXeCdSDaVcppWb/nwk6ZueDcZSWyqlqlsYmp7u6QRrz8pq2RwVA\nLZmTT0g8RzLcyYXPXZ/JdRwz13lsQD74U/yzG6Zh3jmPoNJluqexBNPKNs1+\nRSohiNZ5hCc+w6QT1xjAY4ARY8X7Ri7kNfqntOGmd5AGN1MtKVO6A98T5srK\n2gTuZAo6Bg2kSJErRNFGl1Dhh5TFeQlVGuAnpA3bss3YJSZmpF0iDqqK1nRT\naEEIHgHscivLj4NpH4VkIzgGt7fkRTmf2pN6vpq/JFrdQuiG2F/DHnmzv/QV\n2/xMJ0GySTi1ca5znbObSTWLN62y01EWF+TQrWhYnE2Dd95l8NtiVDWS0xJy\neuU9A4Rl8Qr40Q7IeQkj0QSLJb74+Uzp59mIEUpLJzw90pnMq8+gUJqb9nVw\nTctQjx+zODXeBnMj11XJrN21qXe+uxlgCF+8kliZ98UR7nC02STWFBd9izAP\n8Bkm\r\n=ToxU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"78911f7ba4a7d68ed38f554357f8f224ec7a15fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.be999eb08.0","@material/base":"12.0.0-canary.be999eb08.0","@material/theme":"12.0.0-canary.be999eb08.0","@material/ripple":"12.0.0-canary.be999eb08.0","@material/typography":"12.0.0-canary.be999eb08.0","@material/feature-targeting":"12.0.0-canary.be999eb08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.be999eb08.0_1620151216109_0.682103965559431","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/form-field","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccf32b9242027dc91f93c9a3f614dd421fa2fdbb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.eda1705fc.0.tgz","fileCount":34,"integrity":"sha512-rMvAf5o4px8UCOKyjolBKhgZAIZbscSRN2KM/xHOfyUj3ACIBR4yN194lpsImCNMOgA+JvC/hG71oH+P+ljmSA==","signatures":[{"sig":"MEUCIAOvp5pUyte88e8iay557/T+W5g+dq86DQ51UMOgEcz5AiEA8X6Z6431f07BzItmtXgw04aa2WVkEZ+lxmFoad3Njqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZwvCRA9TVsSAnZWagAAVUIP/RLMurJA/ZB3MzZWqGrj\neZOuQaeziYV5rixoJlgk70gEarIr0wQu7gO/p+1FVZvDzf4jWZueAZ93Ara7\njuSPC7eyxZuKjYYvYTwM/jPfDLzL8aQTU4DdTELF2Z2C+oJFhZxD9WQSl2bL\n11K6exJYtm7mh0qxuWJDdGp8ozmdiJ1G73N8+qjueUokW7v9bU7GRSEXtlbg\nhNbZtBMzJJGc7bdi7LDZF6z62te2G/yh7cHJcUz2LBavQSiVvb/3U+Bp7/y1\niWF2POUJ3mxZchXDLzZ7j49eUHsXUuPF32Gn4itdHUhMIA9pXwkkM5oJHA02\nRMZoQkMfV7TQuKASQPRGxI/PGmWPSjChLcDCiXi/Kd5f5o202xMKF+IrjMT0\n7wyMv7xPjYabiRfsJXdSxp/lrOyPsy1y6cQfTFlnD+izieRRt9ei8HlpzzCq\nkG9DpRZ3kYjfFLhT005feoEbMljvHrEfhqcJidSKKPOqw/zvjyhyQWObJ1+W\nTtJ15xZd8qj+zct1kM9e2/R9cEM9Kujxse0qXIubS0hyoz3Tnf/LQ8rwyiZF\n2HeK/vDVJpnzqn9wOxIBOku+CUNacwNjPe9u5upouYyO29ZySXTV6DdWCM/L\nncSSGF8SfBtaQnHVl4W3u57cN8O7TTRUx8fQRNs6g6k7xZMMmFV6o1EhxkM/\nFgne\r\n=MGVs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a4c7f355f27d26cb39ac4876510254d165a5645d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.eda1705fc.0","@material/base":"12.0.0-canary.eda1705fc.0","@material/theme":"12.0.0-canary.eda1705fc.0","@material/ripple":"12.0.0-canary.eda1705fc.0","@material/typography":"12.0.0-canary.eda1705fc.0","@material/feature-targeting":"12.0.0-canary.eda1705fc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.eda1705fc.0_1620155439409_0.39788648723974473","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/form-field","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.718c90178.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ef4f67d7d8070f628d32146222bc6ee89fa96c2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.718c90178.0.tgz","fileCount":34,"integrity":"sha512-Owb4026muxUZrx5KFFlg0RAD3IsmcrnSFHent67/WanlLBVmxqNCFnhCDEPCDyNeCC5pVmNSW2AlqPuE5weTaA==","signatures":[{"sig":"MEQCIBJAAQ644QPNstFgZfAY6ZPcxfAGlL02p4Ww+vyXoX62AiBTilw6LPsREHMvP/4XBmaFP9f4BaDJSyBhX1zVfQumhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaA+CRA9TVsSAnZWagAACq4P/33gi5p3Cl+aGdURrrfO\ncbTEEF/EwPSdlTtEb0IGYnvhveQMU/LODe8LyvUey8Ttvhvi2WUZGc/YbpbR\nN7mSB67NJOWt2cXO3CALUA3rpH4mmfTG7nDeqrSIdp3LHJdCldHDmXRHXHTB\niv0NfwIWdNFSVlCD8qFvv9GmlQi2L9unpup4Qc7AIhF2FIjI519jRxBqpZDE\n8qLyQCvaiXnYyjqM5uqO577TG3zHwlo6gBS/ljyngQj9Bc/gmhvwt/dUNhx5\ny/QLMXlAutA2BixEkU5W+1uAVnPtltCq+ZsKUxnxOG3pouR3NKFneh9kA+By\n7cs5zSNexhBhostCIYRKu/aX2nKrSC7Ak4tVQlo1HY5WQUF684qgS1xkdGHW\nrxq5mdUZREr3SEbVqD49epcXiUWdsCC0o274EWIBbz3oIKlKzLqHSLL4ig6K\nsidZYn/RjDT/xbMcjRrDHd9QaoxAL8wiCR+dIFUrmVZOH83OHa2K4CCzM93D\n4Y0BLNx/Ue39whSrJrrX3nS5IXAU+iuGP7sICUxOBpvdMZRZPv5sEETNllMl\nbMPMJndXets+kxK7YaAshvmlqNGQRlVwbrIpBY/5bkDSIRDr1YlVDGc6zBEt\n8V0xpuez6WYfP46G2xiBgbgFCUgSta1niQALJGF6h5jIBbdkHQkydqlXbPJ2\nDruS\r\n=VSs8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"38bd77e93e567329d390e9784d4f591d6dd41191","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.718c90178.0","@material/base":"12.0.0-canary.718c90178.0","@material/theme":"12.0.0-canary.718c90178.0","@material/ripple":"12.0.0-canary.718c90178.0","@material/typography":"12.0.0-canary.718c90178.0","@material/feature-targeting":"12.0.0-canary.718c90178.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.718c90178.0_1620156477977_0.22208540828184908","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/form-field","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.0e3917299.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e37d3d967ce50db07f55f6c291bb710a8905434e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.0e3917299.0.tgz","fileCount":34,"integrity":"sha512-Ny1N9Rp6K1NNNRetqyY98/Fd1xbMqCGIx3qM+xMYnv2wtJn62IkW2rj7sfXMKe0virkwOCtxCZ1HjMpT8c+/7A==","signatures":[{"sig":"MEUCIQDVLrEtkOcduloZFj3LFgWWHzuoo3VhEITPtmXOJvnvDwIgQxS5qHvLwPv0gmgruYe0vj4tBtRDR2CWvUW0HpVehp4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaDfCRA9TVsSAnZWagAAIf4P/jB+4+2xp5tqTtFawYDS\neWZPx81HvgRLLXU33KCQQSRST+j9RdRngzvExSoHkMBjav1uQX42M+xc5CZs\nA0Xm+kwCp+CBnyEgzfpJCQjCQcHGkZCf5uZSvE3k9M6BJM6TgkojllTgZNSM\nhu8pgb4yaY3SGfVnHbpqEvimlpHiyJs+jJWneNz3Rlq2JBlTFLQVX/kLZFFM\nsstRtq7Ziv5BgWMyRClLf/4Tc1stzxdJWoeho3Rr0OxvbpUGjdeLbGKa2gxs\nQfz6DPZ7DzFUaXr0vVByEoKUgEPlaTWvYpjWaEpHjmiD8Y+1xuBNuXIJ6NFO\nK5nE/xaqK2ofXdN1oniNPWe9IbyJVqbf0fuhf+y9E9YuXYwNaGvjtjRw73mu\n9mw/5oKC4luAcrW4SJhf/55g1SpxBTOLh8oUqy6G6+OY8IFVQdfPBX5GzLVB\nUIN9kmhWkE3Uqxnem9kVDuyF5cJABKR2pMwMtyopcrF9BO0/fMpDdUAANocv\nIky1svMYUbadlwLgzFuBGO0y19X81xMhNfp5lcTfXmJLBgoWpfoFmqnybYlD\n9qv35X9W8KmRifcPVH5bndKY0cYBmzISLocsiLhZDa3OvlKVcLEG9DSvE4BL\nSWNXqMTogHfcv+T3H6BJa/u+rMQqt+ZXtOBNvI7/VToxlSNlLBk7O//EFbl9\nyjfV\r\n=uIpq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b53d9d2ca98f518aa071c4933f2c0046916932d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.0e3917299.0","@material/base":"12.0.0-canary.0e3917299.0","@material/theme":"12.0.0-canary.0e3917299.0","@material/ripple":"12.0.0-canary.0e3917299.0","@material/typography":"12.0.0-canary.0e3917299.0","@material/feature-targeting":"12.0.0-canary.0e3917299.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.0e3917299.0_1620156638901_0.8558469027670648","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/form-field","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19f09f302df4a5bd193f6ff0ebbca51c5c31e646","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.836b3c7db.0.tgz","fileCount":34,"integrity":"sha512-1h6ZWH5ggJZNCsABC+7Xdr/DkKEFx9WZNouVxgMwDlygQs3XRvpLCO4gLij2FRcUiebB9Syr45opfl9lkyy5zg==","signatures":[{"sig":"MEQCIEYyPoDs5/tkVCGXYhfoc7eO5iH6r4hQFPu/MQc3x3sPAiBOIfRJetiralCMuCVTNSb2XZjE2QzbyFOaO1NYyZ6UoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka+8CRA9TVsSAnZWagAAfqgQAI4Ao0T6YjV4vxil5eVH\nqZuL8mRCCFT3uFop94CkSMiLlPODg2O7M2cGkVfoz3Y1WaQGDKE3muHaVbwh\n9EDAIt9Jx53o5mbq/tiU4TmevSfRt7HmkN6vn+wSTZ1eoGDu6bfSbEco6VZu\nm3HV3Lsgwtb95s0me8J6AhAhbMI+qq2n735zpCX9fEEawiCS1pYQv+hmKL3u\nbeQWlHO8PQfpIG0gUUDhQ57Zc/74boJim7g7stV/4B3a5TTA3f4B//0dDn7k\nI+pqqSKNn+gRH4AWjwbrg4FWTU5Y/cpvYnUhyY7o2z1/LyR5wN7hx0WOfOR0\nu0iPtbVbVCoFGgalM/sOZgq/OLAkI978AlyFYJf7WasBVCYRYVM/kZnfsIRY\n4CO3mnvkLdLqrIepTl04nZV7ANqAqFAdo4NP2z+V+ieJSvaWIrbVzNPHfAGh\nWPksJIFvXkwisGDJebOeMIaP4pnCb8NX7Uh3yvkdFJour2L4NJv4zYQJA3nI\nrovsKAFHoyfwlr6c1eWZJyJiMS8trPbtPWA2ATkwlKy3Tirc8yb9KvaBAH8X\nqnqLarFMGp+8BM61GFK2IiBdDW6Av9UF2CnQJVIEJkFXMiBwVxM+h8itbgt7\nwtijdWxtsc6rWAAzABjIfP3GT5+KCbohwA0BQPDavcNk0T2xeGi6Vt4gtF9u\nWKWQ\r\n=VxE1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b39ef8f7b55792965f33ce0e4907f1811ba2b17e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.836b3c7db.0","@material/base":"12.0.0-canary.836b3c7db.0","@material/theme":"12.0.0-canary.836b3c7db.0","@material/ripple":"12.0.0-canary.836b3c7db.0","@material/typography":"12.0.0-canary.836b3c7db.0","@material/feature-targeting":"12.0.0-canary.836b3c7db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.836b3c7db.0_1620160443723_0.3425288312721164","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/form-field","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f92c188c95a87bb508001c7c045bc3998b9aeb8b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.53d4e6d59.0.tgz","fileCount":34,"integrity":"sha512-yipkMQUAmuKoF8wpwPRgyaWJ2OF3ocYwBkIjfgcRXQL10ZnPfxJArRDtvPVJEBEp4nZA6UqdGG5VbbosJlWUGA==","signatures":[{"sig":"MEUCIQDwyUQUOcIpB+At3/alK26VkBf/9s3cB4ydjlaPR3DbXgIgElPXJLeIaFBaev2QKllvgrXzMLua+asn44V3TtsgxU8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbNpCRA9TVsSAnZWagAAEKoP/jTNU2Wcsjb10LDt/D0E\njIj8OOrd++YMaefU1UL4eRJWH79IPom18pU0NCFQ19nFATmlszFulZOADScn\neQkESfFaRk99qIUR/HLppgyE4JbXmouM4PLk50PU0flql/e2T4QedJ51oGf7\n4jssbtyz4Fa4fFjbAAQPN0LII1ro3IdgsJn7TQFz3IL3WuYRQly6hntX4Fym\n+UtSsTOD8+1NFxnE6h4r30l/DzdUb2oynyuVE/BnwcpusjqKtxL2VwmO7axg\nDTzJd+1a0fXVOgXsUPXDiKl1i3fO9WlR4GlSlqZ9BDS/zaLrx0cVfT6BXRFE\n4PPCjsSeRY3sjQTLALgXCMBSkhS88NxrEHx8uJPZO6TIDCNNGOh97SB/3c6N\n6uUKNX3f0ici+JxzmGZkZReSwPl+uAq0VqhQoJ4Na2Fp05w93Van8CNUOYcV\nW6hjkXVVvZYd+oF38vK8XlygoO/fYB3DzkQBcomrKre9Dxtwm4Viu2kxemJy\nIH88igRpXJql2HfeZXbPYY0sm75Jjw+k30TkI9e/Q5mIfiUMojbk0p1cHNVR\nUm/g/OTx/Tqf0/rJL+otBHEPYTkGF+Hy8pLNwG/6znsN8rfE8HHFY2Ir4kT+\nP4IENTtxqXN13tWVJhiXpEM6RBcZ9fm9qm3NObtJrLkSxqE0sFL01q9a3xZh\nYeqb\r\n=5JEZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a89a7c81034e7bfbeb469ddc1e1e463b018f7179","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.53d4e6d59.0","@material/base":"12.0.0-canary.53d4e6d59.0","@material/theme":"12.0.0-canary.53d4e6d59.0","@material/ripple":"12.0.0-canary.53d4e6d59.0","@material/typography":"12.0.0-canary.53d4e6d59.0","@material/feature-targeting":"12.0.0-canary.53d4e6d59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.53d4e6d59.0_1620161385495_0.8951715637460338","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/form-field","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.18d147e27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddd93c850fe63d0d01678e7a4085ac87194aa2dd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.18d147e27.0.tgz","fileCount":34,"integrity":"sha512-D6ctsQflGWS2YHuAWmvBl9KxjCETxmhYQJ+zNctDc1TjG528OL1xe64qZ8W/josAjZF5i6P4A6ph1eH3IHgVwg==","signatures":[{"sig":"MEQCIDhgc7AjQk4hUUJipQj7Bk91tr10wqADkvzKndSMoWPOAiB0i5E3A6j9wRTXetO9EHAbDfGeDnxVIPeus0NT+uSGXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbVqCRA9TVsSAnZWagAAgMIQAIb10v5QEkADPpbEbvt1\nHUjqe5aYOa6LgUjkPUF73tLQ/ErfpUVg2DnHkcAW+WwoqiQu0WFKQdiwUudk\nUsCm1hdcQkZnTOkXaGUfFWo1JSDB01jJ+o0FuqY5a5vrgBZmSFDPjVBMZpM1\nGYakRmJYiWXN6yzaoDEHRIXuBuqvyIH8SORx4R4Qxs2zjySVkwbdBSV4XUwl\n82/zaPkzRflI76AuEtCHco+qgPlfSla1sn35Wl6LLcUWlkhDdNiiCLLsXQ6J\ntu1eeB2z45+JTz2WfVPoiNJpuA1KX8q0sQLKEneI1JJ31UbI7toDf2OglBE8\ns4Q5os8t5uhPg1dXSleWDoUXCcVpYnfX+Kii29HuugtVAqjuQd9PCCkFTQG5\nLA1MjZ+H5fuWk2xglv6ZuPU8GqZ9M3iI1Koc3ZouNXJF29NPlJj3QE5/MizF\nDD6Brvazviy9vUDO6w9pb8qF/29XZiQiVcYI9IWTfnV1kOvi9LJCw1W9i4oi\ncEV0cIWCgEtu6zPL2kMfAPE3x1jChcg/oHV4HyEQtAmphbA/GrVfkl/rRKHU\nQ4QyB8XiPddZT3gzJ2DjyVIJ5zhVmBfOwULzcvRGDXQqoOFSXWFHn4InCDdx\nhrfh+uXUIBl4iNnJa1qkDE/rGAN7XA6la41bxjdE9S7hNoYxZFCiRUZ+yod/\nsGIw\r\n=CJCY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"02e686390dabbb1590eba968246da65476db162a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.18d147e27.0","@material/base":"12.0.0-canary.18d147e27.0","@material/theme":"12.0.0-canary.18d147e27.0","@material/ripple":"12.0.0-canary.18d147e27.0","@material/typography":"12.0.0-canary.18d147e27.0","@material/feature-targeting":"12.0.0-canary.18d147e27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.18d147e27.0_1620161897852_0.36106227292826554","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/form-field","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.b9984794e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7df87a955f99a0ad097261dabbc5b6839a71665b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.b9984794e.0.tgz","fileCount":34,"integrity":"sha512-8bbN7XbmHpXqzgP9OPP5jFDHPUkb1pb/e5X49LyIyzWEpeDyeGCHeFpu3yLpS+7qPWn4fcRhM7l7WySa6LxxAQ==","signatures":[{"sig":"MEQCIFwyK1Tg5ppGzXe9gTWakXAkNlIzQqPuwJIMIsQ3ohy7AiBMx4oK7kXP7yUOZulty98AWcm2/Ev2El4BF13SKNWNBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdK3CRA9TVsSAnZWagAAa/EP/15WyXeNUOPyRIgKSgAj\nL7FTdFYygEudjHmuCg2s/XmUkMHSFd/qEQlAYMP9P9H4t9MVaKb5DFLjizgX\n3PdCn5NPO4EUGgbogYsooufZwTgAMm8MviMpkEI+5aeYlg3MT5gTsB5lbXb+\nEwISUYc/G5JEH6bAjCko+xs96/k1YWtLA5JOltUH6DQg5JHqaGaTXIN20AwN\n6vPFvr99GHIEtPy6q6SH4hQE1DRiccN8G+D4Bwq52MbID+Jd17e1nvGdYbtw\nQqzWA3pV2v4BvTXELJnu69gu+swJtsFpO6YREcqYG301Eiz+JG54tuIUDAz4\npg7k7lo0JTSpGPwyYoFsuj2cPkgLzApTKWRbyUPmjAEY/mv3rp5T5lFef57R\n5XGQ6Z8zibkt0fUmfNxN2Vp/1cUpOBiI/9r9WG9Cq+0AErB8R0GUcDvZ4dkT\nKM1DNdhYK7A5YkcdtZJ/YiydKbmOFqaFHLp1MjVc0EcTvO0GSePhBiMJyxp9\nS6j3Rkom7k92bXoWhJ9IC9aF9wJLEuhfHOfF1HGZ8B2CJ5qUa5s+AWTOx0rP\nmg/ITaCLw03O10c4W0IT3UKk5HfvcZkEJpwTviFDkAhP9w8J/+/ahA8iAtr5\naUeASLczbSIwTQLtcuS7xQtAA0WVTUWd5MFURiR5nOdZWQQtZPFt5PuTytMS\nEfoy\r\n=QFjb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b9cb2c88737add4e6d3e04893ef4ca57b7848549","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b9984794e.0","@material/base":"12.0.0-canary.b9984794e.0","@material/theme":"12.0.0-canary.b9984794e.0","@material/ripple":"12.0.0-canary.b9984794e.0","@material/typography":"12.0.0-canary.b9984794e.0","@material/feature-targeting":"12.0.0-canary.b9984794e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.b9984794e.0_1620169399034_0.760659158192881","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/form-field","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65c0983bd6d27189caeb4d9562a13c781088f578","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":34,"integrity":"sha512-Zub5ZOV9kNiEeD15VhXjdYMK8qp0H/kHT9jca6dSOHLCRW/rwyzT342Ldl/g74SEEwLk6tMXAnszPlqGwSrzzA==","signatures":[{"sig":"MEQCIGBkT5IPQkiBnBf9pYcYECyuJA/K5Ou+Cs0zPlbTTIiHAiBmw1NyorWfXQBaQ9zRJqmqQ3H4TWVjVyKq3hfd9yd0Sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdOBCRA9TVsSAnZWagAAtycP/RnOs02Q3cRymYEAZ41N\nGczis00SHTCvA0IyupmNq7fkuZcsczJrBvpt7QOK+s4PV9J8x9PUGegOk69s\nTr03aXviBl0otQbc4H1FI/qudYTys5KnDvpRoj2CfOI0lWxBgWDZubSsFrfM\nqeGEO/zCoBKouQhK1d1jCARORmzCswKR7brzEKfrNcNzS2OJLSyUBgIFJoVG\nm13Z+SkccD8TbFx8HJ5cawj59tFeXds1UZkJ3Sl1MeeJNjBDmY/0sTleZ6xW\nnGG6fixiTldFNBGQJkWzxCY++O9W1BEh9xBElhV7uYHEhlaO6cxmWy5iPbMS\nZI6+4zKqN2flrsDPV/DPx2T0oMi9Yt10ce2pfk37CnT7JYmewEMU+p8d7ahJ\n5b3wQDuteJB1UbdMGKM7JkEQTbLLKKsFKdvNDABj+21p/RTEpzppBquTwUo5\nVKki01EYWJvs4ljRYbPcXuRTS1TcLa7PT9zr2T7cnqBQUf26WayGbaWvKjhw\n8aykRZqRN3p17FbKGsDgxYnugJZ3lTdGM0V6DD2K4Xi3Kpf9YAB2jatq9/TD\neUGNZsNJs3d9jytmEaFI9pPiq+N0Ina/rQV6vGdBHH2Eg3WHbqQQtBjZB9JP\nyVzcpiuMjo4UggXn7MQ4OWcqmuFcg6OgZX/ptIcJ6RxnktOmy7DNmvXbnLiZ\nj7df\r\n=Xz7h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"219c30995da49f5c5f458aa1b983f09054c2d4d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b76f5fc9d.0","@material/base":"12.0.0-canary.b76f5fc9d.0","@material/theme":"12.0.0-canary.b76f5fc9d.0","@material/ripple":"12.0.0-canary.b76f5fc9d.0","@material/typography":"12.0.0-canary.b76f5fc9d.0","@material/feature-targeting":"12.0.0-canary.b76f5fc9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.b76f5fc9d.0_1620169601225_0.2552716725576225","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/form-field","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"225f38e09ddde4d14fcbd67cbabda68493087f45","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.055d4f10a.0.tgz","fileCount":34,"integrity":"sha512-+/Czc2Sp+WkBIkgrYftVeiXi7wqNL4IkACkfXLdylwDFW9M7shC+zVwDDdzA/hx4TVQ64kpvdX3fm+qcyKGKEQ==","signatures":[{"sig":"MEUCIDzj/YCHAqg1iv0pzEH5vmt3H855ljsaIlmZ1hLOqfkBAiEAwFqy8hRODxptLp98m5auOjEZW0KykgxVOYjLGtf3DsM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdcXCRA9TVsSAnZWagAARn0P/3v+7FaqrJzwOeWSDdZW\n5axLOcVMoSI7uz4zVrp2Gdw6ykvfzkNwsC0SsMmbQF9giEJ3FIXm68Ntipzu\nfAGrLhhZEC09WGl38ujRJHVOkTdeOKYA67Wc/7UNxBIbxPS87NuOySwcrGMd\n53v0zCMEWcjM2WatlM5kfBTyAZWiKsf3FM/13mQhTvJqtXzGJw5BMKcOImQY\n2CbfQjXtAEioL3iqwK3GCP/pv6+AIbkAZ1bEMJztwKM74BQACUyrtEo5xKfF\n+/IfC/KeDlN3RJMCEw/FZF5E1irQTtRrlkEHt0im6vL0OKGZlaxzzZlOnZgN\n5ZAvY1R+EkZDi05QH3Tmp9aB3mXNj+Vpr1tBcU+ppDit1yatEnGUhZqeJK3D\nadJnA2lmX4IIJhEaoMpf7o0oHr02Mrs/tzVWeYPhArIjqPDX8vqL46cAL6PN\nsFPtl0yXJC5jj4yDiYovHdcWfjm+YKMOwzidSOwWbGkmjJ0vHcYAivHtJ82x\nSxopi5FR5N7e6I7cYoeL25o3WyW6O7QP/HiiX+4WBUmJPndS+/pFmHfQzOI8\nS+jQrxKn7KxEH00OV0IDNIA49UPQKr5cwMBXM+UD30/NIalNA1bMbrVvvFyA\nd0H+gxSyII73ptVeDmp1zjKUQ+/0k7FLV33SNnUqvz/knfncwTJAi0nN7Jr8\nXFck\r\n=o0lL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"df8d3cdf52cca2c339c1fa1cd18129db35422c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.055d4f10a.0","@material/base":"12.0.0-canary.055d4f10a.0","@material/theme":"12.0.0-canary.055d4f10a.0","@material/ripple":"12.0.0-canary.055d4f10a.0","@material/typography":"12.0.0-canary.055d4f10a.0","@material/feature-targeting":"12.0.0-canary.055d4f10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.055d4f10a.0_1620170518763_0.5329599275043182","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/form-field","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da1b0027c72194d72c245be59511b088257e2345","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.5b6a46016.0.tgz","fileCount":34,"integrity":"sha512-jt8wUYE7BEGZrJeRroI8PSApOS84q+eh1Eg1BTnBuNQ2mLGBcAQ/btzDL6mUv/97qhf/EFvuHBby630ve0wzCg==","signatures":[{"sig":"MEYCIQDRZiVCm0SHXWc34SYqBwia5lYAanQAOp72m+6JuqTaBgIhAJ8dwl0NMo29vzrUCQEnmdHJt9hHKe141RV5iPsmRJDn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksTfCRA9TVsSAnZWagAA/88P/RPLGoltTU5hjRojwlCT\ntEXfR0eWQOOJ/08WcPV0Xw+TqVDPEDH17X1sDJ3Yq/xzMbYdTMyDUim5JVm4\nIZQtje5pZlxhTR/QfyhptjMbAEY/IZJtn+R1zbWnkvWdZJ2scUsoRed79m5T\nTHrs5z8FtD1KMM1cp/Vy9wIPZsCuQd4mxZ2bJFMIzQHLEOsWK6sfD55TgC/Y\nkrKkfDztAtkksirNEfiUtA5uUxge4xTowKqiQ6L8QuWpFtKBbDdBAdXfBx2v\n3T11dxKMljHBh4tExsJU7oh5y//RtQb32QSWEeldriHc0oN81k5Cx4JdPg6u\nqeY0Vq1AnT1ZK/5ttrGe2GQABoqdTPo4eGDt5pC3MO3rkWezAfxRtSWiNPV+\nTM3CmpGjGRsIMww2frH3dWnpAvDi6OHE5pockw6Y0OCq5DQQ1mKcWfozdahs\n8GMnHvn/0nAGgsjvGrgwr2s7lmgZzT/LUMQRiojwUUM5VBhaCxZfGprlV2X+\nMKjRzuQ+yk3UILlljPs16srXOF9d2bj4GgZdACMvD762WuP2A/yg0IOEDE5s\nTqwDiohCcG4Ohznp5T4h7Q4iV2hcvZ1vxM/HP1ro0Lto0u91HpoF/kSa8cVB\nyvKMmotJGNwHd7kxgk66UxVCbZrul6svAPyO9/BC6bgulHcS9XNdZ/YGt+cs\nhp1e\r\n=fYJ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3d9c7e3c179062db8b5bc243e8bbfbd9d9132e50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5b6a46016.0","@material/base":"12.0.0-canary.5b6a46016.0","@material/theme":"12.0.0-canary.5b6a46016.0","@material/ripple":"12.0.0-canary.5b6a46016.0","@material/typography":"12.0.0-canary.5b6a46016.0","@material/feature-targeting":"12.0.0-canary.5b6a46016.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.5b6a46016.0_1620231390825_0.06143922275647795","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/form-field","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e464e006e560aaacf9f9e90c9d2b4b2d666dda75","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.33c9a737a.0.tgz","fileCount":34,"integrity":"sha512-p+gGF1AcwF04W6vErAwAdLvT2AaSRXiaAuo8mRI+7M2Xu6GsC0nkGmmFSgU4WotUpJsAxN/gSQj7SElBoMhYyg==","signatures":[{"sig":"MEQCIHqSO0pMn5qWYqdUcI0haaMHWl/gblTI2X0cYHmQl0IfAiB7rwwGa2EsbwD7pafVw6qMXJ73r5vdU5VbJzX47iGGhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktV/CRA9TVsSAnZWagAA17EQAJ0NUnBO5p/tXRaSck6b\ncZxDrUnhwyg8785+3M3q+kKwVbyePnVQrajtvToDnYsx7kM5OxYVrGKAxoYh\n/VkhR9EUkhVlTQeNRoIoSSz6yWk+Y3L7bSLAyd5S5G3gpM5/jBDiF5BoyZlO\npDrJo/Qr2SPVRNqyPMZGNECAsKW4uxY8lMhXaOtzvzoIQPyI3/7n3t+qcMck\n91OBlEaKmykmjWzdperollXpRRArwSnOwVtkWNzo1ekBUcsGEZkLNbm7f9RO\n//QV4YCsZbBN6wzpZma5qWJrjUWoEzIiZt1ggA1rLr54ov6aus8OBz5xner3\nPTNYkDpvGTdR82dTZ9VCFT2UYoYyR5D+VkemySQqOX+Okl/Cnsaun/YocIra\n4jvRtwyZpEGnLp1V+WhNROitoChW1vOwXS1YCTOy+35krVykQpR/bifKNYWm\nZwOft3FnYOJKkAto8ZwrygAilWqxT/mwKyChq1f4e3pXA2Rmh1Gf790OTywh\nBomRo4IqB3qLJIk+5poqCA04hrNJT7ilE9Lek3w/Jaqn3FMf7tEd0qKn5vTY\nebD79jUwLC8yvTGhLJUxDk3RciNk61M05dD8i9qeBBK2C7qS23c9jDkC2FwW\n8lVnaQVCYIa3tPOkJ6rkyuryAnsG5J7UXboXAoMhNQknbXMMybuAWGOyV0N7\ntvrU\r\n=UAeF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fa5c97d28049bf03f5b138c0d97bdc267f43c363","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33c9a737a.0","@material/base":"12.0.0-canary.33c9a737a.0","@material/theme":"12.0.0-canary.33c9a737a.0","@material/ripple":"12.0.0-canary.33c9a737a.0","@material/typography":"12.0.0-canary.33c9a737a.0","@material/feature-targeting":"12.0.0-canary.33c9a737a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.33c9a737a.0_1620235645658_0.6876151546731373","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/form-field","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ba94af2c520145f70615dd6054dfb0a3f4899ae","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.9bc0effaf.0.tgz","fileCount":34,"integrity":"sha512-wHIZw6ltGzBbI+C86B7zt8OkhmyA7NkSTAIlf0XxPFH1Detwd0QCsv6mWKOGhkqYI9zgYrRevyDDV2NEseyLUA==","signatures":[{"sig":"MEQCIHkWmrIk/LSNLKQ7o6m1wFaU5L0eJs8GkFwY1WdATs0xAiAh9bAEi84LOSI7dZdHZfzJWIclBJmuGPkaCvavnGlSlQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwdfCRA9TVsSAnZWagAAsdoP/1c0Ne+2loKiB8p+SLKR\neQYJUJlmWX+8sB3qh5GjkSitSYQt5mEfqNYLMtbOAKVhe1Gb9BFx1EZjyGqn\nBu0Lj/9xcTOQ68B6Vp8fH88mQDvEUSXld7UukdgKNcv7XNCjy4rCx3EDk6NI\nWpOQj5VngvlmLBi4gR2ycReV/pEaSPxwtwkZ5ZPIvxa33A7di4fOZRXj46T8\naArpxpSdNC2y/S5ZGzs6S0O1ButxZxWT1Gbg1FUN1wwtDt5JPlXqgItAkdNT\nSxsdHwTxwSKWUiIYVL1JNnf0fqpy/mSRmgYCFOKNFFfvWYSl73qAJyfs3k0u\nP7RWT+ExwHYvigbpzQAkRupn9CBeBd86/348YdB0FYE0mj+byE1K1ZWeCdwu\ntKIDvSqhQ5MBInggRLqB+TPdBRIdDerm68I4TveW19ImMZu9JJQzsq2vhbqM\nP/Z+hwlfuC1WPbYmuCeGgCQ9cxPF1z7LEAS6P+uV6QDw/kqD5XpxS7TUgaT5\nAPxxX2TqfHycoaq6C9CbMVit6KhlQKj+o3sfyozuz6VnjsuBec5TfBHkTTJ8\n7fkRXsvum1sexjs01S53zIgrbtCNdpae75RY6N0XmxT1OxmOuhhaNzg1CFR0\nHC+E9CX0Slo+8y8l4qQyX9pi0deEztIXubaC3gUFEE/wiFJ7ZA7RfcmB9mY/\nEq+P\r\n=GepW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e671ae06efdf42f7ea0cb40bb6700fc57f6a35f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.9bc0effaf.0","@material/base":"12.0.0-canary.9bc0effaf.0","@material/theme":"12.0.0-canary.9bc0effaf.0","@material/ripple":"12.0.0-canary.9bc0effaf.0","@material/typography":"12.0.0-canary.9bc0effaf.0","@material/feature-targeting":"12.0.0-canary.9bc0effaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.9bc0effaf.0_1620248414357_0.5422923860071829","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/form-field","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a089d307e65c99b1ee56c4edbe35d3d1dc6b847b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":34,"integrity":"sha512-h7yy0kxAqHKu2iscaSUKcw49qQ+q+yO5KCnOKVpSfxS6aoOfsukwnydi1p1b9xJqk0jiRZ6+nbe7P1W7CIdbrg==","signatures":[{"sig":"MEYCIQCJkQrf0lwLy9jG6p4oi9zacPOtE/Mwjn+XrjWnGzQ9UQIhAN/HzTDdoTuJGgjw33xvlt+SOJtZSCQpM6JyiwFRv2KB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxDyCRA9TVsSAnZWagAAOf8QAINrYCKHtDGQEHUmILGN\nSYIxWGxA3G3mCTwUjxh0tWYsBK30A0Fg2cNg7i/Kr+EtlfqmpwY0pOWBoRuJ\noMMogNd1B6x6UhT8mXeGq2toVWKdgX7MrAXnzP09nUMLKNBUTzXrX89G70Hl\nbSaFjfnIMSrmhTx2yhLE49SVEh4L3hQd9k6HfUF8L8/kpTChuwLbNtboiNRD\nJKW+Wtn2qAvcEvynBg+2N1jvU2lEusiOUFlCv/4d9nk0v4rS68iivC6w2FVD\n2LXh1iPoBCj9iKH1ZNBaAEBfzkLV9+qbb3MBOqLQ+THfSpcAPizlLdgfNyi9\nKB1wguAhIRTDC/pZWfgdvbvLXG09G+HjK5MgJ9RmEPQI+GmhkbPYBwLJTfzu\nRxoQdZ1moc9ESEGbkwMkFc3MPllQ0nBJzlHyJG23z96M6k5qtbbsRbLdyUcr\ny0ZScmegmY6CDdPvP+cSouRdZECoOKR2idDBBUe37ZZ6oXhUnEnh8VCflUV6\n5hhyAFNXjx/ZmtAyRO2XICEr+XiJooYpfEpftaF7edFFvfs2PE9dcrvGbg/y\nZXhrkBfGzBQqVVJspyzPDUEy+wsVaWch8VL3Upb79YW27oIBfA3Jl+RBsjyn\nNeaON0fiFDxHJoSaXV2k6oXpWI6ykYDgA2o6weiweihE48CH2e0MdLfgwpOK\nzZ3b\r\n=Phef\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7e20a4b86d7cb59be9ebe12cead11b1e8c7bb63c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a1e0f2af5.0","@material/base":"12.0.0-canary.a1e0f2af5.0","@material/theme":"12.0.0-canary.a1e0f2af5.0","@material/ripple":"12.0.0-canary.a1e0f2af5.0","@material/typography":"12.0.0-canary.a1e0f2af5.0","@material/feature-targeting":"12.0.0-canary.a1e0f2af5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.a1e0f2af5.0_1620250865554_0.09554441836205907","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/form-field","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.06930c96b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6a12821506797f6b7d540550437de83599ae4a6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.06930c96b.0.tgz","fileCount":34,"integrity":"sha512-Yd3LysukFzAZZH33XNNF/1wCeRmxRvs7Wm4CQsB7fUQtEIJ31YBKMJShew6Y5W0s7r+ev36N12ipb1efE3fppw==","signatures":[{"sig":"MEUCIDmd0WNS5kSN8HcoFU2x9F/uQnXyyfkFfz66KmNOCExoAiEAxeioCx8ATEuzZxzV3pN3NYt3wascvAf3Hn1ubRhd1/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyywCRA9TVsSAnZWagAAP9UP/i5MomIn4SEGCms4wrWV\nkYIoG99HkHqWC7aelx+rjfPM8/pRTrYzLBw9i64jym63+cejmK529bH8WTht\nmkmBGXA03N+mZ0JGUDlPiJsHgeEtVv1Iw7Ncny9yt4Hbt9pgduilEMKuoe4v\nViUllu9bClaQUtcZ40tSN9BvofcwukfjHStLMsEaZeXFdbeMslDUNw4nMrJM\nuNgTrOnZuTOg98bvoJQfTO/YK6HSJPorHoMJhLY87/vYTd2yKlqHI7F0Z+UI\n/cbhDiewz3ds1uVwugQgvzFUSytqD6GNCPiT2NGY1mG4Qx765i+/DZ9BccGA\nhjpbarK5FPZQ+TYSsfVS0O57rXg5VSatopCocQk6m67Kfn9lcSSg6W/G6iH2\nDx+pad2gdyEp8piVSlapGnX3uJP+prOWTIi+MRSb9RZoh4eWF1UZUjBf/NMl\n0zRfYM7V3jvxsqgy4seQeddCdqeiHZ61Z3Ad0XFtAM+DbOLLMRVuGhAZfhgH\nJboDhOm9zmZzkWnNBZkujq/uLAY4PD4xw4N/C6FDB6mc6s7ZF2tczol3Wi8M\nzchQZ1NLmIsxzHv8iLQwjDUdHZh5oDeoBbC/8OfW4mC+AkHRO/vG/X0AG/PY\nRTfwBJISrOCB7Ygr84QjylnYSILRT59WKdkFjoAxdNkHXIo4VfKz7kuEeFli\nGEUi\r\n=PaZU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"aef50df6c5f49244a2b0e5a941794f4e3e4fd21c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.06930c96b.0","@material/base":"12.0.0-canary.06930c96b.0","@material/theme":"12.0.0-canary.06930c96b.0","@material/ripple":"12.0.0-canary.06930c96b.0","@material/typography":"12.0.0-canary.06930c96b.0","@material/feature-targeting":"12.0.0-canary.06930c96b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.06930c96b.0_1620257968425_0.4541023357916598","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/form-field","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f116d64811b69eb0f7c95d07f685a78e9fb15afc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.03f525f9f.0.tgz","fileCount":34,"integrity":"sha512-XIoTBAxPxA83PRz+2HxbXQ9kcWpc4Dvx5tSFkhcS3WDgg5Ouo1k6CVTVB6Fdy0s3ImedmPU/skR1qGyAxJY6NQ==","signatures":[{"sig":"MEUCIE8CSw/dh0ufh7DzuSoHQYkMF/d4OBaMlaEr6TxEeKxQAiEA4a83k2n8dKs3RvATz0IvqwSBZgHzk3wohDm4WD29eH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkziUCRA9TVsSAnZWagAAhhMP/1MBOeNzL8BMD+csU306\nkcfMIBW1/rHpCO/H0F6xhfCb5yyQxDUy/AyNXsEj6RVdn/lU3Xs4+DvcMS31\nBQZWMNigI3Nmy+Y3wtO3UMZD472uAHn4fn4Txgc0lD8DOuIGbHObsM7tJq7v\nHWJgmHZRbuJ9HslBVWmQVLoDvtFBFTZXvvxXTMZk6Pf6Vg9PwnyyjgFRCOy2\nJMKBO07tz3Tp6ENODzNmm0AxOIYdFT+VY/sbtc7L+S49tTnu33wn7PJ5l4HO\n6MPf19ocJAtp57rdKS4SCl7DY2Xidmv6A9/sJ1Nec9yUvnIEjsne/RfCfbhi\nCHqca5beGzgKNkfEszImQoUkBnZeLMtjPX0aWCcDfpv1k1VDbrRscTNz35Kn\n7BI6NAno2R+garrnKR0yWqJpFmdJIDR2JrDJESChtGOtUDx6vp/e0to/BxAk\n64n6DYj6aIjfKf5JKeaUp5EfzKoA4yXRw6cg5hFZrPUNbIY78mtlownJ6W4U\nXsVfhERsDUD8RFZrl2l+qxg/q3fTmZaHc05/6OSaxhTHEa5X8ANZDF1B+Wvu\nbxhu7mFpigdP0zPRiXyerhpqvpiHmy2CH72/zDzIwgyKM54y6sflcL6NXwqI\n36ugukjj+U9J/4hNgprYD9j+kL3OoG1bH7E13ow6JwlEcUu2XS084DJBbHZX\nIHe0\r\n=zo7z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f9df1400e21c75e46fe6641abb76d5840dede67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.03f525f9f.0","@material/base":"12.0.0-canary.03f525f9f.0","@material/theme":"12.0.0-canary.03f525f9f.0","@material/ripple":"12.0.0-canary.03f525f9f.0","@material/typography":"12.0.0-canary.03f525f9f.0","@material/feature-targeting":"12.0.0-canary.03f525f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.03f525f9f.0_1620261011682_0.010002211168134156","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/form-field","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92bf1fc0efe960bd9c88d963bf6928959e01f5b5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.e82ba2a26.0.tgz","fileCount":34,"integrity":"sha512-/wtYovKrSMAeENVVQsyw4Y3FKvl2uRxVq0DV2V62TZx9cOpwnJTW+avAgNp6yh3xJ13bgKkozWWs9WLZ671fkg==","signatures":[{"sig":"MEUCIDEgHWPqIB2B/RpH4IV2JGH/bLcR101vqpgbzSMew5YLAiEAvM25eUkWaXjXA5PgWzPQmYFBRoqm7Ll5HRxXaVF+YXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBGyCRA9TVsSAnZWagAATnAP/1Oz518yyv8fx7Iot81a\nph0dMboOX2SuSFknY0uuDEDBTdD/4NKk7+zztAbw1WGAbvYe68UOVEPSe90g\nBnoZdizRjk2RXezfkwOtN0HqQNjreo/xLUNs/5nBv5Q9FwPP4zzWol7SLcHm\nT/13Kq0EuivdmraeidDkCysQZuN/eWzclsiYC9UEPpSzn1r0AahQiHnc5icP\n5GNjR1HlmqgEvYpaAYXDPrNZEpcZB6fNoWan+12s9GZRQAL4GmWrvXXnhcwg\nl2TMATI1S7dGzS7A1/Cr6DBmipqmQ7Q9gkyQ841xOMJs7lXnAgqQYha4DhuN\n1kLwhdc2VjZVAm8k5FBgztOot51IswckDLP1InTlyLCn8Z/e32tu2GP4xq73\nv7pYsslalNSA60ZweKMFaBljlrxCY9Qe1FDzhY13w26SCKv9FFNu/62SOdEQ\nTGLJZ66vAL/6UnbJiY9k9cFD6dUuYg5rWcLFk5Tei2LUZps7iUvpLhSemDJw\nVhvrcJSdKKN26xov+h5frxIGcnK2GU0zVD7DjrXECHsTefyDAU3KouNj5ThG\ndIMpU5YzoHOYcj7975y9jWQNrS+v7k3OnYL/fLsbamifA9M7VD6Qz9taBkT2\nv+YCxyM7pvYqBZT+1tzGlkqgPSOp2I4ksnYZQIMuXseWFoN4kLbRHXdxgpRT\n5rZe\r\n=odua\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c3349c46dc5415cbb89b8260a8db012f44f09eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e82ba2a26.0","@material/base":"12.0.0-canary.e82ba2a26.0","@material/theme":"12.0.0-canary.e82ba2a26.0","@material/ripple":"12.0.0-canary.e82ba2a26.0","@material/typography":"12.0.0-canary.e82ba2a26.0","@material/feature-targeting":"12.0.0-canary.e82ba2a26.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.e82ba2a26.0_1620316594049_0.14283476239660842","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/form-field","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f51b13e9f7b6d0dfba27826240bfe75efa2fdeaf","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":34,"integrity":"sha512-W6I0bJ3hfMMLNOqU+m9suSr/0ONMirGi9gBwaCvpC0L43QUOJDCQ8sXxlKijPbBSHORTleo6fzz816DZAULxag==","signatures":[{"sig":"MEYCIQD80i/k0LkNGZAQumTA8lJ7Efw1yztbW+nHAJ6Q3o+zzgIhAIzGDvvwUIXu75Oj4C4SEDAST8OWgeece3vudlERtaRT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCd/CRA9TVsSAnZWagAAe+4P+QDSZZILSNbcA6F8/MUc\nGsdJ4CCmWkBbN2yqQe8SgnGjk6xWK3B0XazowYT9/OpN12esXPqMtRlYxYGK\nSUC6WL8Exm+brLaquNICrslNak4gAI14xEjRCeGcah02BUsR5MZ7HaQ51Kjb\nlVZtDgixjsKpBS9mGl/WAQn6Yh95zeuAhM/VQlMgq8BDJt27QqHi5LHBlwET\nsRIFGseoKSqpAbL1pUtaQIyx21Pk2WNrdG/WfwoIgohx7r+XVPsXkXzwkUCH\nGju7g5we+3Cj1TqfrS3B6z1mQpEeh+SOOm8RxWRIZZbqW8gAZNar7iNBv3eP\n9gvbiwMoQ60kCXabSZgss9gwMPkYXt//fw/RnDE3UeUG+n8fKRYagqsxanGJ\nMkKeVQ+/syPWvlH/0rGgjOKk8KrMoGv6HyzybZx1R3fVVYIkk1NYQxu5qLnL\n4Cc+LLgpKGSrjuYxB34jbevIr1zMQQuT/AEu15Lq8jhupsxa1/LqOrKkAgvg\nz/M2sW6jEG8uM81WPIjTve+DaqIhddChb2f9lqErvGQpDUHFZyqQ3v7pngC9\n1R7IkIolzEqUMnJ1iJwaTELCN8vqg+hnTsPjOCPtJGYtTAtTZ00bRmysVn02\nwmD10G20CsdQjQJ2haYOwAcnvWA386hggWLOFI+F1axaOnJcDhizj7Hko6r6\ncl9W\r\n=UbkC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b549929c65e0a33cd9d427a600513c663c2dae28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.fc7c4e5ce.0","@material/base":"12.0.0-canary.fc7c4e5ce.0","@material/theme":"12.0.0-canary.fc7c4e5ce.0","@material/ripple":"12.0.0-canary.fc7c4e5ce.0","@material/typography":"12.0.0-canary.fc7c4e5ce.0","@material/feature-targeting":"12.0.0-canary.fc7c4e5ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.fc7c4e5ce.0_1620322174786_0.5246993059907221","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/form-field","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.65c04514d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a506c0d1fcdaf7318b61ccfb0277b968a94a6996","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.65c04514d.0.tgz","fileCount":34,"integrity":"sha512-gistHuVXIYegZBmjvTOX3VEHUulWHBhG6K3W1cYKqjiI+4uPe65ui4AQwhP36eRhNxQ95pZ+nsBs+YTkP9D4YA==","signatures":[{"sig":"MEQCIGISBhFvqyx9HiOlPlb9zrCdjOi3mSbBaCj8W/s7am5SAiA7pMpceBZgqoxoaGSZQp9O4jK0gPA7nhQr0nPFMYftxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDjjCRA9TVsSAnZWagAAZGkP/AgNf3J9OF4Ab79ikVjL\njhJ/0QfGKR9vEU3MOskfSSAGclnra/CQDa+qndnyMu6Bl2QeYAWL4bXcUSoX\nwhmTQNITlUiAx7UoagnCBWPzEH8llx7ln0tWg1fdhzFz584UkMPs7VB2wgEN\n94I22+tthKi1pkLcKSKxUWUjnSzdA1TqJKynX06V424CubPp2b+jBOIFsB4u\na1HxzHF4TnnNSCsCRkRPvtSv9d05Stcdvt/FC4voCzfjd0vwk86KEYY4SkVh\n/DUzpj+jrpkt5uuMvn3jbGFZ8n9preVVJqjzx0NZ6CjeEvWWP0EsbcqXBTYQ\nGozubny9cfBdyq1UB0cnznnziq3T1ZRih0Wj0k/pEWocoqX2dNCbwLmnvpTd\n+rcv+nPk5EvtqKNYpmEGzhcwmy/KPFziBxrQ+WpalIKUvFR0eqpt6vYtRP3n\nveiAwob2cC7RbuHUX9IgpIsMhhYm3S+zvHcD8LCoB8ts4aSfiv6pKyA7PwXj\ntbFoh+xRXZtR+0OPC/wxIG7PNowzILtNbane1s0KwB1tCd0G0snELFQmH3SF\nUucNEWa9OHCxkUn2o3ZebL3ZxDvQuPwAdkCBAJKWoev7DUazwaQDWuz4+wPG\nz6rgV4msAqBdiWMou1C6qDG9a8tD/GnMmaXn1sqUxQnihvzGshOj2nxJ5Ait\nmX49\r\n=VLp5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"01ca5daeb81d99750f9020fc62e04bc76085858c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.65c04514d.0","@material/base":"12.0.0-canary.65c04514d.0","@material/theme":"12.0.0-canary.65c04514d.0","@material/ripple":"12.0.0-canary.65c04514d.0","@material/typography":"12.0.0-canary.65c04514d.0","@material/feature-targeting":"12.0.0-canary.65c04514d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.65c04514d.0_1620326626825_0.37127748823427353","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/form-field","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d34a4b80b82ad8f58029f10dd3fac344517dc2f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.c97779ca6.0.tgz","fileCount":34,"integrity":"sha512-q0/YNP+P2yBY9STn7mM+to1sZ4lYqL8NbxJBr4LEd1dMtrFK7SHNIYMHpC6RSbrhbsFzN5NaVDDwBkdJ5tKnXg==","signatures":[{"sig":"MEUCIEffrw44jIQyJu+sANOc8FtSNOFKQE2RQxgq1zYZ/jf9AiEAt2GlbpefhHkWMG85o2JHh0BfmHUed/wIXPiIy9E5nug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGL4CRA9TVsSAnZWagAA0psP/RVykCa05MI8AIWW7KnX\nBtkE2Nla4zq5YIaR2wyPRyZNoAXYUhaqA/5c2qe1mlGAS+xYbyAdv3kkuipR\n5ekR9H1qOaR+/mHihpfUtsUaR3WG5aMz6jHr6vK3sxBFvdNTpVFEDdYA3es4\nqCqNcHPAWoaQqQ1ZxLBsBcVp7syfsiVRCJPDqeMH2Dqv5iaQlbEUp76zlIOK\nGdfTBge+3K86qEdUucELAqLV7InbcDynWNapmiIFfdjH7LOkcQX4TPUGE69Z\nsfkZBPsB7IdF24FEMhFELcfSKPymGruvH6OZnKgDRIdloZEHQLniZFvSpvgl\nFIn4eYXErNPBnP3TmRV/7weh9A9H0K+Lh8QBVFNZNtsf5C/rISZmOk6xDrWV\n36VF33SIinc12vJwLduzRIvnY7HQ4Z2pcocN0wBC7NsICTJ2st97OVyj/Xjd\nOUzhlfPjAg7p3jAt44FejYnQKX+5dLt0RZnl1MZmmPbB45OPcUnoMRvwlZah\nX+/M2VjQYgIRqksVewZxsgXcGgMN1dRMqIQ6XBDHQ8yG3UWd31m62xDA7ERi\nz03RiBGY9Fq/x7dU1KHmYwzEhTJ7VhGT6IpwKKG6GCufHNAva4e/KJzAHvX/\nqs3jSNEV3qPWxPMRjx5UnRIihGh8/Y519aKE537/Dm/on+3g7ciQFq2HrpVe\nvRjh\r\n=2JEa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"046f80118629481ec1af7c937a84ce6e0fd1f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c97779ca6.0","@material/base":"12.0.0-canary.c97779ca6.0","@material/theme":"12.0.0-canary.c97779ca6.0","@material/ripple":"12.0.0-canary.c97779ca6.0","@material/typography":"12.0.0-canary.c97779ca6.0","@material/feature-targeting":"12.0.0-canary.c97779ca6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.c97779ca6.0_1620337399788_0.0937049254135347","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/form-field","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.869d890d4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25786ad331128ede39ae49473a622411c097badd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.869d890d4.0.tgz","fileCount":34,"integrity":"sha512-ri2JYL0S16KqhOw2VbRtPHBnhT04a7DD/n46NWRIOv52dPBYxF5Wm693Pw8VDW+CcElRvsykcfugD6RzzTU0CQ==","signatures":[{"sig":"MEUCIQCW7+iJINfbxGNx0YSwQiNuRnpUOzGvMJO27JLS21cboQIgV6rzn55DuLhw2OuzRnKtcluvQ8rVt6JpCTSTxksizz8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVpoCRA9TVsSAnZWagAA7wEP/22Q/QwCfQplMjE9ayRy\nrYGdhMtCMdxyLMK9SqCVvSmQWV7h0dGVy/TJY6kuwjo3BDSdIinPhbVHhrFg\nFx69mQy1kVou6xPAFUMNWO6Au0dMH9ZGbpydPC49jQIXx8rT+jV2dyfZ8TDO\nDEqvD8OAk+gTU0U8RA2TQMBzvpO1bYASx+3dLyuu078qYDi8S1Y2OzJLR8D1\nQ2/6MKZWtKJcdg8DmrHntz9geABKXi/aXUYz6RMsLq3nWjOGuJNrlf7apedC\nQjMHhtpIeQ6cwFXCKXih8tNj5CwWwxVvkANRqBEdf7X7YqRI4NZv1UQ6z622\nZSrRQ+tEiYX89NTB0h/UxgpzKsER9rwI2vtzX0fCq5f/Xv9u/TQWhIPAxsQn\n+DLrPB4ZQcbJydtIHACjRrLMu0PbiTTx+Txp8TH71FkeWNIP0Uv0bnyRsoKm\nNrKFOrPxFokV4oH8cI8SfanOBertk1bsfiuFmuJE/vtVnZ7rtB9GX26GhBgf\nA4gSP4DITTY1eWicWDCgo7qrAg0rEK58IMJKVuCIXxf1NKWW6s21j8Wm/4z+\n9tBAeF1gAecxiEBgMPQwkgifKhLMP3+jbHQRccOnGCH5j8SqqQR7lkllDwxs\nzIQdvKHMR8sIRLGR+prJ5RZg7GrDCktKnRFagS6V/C+5G8omGYWRxHZmLEOI\nPGGK\r\n=X7OD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cd73688a61b81573744ba9a03cd2952798eb68f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.869d890d4.0","@material/base":"12.0.0-canary.869d890d4.0","@material/theme":"12.0.0-canary.869d890d4.0","@material/ripple":"12.0.0-canary.869d890d4.0","@material/typography":"12.0.0-canary.869d890d4.0","@material/feature-targeting":"12.0.0-canary.869d890d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.869d890d4.0_1620400744429_0.2810605965196291","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/form-field","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62efea2d36e676d72f47b10e515c57a020883af3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.ec22e1da9.0.tgz","fileCount":34,"integrity":"sha512-zl8zimq3iLjwW6v80MB38N06rgyN0sBxdnd0HZFgPExsKUiyZnfUMeN/4JZtuXE9uc1kprtp0azcHDg2gthWnA==","signatures":[{"sig":"MEQCIHY+7S33SOC+/8Thz4hVdAMLdtp/76RQ2VdJY/pLLkVGAiB22upLRYOjzQXjU/v7lQtlYcPLpFuhnIzc3fFc/RjcHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXouCRA9TVsSAnZWagAABI8P/2tQ0+4kexkQh2/ycQer\nfelyfN6XLuNXES4nthgrgcuoQmAEJSFt4ydyZyfcMW95XUNviPI/fJJeZE6J\nsh6LPJko6hc61oRQvmZ1c1MtDftwiDt1ttYfRZir9JE2FfkFZUhN9qfGgXXi\nV9g9NFC+5h9kl5W6HOoDv6+6i/QpQvFQiyWGqKOnl7YT2D9GXLkH0NP+m4YN\naRoqxR+/1pITpNjDoi9a1moMeNNwt59+M03VhZ+1GtxdDvdKBAt6i9nPIWkW\nEeZDtKKGqit8tu0oUWtdBSZhuRBTzAgxiKT8T+pQ5TU+laBDyLUO9Ox16Y0r\nn9tHDsGAqb3edgFQKaK20crPsHdxearhlhAxJIpokBgph88nxAHm61KEttZa\nOTyHyatEDZYQBQ5IRQtlT1CGOFF3/AzifUZRn1FLqIRDdY0W4HvInE01ko5L\nHseOK6Hui5qzTsDPin8Mh4iqA7hC9da0lsXuoXbBDR9U/uGuF1ZzvVULM+PA\nl5k73akIHyyUNkDQAG1eO50ygeJgF6R6bLdsySLj/0DgYWhqR8Ut/i+xvh4B\nWbHN5XzSYhtHfH3SsSmwrzPgBYSNZgPWyyVwkVSG94UXIx440DYG9zam8Yjf\noBDmv+wb1muY/JUTR1xNurxIyoWD8FL9kVoflPcEf9nTQWFLmuQ/d1zv+muW\ny6To\r\n=tCuL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"273a15f546b8d5df597771686f431c3726397778","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ec22e1da9.0","@material/base":"12.0.0-canary.ec22e1da9.0","@material/theme":"12.0.0-canary.ec22e1da9.0","@material/ripple":"12.0.0-canary.ec22e1da9.0","@material/typography":"12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"12.0.0-canary.ec22e1da9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.ec22e1da9.0_1620671022227_0.05525030628263794","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/form-field","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9296551120c60f648160cf53d9e315391cb1279c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-nightly.7427449f0.0.tgz","fileCount":34,"integrity":"sha512-u7D8B/B89s36Y9B2xOVSmxc2QqdR4+OA+HoTxaG82Nz8Ad39JCgEyBghi7eMkaeXVqSOVqDajB0NKtPq73S3NQ==","signatures":[{"sig":"MEUCICHezFmNYeZ/4ztqawvcxVcwOaWJPWZkdZBrr+Piin1qAiEAvSe5KIuGronl70XdnRV8LqaYgi3mUcunb1Gba0yLG6o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX8xCRA9TVsSAnZWagAAN/oP/Rtl+OjuDLeXphBj/ciw\n0qMTdOFFYGyQc/W58+kiahjmtoU7n5k4hLNW0IUNE5dEXntP+Y4Juayn9WcT\nWWkwZYji+PG92N8juMcAqIYksVpc8U2jSScYl7yYt9gVNZtBwFJtqf0sySU0\nQPtcVAO3L+VeNp+hKgI1q8oWJ5LC20p3jC2tCm+W7JrC+6GZIsDl0kKNkyxW\nLuPtdhZlGTwTRU+4ttGQ07o7hnmRoCT54RL6Qmtnl8Ulnr6j2x1UgsX1TYxL\na+npQ1ovtHbcBc0YCa2hHTTGrYBG/uNivm7fB4B4/R5oEr4eTV6zT5rnP2Gb\nJNkyh9P6uZwrS8tQUZ4ED3Dc3eidgBcVswrgK1xc5g6pfmyGqdomSJAtC9lO\n5U6wbn8BaSotCSvJzxENJcfYn3YNuL6J+BU8ivwdmwIc3kyCkJAU9yTAKf3B\nPjzyJZ/Rwhzr9briLzwqDAKnunV/eO0YnlVZ0am81PV+t5cNfgG3mpJQaHOw\nq91IN634ZVlNqW3yPrcYj1XY2B776P+BrNnkf/g/OZiZ/4HV9Sxkmuz23Iff\nJvJSlMhQjNvAgVuHFJXI07Hx1PuXHxJSE5rssob3ypLcGwQbTobhfy3fqB1J\n9Otvg2jvHTWlRBdjbugVJhecG7qZeXo57xbFVSaY/156a6JstvaNpUgfoY8/\nKBWM\r\n=cYAL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7427449f09e9521a6deba6ba7da71038c2fc1f05","_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-nightly.7427449f0.0","@material/base":"12.0.0-nightly.7427449f0.0","@material/theme":"12.0.0-nightly.7427449f0.0","@material/ripple":"12.0.0-nightly.7427449f0.0","@material/typography":"12.0.0-nightly.7427449f0.0","@material/feature-targeting":"12.0.0-nightly.7427449f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-nightly.7427449f0.0_1620672305002_0.33414721405949876","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/form-field","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3861898d93009f397494221b4c1fe3d589f495a2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.957cc3bf5.0.tgz","fileCount":34,"integrity":"sha512-p7Z7R3I+G7iyPUM0e70lfldNQoC54IdKnTYih+djkslcrTkPYbBAmbMIPG9vQmtfrEvgvkd2kaj7ITYrN5bfcQ==","signatures":[{"sig":"MEYCIQCoVfrVGTAwBMarvlGfwCrol9cLQQfjq6u6iQjCxb+RBQIhAPCCF+gZpIm+H0iwDW5My8m2BAll7TdXDwPTfDh00VAm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmawqCRA9TVsSAnZWagAAs8UQAIoDygyvo7dZqqsmii8F\nm0HSm/m6VNae/BFZ0JDfdgyMgjWwaXpBbTMT+bR1Kgh6BXnEp1Y8lJhN6nZt\n4MDn6e73OK9U9/8ZMGAC5THYMtdFKXdshycunnSCLHkj8qcMPlRX0Qd3FQnj\nRjnckYuzQyRc8gYRDo/l2OuFeuYViz5685/n4wJZLAOPaGlOga5KpVZDg8JX\nDUg8WWkF90neWfF02lFANHGz+T8N2pkaeCfm2EYOJDMgRKjuYQxb5kvYUfb3\nfGMJKHWQaGjWnhdcSgvfHA0D1ZaJ+qZavKPMci7PwrUVLlXYPc6HmMlQDaHj\ntXDCRZGc93jabw5h0owC4qJED72LHv69ubSFZDA4G/AzPLqCvI9UlcJfaVRG\nqeodq/OCkzSHMRtGoh6P6HrvoljD4iI2n+qjFEeqzNnuhSJRpCPCE//7I4/Z\nvD/II+eQ5yHT9hGu1QEGilamI0NFW/v+F0PwNGkmt/hJxRYaKFCQcm3b7lRW\ne1yqQxMFu2TarvH3w8ebhFkx86EC93cyMnCbo56o0E0UUGeRsHD7Zc9gLkxc\nx1UXaDlvOQWLMuead9nH10awnpUHeVAEvtAw0NuoHVs1/bbQskR/DZqpXBoK\nsQjVq81joGka8e47Q9n6T/KBg4FGPGhFPciyn5coOx6Wx2ji0VEmV7ahwGtH\nAswL\r\n=RXlu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3c29cfc65a597598e2a8e1841ef1af72450500dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.957cc3bf5.0","@material/base":"12.0.0-canary.957cc3bf5.0","@material/theme":"12.0.0-canary.957cc3bf5.0","@material/ripple":"12.0.0-canary.957cc3bf5.0","@material/typography":"12.0.0-canary.957cc3bf5.0","@material/feature-targeting":"12.0.0-canary.957cc3bf5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.957cc3bf5.0_1620683818184_0.0329172539888305","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/form-field","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8aad994dcaf29912365bd0050826a377100a39bd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.88a33cd70.0.tgz","fileCount":34,"integrity":"sha512-oAYdhy90RKmD2eIFA4MCX+Fi6H1OqwZVWAQYu0BJVw1Q3SrUQfln3Jaq1YGX9AojdE8iveH7AKcL9TZut8aY2w==","signatures":[{"sig":"MEUCIQC+xWZ5jZ0UFUdp4KaNFTky04+amoZsr7Q25lDjfP+3VgIgDf467/6KqJg6G4SO06ndg/3ur/yAsipufg9VH37eC3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcskCRA9TVsSAnZWagAAA0wP/i0kIHWbMjc6j4RyUpvX\nmpfx3NZJclKYvhtCSRFvEXA1pXBjAvdOKCLxBUHuyY8HXXGDpk4Z3hSaDNX0\nEPMA6Pjr+eK73L/pLWcSJeS4UClqDm+BFHtOvpT70/CuvzAc7FAwSzQQlIai\nzhS/oCyHqQoCmJOViCoFW7LfoU3XVtLSoMx8GYWIIYN8RGkO+TvA8gwKxwTS\ntxXLHbWHlvwa0L+H0PZVok2vp9oiobR2/3kvD+SUJgRolVKiF3qNPvKwevh/\n6yVHI762+/xGIdwelq5q5l7Avxm7n1RBObYLvmrQHZhkhChLOGR1v36L/NV8\nFLggwARLLD5Wo/XWPdbst9bpjdHiDp/WlSZgECqJB5zTDCgYKZl2dq0/UHQt\n90Kus6O2F/TQAYFQNsNDDyM1rIIASqUQDXIQR0XolFkoX/GS6VChTPX6KrFi\n3JS61N8SuXGS3TEt5JOStZfIa4vw2uf57/ZT21CZfuIzEYBdqB34YfjXmPRP\nxys7x9eZa18MyrnxEyl9QC5ofbjgl9Z6/oWJTP0r9wtTBBYcKIjKFnpVlJWH\nw3kiyIeYzWpVWCdRbUueRBvWhUN9inVWtFtIBV0Pp/n5mnlFMnl7m4vTZyyP\nSpfMB+b1nF79isfb0w336CCma60JrO62ob51mg8cR9+k/595SmOjF2yBwz4A\nVC+d\r\n=NmtC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f1d341efc173e89bd2770326eaeb1fbc581c9648","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.88a33cd70.0","@material/base":"12.0.0-canary.88a33cd70.0","@material/theme":"12.0.0-canary.88a33cd70.0","@material/ripple":"12.0.0-canary.88a33cd70.0","@material/typography":"12.0.0-canary.88a33cd70.0","@material/feature-targeting":"12.0.0-canary.88a33cd70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.88a33cd70.0_1620691748251_0.024849524199926698","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/form-field","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff82cb8b18544e3c1ce0a7bc13916f4ec1da590b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.d20dc6dba.0.tgz","fileCount":34,"integrity":"sha512-Av3u7KnPQ2WzvqMh2tIH1muij3ct5RjeiFJrm0opOF8UeBMedEULb/REAxiZNNgqCI7svrCrMMmwOP45FvVHqQ==","signatures":[{"sig":"MEUCIDYYmMGJqCvwEQxeXLudX5b+IU8jb0tSEbdiEr0NjCE2AiEAjGgHYhhgGsg+1aXzDgz8cnYWMF5h/bBOOYyNgzfp4kM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc7bCRA9TVsSAnZWagAAVWwP/iggyPl2v1yvSFT9Nkrf\nqFz778Pj7wuWhCaxpwh4Vbj+Ls71fUjGxeKI+zsh/wcJnuLR2ZhyVbDE9odq\n5aMoVVvXFzRCDfqjEWmIjPnkO2Ju6PqscqNJmZ0A9wafCEGWuEglXheQUNxJ\nslLIYmcua5zrtJaYpC4jTUyBFvCgTHLro0zW3Vouwp1kyXHUsXlyIXHTy96F\nMCgqplfCjgUuAeSskjH1KPcgpY4D8JI/BeaXbJG7XTHFK5wY2EvZqFApmYPC\nlIGEjSl9Jvrc0OlBiYcKAMjg432a6euTSbroLhBflGGl/lGFMX5xg8JjA4EH\n7zi7mckNxacgWkNVSvqOwWxNFBAvXluUBYzdXup1JwlycHiRh1po9ZOU4rSs\nGWdRjQpR3HeYmgoIyR4mDG1BArKGSXmND3MeO0RB39jEVw/h1ZR/Gx1WRfXC\nKuHfJHx/N0tvlcN+joh1eN98gUpw9qDzwhaWprorJz/XMrF0/hx/+p+ettrF\n9toXhXBFvG6FXtnTOp1PiVl9CSs0LRE1Ebo5PlBNh7THY+e7jULxYGaKFPBI\ne50+Cr1deaO95XDEocP4ttktD7fJkS+czA1/x5JkNWQFrn3crmP9NYpaNOYJ\nqBiI7uclcAIM8DS0/uITnH3iPB5L+4KQuPc+5O1YsksWtk0qM6G0Wq2IQtil\nd7Y/\r\n=KbXn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f2980d3f7fbbd8d2e3b824a765f7fb03096bf11a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d20dc6dba.0","@material/base":"12.0.0-canary.d20dc6dba.0","@material/theme":"12.0.0-canary.d20dc6dba.0","@material/ripple":"12.0.0-canary.d20dc6dba.0","@material/typography":"12.0.0-canary.d20dc6dba.0","@material/feature-targeting":"12.0.0-canary.d20dc6dba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.d20dc6dba.0_1620692698708_0.6130462529086182","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/form-field","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"235059d86171bbc201be47f2c19172431998df06","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":34,"integrity":"sha512-nD9gyGpIhJfQMeXVp9a8LD8njg52Yxc/UhCZKZYXONg15e2vQX1wtp7lvn81++vETPtvEF4o5Qp6uv1Sp8H/9A==","signatures":[{"sig":"MEUCIAPW3rDsDNrjhASgd3/cBcQoPSTZX+nGuUoa0HeNLItuAiEAy8Y+qzU1gpG+J8Off0A1SWF5qSSVINoczJMXRMp4VIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdbGCRA9TVsSAnZWagAA0ZQP/A/Fr2abgnjEf6WNSkKo\nXgXcvITrYpnRB36PNEN8Hzqq6Np4q8GmG/f2CVGTwYVegxu+zWV8a5RMsyCP\nfPreyRARyfCeUKiP/5bvwOo6C05JEEPUvO+108olnK00iadMjabxqQH8XYW+\nW5WhEjnNnzZGz2uvllKgZDydQCSVgwPj0WMvD/fCk+p0QYZDrczjhbA1N5+a\nF20kd3ekINpIGWC+kIS3OlZiBsXOP6bOhMKpXVw+h1cS9PwQPz3arQejm9Vw\nXgHNaxEy1xw8MO55yBgjWAlwHp++tdhNKWIgZ258R4AZHd+9us83J57o0hqV\nC7Fr/Vxj4LHRIlMWtCNx28oIZHX+9WVHwc+I52NR15qHN7you2vyXtDsT0jB\nFQAhIggcE6FPWhOlypIjPYId8lr64C15IEaTq8Izf3Lm9TD+KJbczMEOqHOh\nSmoNJRcf1Ox2atm2oPYlHj5/NYN3kmX7AqD5RSVR5n/ORc1Es1X6RlCQ0t4t\nT5CrpeT1dTyIYZUrKdbVKtcZKGNa2qN3KVLKUJk/SOXkEGHvXs5i+C+wgmIS\nwfFutTKjfN4+7kX9LlZH37vimKf6+bVEaGSJjd6SvfJ0vk7R4bZMeJHkEe6v\n54SV7KOSuL/MqFozQDEo/zv0pxXHPXnzqomVK/0uPTw/eyQnvIjmCm5L0kdq\ncnsd\r\n=2WtQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ee2139d87a1d755a50dc6bf0a6dd53a2f39548f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.0ce2fdb02.0","@material/base":"12.0.0-canary.0ce2fdb02.0","@material/theme":"12.0.0-canary.0ce2fdb02.0","@material/ripple":"12.0.0-canary.0ce2fdb02.0","@material/typography":"12.0.0-canary.0ce2fdb02.0","@material/feature-targeting":"12.0.0-canary.0ce2fdb02.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.0ce2fdb02.0_1620694726086_0.8031001734694627","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/form-field","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.cb162da37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b8cb1818e4254f9211f4d07d9b497ce921dd780","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.cb162da37.0.tgz","fileCount":34,"integrity":"sha512-xacPG/BVVT2b00CPiO0afVAdN4f/5Ho8k72BU3Z3peuIsCQv44fMxB7HdCyVoVzVR26f1Yw0C9yvT+eCUH4trA==","signatures":[{"sig":"MEUCIQCsfQzBsNoKHFnmLUbR0bb8Xh2VUZxSuynfCqOqvsH8DgIgRaWq+Jo7T/V/inw8DWgOy1vlwZvkP8Efy3JxJmP0nB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeTNCRA9TVsSAnZWagAAhiUP/02N+pmS66ygI9jflyDP\nfxqVhwFevFFnnyhJ9BYCk+8DiVOxmboHRP6hdD+JGNmEl9n6xp+F5JEoFtEG\njphEnvpr2CAYe8aEFZ8TlOHQrPVQPfSOERWF1jiUSeN+Kuo3axzexSOJMZhJ\nOB0V442YQoFDLWJGj3ked2aKZXV/asBnBX085U16H8kObiVTSxMFPfqWwqJK\nXb4wpmVdKfASiczXvHVsn0CdUjciQUvewNUsvfuKHm/rMG9mjOQ5As3v6UIv\nodaegOqhDY9Erj4b5ZkCxG96yXy4+MaZNHoLkFSoVAxY69J9VtwKg/TTnHFB\nhEreEaQGd4v/ETSd+6mhx0QVSqMpploJWWq6IWFhlS0SWDQOGE9JjKg/tu8C\nE4HKroFQ0eEb7Ler/mO+Lus1UdvQpyJYG9XXwzh1AeUOLIPu9xfoDDLGzAHb\nu7hPJImYokbK2WDzBtjnkevmMgFFdI8h/wrMOeUHTJ9LM+Tfqow0Cqa1zUko\nHLu1Sa0oZCSRXYLbCm2vqL9pWtdnZz9oEOz7AP1/HSH67qsnmAsdm9mW7IaU\nExuZ+iNbRNhWqBFNKjiAlBkQrs8H84ig1hCf1cVy8NgYak2iZC+Mku+zC8bZ\nnSwG8C0npgn5I/9/r2TFzuS50L4LtE+LEkvPZEZ8x5qVRpjVNYkTk8Z/QjQz\n4n+p\r\n=qtFS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9858adcc9ed7b1111dde19951ba96847bad0beac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cb162da37.0","@material/base":"12.0.0-canary.cb162da37.0","@material/theme":"12.0.0-canary.cb162da37.0","@material/ripple":"12.0.0-canary.cb162da37.0","@material/typography":"12.0.0-canary.cb162da37.0","@material/feature-targeting":"12.0.0-canary.cb162da37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.cb162da37.0_1620698317070_0.8192143225452364","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/form-field","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a55cccb2da5a1b4ae73ee0f225e9fe1c1622d88","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.573dc7ffd.0.tgz","fileCount":34,"integrity":"sha512-YuCh/zgaX8E49Fojgg/rNUkYurj0CV3NxdbNf7XdkiuCXn1pBmBNAAz74R1+zunqUWj+vD/jD+rJNZPoRGjEAg==","signatures":[{"sig":"MEQCIDV0tFDzt3eqaeIA1DLOGBvqefZHSEpRekJdqlKmxhzQAiAeMNgUwdX9+x9PkOW0IdJjnv8Lix5hgAotKEgw8GrJ9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmek3CRA9TVsSAnZWagAAvoQP/0Cf3LV9WA/Zbr9WZvW8\nBDir6fbxUFyBB5C5lDuxJlv1icZvTPDJU8KEAfweJoA6NdhsesFK2SIZSNdP\nxqIPZcvKaEVI+0YcII9Ss1vkZ9VhoLl7c2fus/mXExBktn6OCT/sifQgOUBS\nX9npbRc9FZSV9snFjP/J8LB5L+CuQbnDSxh/Z1etYSXxtFZHS1+5+hR5XyMH\n5Zq4LxlXo27WOVCta6RinMzVxCm54YEVBdVQdZpXvax4z1XvZNjfMFnlzLu1\n2/tfAxBLqh1P92KGJuVcWXU6WAFKjIzpVWl5QdX/q2c3h/TsoVACg//IL7rd\n/Y0U6THjzfwZZNy47IL02htO6joudmrbdFsGXfO5drj5EBGfHIPNXib6pu/C\n8YkraUu+54tHHyl7qHvcSfBUaKFmBdHh1Wi+EERy0IgE0s817V6BLjatGufA\n/NLXh5Hi8LqCV0Pxaz8jhEs9X/Qlry360PjUK1Z34EIUNh5E+/lo/rK3f1i+\nDhOWT5gShomA+g0UNjqOEJrR6bSXvgEwmIk5TkORPNkBlaVSL0Nk5XgTCnqw\nBVLbSb5aATlfrJAiI7ovYjgNY/Vb1FnyWrIOVsriR5rX9Ujfon8XF6GtMzN3\nsfuH/YfPvcXRbg3fKg0yML7yCs0i46C4i5wnKqDdYY87x8G6gVzeO+IeKeBQ\nt6hU\r\n=v88q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"67aa299a5066425730ea2e8558f89c111a5ab156","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.573dc7ffd.0","@material/base":"12.0.0-canary.573dc7ffd.0","@material/theme":"12.0.0-canary.573dc7ffd.0","@material/ripple":"12.0.0-canary.573dc7ffd.0","@material/typography":"12.0.0-canary.573dc7ffd.0","@material/feature-targeting":"12.0.0-canary.573dc7ffd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.573dc7ffd.0_1620699447125_0.922304742149483","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/form-field","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dc9a463d8a028d4c0dc071409294afe18918875","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":34,"integrity":"sha512-jokyZJhcRiTFzCHZSuHeB5mTVdryNWrZ70xzXsS1R5xVmBVFC0CrraicaSYsISp1Cke5Wi6T9W004MsX06cO6A==","signatures":[{"sig":"MEUCIQCGzKZJmLSNEJolaYkp8IXqWIIC6T6tojB1jgfUTBqxVQIgUPO0BQl5dcgkFgZLzX4Ck0aooHMUeysVUApnYyfGinU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxHFCRA9TVsSAnZWagAAKcUP/0y6kEW1L92ukuOiL5Oj\nvgtgzidjqqcB9GDXcQ4f6PyXss07jOYrwMsxDMakZ/5c2spnaCN2hmkTBf2w\n2f+fv59os5eiMLHJixo13IH8TDbpgmMEnNcMD1bic1vFhdZqO0v4NRQI+Ntu\nY8aNCpg9t7/U8wL1MwEkhQmelUxHRnTGRih+NhMcq1PwudocguD5Mz6Jlbss\nGL2lnCEvvkcxSrESGNv1SS85AFcYJv583ef3YEjxGAQxBegP4KmlpRHBC3AQ\n9GkV0XFZIpKuWPwMzggz5KtnTKYt7bVOhUbHQLrki2EaGB1TKyOy1w4d7Vc4\nrvmeXWB7eFRe88ZPbgRxiSVADekjIsFj//NW3wwSljSj0R8lPU5RFW+L/2eo\nsLmQaHbuWvCzk48T5ZeKGLUSx3Fhsj2lBteLMkrMApQ8fUD19jmCb6fQPBUl\nniKQDkbSshM/64Tr3metDheP5OFooSuqKmB6G/HdQgGj6+FsLQ2Ux0/nPkfP\nJRzVLQ25z5DKXGrHiXlc8BM7nWGM+pHuRbLaIQET+mN7yZU73UORo3UL69Eh\nhUuX/gzVoJIQgJO+W43FbrwJh6JsnYu+YCVueVHQ5F9V1udyTCTmMfvfcrxP\nqj5rtPOo04XeKIe5bgxgZiuWt1DbwIEv0V+BmjXGXXMrXwn3rWlVNS1ehuKJ\nZnFF\r\n=KEw8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c0bf85201107dc8a95576c2392f5b1771bb2c969","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d5f6ad3fe.0","@material/base":"12.0.0-canary.d5f6ad3fe.0","@material/theme":"12.0.0-canary.d5f6ad3fe.0","@material/ripple":"12.0.0-canary.d5f6ad3fe.0","@material/typography":"12.0.0-canary.d5f6ad3fe.0","@material/feature-targeting":"12.0.0-canary.d5f6ad3fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.d5f6ad3fe.0_1620775364777_0.8867675083587556","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/form-field","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9be3897895b9532a460e93b8c5754b5d83a77d3f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.25751d2ed.0.tgz","fileCount":34,"integrity":"sha512-l7d96OVZaiARtXWe3vpPt+8mevs4isGG6pwOT193bnwY9nbhQZH9Fh3pD32nuPE/qBw63C0f8Q8pJL2pZv7RMQ==","signatures":[{"sig":"MEYCIQDAZaxFE3InREeY48WMGvMhg3u6oe2D/UKwW8QoJiy6lAIhAN9oL8JSb84FMh0EWRiKBoXC+HC+H+lcNnRwUILfrT9C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnAAtCRA9TVsSAnZWagAAieIP/2VmTaJJxB47pSzS6Xg1\nlbBurJ61+3nsbzVzrutcPsBvkazZUZjPI9WT5Puh/1p4/8yd8Ecwa8yJz1Kw\n8u1dOlTPyMQpDFfyQhumtGsTeiJkQObMUzcyjcdGIAu/jdWgE+8HcO34jLXH\n71ERJKjDVYn2q+f6S3RdAsi1EBItfjDojVhWuUTMAscQoSqkEwqHvoRqtYBe\n+w12rquTXWFjwuRbsnO0RvWxvVXroDbuqdHn+JxFn6gFjYnMvKlfkclt7PeA\nnPMhhfOLdo2NxO5Diuc/nNbMjoIR6quL2psfdXrITttzf0g6CKCwYSQwWZnV\nVvD2Gf2Xt4RaJrMuENBPCDMHro52++mj31zmc39WXKmlTEwJ3dxHzoDpADfm\nbXu5JhjkJyPPSFwjlT2SPcqzbV6HmEucpn75oZ+3FGuQa1R7ob0mfGZRBB5G\n2fSx2Wozv/ICB1A97wgT/HJw/fkhbN6nl+lGgLxWGxBXN0a1XkiatUvgGp7V\nRq5fJSgCSaapvoDsxbm1mW8Oba92PedFI5pYeihjEoEC5mbpS3aU33pgXpfA\n/5dZKj98vmsYn1BMKODBjRzDp6PA20sh52ByJukbU9mHcfL9REXnzL3rSLhM\neJeYqMkIUlIiWD0m/+MHgLL+i6/O4sOn/RtE1J/4BVYCU8pZDQ6zNQssFLhy\nwfkH\r\n=ca8C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c38dadd226475a1dd91a992667019eefec273bbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.25751d2ed.0","@material/base":"12.0.0-canary.25751d2ed.0","@material/theme":"12.0.0-canary.25751d2ed.0","@material/ripple":"12.0.0-canary.25751d2ed.0","@material/typography":"12.0.0-canary.25751d2ed.0","@material/feature-targeting":"12.0.0-canary.25751d2ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.25751d2ed.0_1620836396846_0.914950362729853","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/form-field","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20039b31ba286109e2e8602ca7174ecd53f69817","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.a23ecb682.0.tgz","fileCount":34,"integrity":"sha512-u8/GbSiTRpS4EqpftLfDjffNzr+WSxRe1F8oI1MZ7q7GTcZItCFt6DZKlIQrw7ZVf76Jiw+03hanoK5ue/ddFw==","signatures":[{"sig":"MEYCIQDMir5XUxnYfbf+VSraZJk7lZfO7j4Dbw4Oyi29OnS9SQIhAIZnYi3hvAgBRlr6SUGjVQEYUbwQdzx25jXkzXwslWKK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB0bCRA9TVsSAnZWagAABUAP/38eK8AkEXNo5L3Qt08r\nVqbmNZao2W9RPJTzaCMxYXLbzPpOd20nA5QC3hRaB7prQuL4f2FC7Ygq1f1m\ntpXI/lNVEges0R7S/yUGIjfTefEhHifdgew+TUj3zY1WMGELu/60XQ4/3CfY\nLsvjg4sTBpFYR6Q38OL+JNLMrbCxwdAGqlkuqQXsc3s+KPdemgKhVhupVT/7\nz5SuyA1TlhyHcOEggdTrvqI+wAOvVIE9SYPuulHFFev3cDGBnACUwB0S+Gmp\nzTBVeRVevpv+S7XEO2ergNenKo91ZCD2iRfq+agSaGwWq05lcLaD2TUQEjiG\n+SYWCKQ449iXRl67OAgPhjdvgV5QpasnF1W84n/hnCvqoX51Pp1An5jksI6s\nvYw3fc+nNHpz9DsfrK6ZgVl+y4jn2FgqVqZdFFru3SbU8UFVnoXlzCwDgpFO\nkw6sJGRBjBFfBRQOK0r0Z82SP/Rfh1DPFV4SrNFF8zudo/86I0am/P69uPRe\nbCGjN/n9UW9EORQ7M7uusCeo1/mifkaA8h64gYtUnCNtfJ0Yn/ykvKPEExw7\nV6TrPs6K0q0lRXFDHQglN6g56kI95qibC+R0q4Uo3DOyIxQ8SM8+XLyTtHT3\nwI609S2LC42Xrhi3LH0s2ACT6G0AE+VQ5owc+xRMk9mszVG0usyMkTjoeyMx\nR+1n\r\n=M3Wj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"da78c3f024a21d0e0df18a30c887082b202d7269","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a23ecb682.0","@material/base":"12.0.0-canary.a23ecb682.0","@material/theme":"12.0.0-canary.a23ecb682.0","@material/ripple":"12.0.0-canary.a23ecb682.0","@material/typography":"12.0.0-canary.a23ecb682.0","@material/feature-targeting":"12.0.0-canary.a23ecb682.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.a23ecb682.0_1620843802888_0.3103405816478635","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/form-field","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.33a954852.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f2ef22fae361b73fd2ec9b3b1af8a48c333bd900","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.33a954852.0.tgz","fileCount":34,"integrity":"sha512-oL2MvalbkjBgzUc9F/BlwMFQLPl69gczzpWi0PZ4jxlBVvPbxOBa++Cn7paOKsEdg6+e2BXHzaRdj6BGk0ISQA==","signatures":[{"sig":"MEUCIQDITpc3acOR7HEaYMPO3ABS/myUKWCj9PijUVTBpjwFxQIgLyaBlQTr8ZG21g9zy8/JINfOGcv7dnEpAQRjnaNAZQc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUDHCRA9TVsSAnZWagAA624P/j6Z+MbqGapTbEo3+RsJ\nx6JJrue9Jl+pLgd55iiYfaTbjFsaUZnyYJgEXDqrVmvSbU5/2Vhn0BTL8Ayc\ng2Y5AftLOJEBxz54LH7dlFHdhbd2Pus++hdn6gJG8gglhE8qqJy1c4cOcqnQ\n0tfmPedeME7cl1L25reUleCGYPncu3k/+X034Swn4ngZHzzKsG+2NqX4gcxW\nTjuQNMq0fdBEmGO2i85z5hUMIq+ps4Zo+aRvyTdi7bRQvJi4/oI/bqG/pCWM\nWe1kNDhA8uVnvDo83j39H3eFH9KTsuvKl8MoxfYM85OVY/OyIYJh92Fcwzsk\nT8T+EsVpMhjRgrYqCBh6ooxiiYiW6frEV2LUnQXwWaKTszMo1PaFslHod0A1\n8uYTMPt0q5NlxwRYNU26ZTxIaxT+W8ZPpjm6YlfrVOuKMroOwyK2/+zDyGtk\nxXiK2FgZOEUKe/ySTha+HX8dg3gn/naGUgtTpJMYiff/VFKbANDyHBPOtUn5\nD6iteY5/PB7ourMUgM4MDMpBFSEwoSNZ5J3RYh5Gi0E8NPZZwO4oezH+/0hM\nfW8dlwsEsUSZFM8cLwrXxxD1tPkBGqNYw0B6nfFbypm0tfj4Ezx1ryjYdzzh\nickae2FgaL5U+IHUN9E/PbVcfvDoEnP3nM716zzx8er0BKiBa7HvKQMfrSuB\nsuMH\r\n=sXsJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"703dd5ba6a1225efec74655d3393690dca1922eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33a954852.0","@material/base":"12.0.0-canary.33a954852.0","@material/theme":"12.0.0-canary.33a954852.0","@material/ripple":"12.0.0-canary.33a954852.0","@material/typography":"12.0.0-canary.33a954852.0","@material/feature-targeting":"12.0.0-canary.33a954852.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.33a954852.0_1620918471332_0.24587797211351226","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/form-field","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.a4484849b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcac2557360e3d251f6f3b4d05a7c394d32d3522","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.a4484849b.0.tgz","fileCount":34,"integrity":"sha512-snzw99UsktGg996VgPQl7FoD3LDIfBCyvnmPnAKzidEUsO+TvojY//AtE258Z7Iyk0gv/ialOtf7FodN1G64MQ==","signatures":[{"sig":"MEQCIBwq3T8P1J3qxcNOHLSaijidW4Xo4Rk38lEMxFS3PHG7AiBWT08ig8BNbjN4Ze1AoGic4JS0w/ofwrm7K4DXgyDONA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUY8CRA9TVsSAnZWagAAfp4P/RNRaB8rkK26O/mRqFAt\nGHetiCxSjwOKP9/VUTTVw42KEmQMqJT6CZYzo9yIb0OHvsFiG6UzENI+jytG\nkr6VBcCa3jxI4yuIgLc3yFCqQ0pVDSQ5eOmg+7MEg2HsgFYszzZD8XkHWdhp\nn7FVH8z2PWpbAVh1qtH+rq49AfSbo9CClaP37uHHLY72X7QKLcpRut4IV/2X\nn8DJIbAEms2vLIAIFhwghDnDLgaK1jFQnVfTx9sGhr4VhTDhPjskMlDVNt6e\njZJHNq4KKpAp+dggtIfBSNXq52DM3tIwDmgYCjjdmSrlTvIH43v81A0vlEO3\nbsnp9570KHuPDTR30sCQ4LGUhC3T91YbcFCD3xAZ2LlSKuHzlIWNjTJS66qv\nSeduacJvQ9HFxQbF3K9rmIYgzxCNbNXDBQzNdgak+FDGqfbaRupuJOrzRjFV\nCOdmqxnt8zuA0x+kWYgACxtzKdwWqdJ6HaCablEZfotZwENecBsyiRtwBpgU\noZyF4r5fjfrV1vqeNtxZz+Kw/wc9T4lJCa23lAqppHPnT+LADKFqZHsELYFq\nY7vvu3GOXuONtq4VODr+GulCU0wy8VAbhV0YMqPD0fCoFuM1ThztQgr4e1Yq\nhB/y9UYvIX4da6oO9VI95NFPt9E4LlH5Ec/sg+BNgpEhkkqEaee5IHHCNVFn\nT/pX\r\n=ukUV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7908229b1205198ad87858e49ed29ee3836cebfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a4484849b.0","@material/base":"12.0.0-canary.a4484849b.0","@material/theme":"12.0.0-canary.a4484849b.0","@material/ripple":"12.0.0-canary.a4484849b.0","@material/typography":"12.0.0-canary.a4484849b.0","@material/feature-targeting":"12.0.0-canary.a4484849b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.a4484849b.0_1620919868468_0.341571890928303","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/form-field","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f270d9236468165ab3cdc46b4087e225fe9d407f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.b4c3f513e.0.tgz","fileCount":34,"integrity":"sha512-OfMBeh3/o3Z1+6SjjX2ge+tUDsSN0i6DrIAqvCUXPpUa4SFqWO0cD1mwX7QP0Nol6H5yjk+7H4xbIKgXod3SKg==","signatures":[{"sig":"MEUCIQCRiJIOuMLgdO/6mKwuIvMjfbJEoVVcvTch3cm9IW6A7wIgOV/HhODNHY4SRLpzaDC+Fjcc6huu4h0JEZDeoHPtx1I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU7wCRA9TVsSAnZWagAALMMP/3fRD1lRXqy9/rWvYDby\nLwhId3t1+zEkU47Qn2EFSdhOOKpqA/r9m58FB519082CT52IAi6ji3SnFjtu\nzptBkhb42p7/g6EywVm/riqceaJpURRIOYN1GV4GtFQg7gQTrXtctnNK4395\nsAcyoKVJWcg88pc7lZ9P/EnpOvgpQCLGy32WYyJHWOt6Ka8MdC/Vz4ZJ5oO/\nq/BP4wRqhs2T3aiRsh1P24oRa1qbeZGfhMFrmUpEr8BO5D59pBg20d+Fifnf\n7ECzaXVWp4uGu1IHwscitcKlynUBtFXud4srt3E6PohubslSqk+AApUtI96B\nSGWmPxVPZLpQBfTlhG6mMS7EdJQPNNyAo+o5ZC/DvJ6YwZoolLF/2Zhi8eEp\nPCT0XbxSkyCzcf6B98+fQKqN3FbJU0JB+TvD1mi2pkXZjz7WGh8Mb6HQ1wTb\n+nreqREzvrw0klJtYyT2NzUfCerzNuvOQvXtHBas/Ii2JBzTON1GVe+gLF+b\nMj41aOfi9RPyJw4Jfaga+tB3wce7yG7y3uvrAecOQPVLsY0wS8gYV6CeBi/b\nPGqlrTuNu/3/038YjB5SpGDdQC2QxLbMCd3dCeC8Grk1oD6vovpsR/weISyS\nMyW2MApAhmhhISrDvJ1XMvp5n30ITfGkNn1XrFkuMYPLsCsKNk6NoIWSSF2C\n78zV\r\n=7eSC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c2183e7caf6f0437e64e41b632f75d33156547ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b4c3f513e.0","@material/base":"12.0.0-canary.b4c3f513e.0","@material/theme":"12.0.0-canary.b4c3f513e.0","@material/ripple":"12.0.0-canary.b4c3f513e.0","@material/typography":"12.0.0-canary.b4c3f513e.0","@material/feature-targeting":"12.0.0-canary.b4c3f513e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.b4c3f513e.0_1620922095821_0.046416343429539264","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/form-field","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"393d41ae0a3dbe1780c28c7a2af3791317e189fe","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.1a8d06483.0.tgz","fileCount":34,"integrity":"sha512-5OUWpLKAeBK17wsdCN3vAxefXsshuLqXbocvf+FzUwyMWzStRhXyjjR1PxuBLuBBof6JvabLGpQgpuaYFju2EQ==","signatures":[{"sig":"MEUCIEBM/gNszVQwXGakruQwXQJEXhCoWGzXfKZ/rkCFo1eCAiEAy04tsDlNqwzvK/BnG5JeneMpQzwC3PJjLRsZMOtMRJQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVBBCRA9TVsSAnZWagAAamAP/3zfwKmuDFgRDEkmPhwc\njY/y9DjV9YEWTYZaOwe4sRHebyQ6KJRC/ur1nw8wAaQlzHXk8gF9wkUO/bzw\nxa1YQ/HYzkX0KGI8CJkf8NQCb2w6T7A3BGXqO+m0IO/N+453IXp0yPgPAPp6\nKqo0DD4DkYmZRywCqz7pBl+6kUMcxDYBx+2edy0DwpRVmcuwl4ske0osnYMn\n0aMx5yJrCynG3+Kd3rTjwdSBCGUrfk0kZzp21i1pn1OGWFU28KoxNDDaeEN4\niTPIuaYeWRyhG57Z6JQkwew0ui2rpedf7zAPOx+4sJsLEccFXufWcxx7Xz1K\nHsioU2LHS39wNj8enj4SylURWIY1FOhkopljP6+VAbgEtL0mHNntbVvfF3zq\nx9C1KVqtBloOrOc5xW2okSEa7+CWnVuWx91RhnqX5qnTUmfRzQMTd1l3um31\npxmCn6WtkKv2W49CJgCxkWX8RnMq71r0k+IXar3MQtCiWnn0Mvb9tzFrK28a\nk700SHTKBEX19uqwGQ7q1049fhjZpn+qLciIOaKo2z6Hd82Z+dgpwTrzU6zV\n1WQtG3qz+SfMs89+80o0k+JXldaJMLDadMjDEDP0xBG40/cmG2uOpPEZA+UT\nclBsOKJCHXHIPl+W5sOBQVfG6HSOax17DuXGfgptqZOELODKlmZ714/vu6E6\nD7MU\r\n=3yLZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4fd7ff5259e7910dd76488a7faab45af839a13b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.1a8d06483.0","@material/base":"12.0.0-canary.1a8d06483.0","@material/theme":"12.0.0-canary.1a8d06483.0","@material/ripple":"12.0.0-canary.1a8d06483.0","@material/typography":"12.0.0-canary.1a8d06483.0","@material/feature-targeting":"12.0.0-canary.1a8d06483.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.1a8d06483.0_1620922432624_0.7695372203078983","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/form-field","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.8e6081836.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d2cadd1dc443e0e29086d12b6860a8e395f2a3d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.8e6081836.0.tgz","fileCount":34,"integrity":"sha512-k0HI3OFVjcWOpmJb8EcRoupd6f6oqMPeBX8+c6oQC/wwcTGZRw42GShfoTgt1gKaqLmfFmQ05o361MA4WH/Ftw==","signatures":[{"sig":"MEUCIQD2i7zU/sYa16H11HUMcHAp7Tx75cmtUz6EdVCuCwCPIQIgatKbf2NRuXHx8h/rvyPZ+myo8qQ7luSTnLzKSAG2UEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu5iCRA9TVsSAnZWagAANA4P/jD0954xsYc5XGzxLOjy\nLCGpE3o14hXzOBTdtxpeUpQiHsvNiDr7nnm/BBWqPa9VrgPmw1WpJjfCEeg1\niNF3SDAmNCOMdFjM3OVOMxsVkhy5FluOqSiyfvXwuAUQACpg/QVy1hzaY5eZ\n1enPgrqoSmRqewEsKsOvRWnNScDTTZaxgb8SPdH/2pyPr0SF4hCaoRMm+NxS\nwA8eFhVvX9DsAX1isE+WnO7MhTECId2qJCCqjwuBTJLlxfUX45EcOW9Ov7TW\nJLzvgoLw+P4tusGocxV/3YLQ+QqqRXaQeOu0D2aazRQx57Gc4nV2eyFQs9oM\nhuif2pxXzU+PqlNgVgks1FqAK8Q15fPRBYRn7PwAgJ/YvxANNPeR9O0T4K94\nOsW/6fMYcGNRyf/TR7XHkTM4Jz87Ue+jJNyFqTgMkcGXOaoelMJuUhijMWwa\nIrrgYjxe+nwTH+OMI76H5qmAN+cP52amwbEE8s1o4pvGQrCRkpyUUR70xOYs\n/JkhRLlry2sICMrHMybHwhrD0/g2TGY2Flju80FOO79xcAqVvXxr+htW9MFM\ndpWTjOSrVrOuWuUZEDXATercYv9uw3Oo73zF/hQl01gCVmv5diDG2N4sXO0h\nXHbPoIUXo71jt+3VkovynwTcJ3z6X0po7xXVNkl2MZH9zMLbm7NCp+GpUKW/\nTjia\r\n=glo9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e648805eb34c990054d503fd3f70ed25e40d6d9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8e6081836.0","@material/base":"12.0.0-canary.8e6081836.0","@material/theme":"12.0.0-canary.8e6081836.0","@material/ripple":"12.0.0-canary.8e6081836.0","@material/typography":"12.0.0-canary.8e6081836.0","@material/feature-targeting":"12.0.0-canary.8e6081836.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.8e6081836.0_1621028450044_0.9330364683593595","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/form-field","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31ebe4434ebd787124ff98e6e3cfacfd53ae63d4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":34,"integrity":"sha512-R354yQR6JQCmqQjuTyZcLYQLrC6hmFVcgxRLHrtM+L1NkoK8inC1K5JTIqMDXvzdKEsCuaf1zurmafPcCpeNNQ==","signatures":[{"sig":"MEQCIAD5BzVLFT60NcRMxQRf90kzIg91POEtXBX9X3YzAIgHAiBUXXErCImoXkA6/Pz4dHnd5MxCDfUdbwrZSXHZMn5u8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvF6CRA9TVsSAnZWagAArSMP/RE+uDje0wSJgHlJ0WKQ\nO61cU/2sJn4eDoFa/9YOaA+309YG1TsTB4UC0F6cNuD3K4cRj6+3s5Cy1I+5\nEucPjAcurTc0DyntxcqmhTImncWHiQdlQJX+wwX+BscF1nzbEKAryOJrNQ9F\nRgcvsTGheX0m4rKk2RjXEdfFsgxOEqdd45F2wYwpDrN3GSRdjkGwhlKwpRGz\nh/LBg154gn4Tfxj1S2D53HqtccV22iNkT9wRdsP+v2BB1gOoyhG4GVUSpCcD\n6dL70t+puys+/lDeS+KV0UuIbSfF4DCjb+D/LDCFWaxtmmn1vfD+gi7Msz4y\nlhWnNgBdzKnv4RociIz08TF8E+QYk8skGyHZzFMkhQZznPxMiGmu8jqPACqE\naIO4qkooJPAdU6END2z511SpUXyaSZT5mm5YRLq9jW5wccCW46XSrPu7Pocj\nO8TDvjodSw5kvqI/kFfgvCVbiQV0j8YijbBKxbDMdWEq0Ise6IYi9r2hgbvJ\nHApykzZgi5pxE+Jio5pdM3OIQMAJDEYYb8tDBgvoQlaVyzcSTPOpPFb11KUH\nw6GM/Zpek8wVnZEoBUf7p97rV1AbVTJsUWfP2ORekY60nRoklErYzaJFehOa\ncpKvpOxoGMp3VhLU9pGaZ2hKJ5ScN9OD6h1iIveQ1wZZRs/B3tJ61+P1thu4\nv4pX\r\n=JOfj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"67c2d3cef073a380a13ddb6bbbfc90886c7af364","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a2b0f4cee.0","@material/base":"12.0.0-canary.a2b0f4cee.0","@material/theme":"12.0.0-canary.a2b0f4cee.0","@material/ripple":"12.0.0-canary.a2b0f4cee.0","@material/typography":"12.0.0-canary.a2b0f4cee.0","@material/feature-targeting":"12.0.0-canary.a2b0f4cee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.a2b0f4cee.0_1621029242462_0.9008205873577633","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/form-field","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4041c8117695906d5374c3410c7d2b8ea40aa80","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.e8e39ad19.0.tgz","fileCount":34,"integrity":"sha512-NEGlOHeEwxojEv6lzBMJ2HUekcxr4ndHXaWfWhLF8uplGVMGhGt4CElX4B9EkWUw9KA9p1zic4bOLipgdU0Vkw==","signatures":[{"sig":"MEQCICrlWh1rQvtomLt40IqRCGYJKkhKo/NTsGqMPiDCYlnvAiBFeJkGvRjQ3CLRcdUJI+4v4QkUhYbvCfiMlCa+il4g7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpB/gCRA9TVsSAnZWagAAwyYP/268wXwJ39INXMQwYgLz\nIFNQFDLiYwRHZfYyMrh6//cgI5/nhHHYSOmxH5a2yC01C3o+k+VOQJmU3Aab\nmVXCkVJF6SBV4Utw67MSpT3L9FYzOJe4urkhlyPietd+9/hmYMyNLzuN52Jc\nJr4SmNTUKkpgBnkfRuvNW76KHy8NQI9otJmOzWN2eXRar+Wam1mgJVf5XkJ+\nktodnBX4HnScEiYSHszxkFZByucBFe+ny0ctoK9eRlpCY1RPAp9VGhfwvxHD\n5y9b9FW5tV422NV4Ry522PvBsGiUPkDixX0s9/6T2AwrVICXTfL9SZf7eagf\nnGU/GAobEk2CtovWmgi0KFgQddREE3x7V1IfIWdfOPl+4dmQZbHnbKTiOVCH\npeWB6fhCCPeHuduhzUezFneKa/MPjXjh0je3kqAzrQ8wCqHZ91pxSqBJmAUv\n1Rc2IO9OMB3WWY4lS2rl57XA0Eh0VQmTnK8YDb26ZFC7CAxfwwSP5T61XQG+\nyzJNUx6vXnRpl5bYUIPe2EC7HGsuYHhtL/52fhF+uR5L1HFmwbNiuWTJ6rY1\nEAby9ATqzilLp+xKGvBMHdJIfESVS7NFF4f1LvB6gcE+YSvvJtqD0dQ8G6L5\nid3wns6chYbsQ2H5OVWno/3cwuW4gNPZo5qmyRlUbj19NPHyMmJMZxmW0scZ\ndQmb\r\n=eEh6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2bde63cf3be6363eb1508c4d7e1747acfc51a761","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e8e39ad19.0","@material/base":"12.0.0-canary.e8e39ad19.0","@material/theme":"12.0.0-canary.e8e39ad19.0","@material/ripple":"12.0.0-canary.e8e39ad19.0","@material/typography":"12.0.0-canary.e8e39ad19.0","@material/feature-targeting":"12.0.0-canary.e8e39ad19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.e8e39ad19.0_1621368799805_0.27784457818421515","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/form-field","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9105f95b5b027c4b4e2c0dc1b331f6745cabe30f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":34,"integrity":"sha512-9aOJGTWuiBYV39jcWyFsvuojLuGX0R+3Lbo8ziv0+U/osyXWMXCLJO5FJDb3Dqm2lW9ChaocLYcUvvvKOkap9A==","signatures":[{"sig":"MEQCIBN9cPzUyVXCuMAEJFZbuUo/v59xNVUKcPjGqLFim4edAiAmxN5/KUtePyU8BYUOTyJvyjY9J9Fqyy2b8Ydl1Orgfw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS6dCRA9TVsSAnZWagAAKpkP/0OYtq0vruo5HGasdE26\nIiW6kTMceA/tOqW75hwO8WFdAVNmq4JSNmG9Ww5LGk9okeZnj4aVrUGCek+R\n70BimYZ06epkTCwHXw8tiLDyylqScbqoBajPknDQ6KpcEmhTErM0YgBR799z\ndbBPSupxkLPV5jRbGtDMn8Lbk+9torM5yI3stEwr8QWuvA9xvMSH9lDaTjRv\nr99yx2/rRHUhIFj01tfhlPxFVkkHkstLlvvOV6IU9HbIbcoOV+y6nzfoLeVH\nAkKX6Mvkfsc8YBUVdqyQQVF+AWtUK/95xj2A+dTdiVuab8Cv3G9uU56nmX/p\nXHJQTTuLMukufxc2buSiscl1saxwdzoLSxDvPW6eE6WP27S9CyFfW91gFX7u\nQxyKWKRB6FXPcjWrUlIHDAz3kNajNZyHECC1QfgrQOuZ9+F+SToJEQ+BdCQr\nO1SlSASqTFSLQqsTLURp/ZakBeLtohUnbStQVIIWm8YilknoR02x4yC8Sd5E\nWbKxPgACRxCSsWIlJ242JHVR80Z7JaGzxywP5To5+oJjH2BHJTI73IB5buMI\nFn/NUH39UczRo/9KpEScM8SgoWFAA3sMWFjhNc9DTwzf4I9oyIfP9GnUCi8v\nwUmnMdqMJZy3lFqVKEXI+hhjU0iR24meZLnscbCAQY2e6xtuU6xFMS0ent1i\nD47H\r\n=5Eqr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9abe3ad555ba3e9ca70f37ff3419acc2edb56676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4bb5eea2b.0","@material/base":"12.0.0-canary.4bb5eea2b.0","@material/theme":"12.0.0-canary.4bb5eea2b.0","@material/ripple":"12.0.0-canary.4bb5eea2b.0","@material/typography":"12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"12.0.0-canary.4bb5eea2b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.4bb5eea2b.0_1621438108631_0.8885781500087861","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/form-field","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30d787b2e8e52ed6585963a4253d1b6af9ab0b68","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.ccce99cd6.0.tgz","fileCount":34,"integrity":"sha512-z40Nz/UAjOoWKIYULtUj7bLVgSw5bK8rnVdRJSc5zWDNFmBmma7/TibO4pyJxZzCoANxnD6LsyV2D9l0IsWt2g==","signatures":[{"sig":"MEUCIQDACqX1w6M9xneVmCKxW8JVAVCUx4uSRJliB/6xGRTA8QIgTCs9wnD6ybmxDjh3gG/oZ64UiAkIPv6YplxA4vgXdPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbPcCRA9TVsSAnZWagAA/ncP/235AkRCr4wsz7sl77D6\nb4pIDDImIbOHrWm2vVc3Y2+sgDje3yJTMEGr+ENbM99mmveyLwmhcaXxdOjg\nF7gbrs031T8iQTjtkcbqC2WjopbH8bAfU24sJFGN8wSzCn1QKZeZIfnUdkPO\nfyB4NxFNntPZHholaZrkDsDq3kd4aEtCpKDiPwNECaIGSFRqFohEpjhvBQmH\nvKo/T2p19SIrHG9E0Oevcj8/eb4u3oVz4EkcQuOgblY36tmo7W09KWeFbuVv\nRW5LC69st3Pyqg02CB/PwkqLiG7RJX+3/9pQ74fl4ElZtCk3cT9kvdhM0pBk\nBL3RYJu4LALUIiyE3io7ZAgXw2TOcAhubkv7X84wF6jXkUIV3qil5QaptZz/\n77or6mTHxR4XD/TDRuY00rSGrj8Ii7cbyf9efZbZIzUBLR124bQODcSc8FCa\npTwH1/IQYkttp+5kyRbqHV37V75KQGIXH1MT78aHbDtQm+6IhxlrsAFH4hr3\ni+VNxzoPuxCLwAh2e0u3OnUYcLyXyxpmHjZDz+DH6J6jmxscmFm3H2FW16Cs\nRME9cvnhMlQWIwZ/65g5twkE7lzhtf15LDycDsIqjTW149c0DYavEM7F/TAQ\n8xu6MsCtnzsavYG0XdhzZKnH8RsPLt24fA02XBZFCDafqLzfnO5jeAGvvv58\ntc34\r\n=jSDB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5d475a1522350d9dadb5fe3597683fa7f4851b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ccce99cd6.0","@material/base":"12.0.0-canary.ccce99cd6.0","@material/theme":"12.0.0-canary.ccce99cd6.0","@material/ripple":"12.0.0-canary.ccce99cd6.0","@material/typography":"12.0.0-canary.ccce99cd6.0","@material/feature-targeting":"12.0.0-canary.ccce99cd6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.ccce99cd6.0_1621472220163_0.9734266867178878","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/form-field","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.14767a8db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"274c2f445fdf177b2cdd87ed8f3175d4ef508fdd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.14767a8db.0.tgz","fileCount":34,"integrity":"sha512-jXKRdYC35Ils8cRuRq5KcADOd5pYbnogTBrZ2hQHYofaalgcRWtSvzFv2Gs6tXyG13KJaoEJvnen7QjWPOj2fA==","signatures":[{"sig":"MEYCIQDaDxjvgG5bWAQebbpFZdX+8sgDYR0t8cnU8ei5+yF0oQIhAMDUPmdMXcWQ7Qa4Oin9XaZbhXCa0V6/TCNmmsjh/1Cj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpsvBCRA9TVsSAnZWagAAYb0P/jzVQl6p91ptOEPMjZcF\nldaEavFMw3FVc7VoFHaMbaspgC1wJKXhL0eSl7zPUkBNOoA0sHVXY4zNbq85\nwOQcwtMTpbdaa3sKVtwxz9+yikYM/lo9pTO7p4vEW1+tQWEgkIOVDMPMBIeL\nUcNG/sI3HkwpS4hT9gqcTufOnya+xYJ2DV1G19oaIllmHi6UF1LrNhU5me75\nEY2GD3Fr9hpmttmRxHPRVfERXCFsbA9du7MYe4xwX/eH1dWnVDm+JvyH7rmK\nFpc6ijoJ/lAy3vwKCXnSjsPDEyzPCfMC/+kP/VqI8pgjw958vHnGXxOOwdWG\nxFB2SQWBMai7mh/WanvPqClMS66DV14YX4eSrMzD7TZmRXTvBSzsrloIpwT3\nhCEB37hidMG+H+Hjb/lgLLku8Z1kPn35QtUITGKY06fCk6bE9rD9bbjNy2pg\nVqlEs54SCqKxn676DQ8CiMlt8XT1ia6Jh93rJz52XASalTNA+yHk+5QPWZA1\nxezWqOVybcssmNNh/9Nb1mr5aPF8AznZXpaC3iTBGobzc1xk8hi9AgJmOcSZ\nVXWg5ICxYSXjs7J+LMBWJa2WhxyjfcrY5wnttyjgziJHnHGw3Ua30GBLOCrx\nlkcGN8dt5G2AfQ9xbasW1BsvuanBOGY2t4+v7ZcPiQDfPxkYTP8KlqH02W7j\nGyUQ\r\n=vke1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a324b91ce28769039998a00879c6f441cb1159b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.14767a8db.0","@material/base":"12.0.0-canary.14767a8db.0","@material/theme":"12.0.0-canary.14767a8db.0","@material/ripple":"12.0.0-canary.14767a8db.0","@material/typography":"12.0.0-canary.14767a8db.0","@material/feature-targeting":"12.0.0-canary.14767a8db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.14767a8db.0_1621543873241_0.9317497868415527","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/form-field","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6b91e93daf208b0d6fea50401d8dde658aafae0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.22c6dcff9.0.tgz","fileCount":34,"integrity":"sha512-wxBSZ5SjnWQFeZrSn703Gc3SXH1XqrXHCtdbvoVwkTWpFKpqKRTscp3waLY2EEpmJmrwD+v8jqjLxA2eIH9ESw==","signatures":[{"sig":"MEUCIQD4b+IPda+CPj5x33wjkEMUdjeYvKWA2XgTswIN519pGwIgNlbN+c4J1uENQaH4SYCp6yR3HKSFXA7zXy1fz4bTu8E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8PWCRA9TVsSAnZWagAAZ6AP/3TThoXKhzcpqphC+Wth\nCVl4o84u8N5o8XtcPqietGZSOwO3o6GeUHWG7hez1E/5G5mLn0hMYYIhjPcZ\n00cdbAsREe3Drm4jnBJMUej72TeOezlu9tOzU/c9zJr2wuGbfcM9v7XM0EfX\nWR9lK9eO5kW5nFwr6XLrS2TTLNO7n8NmU9ppk5wjDNeufZ4ZKvKO5BsoYkWm\nC1EQ2thrN+DbVprGNjgIvHKMG/EnOisk0C2+GzkT44lfrmPN2Lm6sDduGw6U\n2WfXr8eegq9mfhvOrIbofMnYR0KsjOAjVjNtngW5ULRkGnn0ONc0afRXhz3u\n+2iB8AiDq0HE2Zxin6/qDR239Z/2KPyxMSaZDn7ums5HSRp4AvutMz+9vrFW\nZNlT3hBB3fWyb4VnupeGjug2HDsBvjCSYTi3Q+pwebyAc+Km7sfWX4VdfiF+\nJgg71sGRmH+ZkTn66gnvjqvCPtYlUsQDRjG5qGbJpLO2ZFipMRFr5Hb4xRfs\n9gU0x+f8ocSNY2VByH/HASW1O7l8hrnB05nBMTD3k3/9bOmwjAyUA/XAQkqb\n5SR3DtNaQnv4GSFeW3jf6izftfVw+G013i1XlgDj8+9sYFEl5gU3cQTurENs\nV5n+PSn6M708Yq0OphKQcvre8CM9rUSA8ilTzIGh0fYbeYKmJo+BI45t+u5t\nfJ3T\r\n=bX0C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"74541e300384d800b9cdf492ff70ba20ffc583dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.22c6dcff9.0","@material/base":"12.0.0-canary.22c6dcff9.0","@material/theme":"12.0.0-canary.22c6dcff9.0","@material/ripple":"12.0.0-canary.22c6dcff9.0","@material/typography":"12.0.0-canary.22c6dcff9.0","@material/feature-targeting":"12.0.0-canary.22c6dcff9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.22c6dcff9.0_1621869525738_0.6595296939133999","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/form-field","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.fadab3372.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fe4fbde75acac4fc2c8f29a628f958ec1a9252d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.fadab3372.0.tgz","fileCount":34,"integrity":"sha512-i0YLq6BsXx65neUUvShOaT2o7OXIutyNvj828GHSG/dZYqpzQuD7SrtLBq2PzluYx6HQQ8HAs9gyEoZp9MXpvA==","signatures":[{"sig":"MEQCIFiryQwM8K7KxkCbUVhgLkMNtbOMRiSUJYbfdmCuN//YAiBqahXg06ByFWaZt/bBud4dcUC3SGUuCcRQN0UqG+uYRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq87lCRA9TVsSAnZWagAAtfgP/1/EbF0TTQvv5kIGQjku\nlKYKo9YNATALD5FC1UHGdvvK0kRe5KhuiGaVhGSCMlLMQjtg7RVcBbcoxz9E\nYZydgNnhtLc5zlpCwObcr+0DIO6LdWvifkOTN2RvnisMsGV/NSgyUiGeTIYr\n8vJWbsqzjn7cnrKgBwFeXoWjG1cNiBRt5ky+e9QZL75CND3+zsJLRbqFob9o\nwVjcraS7Y9y2o8Y6YQn5Ta4oGTu6EMbuvPmV24Nbc0WjqcxlD8+NRgNvnjPj\nuZMLmovMdmwjMYsJmX/w+uvvPhkOTRUsab2QwLuNOiqETNTyK0eAEGNiLFBD\nIMbsB/H12ZHXckjn+pxAjz4ewpOJeWufs/cIZGgPCgWNsN6k111XOyywN5+7\nYDCy9URGmfnchAWgFFejzxlqPmpUtX0Z+eXYySDBONDUoBF50k615CwdMvVG\nfovQokeaDOlYwYweIRVOhjKUS7M0Tw7BTno+NBTcM9FC3cVnyyDUmGqLpszq\n2c7kpmLwqsWUTGHfMjA8glbAn7TNSbbsjro3UA7mghlJ8mUFjPqYLpZfmzS5\nr3Qyaig6zSNHN8w0IfNCpUNBMCS8FeXMsHXbYgix2XmOQzSwbarONZZrRmV1\n7UGuTNyNS1W1hFFLFGwnpRF6BIioR86jMo0RcxWEfFvLT4JWCIR4rbysdfJr\n/5pg\r\n=hR74\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d76e611194693a7270b5e10fd87906ada48c7af7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.fadab3372.0","@material/base":"12.0.0-canary.fadab3372.0","@material/theme":"12.0.0-canary.fadab3372.0","@material/ripple":"12.0.0-canary.fadab3372.0","@material/typography":"12.0.0-canary.fadab3372.0","@material/feature-targeting":"12.0.0-canary.fadab3372.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.fadab3372.0_1621872357100_0.6931560698800068","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/form-field","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"669a715c5a1065cb99fad3ac2866d8cdc28c9bf4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.caa73aeee.0.tgz","fileCount":34,"integrity":"sha512-U51eWD2o4B+G41rqlN9hzfjOZunyjhq9x68eYK34f/OD1Hx62z/B8TVbCBpUOZoQgT6AVfjm5bSLkgn3qEQ7ig==","signatures":[{"sig":"MEQCIC4xcTFEfTLvNEA2ChAaBhqX0fjRQWyDlG806vXQC5ZrAiBQye8k8Eh1wgSvlNWmh+azd3cspat9YHWzXEFve8w6eQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQZNCRA9TVsSAnZWagAAv5kP/AgBW8tTpbwcPIyJHD/i\n+UmdJEDJzp4+OFum2Y369u63U49Ly8GhQ6naGBa0lwZdlCzRbXpqlQMwHDAp\n7MMnCujckD1cCRhQ8pMpr3amOJQGdGw4xbbaT9s7NfHLj4QA8mJTfwFd1YDW\nDXMUtbPM8qM/G24InC1B1LMhR6+7YnL68Uz9cuuFkYMQR3VoTE6XKyEUJOS8\nMABFfgWcR9W9DalkWN9qfJSDl+UM26ow5+bzTNso+K8FrQ0SJ2mWbqmzWd9s\niTB5Vp9mQYHwxbpzbt37KoTfvEoke7UH8DMzTB6lRqZ6TP8+L3ASN7c0gYTE\nMp6eXYUpMZR9Ab8D+JKCmiKNyXpwzcqIys0fRSzmUhlywYLxhwwW6G8S4ozO\nPpLb8Lwz1b2VmIu8UEnMfNxSOsYwWOVGGjF4Z6buNM+KbjsCebIHBeG3WGT0\nWu9JT3wxUTbUc9heZA7D1CIWY8GAekdX683XCza/2c+US8GBKA/QMfho7flR\n4oncskXztz3dMJ1HEL3W+LkzVsJpzMuNTy4F+OQeGvlLkceSSccVC2JlqGwv\n7VcWEUV0Eki70qzpmvbTup3MbwKokGfQtblvehkPKD74xUCdmfIKAh0zTFSp\nlStoCEGi6WduVPeblfkVqqeWBCG2a1LcPu1vF8IwJjceplXriJbcTCVtE9Fw\nsW7R\r\n=qPXP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dca5692fda23e55426458f6b0c56c2b6dc9e2dd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.caa73aeee.0","@material/base":"12.0.0-canary.caa73aeee.0","@material/theme":"12.0.0-canary.caa73aeee.0","@material/ripple":"12.0.0-canary.caa73aeee.0","@material/typography":"12.0.0-canary.caa73aeee.0","@material/feature-targeting":"12.0.0-canary.caa73aeee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.caa73aeee.0_1621952076710_0.5027110626592843","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/form-field","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c302333506e6716f3d171e27662cc382a24dfcb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":34,"integrity":"sha512-k9ZPHVN7RhOWRYIHnXWirosHj7ZMBZkHi8WEt37Ln3znFhAMmrG5O9RPtjauLZeKkJ1Plgo+ZplE3A5htikGpA==","signatures":[{"sig":"MEUCIQDnGEeBB1mEdjiXkzbwhX47zGCGRRPpNzl9p/NCSRARxgIgM8io1NfA63ANw+FW/497WhsvRlzaCSlzKeArcxOeYD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV+WCRA9TVsSAnZWagAA1QwP/RE42WePiGxt2V2ssNiW\n/RzSo5saJnTJn5fWxbf50GNC7Pn6OBZiElzXN0FAAK7UsGoxWigsJerL2zmV\nL/bGqx3TW8urLc26+pNJ0LVJC1nECKJhNl90GdCtGjPCiAyx5HACEo8tWXbP\nL7iqX9RzilQJX6HCAbBTxDJ61sbLtCLsAJCyFG6l6n/5mOZcYaXyjEc+ZDIH\nXBaV3FDNAMPD00yZYGwg/dpLOfciNYBfNRPCjm1pLK37C2EDD/kpK1kO7OMs\n0bjCROihCx7eVTuptThrph3mkma2x96e5dltakzvZyudFSTZX1ne6pqFOT75\nL7l4x3tVeJ9pJZIQecsDdZEIwfv0kiyjZSZ4r1YNVMNlk4cIvyYYc+1Jcza4\n8P8P8RQ2Pa953UfDi2nHu7AMkaUQF9ELVdoQ4W5w6OmWpztwWglnLcc0Ozw0\n7NZH9JaEJh7ZGVCKxEmXVO21lGok+oo2zM39FZp44uaxOw7s2T+AJIVRFc/b\nksyBIJkdWmEh9CjzvYdnK+UIVdCejx+URDE9MrMq07134bYuXB1REk+48xUY\nu0dp3oTOS4iQ7XC5im+CGUy9150VMkJfT9h3q1SDz/8+Yk3qdo7tabheFnNX\nl65xNZARjxwLu8y/WN6kN/dYVHc3ehdg99Uo9GgEVNFPUzW9M6aVzz4Tapzn\nUo42\r\n=gkLC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f9db084a3aed73c844554c3b223d5185727b6d07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ec31ae1ed.0","@material/base":"12.0.0-canary.ec31ae1ed.0","@material/theme":"12.0.0-canary.ec31ae1ed.0","@material/ripple":"12.0.0-canary.ec31ae1ed.0","@material/typography":"12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"12.0.0-canary.ec31ae1ed.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.ec31ae1ed.0_1621974933911_0.9645081627147536","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/form-field","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.8530d3514.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71bffa45a1df33fe133a34ba55870e2efb13583e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.8530d3514.0.tgz","fileCount":34,"integrity":"sha512-dKh588E+PiUd9JlLl0Zy3b2cC5/p1tiZeZPUhDu07Irbchhlq2Gm5vW2Jnx6cKVseWnftEpTgAgScKV3meXfnw==","signatures":[{"sig":"MEUCIQCke+R2PbCljd1tp7Lmm7r+FQkqb7cVd6F4AgOUwkPtIQIgebJA+PbgIXiuzD0lhXSq5oKQBa2zm9riCS9dfs8tpZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8MwCRA9TVsSAnZWagAApXwP/38gsouOm/M12gIkHkq0\nbC5Q59fHdyOW3kRRxR2p1vfvzDjw4klsoBjsGW+0kTp+jYnRdyGiwcTsr0QR\nHEwyoyRLRf3793vLtyEoG9fzjb2ofXc3TDIau9ncaUMyNPQ71RQoSaGuwbdo\nZXWFz/4z1If0Dtn5LH2ti4jYuuL5CXHE6HSLkuuj9DTuXbi897TxvC8C3L4I\n+Lcm3ygkPeqc2iLbNE6gclmKbn55hkZ897P2ZMW8jh7VxpRMUC75+DbPPI5V\n5m6H11vvZUnVNiOIkTnQb9Gh7SU9HReCFg8f8yVYMzA81YHR4EqrilXVHsbR\nu0KrFE6L3rpf1EfztKKiosIbw15etb18K5iw+LyN+q6rYTjm/bgQR5f+c1Cy\nwM5hLyyh+lzJ1GSZuyQ4HyzFxDUp7smRxlwApBqdBS5B2eSNIG0sMqts6OP1\niYJ2ctvigrh1Wb+upWVl4oj+gQwNUixlLdkOb5VMnolUYneU1Gj7VpOWDVB4\nmcZMp7cUS+Bh4u2hVM08NVOx1a/481eODOEz3+vIW6+z6unteu285DavSZKN\nJrr2qZOhi9zo+DOYKuC9gwd621nA4l+Usrs2zVqbU2z0gosjYICvnYcVqueN\nxmysVwcEQzcnkQ30T6gTa7XO4fk5WklrZ//HZkccHDpiigl+GO2Gmpe9eLYm\n34QO\r\n=SuQZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e32508a69db8bd9ce4383a14f2c576d35950566c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8530d3514.0","@material/base":"12.0.0-canary.8530d3514.0","@material/theme":"12.0.0-canary.8530d3514.0","@material/ripple":"12.0.0-canary.8530d3514.0","@material/typography":"12.0.0-canary.8530d3514.0","@material/feature-targeting":"12.0.0-canary.8530d3514.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.8530d3514.0_1622131503698_0.5190832620407422","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/form-field","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bca1b3c4a975c09f0639dbbb750163a91ed486f1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.00b5899dc.0.tgz","fileCount":34,"integrity":"sha512-6B0aJOVpglWy+xbWFIitM108b0TISJvvSDp8nL5HlrTbDl/YOYX5nMLIDCaEWX4vUlZ+x1X75mpxqHWyljOa8A==","signatures":[{"sig":"MEUCIAzdoQSFQoXCigmfxRwt7iv6JmQQpqM7sjNv0rS1KtDhAiEA4aGsR1V2wGsj20l8b/x7n4lrYQLpS+ulX2sfhvauIAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtriaCRA9TVsSAnZWagAAqDgQAKKmMzvOIJ7LY4RBI64o\nAFyd3aHXLcZ6smJYmuC0h56y8JBTb8d1n8DtSCA37MGlQK+xuH+Rd9Vli19K\nOSlF+sYbaZj5ZQM6MB+wpc6iWhBnXhVAKGXfL/jrTmnDt9MnFV8lTKm6m/Qa\nc4OPHAQfeb2Uc2C0BCov64R/fdxaG4ZR1yQ0QqlPHvf7b1ZNOXDzFiy5SyK5\nrL4m7P5TqL//pmHXfICw/+Pg+nJhDIYMylj9vDlV+ey1YyggYGj+8ZAOm7d3\nH2vHDYaEqEJa2RscKhbaYIAi++M95epR4MS0b45XFNSC2VS4hjD3pPaqHPKg\navIB+2AOmIud8pVBGuxDEpqcMSxCkvB4Hc7Ddaxn23x0gU3Q/CpggDFIjjUO\nIwT0lQSi5IQZJ9s0MjcTZxFP29o9QqvuBJPrFh7LiBrNPzC0TNpNvO4RlWaZ\nAQi++R7n39rrKTStyAEF8NCqefje+k8VVmr928y8cxvz0OUjWu8v//m9gb4E\ncbmVwIwuxP71Gleg4JyARBxyQ4cqB6IhmMsSKUIQiZTn/D7nF8Yn5dAhgNjQ\nsqdhGYvNibz0z5a3zBQq0e/SR5RCEt6GotZI4TzqOTWJkiubyKo5u45AN2FQ\ndSn7EqXJd17dDRh+DiMzxVjST9PNMRk+3mAKlVdphtRqehD2p/++EM3Q/9if\nSCQd\r\n=YUdk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"19ffd4cf15764c62ec7b1dfd76483a2919f6501d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.00b5899dc.0","@material/base":"12.0.0-canary.00b5899dc.0","@material/theme":"12.0.0-canary.00b5899dc.0","@material/ripple":"12.0.0-canary.00b5899dc.0","@material/typography":"12.0.0-canary.00b5899dc.0","@material/feature-targeting":"12.0.0-canary.00b5899dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.00b5899dc.0_1622587545510_0.6780332590574034","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/form-field","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9aca44cceba74cd7d9fa051140cee4e7d5ef5da9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.f1525ea3e.0.tgz","fileCount":34,"integrity":"sha512-fdPWMxpbnnJMYwsdNYxdkRlBc4asxL2ZHyPVig7MiQ6CJFySu+hsbekhzBFHUNm3hFzgI0pACVlPjVm4NLk+Eg==","signatures":[{"sig":"MEUCIQCFbj8p0xleLkqzLbPZ2RjDXXv1OMYe8yHLELi+7ayMXAIgN86fbv7/aBhMdQ/axMp3m9GK73mpSPL34QIEpHsDifg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN8aCRA9TVsSAnZWagAAEt4QAIgaFJxcdzl4qJY0S1Pg\n93LVQuav8iaNqLrvVIxRpfNpGkyPp83C9mzQA0nYxKRhZArF9FPeYSmWbseg\nvTja9bOAknXDTUGph+d7mqkKq/rB+fFkF2IoDKyRRY4M/2SGU76AWQelTArW\nq/MlQGyJBZuMjfv6YrXImnl0DCAyU4PxDJypWWJ/7tF0/NhYbHFtyO//pLe1\nlcglmztjhpNbrnqiq5vn6Xk+CGS7kbq1JVpq4gzQmlMcrjRsKCQAF+gZZged\ngJ3W7VCDx2ihV2h9Z1kR37V3JlDi04LG3CbaI9imXEruTf9cZjo1a62WqaHO\nG5XtTDhZx6XxrFGUglk5gWFXgZAhU6gYOv1O8c1dCPBGuuvQV14mi6tuefZh\nEH3QhBcoaNuEPiIRABmny6NhywTPj9muPc1wDqJdwhYVkJqF78bX/z/HEBjX\nfakFSaoDGUNIPTPsQdFFxZWAkIoHvCAZhRFpu/hmxdLawhjISxbvkjwn1Do5\nQRZaAIfiwCoqeDXjx3dhHTBkPA7EJQHIhcpyQvqEjEFAI7kL1seMkFtGnhjO\nxAxRKFon1+f9bKW77EQlgzzkiUqxwuAugZA4eaJi5sTJR8U39V79+Sj/q5gw\ncDY8FZ7ytuvuvL+S7ZRgk/708AoLI1pgJpaDX8Wuj8B1lW+lr9FZ0Ft7JS+8\niXiT\r\n=YzZO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"97ff3c2e33330849b0ca447ac6983126a385d845","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f1525ea3e.0","@material/base":"12.0.0-canary.f1525ea3e.0","@material/theme":"12.0.0-canary.f1525ea3e.0","@material/ripple":"12.0.0-canary.f1525ea3e.0","@material/typography":"12.0.0-canary.f1525ea3e.0","@material/feature-targeting":"12.0.0-canary.f1525ea3e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.f1525ea3e.0_1622728474769_0.24904024710899875","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/form-field","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.464a00286.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"641eab334d9de0e4737b729d75dbfa72b101f84b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.464a00286.0.tgz","fileCount":34,"integrity":"sha512-S+bSGMNDmwMevBsKhaTTHp/MtgSvN+XMl1/jSxzT1P509fYkh513Y1T/0xJH8htMN4/pa80PK16UyQcQvpqRUQ==","signatures":[{"sig":"MEQCIG20U72vegfmAEZIeMHA+zoFghuQS4PlruCP1/J2erjuAiBPbleUUuq2pDN0cb8WIR3kxaKufeujonhgIGFdRCr2Rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOs7CRA9TVsSAnZWagAA9BQP/iMYEeaL5IturwFBtu/Z\nXZOGqluNwLsf/Su037l2eAS1LcpsVr1wETmlnq6saX3Uq5Q9I5j66Y48PRgI\npNWMGy/2Rb6xj8wAl+Ql7CiMh2qzBHGnifVCbCmMCNj06TjSjsF/sVcgF+ld\nwZKCXmf01g/7F16zjGk6qWFp/J4Vvgu4AL80NT3itqRcsSgAqRmSUghAwfLH\ntZrJ2YMoGLE9Oz89PZJ6+0UT0C9nfINewlFKkyoIn9OovMAcwqgdLVxKJw0u\nPmERsobw+mdboxzxdpkklO0tpIu/UbUcHkFm/gUyDQJhD7i8w5x/vn0lZWBT\nIlgWwBZ06ib2Vg0m4UEQ2364tAoZxKhfZnCfemqNNXdpOqGyS/Mx7HP9x7zr\nbU5YnMCWNmwP+nNwy3lXBs9HjC6WxqyJ7hAkYX3tcXlFTY8RwhYWBfUxEzpC\n4+3S1kJ0K4B2O7D6nNHvw2afxftPAAqX8E/RYgydCiXya85rExTQukLdkpss\nX0C24LYPsGzjqZBO1+KoUU4r2k7ImajM9jnsU6YIxm4BqAWji/Yd/CPTDOG7\nUyrjGAikr/PQ7z8tKY2hCfD5z6Lby5D3vb6afsoNnp51ziBupmosqxjYI3Jg\nY+3jJpll6FaTwBrjH3lfuaLaBeIDAXPIyL7kOHEE3XUcxIuL1WKs5R5MVq5U\nXvAS\r\n=Shoc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ceb43f7f74f7db77edbe7a13d3b92e853d599d6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.464a00286.0","@material/base":"12.0.0-canary.464a00286.0","@material/theme":"12.0.0-canary.464a00286.0","@material/ripple":"12.0.0-canary.464a00286.0","@material/typography":"12.0.0-canary.464a00286.0","@material/feature-targeting":"12.0.0-canary.464a00286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.464a00286.0_1622731579746_0.371167929484604","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/form-field","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.474de7878.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2ee7600598375aaa38e1ed9cb9e8cd3f496519e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.474de7878.0.tgz","fileCount":34,"integrity":"sha512-a4dRghfKOFWGhoO8ev1unm90AYurfhP0pLiwMJS7N/L4sa51xyHE/51xkuN6BRT/wIVsxPNo/BLKqbb6+nS03Q==","signatures":[{"sig":"MEQCIHoiWys51auvBu9fTdJWjitAcoubZ95Ovz9XwBEM8WzuAiAh6yQfw9kGl0jhRS9BxQ6/ZKC1YcrXJ7ad+X5EvSQZJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPHQCRA9TVsSAnZWagAAQSkP/3cfPU9jInBqQk+/RfHX\nPYqXyxXu5qXK4xwJWXtZwJ/Tu+XhIOJgptyINuVDvrprj8Mci6+hcRQYyrju\nCcXcECkC9t8mAQlGa+Z++ON1jcl6b3BoYdEzi1ZYMXvVox5VDQu1JVyuIFOh\nPHwmjZSMm0VJaEXhdZNoNtA2V1XV1xdcCytSDit8DvcMHrYGLhZARsquC39Q\nXNzLOHCmeMWp+2gKW7g99w37sKeAYfq3muC+ZqNogyiVhSPQZrD8K45dyHe6\n4p7WwpR0Ye5E54mBcyJsryftf5V6o2IYcWXueTAlQ0zW7srDQXiuVrqTcyHZ\n2YWeqg5CuIkI//LCOe9M4Yy1huclYfABUk7zHk9BKiatOmYP25oxiY4757M0\npuEx7QurCKA+8ZD2lquCiwSuJ4UcctXrseOR+LT39TAWRofTrR+PhGL2Og0K\nKx2XI3r+Ms+9XathlH8P+SJgasAZykNkbNEf9MNWIg70d6jDznHe175n2ipq\n+DiwEJunSO9mOX7jCHfbRDsBwu2uM5/cR5Z7buQF8WIgXPIRl82V+4K898OR\nmTmSMaEXF6vDCiw3msE52xBG47mhhnzTGLGlaim6gGP3u759Fbv3Q3tJRFae\n+RBTW6T3Fpu1a7HvfIBBVDMrCbnXJmODvqpNdgatrEqBF7qsmOXkRJtotFWf\nGWX6\r\n=+Fan\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"67d604ec9cbaa0dc385eb36be35e0adfe641b244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.474de7878.0","@material/base":"12.0.0-canary.474de7878.0","@material/theme":"12.0.0-canary.474de7878.0","@material/ripple":"12.0.0-canary.474de7878.0","@material/typography":"12.0.0-canary.474de7878.0","@material/feature-targeting":"12.0.0-canary.474de7878.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.474de7878.0_1622733264197_0.19534863632553945","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/form-field","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e060ea687cf495426af96416c7fe4d9425b908f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.b87ebf74d.0.tgz","fileCount":34,"integrity":"sha512-delC4l+MP1/8TK9u5/FsTleibPeKvXHzDuz+Z9GjddQCXI7v603K9XNQjhiuYaUG2KlTnz5Vq+A9N2DSGPZkkw==","signatures":[{"sig":"MEUCIFqLymUgUio3wGL3dfB8/pBo58H04hxkrVUArLsJH1mpAiEA9K16ysoBPxSlaEYnTgbhK4W1VmQuUj5zm6Fwez0auD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRVzCRA9TVsSAnZWagAAWPIP/i/8FGf4i9j0cwQ5/z7T\nj7AV7+7xz3KFm1ytIIi3Hyww19G9AF4jJO2b1W21BMUpu+brCcS9pmI1lebe\nebHHqS0AmcXa8ZU6qkN5ewy5yEWIxgeDmwSRNC4h6KTFScG3MBnq5iPrluAi\nv7sWgjYzY8j+oE5hiPuI6OX4wutL8p3OineY+khr1P6U4H0fzpZSbY+lbBck\nYI19lWdm8T/OdlWktq/O0zQnDx41rp+YBbuyQPKJ0qlAifJ5nt4c4nxUd9Ox\nBBCMhYqS2EJIjBLACDnYxXG+z1zzS56uo648gb2l7H38YGwXSEfSzAZFxkMh\nuC6JR2dMdDTMQtmKAmyfMKkjP0F0CAAceEzMOKVwfPJj05vmY9BNN71ZhZ0a\nX+Wi6Md137YOiAlBSnmsW54v4JBPWpnOAfNayflBTqiHKPdmiuL0I8PY3+xV\nVvEQJGv6rqW4cq2srHZEC0/qbovaBZA4dOuUrlZWNcbLGLbAbPQm+jAjWpsb\nVM+Mh8CwtzlJQ6IOgRRyJAuXB2T++yxNQxV33SsVZciYp+p5kzvodsY0gPM5\nHAcLnH0G/kYXA6otcKZaW6/eZAG1J/R/w4wYic11H2FDVey9r5AOWbMn+Ubt\nUCqRoXJeYeVVhOtLjBmFlugkOUclb+VsFLKJZuqvjD8P+TAPBuTYhy05rW/B\nET1i\r\n=941w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d3567c6dfa0fd347d2141fb92460c63fac28b46a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.b87ebf74d.0","@material/base":"12.0.0-canary.b87ebf74d.0","@material/theme":"12.0.0-canary.b87ebf74d.0","@material/ripple":"12.0.0-canary.b87ebf74d.0","@material/typography":"12.0.0-canary.b87ebf74d.0","@material/feature-targeting":"12.0.0-canary.b87ebf74d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.b87ebf74d.0_1622742387314_0.7542983108385952","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/form-field","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bf7542b0008a030ef9fc98c00e2519f4e719a45","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.2daa49b35.0.tgz","fileCount":34,"integrity":"sha512-yavO7ZaL5Sdprj0eaO/8JU/Z5PQrzJPY6FXPIs12x/cO4iCvAlS8eyYAYOtilAtSbxEUVeyfcyebxc7K0C6XDg==","signatures":[{"sig":"MEUCIQC+mmTzYJaZD/i+6Pr03KX/HbsCTbDdyi55pkUMhdIlYQIgA9t0ngzaDMjbAeOSsk8hdzFlP8aebH0OWnEE7BHy1eQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulFZCRA9TVsSAnZWagAAjcIP/3vj2BJty6P/rD0yW+Ag\nPZzhSMI3E1cw2+tgZb5vuIGYkU7h2eusllYQ1KPLrk6/575M8HzWfDQujmgh\nVtcw0et1NMfbO0EAIVzAP1PxGZmWeEQP0Uj0S6tYCMutTglvOU+jGwUiuqQD\ncgh+aIOwmMTr0JJg4TTRLLl/n/A2Mgd12VmpTUg8zcgYCwYsB+t3q5pvioLC\nPrqFLkSBF72xyM0nNDDxUGmgM7o84N0B7IxwplHhyX4hmSutgE+8bcTMnH9C\nqx1aJ9/dq5HOmphozDe8bw9keJDVMULk0vf2YFgk0IQSln0tEsIIb+RwsWJM\nPfZokhx1ChJyeFxIZxM1IR5s8Rl5ibMQ+DQGgSuteAL4zJlCB3tw4As3bGmx\nEI+P9OuFzThdySnx1hoENc6iqDqXkWTSNipFuJRwXPGBhlNQqitLtdu5jVKS\nJ60VFWTFECBjELxV8vEyHxULVgBKDtyz5jyzWW2wHJ1XVC5Yd/iPsPeJ6wWn\n9dFzsoVG15utQ2Oug7WNsK3B/s9g5Bf6pw/vA6goR6KnUFeGKMumedmNdhdT\nKp3eSeeJKIj7fAp6sAk9PloCGFFwJM6cZZfovoU7pfbP3nGGFHebGMIRGysR\nIlnJ7YXXjvo/zuLhsChDRUJ74Ak7Ol9OjdKsZbV5uJvAMVdcDHOP/XuYNn2V\nrVMp\r\n=8dLK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3e759afe4116e5fb3941df918249b1b1348fe684","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2daa49b35.0","@material/base":"12.0.0-canary.2daa49b35.0","@material/theme":"12.0.0-canary.2daa49b35.0","@material/ripple":"12.0.0-canary.2daa49b35.0","@material/typography":"12.0.0-canary.2daa49b35.0","@material/feature-targeting":"12.0.0-canary.2daa49b35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.2daa49b35.0_1622823257239_0.554964489111897","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/form-field","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.08db3d737.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebfe65b905ac1de7177eb80ee7b9ebb902e190bb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.08db3d737.0.tgz","fileCount":34,"integrity":"sha512-PuOdIqKNBhnT2ADUma5q2s+T3oNmBa62Zsae5fl5vehxtI/d1s6UN8nY85KfvZBt63jSlSCmarqlVj4o0bW2DQ==","signatures":[{"sig":"MEUCIQDa6XDEc2NAhWXMLIrEzM0+bylP1aQQH1UKs/zYaJemuwIgWEdCaRWTmPQkqthyLu8zP/L3U0YTZc5tzgb5uC0cbBs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoIACRA9TVsSAnZWagAAJrwQAIscovj7JYpmlbkEW25V\nzuyggNKXvUW1hczwQndbie91Wr0gGzSN8XIVcLyOiKlc1zTJbig4wfvlYk1K\nkZjZZkH1TWr422aySHKjXfMRe4s4te7jubeI3MzNUCg/cEVg27IIVJZrrqwL\nUl2f4lhZOMAfok6TNVYAULfzx0nKYd636CfLcC8VPz39r1GcAM7deDDWKORe\nQdawOWsQVPGxPnWAGyME58RhMZH3y8E4UPgI90IVgEZwEOxCwXk0NL+9cSDg\nYHC6KHjnRmzTSqbMPs1L4vl6fy/Nh4o3vBlVYVmyNTi8k6oZMON9ehFx3gLu\nRkcafNK6pwi1623B6oV5O7OatyQGY+ZSAZm1tmyZ44uTO7ly0KXyVMX00vGY\neL7QnbJ5SqzQLWTm/W8BgXNy/t8lOA/E3UqzODWWCaj13fLRmAXY3lzWRZWU\nMjrUFuUir3+Fd+9PtAV8MIvoGAQY5Iw1QSCDfTMLUMkouQyVOrnBuceRcyBD\n1ALe3c4ZHZOWCtoQ3n3zI3+CGhkoKeSkqt/YvbFtnixC5rYcomDoC1RcHZ6H\nDLikr1jtkmvRFm4hAL2A/tvuTKKC9yZosXsngm6Id+01ZJ4D+NPbMP/rbc06\nh0AzyOb/tYmevmdWZOpwp0Vlu2QgGe5mJJIUoKBeEiT94TU8TBXKKrfvbF2a\nc0LE\r\n=ziFC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0175b9a3635a8e6c8c6690948618b55f39ca1ffb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.08db3d737.0","@material/base":"12.0.0-canary.08db3d737.0","@material/theme":"12.0.0-canary.08db3d737.0","@material/ripple":"12.0.0-canary.08db3d737.0","@material/typography":"12.0.0-canary.08db3d737.0","@material/feature-targeting":"12.0.0-canary.08db3d737.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.08db3d737.0_1622835712840_0.45007604385978617","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/form-field","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.5823407a7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0a350fde4fdc01b3631ca98628f41e58d68330f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.5823407a7.0.tgz","fileCount":34,"integrity":"sha512-3bATlcDJXWZwJOgJI0zb6qEzMQWkpRWVR2lp83BBG8wSrX0wZHpOYIXV95vzip0kXZ/+jNU9VBJpoD56cri0rQ==","signatures":[{"sig":"MEUCICAgM0BE6oWzsTG7dNDk5ajQou35agPX/FqixYQQ4OLUAiEAiGQwR7f8UhOsV5UVUDL6qRtPnniO6jPcgY6UbwpH9gk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr5gCRA9TVsSAnZWagAACJ0P/RCqLpX3XTie6AFXrp7P\nCUdYsCcIcKmOa27xqRCZevAxdABvyhuKiKRk7WvkmOEho4QF9HgkUblrHoEt\nqAqQQJr1G1j5Ge/0dZTfCnHDZPGAQavmGw2F4/oCnGOG/RlLxa67N2zD4PuS\nF4kefG+mQYJwy+dgVLL5WCa2QrDvTEtAJiJQ7xi1seYQd833hpRiphCgpRrF\nEoz+cBt1ONY/8h8fWkw0k/BAwJrFeovkkVcZW/ab/rSv8A4Y7zr6lXodxbQx\nByN26z8qzaui/nVmU7Eo+nG0r6ggFX8tQ9Fp13dSzn9reH2ETZKCI3gVZvLS\ngV6ahvtFvPro1GDuj42v6Opcod+eezNUCiyF3q8Z38wnnxPQUittX3KSjxIk\npwzDEj8yhvZ0p3uHwR4dL1IEA3STvKH3JktvMWprKq7dfZiMNZrvTiccaCbA\nDiKOBJZ/iIpBUC9eu+h6dKkhdvUpmMPPd5qIJSoqs76lhudBVYJdQjCs5OHu\n3cfJVB2uGB89oY1mtVAHKurt7vpZn+1mHHTHLvu8QdYsDK0uXWxnx/ge5/J0\nE0wR4fFmkQAo5lNdLhI+xSYUeq75srPkw0b+sUJZR4lNZM4Gsumn3vOL1sqK\njANaOZkkMvy/7hZ9ifK6U/evdvyXawtvu0ES+cSlFGRPoyNLCuU8Fig5T6qA\nNpXP\r\n=jFlo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dd3ce4590e0d881d04e885d116e10e680b6c01f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5823407a7.0","@material/base":"12.0.0-canary.5823407a7.0","@material/theme":"12.0.0-canary.5823407a7.0","@material/ripple":"12.0.0-canary.5823407a7.0","@material/typography":"12.0.0-canary.5823407a7.0","@material/feature-targeting":"12.0.0-canary.5823407a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.5823407a7.0_1623113312789_0.7441125964207591","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/form-field","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff155df291cca7622a697db6b4c1a117fe183a7a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.23b0c5e22.0.tgz","fileCount":34,"integrity":"sha512-hWggTeByfqpQfz/OWQTrj4PgWUW/dQ1nG31e0kEFJSMr313u6zI5z8RmhmZTv24lSi3IidFkVuL6RpsT3gkhpg==","signatures":[{"sig":"MEUCIQDcitEEQxZOCvlBLZABTX4Dhgch9VhJD28IpP5JR2JOqAIgD62tynLvefPweuYcZTSdPjcQpTmhGfv1JMoYqoFtwHU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5k9CRA9TVsSAnZWagAAWXEP/1WLczvf9nPN8EO04VNw\n/AWnwu38xnBzASiD0rYyQ4hA8J+SLZLlQ0UBDToZMCCfjcDymTGr3a5Gw410\n8gYs/nxeQgwp9xN03DJx3GK6oixBjObq5UZmERavltIT9sSTggHvaGn+Ro/g\nfn3MDUUudcWO+1I0gccj8tkGOR/FImjx+oXwPKVcupNpyUSqEPo5Sz0AjW9Z\n78Gtn5RGa3aYJVWWs2OkttxM1Y8bPQDRLmKzDetS35F9k7Trhv2V6/tdfoqy\nUI1oQoyBv9ID0nOU0LfXiqqXl0khLCrXumyLlrP/cv+Wg0ENB1w7g/MiwPm+\nvdIO5EphTISOyqLlBb+jYaiBG8xhiFiotT99iRgMf6FsW5nH1tX4RnhpWe1Q\n8HRvGdRnmjnzk8ag9Qw8O+NDvQkJ82EBqNmZpCiW9VTahk7Ht6UARcAsf/Wb\n9kEWnqaVSlrfsNeGA9tzTQj6Ts/wf/pJH0yPZTzxMN2yYbGIV1LxWczsvCRo\nXNUHGNHHVQLaLnpgQ/HDHpeaLbnaxPm25BCjgWHg8CIZ0cMJvOc1zKXyqN/p\nYEO26cGs2YJ9fV0vOt7F0zXqm+kCy8jDitpecmF6Mz76ddl/C3ikUZ/ld9ay\npAMD6rBMLg9nw1/cQCizFXSS3boNIs+u6hVAoZIUtfbDo4kSAv90nIgTvWOd\n6f02\r\n=FFRr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fc55a497a3b0d48a691942de987d781555ef9d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.23b0c5e22.0","@material/base":"12.0.0-canary.23b0c5e22.0","@material/theme":"12.0.0-canary.23b0c5e22.0","@material/ripple":"12.0.0-canary.23b0c5e22.0","@material/typography":"12.0.0-canary.23b0c5e22.0","@material/feature-targeting":"12.0.0-canary.23b0c5e22.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.23b0c5e22.0_1623169341109_0.8333670175506331","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/form-field","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b1ab8d00be1feab8876c66d5e42c58763b612c5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.2952c6a76.0.tgz","fileCount":34,"integrity":"sha512-bv8yyGbxx1/EDOyy4GC0pYlSIQw1cAEA5Vl8SMWTyGEF4qFqgk0C+f0wzjm9lSImsF/nF0K4XR6LAOIiwNOl5w==","signatures":[{"sig":"MEYCIQCGf9/fMBOSMjKrbseEnWYJCvmuf6ItLlLhaN9OHAqIpAIhAOUrpE5mOyKjYRSwEOMVwDI+idSib7/RGOvCM33zZynZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6uuCRA9TVsSAnZWagAAr+sP/jhVoHMs9i9jEyObeB4O\nszs0PyfKxNSDKISfk8jVuTJxW0PM/bRtFI7wW+KULNPz0DpoBrmLJsBSbzGm\nJp4lGKoji6QsmSFnwWTOMDPaet9/cQPQZirjTHrVzIVSsIZWQpB0rO3hx1Mu\nC2DP4OVIp8SfGDjtnBqf+ci1MjzzmVISolfSwqckXfBOEne4t66ydU6Ctf9W\npQSlFZHpZMUbBQbpoalnippaW1Kg+JaoclNRAvuX2Oo9DK7Dso+0KAkz2ZcK\n3ZKo0WFedAfevnFqXK8UdI5P36F+e6t5Sr3lCT+FOapii8eE+sd41OU0v3Vq\nMnz6v3u2Loi54CYWHpQ/dAKAITyy0sRVXskiD/XX3QbU5fxd8gTHe9E7DjKj\nycbPAiHLINtY6gk1U0HBsL97tHzXPsoGqqwzfgvYTmdlP368WiZ7ikiAQCaK\n3UrD97TW7kt3lznh7FiKmQiYfHcQ0V/pOGoZiHUQ5dzG6JM/7ugFFhpB9wwa\nqA4kCmTx6AkQeO7F7ZGK5Z6uOR0BN0hFcySSmuCNd/joW1HSsfmcD9VixCbK\nQ9hzq8w0AFrsbUBev3N7iTuqN0DHA/V/InT5ITyj/tbRo4OGWzudkCSlF5ae\n3kg7bUt4CpFyzkIzT1Nn0J9SjRVgkN/lAzKlNWnR3VJfeRhaWuwIMZV5Wv87\nqM6v\r\n=RPny\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c1b0afec5d55ef54d74fa1cea1899368fe5c7180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2952c6a76.0","@material/base":"12.0.0-canary.2952c6a76.0","@material/theme":"12.0.0-canary.2952c6a76.0","@material/ripple":"12.0.0-canary.2952c6a76.0","@material/typography":"12.0.0-canary.2952c6a76.0","@material/feature-targeting":"12.0.0-canary.2952c6a76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.2952c6a76.0_1623174062164_0.6632931483074362","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/form-field","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.f12425f88.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c70a05fa5652799b83961258e5bbc2f12d01b3c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.f12425f88.0.tgz","fileCount":34,"integrity":"sha512-Hxm7zR4V8eYx9Z1bCRXav0tS1Rjx/Ddy7oZGVHLpLRak6fu5dCWjo9bfxQxCzYkgGPBlz9tY1rNnTRswmUZN4A==","signatures":[{"sig":"MEQCID2Zb2BnSDyN57zMryjHiq5oyluiRR9Rqe5IwBe5ABkbAiB6vC8u4OXQSiIyaimvP5lbn+p7tDSMkroxgTEtJYtdNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWWKCRA9TVsSAnZWagAAMkQP/3UVmjmN7OPpLFDCxKwb\n5JzgRE/I6ztSRT/iB0P08pjkkkM740t3CPkNpqPuwM8mtbT764xeytDjXL8d\nyYuMkM8+CRNPj4DInI7HHWk2qHU8JtZZytF8VODhF2xqyGnJR7W1QJFkeIVH\nj7VCuyPCbyJP8+n265fWVvmtBGxF0dkLhU8GJnZ2cfAt+rEgxJN7aD1TB+R1\nxleAdxDIyqGr75H02qbdgbAU+6oFUIUjT7UVLk4Rrczcd65wD20Ari1V319o\nlQ+tc/a+Wjyl0wrB5MhPTki4saEDQvCJpOFIrvp26/U7KaQDGxQdzBBhSbZU\nR3WilRFCHrZEm216OfrVz3ttSP7t7QUXB5eYlhI1ezgaJnqPNfMULaJSOviY\np0ktzaEqNIT8w+1Vg+tq8800yyUIngkASH5Q2BS2VVWUfSxodN/z89z1eYg1\nGvu4RrpyFRMktBVV9jdGtLVqUvemY/aZM8WdSlzbhyhpDycekrQyi1ketZS+\nfd1cLHW6Ij+zKG31HgtefN8I8GwVOfXm447vx2k6B7LhBzu04zVE54lrqm+K\niSxSot12frLONcmcJCqqwfyA+KwMFzQK8eqL4x1tlRng546ry7DqTrtvtf8Z\nK6hTVM6H01YZ+W7SfQjuIIPrVAdMysWgjX/eo0G/17ZNDbOaJActsmfR0l7l\nBaM+\r\n=LA/5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c8fa3a7d372e06e42b474eed4ef3e4105dc43301","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f12425f88.0","@material/base":"12.0.0-canary.f12425f88.0","@material/theme":"12.0.0-canary.f12425f88.0","@material/ripple":"12.0.0-canary.f12425f88.0","@material/typography":"12.0.0-canary.f12425f88.0","@material/feature-targeting":"12.0.0-canary.f12425f88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.f12425f88.0_1623287178257_0.9981745804336914","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/form-field","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.e543628c3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bcbe263c8b100c8e08c9c5975b49e8b995d6a91","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.e543628c3.0.tgz","fileCount":34,"integrity":"sha512-CMwDtRKGp4BzcUipm7k6tpeb8Gzx3sITLL3aH2rsbmg85p8vyLGF1Ll5lKs8NfhZaovRafvdNes8KyI0jsTNFQ==","signatures":[{"sig":"MEUCIQCpOmh9CZvUmoqteKK0iJ3A86tWNRymMBNg2lNZSGxcfwIgQs6U5eu8Y+xxqnEyafKWpciT5Nw9P8Rk6Pbh6/CunOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWXGCRA9TVsSAnZWagAAMh8P/RlxTGQWljmopGkn3fa9\nEaoJfk2FWqfDVx7eodbpR0Q5U+AjWhCGl22KhwVysw64SBlQflL55Hm5X2nh\n61spM1kag65ZYKdQ2yi45hwSmRB14uNP3sYiJjeTAodoL7kvD/LlZWwY+UsT\nZx8v4B/DxULgpQ92F82kqnE/EZd1QjeHdQgizhpXcOdoUNBfJExzIf2CmlrI\nBaLfQOmOfb04ZIcDHfURw4qO06f/0TDbCKxuH5CWj0ECtHNWKWgrNGIzW0ND\n0wAvgh1yenVt9HQWwgqmKKPkdPUz4LxsYTVHL0d8ifTn1MjFqNKh0nBorkUb\nT9jdaAkXo+3++al9rOSvz56BhTejldWs4Nn32Ztiipm/FQcNP0z8uT/nJ78T\nc5bAn+yfzlt4limDxMdlil6ww1qC5nnZunI3snvscDg9jeBCPk/TQGp07gTg\nZb1LMBPbkD58uAGegWxWoebgSM+5llMLNgj/Kmmz/zSYU817fVhvZnp0j5wW\nJEKNZRQGmodSZPV4M5Xozs5kq3hrocvigGuntAUqBHXNf/44cGYAOxoRzg3E\n3JU7R6Ox9yry39KRmSyRpzlkfvZ0xaqbwI2zBLl7yG05W1SHL+LQIvwANzfM\n8nKxgFdYQDEYM+rFBGnQjhkahSmDWfE4ZJubrcY9/XZmw14ocUupR0cA8Fji\nqRmf\r\n=OHbL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6e28195a46e3b2108c76ee1a6a9ea9416276ce52","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e543628c3.0","@material/base":"12.0.0-canary.e543628c3.0","@material/theme":"12.0.0-canary.e543628c3.0","@material/ripple":"12.0.0-canary.e543628c3.0","@material/typography":"12.0.0-canary.e543628c3.0","@material/feature-targeting":"12.0.0-canary.e543628c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.e543628c3.0_1623287238292_0.09911337960408306","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/form-field","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.e0c346286.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd30a8c1823c7890cc4117fdf4c0a2afbb302e96","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.e0c346286.0.tgz","fileCount":34,"integrity":"sha512-9nOLxEBnpOMsCTolNvKymi8hgmCsKE/VWLHixRp3x0xJubLsc2gO+jVmiO36+sv3dHMHnQA4eSUbZVAOq4qEeg==","signatures":[{"sig":"MEQCIHS7kJswtC3iYZCl9lZOxUXSh67CDjq+Wjp7bXV9vgaeAiAvnVNZCdJzuyD9bpU0vVrQ+1TXjrKYhD7DHwtGdpKIHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj9xCRA9TVsSAnZWagAAka0P/RG3tOuOkHk1q9nxqvV0\nHHWPO/sPctDuQRkEwSVwA3CQlzVV2KBNaFyDl4K7SB5t2B+hMO8o34Xlkm3E\nD9CtoJw+1g5cjg0yAPYNbgTHufeOgtGI6ri/8OAQfPv65vu8S9CxH8lfPX/g\nfGglo6xvQLtxvW4upG/e1BQxu9mcQ4TG/ko+Hg7Nlzb+M1ZftlhdXKnJnwEV\nDbFb0uWCKdC1d5MDBrKpdpmYk3aDAtbfc5erIChPFMhzvD86AnVgJv7xAe8U\n8NFTPD7eife+9jJ3BwcqSwKnwPIBkk4y/fVW8mHz9D3BeZmsUeLbkNFagTku\nnVviDXPzLIHT9U88K+e+pvRRmHyGHEdaXjSncZfMQmAg7CApnmMM9+g4489s\nU36Ubc8AkZ5GAYEtRz2XXR9hJaIzHWIxFT5N4nN/Jhsg3axHcNXyPOAWkVCR\n/tiPvbycqR8R1NAmqMPJAQZnjIdOBIBr2qecbtwiTu1h9F0/WliJwC9q0qZi\nxUBhBzBKYh3h97AdQRTE0PVTKniuqm5a8F8+PyDVtMSxJkPmIF/UmfVXRK7h\n0SWRh6wdGXBytagj8bgjRE72N/nbw9yUHqjZVioHLW5AiW2lmSBUuO4638wV\naN0vHELSgjIYMsDcHRmLAW0iZF+3ffzA0TCH2UFLalDoX1YoRPl+KZyH9/Wv\nxrUx\r\n=42n7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"405607237a611d804caa0b022897b683aed90ccc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e0c346286.0","@material/base":"12.0.0-canary.e0c346286.0","@material/theme":"12.0.0-canary.e0c346286.0","@material/ripple":"12.0.0-canary.e0c346286.0","@material/typography":"12.0.0-canary.e0c346286.0","@material/feature-targeting":"12.0.0-canary.e0c346286.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.e0c346286.0_1623342960837_0.8724288921976857","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/form-field","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.f43af5633.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9ae2da761aa00d75267b9dc8e09fe250a399840","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.f43af5633.0.tgz","fileCount":34,"integrity":"sha512-Q2ZDBlNHxCziXXF5ML2yxO99Oa76yqnMa0BjN+XU7dVHfF2zzqU8+DCFMIDkEt//Wa4l+btKwgL6slJTKAoBAw==","signatures":[{"sig":"MEUCIQD+KHw6wSROnCZ/UPSAyPYm3k+9WogqukRZLy0SFL10uwIgSBR8H3QcVweYS+vY6qdpy32Y74Le5nnKdH/yizCo+ag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwnetCRA9TVsSAnZWagAATS8P/0+gScxWGhYvdOeo03tr\nRxsrP5S4HNRGzu8VzzGeCOvvn5+8psI9/pczqJuq8SeRrqpSTwFaEy8z9raw\n8drxuBFJOGxzpmWTfhtQNTGkNzb3VtRF9j7LH5Dg6e+oFiTxf9YFR9taWAdg\nQ5fDYwd0zjBEMDDXU7Vc3c0w7A+5Egkd6BskTRZ8OzH3zaScQsE8wRw/l/Hx\nQZPN6S6dB5DH8NLrWXUWrXeaFbpJ9h3wqf9d3JAb63iJh11tY2C6l0eHx2mz\nRBt/3lgfFljB+Q5+dSUGmTxTRxLVnZ6BjfkSBhE7ku5ybbTFX4HrNCp5xW2i\nOj+M9fMace4EB+/JUzfGXlT0Ne8e9LZy/2ROKN4MlkjCRElV/IbXpzXknU3J\nNz845xJPTZXlg7vKO/Alp3kCzhiVIJ9jpFnr7Gd6nueDSvmxU9O1VEZjuIdT\npDo8h3rZtpXZfuFy6GPa7aQFYZbC7cGGzOQE5S4jmA4uxy/4Q4yWOcmngh8q\n9FzfE28r1plqzDSGhpB5XhrNKLSMUEAK/Os9dWzlO1kNRCc3TYRra4tRynl7\nJayHXbozgEy2nD/88dgoBhptT8ds9I5Km8OoyixRbyWjT1SdEb3MbvYdO4Hp\nsLr98bvbUxbRaBDHg7QTHf1NCbEsXO+bKfFV4v0Jye2v+QYNGOvVdGKDs3Cx\nOp4X\r\n=GdAn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6889f0098642c4b4f3987ba353e17a9a22de856b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f43af5633.0","@material/base":"12.0.0-canary.f43af5633.0","@material/theme":"12.0.0-canary.f43af5633.0","@material/ripple":"12.0.0-canary.f43af5633.0","@material/typography":"12.0.0-canary.f43af5633.0","@material/feature-targeting":"12.0.0-canary.f43af5633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.f43af5633.0_1623357357679_0.11077405502229531","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/form-field","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.8415ae585.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae9bbbf1b5fa11bb6aefbbe1a263b8140af630a2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.8415ae585.0.tgz","fileCount":34,"integrity":"sha512-D/tYI7fXj5RrXa8meTIaaeWzVYkOnxx14lTWRsVqNBlRcXiOMSgYHBqQ4kpA4v9a/vSjdte76wQR3Yji96BzYA==","signatures":[{"sig":"MEUCIBrv6uneisa05pbplSvFp43OYkaqyMO+ekERqdfluuTfAiEAv0tvQ/Gn2pnPIAMhRoQi8mjFr4eATMbu+4uB1VG9Cxw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4nqCRA9TVsSAnZWagAArggP/RySxiuQc0dZZFbf7AD1\nbVMaYjrTyHZ3NFMNuTHJ3SrrPdARkPGw3kYYsDFGtTxMIcf554neKoRB2bGy\n6U/zGthVvPGxbflaEP33up5PNGYN6Sxg1Heu17UdKCuxWAN3ZoGf+B2G1AXp\nKBelxEpBXQ6hJgv2CsUx4oZxfh3eEds+IDJy3dIuhGaQlNGYRtH4xIqLKwsZ\nx2eVW0185ccZhLWQ/suKnTw/jG0jh5qFX6NZqtr2ng3lXIV/TV2G3P46aeAK\nQKK9rd+sbY27cQ6N+36G2j0BzkpdSdW3gTdzOhKh4tR3RmHZ3usS/T1XzDlp\nlZtXPJLw8fFEC7I8byhlLN4oE2/hQ5axi/ApUKqh2LGJUhAGwQzRGHJaIrK5\nBKJCJfPe+TefFMabLE8+ea9IVkhwaLfr5XQOAghB4jzw4KbF4JXHdOCskckl\nrC32BrtQndAVsw3v28+xl986LyGt+9NsIkzxcNS+1V4e0mSLrtAaF29NHSjN\ny6/9ozZz0QMsUDHmAylpoNCzEZJvMpjArTvY3JJ6y20VeltgKoW7hYqm+E2s\ni/wSMwYi3+Al/hwHSne+IwxxoUnlvagFO4pcfHv2AE8UCImNyQ9KsPFTLs0d\n/2uMahtR6Iau+F7QHm552IDK56tC5gEKcyKafI1vQFq/XQkqg+ifMzgi2jpn\n1l2A\r\n=Lbvi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d00f19e41330e3956e7355a23ea132e5ff37403e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8415ae585.0","@material/base":"12.0.0-canary.8415ae585.0","@material/theme":"12.0.0-canary.8415ae585.0","@material/ripple":"12.0.0-canary.8415ae585.0","@material/typography":"12.0.0-canary.8415ae585.0","@material/feature-targeting":"12.0.0-canary.8415ae585.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.8415ae585.0_1623427562668_0.03404999454145252","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/form-field","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aacfa5e925c1f4ac418179b19f64033a8d8f016f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.598fcccc8.0.tgz","fileCount":34,"integrity":"sha512-zYTL6EXgUwI2WR6V7Yp4NrJL8w6oy8sJ+wP6afA4OKvph2C2InYIsKNyV+xqIBmydJGYVJFfQKCfb7ujwQJHiQ==","signatures":[{"sig":"MEQCIChCoU86OxGbIsOIEnCmz8MuEEs06hPY9oW3o1C5tWaSAiA6FkCSq6I+Raw7Q6l2YvPavR9NLwKOa3LYvP5TQFPjUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9m8CRA9TVsSAnZWagAAG88P/RMyjr8BJk17k6l03Rds\ne2ysIYO4Nc+CADQH5nAQ1usE8vMb/c8ae9/T2dSSvK2QIgrC0EYNSrJA2c5u\n7K00e3WY6lfnCyWWeKEeHHatZcUSdZhxHMFGgDGThisSGejyKNFcqoCO/q2l\nghKN3O+EpyLJef88e2Q/9TR7vSTBOh65VOkosvihWQaKqjBI8qxQ7qa3zJqe\nsVEI0A3ob/cHtidm5kpXm218PWwr1tOzHl3+mrY8egQTPAg09Jm6wH44dNqm\nbLDBMfxcuMGgDwdqdfLtOM4T6bxY1GKYS78btk/WaNxxcrmT4MFBktauPcuE\n12Flwv1/vSbOwRjUVMDmDfOHyt17bWM48NjcFMpn3+AceBdVLNCzb01N+VdF\nGWDf4LxjiifQoqObObtPzttlgiktDyj8N33v2716ihDh/aaHcMqQUw3jyD9r\naTiVUdGhs19yDM2LG6rHoeprDoMY0SgSi58rRoYT8JnW76NkVBEvyVM0ikM/\ncGZM6ZQnBQ9cPKZ7EcXnpJ2/E/bL/MjlSPAjMKXmUuukwSrDJBa+VmUAAWyq\nL7HvsBjgE9BJlgRIaLb0QRZwTdJb5Dqirj8qsSMgusnEJVc1E7zZPJa1oCvJ\nvmjLYNE3ml99zzWBAYBLnPimBIA+oIfDmVHmNBW1r1POvn3qkYmJNc5b1GZm\n5PPL\r\n=rCvK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ccbc9ce9b0bfd89a7b5d57d3e0d6bc2ae297f66c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.598fcccc8.0","@material/base":"12.0.0-canary.598fcccc8.0","@material/theme":"12.0.0-canary.598fcccc8.0","@material/ripple":"12.0.0-canary.598fcccc8.0","@material/typography":"12.0.0-canary.598fcccc8.0","@material/feature-targeting":"12.0.0-canary.598fcccc8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.598fcccc8.0_1623447996021_0.46001420567185947","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/form-field","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.5d0605188.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a2154b98bf74d80dac5bd2aae1fe46d2444c05e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.5d0605188.0.tgz","fileCount":34,"integrity":"sha512-d3VdJXypGW2R8bxRn+rQWcIcaJwsXuv3MoMTveNCb3Hf1ivOrZ1M1lSDZK3BBjVoRk+W8/fcvk3Do06eQ/Nklg==","signatures":[{"sig":"MEUCIFl+3neE1K9+nWyFWTICfRsJOkOSb95W8ripfjCPyhsGAiEAx55U3LRDvYUU4eNIQHk3+0JYivLX4mB/19v9/hAUVVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5RFCRA9TVsSAnZWagAAgocP/3KLIGvUFnNyZ6H0eu8L\nf28bdHH/YBYmJZw/Jg7Jx00wDDG4uqF6H6HQ1NLyQcN5zvjS++29hdG0MO5k\n23VGhip5EP9MYaHDsLNmZC+EQ2rN1EE7Pjyp8rR+93FtQaUSGCwYPCd27doW\nzHbs+eRZ0VZICwOunU/Qvsg4nJNAbRYuSOecAzKndj2JVUeT/Zvl7r8IQL4A\n2LYDhckkKBOpiepUd3IVqxlcUZIduf9oibpgYxWMSerSfJnYzM7pUF1ahsI2\nClPMMWC/cRDwscAz+mN+drTxHn4MfhrXHFUr8O95RmfCOFk4JUdfIUMdlge4\npR1aXDkxciFPw8T1DJAkfOHew7RHvnrOGGjB6HBlFg3OqJoPnj2Z6lRmTiWf\nS0JRQY02EsC49XlnYBWbXe1JiHCDFgMNUwrzgOCNpVN4SaHeTCPIooCsqqd4\nk/9cKrYV/dQi5A5X6mBF29hI/pMUNQJj5LtiBDCxcR/c6qgTV0P8T0TB++kQ\nLWUv9oOmU0JIoOgRgs9Eg0KDInCHz5W2NjyKHn6K8wcHkuGeucOsMTXC9N8X\nMblLXHKMaPbLrqeS8EhsCgl1Ss+2thzNKaiXRxSIWMemSWRwnKgE4IaBsEpU\ntzBaC04gkTyLPhakUasxge+mugZYsObd1dUqa8lpeKZ5Z/w5Yr+U9Yt9PHqa\njFyw\r\n=zP7A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0ecd220c6043621c1d471242f32f317475b671f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5d0605188.0","@material/base":"12.0.0-canary.5d0605188.0","@material/theme":"12.0.0-canary.5d0605188.0","@material/ripple":"12.0.0-canary.5d0605188.0","@material/typography":"12.0.0-canary.5d0605188.0","@material/feature-targeting":"12.0.0-canary.5d0605188.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.5d0605188.0_1623692357103_0.4336604119435148","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/form-field","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.f147a2271.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d8e91231b0837b264c174ff68f403a7ae55dc4c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.f147a2271.0.tgz","fileCount":34,"integrity":"sha512-Boat0ca5xSLNhupntgcdv/xPa72aKmzielsNTsV8ho7kTKmBq9ML8py5mDF39m2Pz0+5wPay3kuvWtOp1dLFtA==","signatures":[{"sig":"MEYCIQCpkcLuGPZjsUiFdBDOm9ByIgApPOF5JDH1WbJcozi8WwIhAP3FqFJoxA36dLRIeIqLvRFZHa4RCM+1jdT3FcBv+qA6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6t3CRA9TVsSAnZWagAAqggP/3p7Iu8XUuxY6XHz3X5z\nzqp8coqkh3uJN2OwVUSaeR+l0fceacBsFCTUzeOtk7FsuVvDPJwyeP0jzKwU\naR/8BkourXSNnTkcTF4xoZVna9aP+YRiVNvB4WiFN/WGyVRlgn6g8OhPp27O\nJlj04FR5jZVdQFsNXfmAc6gUyjCJs6qMv5VbGVLuCC3uxfYp5w+qD44xiw+D\nFAtv3GYPqfktv5vDKM1iy0DorVQbZV878vQhnl/rD1k4AztYReitKjP4aSp5\nd0UQS1htM7bp1pRZSCIM88FbQI+AZcjeaku+YUsue0qVt4CypxtzSnYFnaQv\n/qV2fmcwiLclgMw3aYshvUDDx+UJE8YmCjdB8zKgRwM4h106d+UhBrUdmoJh\n3Ic6gVgOr/BEyACQ91QFAOpTNwVHTMvnIM2YV0kbzV83DNgrmUgNcmQVM/YC\nCOFIqh7fZ/845Unv++GZ0Env0dROjMsiA8vrYiQSFrLsFafXLSODuHpS49Sx\n0VkaggZWmOvyeTnQHShKP0gbPMa+NDg/ljE4Gx4bqUuM84/zhmV9dBV/T7vM\nPgPDe9SwHjq19/gd9lv+GNUCTPXdYiPM+TvgBW1gl0CWaZBfbS4D0Zogq5R/\n2Ma0kmHDoiDqXPEuV2/9I+InGwahX0r2uyyQIw+7owU+HKF8vYoBi+iMp/Rk\njpfr\r\n=XiGv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"70b871f06c34302277b9eb3064110dd70afb181b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f147a2271.0","@material/base":"12.0.0-canary.f147a2271.0","@material/theme":"12.0.0-canary.f147a2271.0","@material/ripple":"12.0.0-canary.f147a2271.0","@material/typography":"12.0.0-canary.f147a2271.0","@material/feature-targeting":"12.0.0-canary.f147a2271.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.f147a2271.0_1623698295185_0.9208722544796464","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/form-field","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.33579e00b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed5c2ef08304eacb1d44867573beace8ded4a9ec","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.33579e00b.0.tgz","fileCount":34,"integrity":"sha512-q7nQOam/4cXOt9wsHqACeK+pRgDkB14kIWKJTl1K6NZIUQ4C8vt2K20MvXP8qtFrHruhsLO2DusBUo76TYAt8w==","signatures":[{"sig":"MEUCIQC6oo31FoWc/2BzgekrKJLTro5QA1GxX3ESo0m5WQrUbgIgCaa0cDbtsmlZpj53Z9Tvrnlg83o3TA28dHHMHIOxYe8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/KuCRA9TVsSAnZWagAABykP/2+vtW2CgtF39FqDWNdw\nukCJ7F3SfzT9h9Rp4fHnT1iAPg4eBeJZzIduQ/bKGi8oLfU4vHu6cSAzjhBq\n0oSnDRiQycb8csq1XpVdTXNtfTCpPgsjLnbTstFPQRvy0ItsRhuNrJuIua/w\nsXS1JDVPPzrLGtTNbcwZpz9qexHFOfv6QWgizJH0wsJZX/rAEee2BCB/InA7\n/yqJ5Ocg0URU85KTdGJS5zGZseNOgIhsgd3Tn9u3k9hKF7w6EbIKoXNbBYUG\nsrAET4w6+6JG+otMTqGClWcFk1XIZq3JC24LtKghugMoFqZFMtMZWoC8xusj\n9SJyz4DBaXmsCZ2XMkwv464as6fTWifdfI4wfgoJ1XmXgqbuZNsRLUIb05J3\nklreIVcXaFuSqgFr+whFizFah814zFrpNWpdaM6eovq1snlUxiXwnr19rR7W\nFRPQaJU8P1nPdtXNtOVbKC0HzMX7q56vTks1OXqTwY0PEXxaQpFIqoS+phG4\nfN2x1G48UXwMqkYDbUVlXy+hpxsl6t/oAGHW3rFR/yMHFoLhB1HtYs0d2r8H\n9dpuPRy9ynG2ZvJIL7v2lSnHybrazx5bnL9L9d1ruJNvLaU6eE7NN8SDNIm8\nQeQwNJFVYbTVmN2vtpvqILyt6Uw7qL0o/Ps/sMHObd7MQjuyEuw6lgp/zZK5\nhATK\r\n=JM9N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"13a815cd8b945d23ba7ba2ebd6730088fa195237","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33579e00b.0","@material/base":"12.0.0-canary.33579e00b.0","@material/theme":"12.0.0-canary.33579e00b.0","@material/ripple":"12.0.0-canary.33579e00b.0","@material/typography":"12.0.0-canary.33579e00b.0","@material/feature-targeting":"12.0.0-canary.33579e00b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.33579e00b.0_1623716526698_0.22672337680272436","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/form-field","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f361c9a2a391ca64c3c9b1000b102cfc09723c03","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.a6909c0e6.0.tgz","fileCount":34,"integrity":"sha512-JS5ZiKv5d+3HdneVvoBWaVcvf5BXHxfV+fIX4edoCdiW/9YbnMdIWq0Cc3YhRCvQ96KWABAa04bBwGpasCuqEQ==","signatures":[{"sig":"MEUCIAeSkMt+e3qARPjvqoG9TfIDPM26pFAGvpPaHYbljqFTAiEA8BeGZplFU9EtpbYbcfUcPDTIaaWx8GpHdMtr7K1M8IU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPG5CRA9TVsSAnZWagAAy+wQAJDxUC1q82jNfd1uFS/F\nkt7mmAmt0wCvtLVeJ1OBwsGsHZVGJzSadu4oGYwFAgcgQEl5/BYY5W5X2+Ff\nJiEjxB7ll49Un+h7YaumHP99/D08gymf3FMfWC1Bs7f8DxCs5g0ig1fxZjBL\nLfG3P3rBqGqG+aNqNmD3ddL9jb/YpD8Chm/B74evdansIjMckRQJ1Fl1u8iU\nmRgxQQWaKC5F4CbZ8zOwot5c9W7h9Hs3hth73KCjEfg+8HqkV5VVVd/quaUL\nsY+Pit7HosGYWKu+5AdGDLxQbsirXCvOUzbDhH6TASkOJ5CUquldKIpdl4RD\nAbvcKC0oV7fxECnRLPCD9LNiAA4NoAXduMDCYHqI+ZayLL9+wJQ/r5eDhO9z\ntBYGBVnrHG12jagF3RwkpO1YHlBUvuLu+GDrwUngBCQQh7LCQzudAzlcjR6O\n2HDVHIVHQShi41472eyROs+xRV90fsmRHdku0fC1OE7u5k547iPgPaMJmcNH\nQCrVciMiOVZl8ipAtse+RhwbFKuwrc4Gkh4urIvyiuhDKybhD0Kk2WMTy8Ka\nWLI3Z3Sn1pt4M9y74rk1xhmqKHquL8bfmw0LGFTvx5GdAdroUtEJ8keQGzpC\nrtd5/Fayn9hG4Oza6gh9htT/DTCA75NB0d+h7xCCNhqM6G2HBJ7TtuV+DYga\nIYmS\r\n=eNeK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f4852598d008bc1750e5e9d2a0e828aa8804f87f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a6909c0e6.0","@material/base":"12.0.0-canary.a6909c0e6.0","@material/theme":"12.0.0-canary.a6909c0e6.0","@material/ripple":"12.0.0-canary.a6909c0e6.0","@material/typography":"12.0.0-canary.a6909c0e6.0","@material/feature-targeting":"12.0.0-canary.a6909c0e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.a6909c0e6.0_1623781817303_0.08387359983144416","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/form-field","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe5a6036b981eb0827514d722979dc970efb040e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.c18b5925b.0.tgz","fileCount":34,"integrity":"sha512-Hdis5tUNDLXrV30Rq8IbyzbMwF74Ls9FiJRd1BinNzRKdbr4S7Y/2Jjq70fJxMgbSHMfqpf4RK7QcuOPc1QgyQ==","signatures":[{"sig":"MEYCIQCyDrbvViQpyy3R5FUgKylyyg2zV/euB3DHp4eLmcLO7wIhAKU4/5dPOqRYx8LYg1zOEO6Y2XAnWGv9obx+155F/9MK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRWvCRA9TVsSAnZWagAABc4P/jRUKYB3/JR5gbYz7rxf\nPXqZPoch53Gl44QF53aJGJKz9T2v3PUCqcU1qU6SR/O2voVREcwBQAOXinDe\nZdNVFHIyXkvYDW/tc3xf78bSYfU88EUVFRO30RmSw4PzhoN29fD3WTGQbo81\nfXTeyEfN1aEG41Ow23f7h5oZa+5FVvAf7TMemd5nPKr7P6I2p3qOMGf0rYMQ\ngkhZiBx5Wfso024VGSMfxaWC7GLF4lpyrfTxPIlg+ZSLj/Zoi4NG80Hy4Tnw\naOpBtdXcoKkAB2PIhT6lbUkZoZufcDy8SMLnYNzIcGAi5CMDbO4OrLYQVz5g\nLIA3hEwwjatluTvjoLhwLuBYXHc08XlwDpSStH1uJ5lx6VIpEggPJbW0O1R1\nSPa/BO3DoxEqqjy1bQ8lE22E3oWltqf3gaROTlnceQbQMA3Fzxv7VLiKxMZ2\ndiuW1IQ4zn7PWLO6Boqt1JCl8r6cPhrVIlgxzZXiVaFVYO+4Wxk++Drf6lUl\n4S7YrBPEV5mMKWauMNrO2VvYlUonwyFSffS/vjsWUuhZsIBFyF9qB4bON4Mr\nSVZEKIr+BveCQKY7XOCGsT1+3RHOG4DUBoXesPO2IkKYzPc5PeA9pqgrExap\nItgDY2F0JXRYnM1uamFYl0Ob+8ugsP757ak4z5FXV87RPiJq69QI3/q/NB01\nR/hq\r\n=BPLg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bc767c077b93ce415f2505e54f329042c80b0d3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c18b5925b.0","@material/base":"12.0.0-canary.c18b5925b.0","@material/theme":"12.0.0-canary.c18b5925b.0","@material/ripple":"12.0.0-canary.c18b5925b.0","@material/typography":"12.0.0-canary.c18b5925b.0","@material/feature-targeting":"12.0.0-canary.c18b5925b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.c18b5925b.0_1623791023302_0.02445084884770199","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/form-field","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.271fff902.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ab60b871b7f7a2b92f865f8aaa39c1233a354a3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.271fff902.0.tgz","fileCount":34,"integrity":"sha512-HBBlz0zYzwSqMRPF4dR2q2Fm28uaMBByfU1hDxTW4eH8PA8CTX4JQGvAGMPiUKk9wimqOkRcV49Eox0hPWC/yg==","signatures":[{"sig":"MEUCIQClPZFnk9CFDV12lEAPTW6abQ96UNkt742wGj1koe8FrgIgfUozxZbrEnJjQXxBNFv0MEsJGeV/dbwGISuK+ZSwEPw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS7iCRA9TVsSAnZWagAAhdgP/113qhs2eFCq2LnYa7YG\nz/zN09zNYD67jgfJkcnuc5yq5IFuFeKTLu65M1FRlOo++IdTelYulohd878h\nL4qQs3O3Pgaxavs8lNetYyQnpS/MhkcpCF/LSRko26WvQhSsCyFOXUcD0eIb\n9j4xK8ZCCsHGwK3Ac7n/IeBL+1g/d4o66eTs81ImoOO8QwpbbLjdSoqpUKbX\n5ie60K7no69T+FQWG5hgH/76YTX+GyWgtf+5OLnjoAq1CEzvok60kmJ67eeb\nbhpuu32cO+NMjVjM2QHsJCTD0FM62O1E5QanUWaiG5Rl0vN8lYW5I0QDVuHu\n05IPoDWu+zvbx8FBA76t06gJD1DjLMbty3QO8Z9GLEV9iP8WPtA1K0j7swtW\nPqK5PLczpPkJSnLrl3mpI3YT2oNi1cWw58gEWvzRXgClLveYTq6+EJ1r0r0x\nd41cFUJMWV/hW0C5tooRf8M7LWOrlLaUe4PD8KZHxX0+KDfprChx1CUGYTG+\nVX7JCdug8zQvQqaAkKfcVmNHfyb1aQihfcDS4QjQObZeaO1YiujNqXKSnuzP\nUBUISxnFkgM3rxJi/QicP6CH+3jnhmxELxFN4N1Xjtn8LHpSqgN7SJ+gFKLk\nIwyYBuZaSZSkdbRvuklzRGYvJAO7LIbyTdOs3/sF6U+8cyEVjRlVnJ2vI7+x\nVDZ2\r\n=/Iyf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4306227bc7e5f014c5e961178b436b394f0dee6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.271fff902.0","@material/base":"12.0.0-canary.271fff902.0","@material/theme":"12.0.0-canary.271fff902.0","@material/ripple":"12.0.0-canary.271fff902.0","@material/typography":"12.0.0-canary.271fff902.0","@material/feature-targeting":"12.0.0-canary.271fff902.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.271fff902.0_1623797474456_0.8468691776373907","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/form-field","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1833167935a4e7b55adc8041a09ac3088f4fe2e0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.7ea2e830d.0.tgz","fileCount":34,"integrity":"sha512-DN5q6VBbm5pevUz9oztzPG+U0qIoD7CFO/n+brY7i4/FEayuyR68wewtL2vYPiiESpYsbtBB9cLj9ZQ2FiJBiQ==","signatures":[{"sig":"MEUCIEzQIyENI7ZR7tKDyJC/3O3nvf0op8Ae8dUAkzuD9s5zAiEA89bIOVLa0pFvm24n3jaTy7On0hmI5pzMH3baq65rOcg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS84CRA9TVsSAnZWagAAE+gP/2uVN6gO7rgFZRwYq3Yl\nvX4Tu6+QxEhUsjFT06vPH8jn3WHQd+ZoF0fguiC37nSjvxiX/DbjVjuaGgPV\nXKEwDEUCYapItP6chEzvI5B9VrWtGHUHmKE20ha7jqjo5PY8/CIqi62OXOgS\nIZEPS2OmphWjdPhN5vycD53C2eL8PX6Hj+VOf3vlD2pz6Iq8/zI3Mw9iJ1Hz\nEA7S0SQYsvTH8AviXa/d/Mx1U70wrhoF9tPQcKNC/3LKXC8ue7CtJjboTa+Z\noIItR3kKOCf750j+wDKZYvSOYsITccpoNQFxxTHvpuFiQzUz+hqK36sMjTou\nJk50zwz1niGrhDBKnJroOrU4+NFcXc8klCPjLgVUYdCzIytIK9M/7wcxJjZI\n0G230Ph6Ud4ZppA6TJ0XyUVqYAzxzAlbUdkWxUWviSP7+CEP7uVTpoybztMv\nsDlNNVdMHISIti34OSIDMD2+aCCafIXrZnmFvFuvMNAzziDnBAoXeLhn1BfU\n0LqSTc1FR8oTJpq8yfg3DHhBcTsruvwXy6gvorpOULrmAx0lUtfg+lQ99kbj\nJcYGvyfFN0eRDYcQSV03Dmw0M6ex3s0GryZzRJrTWTAqXSvA9z9l+bOM2GIP\npJTk83OjI+wZhVV7aYOu+Rp0iSU8jR6P3EUm9PWMFGvo/Uga8hYWRS8Q31Ng\nFrVk\r\n=4Fes\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e1f3cd5692e7f4572664681a049ec1ea1548eb15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.7ea2e830d.0","@material/base":"12.0.0-canary.7ea2e830d.0","@material/theme":"12.0.0-canary.7ea2e830d.0","@material/ripple":"12.0.0-canary.7ea2e830d.0","@material/typography":"12.0.0-canary.7ea2e830d.0","@material/feature-targeting":"12.0.0-canary.7ea2e830d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.7ea2e830d.0_1623797560111_0.4205377565643693","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/form-field","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"155c09ae4fa030ed5ba6eca7f5f02a2635771d6e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":34,"integrity":"sha512-43rMHl5L/s25KhSpyp/SgyyCpMIdtQ/I7lIE0Xq8eNC4EZXh0LwOz8WtPI3d4hx6ThM1tivW6cdFA3UT7RfvXQ==","signatures":[{"sig":"MEUCIClumkMlrkCcx8BbxJ0c10XBQua37UBuut8J0W9vlA+gAiEAg8S31ppLxyoInUePaVXaWl8iEyPjfHKMtn96bhxD3ls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymfRCRA9TVsSAnZWagAAhNQP/RZkhs/iM9nsbzTQ+YDB\nukObB7F4chl+rVTm+UaPQHymDYcItAjLkhm2Bz1/dTp0BhdFBgZz/Z/Gpc8j\nVGIEuI/cm1wUMXiTx/RgpMQFvLFSJGyKzpnehiyhcfiDG592eFJljduAIw1+\nzwrxW/4o0H9HI75Utu9Ftk4X/MHJ+ELwnwxKpQe2c09PkHeVxVGAZjTVx9Sa\nOW8BTN2pDbPFQU+okEK/DJN3l986cgOSsKzRnxMumODix+nx6+NpXp94+ArP\n2UMIQib68FlQzcjk7fRuz3wb9GuDSZOuw3oY3J359Mt4H1K7gZONiOp6I41T\nEgKIQgsIlD0/I6p+j88XUx4TaPfyD35fRNUADOJUzcoQ2FJi4r5t60zPABrP\nOE+h89eOaq74lbN68hAWGD/nC7MK1XEjPy79vvPQQtERrbv4VQFfG1x7YLs7\nwr4dMTDlRbZsnDmThWo0V9uoqa+A6xutZFO8vyElSq5NjFny9gq1B1OIVWAL\najM1e0bzJ9GiuBFN08NxWETDt1elBgPMGgo0wKlfMOh+es1Tb4Zo9ezSjYoD\nynBUEREkZ2yq/FPHuY7nVM1ShHCa6WhP7EM6b8UoL27bd1wSP9WQJP+RPr/r\n2SjJHYBk8L+glVwHEnrjHEpBNmUnHC+hN+6NkothazUWouH/AKMoGyWPmFnm\nkn6e\r\n=7eWL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"32470ff9121448fb2599b2985e276f51563ed4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d96f0a1e0.0","@material/base":"12.0.0-canary.d96f0a1e0.0","@material/theme":"12.0.0-canary.d96f0a1e0.0","@material/ripple":"12.0.0-canary.d96f0a1e0.0","@material/typography":"12.0.0-canary.d96f0a1e0.0","@material/feature-targeting":"12.0.0-canary.d96f0a1e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.d96f0a1e0.0_1623877584837_0.3375403242824042","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/form-field","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.a6183801a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58d0f9b5dac8d58c829c7071ba75739272a9b63c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.a6183801a.0.tgz","fileCount":34,"integrity":"sha512-infb/xRkqPoqAQ7meVZIqAa+3vHP+7IA06mq1I3zTjdSMgvdVC4hIyqE4jPT4Noy/zi6rWrHQNTrEVxmp8STcA==","signatures":[{"sig":"MEUCIGn48otoJr2unGwBbOBmsy9HbOLhhIsjkYQmK5kjIYDFAiEAvYeyrDHs+wSZijB+dlBX/BQimN93KzaOxKiY/boJG4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynWtCRA9TVsSAnZWagAAC/wQAJ6PtWNa2N0JLN8u8nVR\nMHyQbUhI2Wn9lySrxcRcWOTDynO8qvDNyn1ma2zVbEhX4OHfbReB1RlYBI3+\nDUSxsiMWlxwrTWszWAObUHshkuhD/uPry85YPf/n8wVhMMSU8g3uBC5a39M6\n8ZBZFIplAASLpLZ3fmzvWlAI5yFb3tqAByzxMCHRO2mlyxyLvBR4xCySKl+6\nVRVHpVcdIqRsGItC521/VQJES5j8DgxNvgBlulFp7KS52sfIfNqVleFnmFHL\nrKTujuFyCYNxZ5JeOvCS77oia49AZTCIxQOhjlWWQrkrTaKpH4VBFj26u7xS\nJA1ttdJA8WQukrYQnmKZ2V9mHvbSR6tDfKJqEa4bbxOh7ZnNHRznMvTw1LWQ\nsIreXX5LjX++4VYR50HsdA7lv30i0UiWqj+AUR+EwqtPDTLmnIYW5Fza3I/E\nKU4AvrXUagABf6BUbkhu9nW1nlGhmwpN8k8Mf9Iq+NsaRq7CssdFbqXVF4tu\n9bvAOM9suHlNLQVWOZR2IMlWyBTMYAXzZBYErAw+pLurN6hUmU0clEQDqloV\nJb3g49t+2yjeGYoQjyGLQTXeBtR9mDWFUhr1T7m59qWsgmFB5v8ldffpYilS\nbvojKSsgtokem3p+vqhlkbcRbeu4qarb851gE+0k15bnX68LThxc9RCorfvg\nxsj0\r\n=u48R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b5eb42f66e2a670e1f9573b4feb1a600a95b49b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.a6183801a.0","@material/base":"12.0.0-canary.a6183801a.0","@material/theme":"12.0.0-canary.a6183801a.0","@material/ripple":"12.0.0-canary.a6183801a.0","@material/typography":"12.0.0-canary.a6183801a.0","@material/feature-targeting":"12.0.0-canary.a6183801a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.a6183801a.0_1623881133449_0.5240314631884386","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/form-field","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.940550232.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14329161006aad23f0d38c364fecdd4a31ac8fb0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.940550232.0.tgz","fileCount":34,"integrity":"sha512-3xia5VqdfhD3ClMYYFVxgxXykzWKt9ZW2x9a3dnuRg9njGex3DL31MLLtOxqGi5QfXu3hhwB7H0lvJ2Awog0UQ==","signatures":[{"sig":"MEQCIDiG55+ocOyQip7oTpj3N9nt7+ZG0ujnQRYZmSSsYDbSAiBXEBvkR4vaxfKkXB6n8Z/+BoMW06LLUEQPvA9fXIMhqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6UlCRA9TVsSAnZWagAAR+IQAKQjzPYaUV3yqc/OnNt9\nCLsH5aNsoLfbnUtEjrzADGIqoc7fsDKOxCLocx121juJhQ7GzGh+q1PWxdkZ\nwii+Cmo0XxUCA1tMIjEBSdg3OMOFHW5heod+DxD3xUkMcsnH0+4yePOEQv8j\nXrVeDluNrP34Qr8nRkU5V26FzntCSCdTT5C1n+qblKDbwiNo5KHPO0Xftrnw\nHkd5EBq3pSSWHS7gD0GzI7ZBKOv/trjl9k5vJaP6vLi0weisRqcEDq2nXSgU\nm/M22YGhv/XBENGgW5Aexl9dJgasbn/42PYIOUhG41iEzulGDJ8Jr0p5NENy\nqfTA7t+Fc9qQ4rxYdvCVsSooRbEmv0g8qelTSrSG2oJFAK+pkxXWKb6Kgsvh\n/xos6iMHV6wiI7Ks99y6sjkN+DSm5ugX09TYHdUbru/I90UafEKmvDUNLMHo\nC7oF8ry0DbPcXipSfb9dUTY8nRbrKrL1XxLDVtJxq91EpiCou3vPdRkgBv5Y\ni55/6narOl+/3VREKpuy1lhrc3FU/lnhwEHeKQxtrtPckvcGgD8bf/6GGSJb\nzBdFOE8wqbK+5n021Mt5JctREnkhSqJ2yziQ81t5HBOQkswsvMtp9ARcUR7a\nYk1DGgvfkSWVVOXH3cIt51jTmShgYkFdok0TgoJkBFu/A+9x9o+g/dXRRgo2\nUUzD\r\n=5iz6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1d6560428828a2c7ac90d050a744265e63c8563e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.940550232.0","@material/base":"12.0.0-canary.940550232.0","@material/theme":"12.0.0-canary.940550232.0","@material/ripple":"12.0.0-canary.940550232.0","@material/typography":"12.0.0-canary.940550232.0","@material/feature-targeting":"12.0.0-canary.940550232.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.940550232.0_1623958820759_0.22746197232399323","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/form-field","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.f705e8048.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bcf4c9d8939e5b6bd83dac2c9193aae95e0b10f6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.f705e8048.0.tgz","fileCount":34,"integrity":"sha512-fwslJAqjphOVaq8zHhc4i+FnywA22rNP8U+OhogBkA19K3CqbQuSEIp1rhvsvbgg9XHdfIzkSoOpu3Pr5GHWqg==","signatures":[{"sig":"MEQCICgGezoe97qsh/e9t1srYbkV/VqrIrsbe/J2/flmPwjpAiAxRKq9AR5rpKGrJb55Y41OQRU1XDplhsAjdfWBIe8Y3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLq4CRA9TVsSAnZWagAAChkP/1VU9gkLIHvazxNB5Cp0\njDKJcHRMVtIcJeKyjIL/gB8BlZwkmsg6/1k4HdnpyCFUeUoOffCtEw6P96iP\nYS4FhsRdEuVcvHPThd013jz58HKKNWSXkbnpmmYgJ7LMSYF1UzP1WsngP0wx\nTMdxOkyFzPD/RldIJK5xprz8JmoI0Pqwqx7kv8A/QKh+79mMpOXCFvIpZT05\nIILqSOtmKpIGqKoHryrI4UtM0684OZHVow3n9UCye1i2KXAilVRM3PjzMzbc\nGYJAkTs2Pcy6e+ovgt3wcej6FyqsLplnrm8TUhUHVmqaD9/JR6K/o0TDebIy\ng1JRvvLw8cLA+Pp/l74sCFMfBkQI1ibXUX8lpb57hVf54phBdgWj6hE7fRDc\nIeerhrPqmvFVph/JSEKEDfcoYq03WTJYb+9iPzXPEJ4IXp4wrgwm20ggcNMw\nE8cEqhjq18b4AxKMc3MWw+kxUqSrxsf50jFMC9cH3M7yyFSFFeF++53R0F7j\nJtueo/SmR+NdVgg2+6M0WrpZwSOcUNmIAvNiGPXOrk8uNxmxabjfNqjhZjCx\n7ScOsGYScgx7nltIIjQD1s/JnTzVlgW/apVxaDfP/q/55tipRQ5xDDXUauZR\nwfc8TfDENZ51ULsDqCYvNcWwgISQUlAPPl2kw47YsKqWlLXvgW+Vv+8ezlca\nyeE6\r\n=I7kM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"65fc1ee152f3abef35713b70962e3d5b848a5e78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.f705e8048.0","@material/base":"12.0.0-canary.f705e8048.0","@material/theme":"12.0.0-canary.f705e8048.0","@material/ripple":"12.0.0-canary.f705e8048.0","@material/typography":"12.0.0-canary.f705e8048.0","@material/feature-targeting":"12.0.0-canary.f705e8048.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.f705e8048.0_1624029879722_0.3988059755038462","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/form-field","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.08d791f37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1702fc2f7b5afe525d1b8c9bae27414a21a3b947","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.08d791f37.0.tgz","fileCount":34,"integrity":"sha512-Fv9Lg8Bz8edDzD3peoj00UvcJ4IY+rJcFarSSIn/lHqu0go16Fp1j2LDGtqLAydgM+9vbQn0xE14MGyB2Iwl/A==","signatures":[{"sig":"MEUCIGQLOSkdW7MFTZhsoVhmRllPUxhRIgjp4W+KeYdiThNpAiEAq/FvsCHBa48SAPzo57y/m40X03CNrBP8BEYIyh6/DD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQwaCRA9TVsSAnZWagAANLEP/AgewB22Y6o2LR63XP2c\n7mPzPWRs1CEOX/zGlCSQ2jo1qq7+bntlmXyYUxpX2eT0d3Td1JzcIaLzu+L3\ngRWGiIy3MuBylIpBOuXq1lv0NKkDvj8+pjqEUmnGVWZTIRH4rbpFfHwmyT9D\nni6778kUeOvBsbrATanqY6iorXgOjPvejOyQdLeVQvbBFLrFtxIJvbgM4WKR\neHAkjlvEWomvm4C1CpDTpf9ysLWfdv2hTUkyhLW8+iII7M7dCRU7qgL8QfU/\nfcabvierKQm+9bSvqshSl8wTol0W3DxTX3+jukQzzNqXid/ke+B26MjQYMrf\n5P0+GgVcEWZWufw2LPERh9h7+ZFP5qyGXV223/Kroen435qot8/t8pA2I8AU\n3Ppw2K75TkpVhwhNSBBN8fVxWSf5VVK85HtPlppHm+ElHB3B7r+5UZEq2NCl\n8HcpwsFzm5noQ50MsarBCQ8F1IccZvXSkoZiKfOWPlseOzMlaWFbFrhi8pM8\nNI8hf17ENDFzUwm+lXcouTQUlWaM/z8s5c+e5S3iBLQKAPhSwMvz/4V7q8xT\n2l5MwgGIMeS47a5yfjKQnSk1FG680GJzWS6Fzi01z1GcixERRgDDhmpC4+0D\nxdMh3uj4J2z7eMYiv5YWYgh6HsCMbbyRePL+8xa3s22ZqDvoOhoAXZi3tXts\nKfYn\r\n=2Vyk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"854f301ec7183c3cbd2e62f9ab541f21aa6a459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.08d791f37.0","@material/base":"12.0.0-canary.08d791f37.0","@material/theme":"12.0.0-canary.08d791f37.0","@material/ripple":"12.0.0-canary.08d791f37.0","@material/typography":"12.0.0-canary.08d791f37.0","@material/feature-targeting":"12.0.0-canary.08d791f37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.08d791f37.0_1624050713340_0.06238353734681823","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/form-field","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6318c6be8ba880ec2ee0c5d3fbbb23b2089f0670","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.e38d7440f.0.tgz","fileCount":34,"integrity":"sha512-ZqmIH3WK4j9mPTYXJSnvq41TOxXIEt0WklZv6R7aXi49pS2xWaOMF8xcnhXQy8Nu9l/bBgWun7wy0HCxzlcqJQ==","signatures":[{"sig":"MEUCIQDDytb7L/735cDsAvCIYrzrt6AP2IwAqjU+kUXH2qchLwIgTcux7gEB0LXBTflyLpu5wqrGnNIJQBXiuoI+DWIXPHU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M8VCRA9TVsSAnZWagAAMdkP/00u2eRnf7lvrE/niU8X\n7pmK7QFIE2ICsPlEgsvG0iM9WBRl2bkG5fgrV1G4mD41/jNAA+vV/RAIjaI5\neDjmuAbodRvWjgP1Ptp2qkl+lhdZn7PjQtNVgQuhmQLIlX+YpU7QWbJuAQfS\nEqG00v0pppr75J+PcR64BwOuZtTcVP5TsnsjKCqkx8HMNZxcQwwuD5wA4xJ9\nOfm2PweHC5E1C5BXBZf0pQTJ3mZyC0Cy+I8IgnHivIkvhmzYvfJteE0lXj7l\n1eSdGJHNxSOuQIQrBaRU3NR0nw1kiCeyG+aRp8Y7NDZM2UIKHvGhfZj0bVww\nMAM2UMWUYvA2ZIxxnC8PiWNeWJkFtegBTousrcNQ/8Cz/Kfw+KnZkxB0gzAZ\ngnyUevu1AXdnLt7tWv8TE7nKr1vbJZhrleO+0jOhuYOt/d35/Hy8vGR3asqU\nNtS5IJgPnluq+8ARTLAMGLbAGaT+OosDhfiXn0PGGtvFg1t+Xn/e6QCVSGcf\nu+t6EPUKxfAMev9DzFSdUq8AolckIRpyvDTqooQv5sy+xYduH7CN3V6Zkhn9\nDHopmzlsLBfEtsucHGdVHJz7X9HLgMwTAYHl+tmOIh8kHHTrzbn1j+ywUY9P\n6/sPhNSgioYElZ3RtOCgjS71Kaq2lboOOcS3VV7fS/kBA7j19h9bu8Xg46t4\nOmSW\r\n=5mO1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1d46835e968c827eb3b359624ebb85f8e3ccf528","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e38d7440f.0","@material/base":"12.0.0-canary.e38d7440f.0","@material/theme":"12.0.0-canary.e38d7440f.0","@material/ripple":"12.0.0-canary.e38d7440f.0","@material/typography":"12.0.0-canary.e38d7440f.0","@material/feature-targeting":"12.0.0-canary.e38d7440f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.e38d7440f.0_1624297237358_0.18316883851315202","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/form-field","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79bf38227c78f04a1f3b093b1816480c1265bf34","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.75900a5a9.0.tgz","fileCount":34,"integrity":"sha512-2K/ki7AZXR9I32gw7Fn14uU1X2M6Rr8zgAa3imiMfQVyqRELinIa0MlBroYL94KoDgl93ce6jPQ97L6YtjLWMA==","signatures":[{"sig":"MEQCICznL0GD3KjuAqpRZHCbbt68porJcvbxNBIp9CJZfj/NAiASoVymu8bjHr3tuWt/efnQ4N1PZLt/6tmwBUFPjHnZ5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NxUCRA9TVsSAnZWagAAkU4P/1j7cCQc/ghC8TWya6aN\nAHp8+5jFrUON5Nbi8umcFnGS0quBeJRpM+1i2wP8+6W1D+OFfsvDMpByYdD6\nzbBbi8LLGDL9CMBWLIXQuSwxx00DKSJZG/pc44tmfowxooEYx/lNCc4CM0Vi\n49rQDIhxivnqWkoVABpZQADn4TKZNGwyunqTHh6DvZtGN3f5Xs+LMVjsZeI3\nazTCCIacpvioCoL6j3GSwEZ3D+1DD/4dJTvhrvYCU3+UD01kTcg1kCBRrB3D\niuGZyD+tCjoRC/yNL3wAq9AzfWPfaVRb75qykCXycCf7ir8YWds7re7FfD4D\n4TMveOg5us8FqeSqrAVhlK8SEOhAG+2T3h5a6sk13JDmIysBu8Uo0ZWa+ATM\nYwNJFULOrTt6VptcfrWFJnY88OgHWVb+tLCjV6lwN6eyTeiFh5QAfPv7cZ8p\nDTE89qdKd1BaFw/6wcQpmbLPyXjikKToiWVOcKtoVpERn9kIakQCs5KPO0LF\n9kcmMWXnY1nu40/NIzdOp9PjJsMOUvu42ww/H5XMhmLClR2n03MzV1oo1C6b\nN3JV51yGTdQu3QwcXQSBbVu/hA7x0ajFEDUx9q9N8WDXjp0IPsjWbPrh9bsc\nkX3DNYbSqpI5VuSM8Gh94kVAn3JOd4ibKURr8P6/aK1DTe0gbQ2ncCdYucno\n2zz8\r\n=Lkw8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f08daf05a41f44cbb5e5c07039e1e165d123c405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.75900a5a9.0","@material/base":"12.0.0-canary.75900a5a9.0","@material/theme":"12.0.0-canary.75900a5a9.0","@material/ripple":"12.0.0-canary.75900a5a9.0","@material/typography":"12.0.0-canary.75900a5a9.0","@material/feature-targeting":"12.0.0-canary.75900a5a9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.75900a5a9.0_1624300627737_0.5422377202805908","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/form-field","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8846810d654bcedfbe6f0767adf988e52590db82","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.33e6f50e9.0.tgz","fileCount":34,"integrity":"sha512-FDIB65UhTfYmtwNMuTpGU6Pu5wfw2CTQsHTvVErPv3aLx+I+5Myj46WbQxPVRQskS1VHOz2lCSztpiBSnGCBIA==","signatures":[{"sig":"MEUCICkJ1ham5abhqmLv8yyeG4TEF67dzJXl4XPjvlndl5CPAiEAgcN2yrRbtObiunZrtfRNH6aZslJsQubleL59yLIauCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nxdCRA9TVsSAnZWagAAxjIP/3FGi6ext0LE0kMNHA7y\ny67ndOkTFAR8kfLHYJd1zq8iPnXoj+tk4Fcsm4cQ3kLR3TAp/78kOBIeM0cU\nxsCHZH0c/BKB8e6n/nsDbxIAraaIEDNvimJ3cLkihrbPumUGh8pG8IfLS3tW\nz8LUUU16pP3IF0wnpZKUAJMG7K5c+5q2dW5AUxSIQFQaG+WSfSp0F1zfmEo0\ne1/kEhuuHkGl8JkAnaLGZKk6bmi+uu2cI1477hgtMUtyp5btziu/F2JdXE5v\nZRbx313XZREnIzcfP5LfdxBe398oSGy9Xd+jNQWynmFld01rBZDKd956Q15U\nDzkGJqDQv6XLPt6qOGgXsA0Jv7g6pq47p8aAD4zPRxbdBs/1Rm9nYIiBFScz\nUoJalT6Y3a+B1bLv751UFTLoF804F83G24FoseLGXSMz85DnsT06vlZWIzgu\njynEhS6/auGePLG3RiFfIMMwSIFE7xyNUMxlTcgj+gUE9bNLbkR2efHU5ydw\nvOeasgJM7cMPozhrONOnC4l3gQnLJQN0uKdU6NYdCqR7xTgChSGEVBaQAf9y\ndVaPXRap2zzVXkKnTdSfqtKQnZyXHveOQ0btUV9T0tOuNDYI1NQdscrfHd8U\nKJwxJtrrEaCPKfXCs5+DJVolSE4QBN+2I6HC8PVL29mHqYKi+FTcptk7k5ls\nOjRS\r\n=fsYz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fb208c22fe558f863d851b5bda74038d5a3b09d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.33e6f50e9.0","@material/base":"12.0.0-canary.33e6f50e9.0","@material/theme":"12.0.0-canary.33e6f50e9.0","@material/ripple":"12.0.0-canary.33e6f50e9.0","@material/typography":"12.0.0-canary.33e6f50e9.0","@material/feature-targeting":"12.0.0-canary.33e6f50e9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.33e6f50e9.0_1624407133121_0.6486854414299055","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/form-field","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.8c685301d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3a6950acce89197c0bcedce6e2e762fae4a0d448","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.8c685301d.0.tgz","fileCount":34,"integrity":"sha512-cF+E2F9v3ovF2hBoClBVYDbYOA1t1Zo/Q+qrVP07wT5SLI5qERitePYIuaBanFEibhv7plfDsuXT6CRqwQQ5zg==","signatures":[{"sig":"MEQCICGI+0piG4KPDxTZdCUSfiijH573Hmg1TpaQSFfgZteZAiAwgT7flUyJsCTVFkwcsaUZ8K2bbHuilcXTOX9/ZvZCjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03xvCRA9TVsSAnZWagAAZAEP/2sKYFFY/LcK8IGgT7dr\n9ejEF9aYqEQ/I5EmVItRCHFWFE5vw3rSerU3PHuC142uNTCxM4m6rUmBwYLY\nQWMkvk/Jk9w52wCKS/7AWLSy1u7xHwBAmvPAqxAFiq22Bpe1qLRj6yXg0/U3\nCXJZ/Kvr1qdzaIz3Gkjcjyh9Qgtc54A2ZNaDA+wBKvs6u5sS+E94IToYyr+c\nNXQU/pz9a6jG6/FKMO0T/GOvSapMSXv6Vd/3FzHPmuZ2v2y046qYZhXtGbFk\nPSXJu/I58m4xSbJcZ45o86SLZOHJjE2KgV2z9W5wEh8v+CzZN1emGCLmoBmT\nfAgRqaYu1M8o3I4eWkhEZ+NlqJ2igJ3B4oabXEvFbH/pwhvmFsTzXz579tKP\nHzC1kAIJlZOSCo7UtFGdNmR+1sETatZ+KnmhRPnuYqXC5ndm4lY2q4fOL7SX\nJST8YVGg8NMY1+Z8o33kjKJjYnRQ+kk5Xack80Hr0AzmbSOXSUJpaK73sVfS\n/ns5BaMNPauaGjCVhY/PUwfk24Y+FYphAKtAKy0EZBaJbQmdTPWCqD9D0W8/\nWhUsKwjvTUQ1r5qPzUYU2+eBAqqXdu045a4Sm5mIZWwVzh6qobQ7a7UuD2uh\nL8sKve8qYeiZimYAQEnDumZCis8tsQQHCgO7SpGhEAcy4oGQfiNcLfyc6tDa\nDu/K\r\n=zLGo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"43d0ab810254e565375b55ae118522d89b7e9254","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8c685301d.0","@material/base":"12.0.0-canary.8c685301d.0","@material/theme":"12.0.0-canary.8c685301d.0","@material/ripple":"12.0.0-canary.8c685301d.0","@material/typography":"12.0.0-canary.8c685301d.0","@material/feature-targeting":"12.0.0-canary.8c685301d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.8c685301d.0_1624472686607_0.5531120586494433","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/form-field","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"419a97400a7a1f64949319bc36cb53596767e9fb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.8c7d994ae.0.tgz","fileCount":34,"integrity":"sha512-9mCoTyEep37onxszgoPJMqothcyrnc7sMF0/YB6aFSbfcgCzrb3IHWHPJNd3MMxM2Mr2GjkLc2kffxq489XY/A==","signatures":[{"sig":"MEYCIQCK97CeeDhmY+ZQEhwMhjgVLaZvOdBMiacDu1ig1e+EEwIhAP+ZwN8vogA8zTJ5OhZLNd5AuExIY2Djo0UJzH8iB0OV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04smCRA9TVsSAnZWagAAL1oP+gJhiS6F/ADZv88r1NyG\nYScCUWUURsNxP4jlfpC67g4kXkax0/UQfCir4hDIYXXmRsCsrmpxMwOdxV3W\nfb+IF+rLjtC9pEAZkxyrY/0dY5Uh/xd90G2luZeXSc+huUF0mZktFjZewW3A\ntG7gSPwuzKx74hGjd2z2SKlMD2BCfqsvnGwQqsVMzhIb2jmOpG42OkApIHiv\nnfAXRlf/rYgnIEgkJo9joiWj248niVpBRDq/bAAsXXd0C5eoNz3TBQrzKD4P\nc36N7w86rGjdQH7lfGtXClRmphmLLvG7pWnNmbEZyQ572ZpLWdkZ2CM7wYhc\nszzpdLPjJGWDv9JvGYe5VvGboH+JP9NlRufQW3G0ltHcLMZoVCboV/p/xtUj\n/9m8tp5o+biph+EmAlaZNGZLihm7BYhgaZo9IXniqtbRkaAO2Dwh5Glqz8Bz\n7QYBp3OUkwjSDFwPuTHTlTDJ+LzFNCzpMc0V59jS3XpOK2Q4g1iv4aEsPjEP\n5nTh44Y7v7Ni0NMk4Zef+ZSOqtVA79EDOooES/GG2DHkWePiGyN/feUKfPH9\nyr6mcoAw0344hSBdQ4GG8S6WvFmWzTKh+Ozx8LYBRyik8LtluCiIim12KRDC\nr+/Z2n3hbWcwuKMeouxI1fQ/BufzX08Ek9OsbwKEwO2gsRrYSMVWle9mB+JA\nwz/t\r\n=E6OM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"85693f86d68563f451e95113f3d03a29fedcf142","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.8c7d994ae.0","@material/base":"12.0.0-canary.8c7d994ae.0","@material/theme":"12.0.0-canary.8c7d994ae.0","@material/ripple":"12.0.0-canary.8c7d994ae.0","@material/typography":"12.0.0-canary.8c7d994ae.0","@material/feature-targeting":"12.0.0-canary.8c7d994ae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.8c7d994ae.0_1624476453849_0.14291397921478244","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/form-field","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0de458d183acad4a0bdfbd136fe1574aa6b130b8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":34,"integrity":"sha512-CeKsbYUNOyaBkOUe1Oq99iaJfb3rls/IcemVZW+tEooGIqVYZNUSV/5qP8vem9UyBWH35d1Olx2Na6RmxKmvaA==","signatures":[{"sig":"MEUCIQDqib78sotj9BItCVDz8RZGzebh4FeNVBn/PNDaIlsOewIgeU3/OPkhtGsDLEqposGnI3+6ZnO7Xfwe+de3aulFxQ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K+ICRA9TVsSAnZWagAApNcQAIsGXWDdV6lJ3zUNyoJA\nsYcwYQXWiRS84w3Mfrvyl/8yKv/kK46PCjFAc/ts32Yzgk0qSLIMEURcNW12\n/5mPVq0L3MBkS7otRGBAgP5Jbt5WoeZtBO9McZapAtVogF3J0Gg3O86iwwQ0\nVlQefknkqw5UgLb89WaGVRDxZtIkFP2XqV5BhsPXCrHiSThXUeTy6eBJAZfK\nE5kG8Q8qEJ7sOgl7dE+zXtldwUm0vA9UJe9hshBjuhiVNsufabnphQ8AIsyb\neZXdS1qxwQ8IfQ/hg+8Qb5f874LwgW0880Hv2WeCYRFTsa+FRfqvDf50bnhI\nx3mTSnKE5App7mHSOhjZPxLWrA1lU6MPh/HQ+PEUNS+8MytuEE8fN0qQBLRo\n/1awnqNASzYMJpq8TehiAqi1HZYqmJuI7DX2oKpH+w3HVdbRF+1Y50cmtcVO\n87YMIemcnpPGLpCzE17gw8ZyOIwq/UkKEmkVRkWj/Ano0JqwdQHt/J7SuW54\nnqdP9OPYb9w4G5jnR0nVnoGFSu9AobERJCegZcnDgHwwxUeOVxBZsXLlqM6z\nIWVJEgnReQLjZ847wLUAKcUBFrlSBOEzQa4tlt3AkYbPCulLqUTO9POnYqjp\n8czn5rcJY+BQD5X6/1/Ydt4gk9p6XI/513il6nu6dlFpil3YKgk70iiN8r+w\nzQVd\r\n=ihs5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0954a36f2cbd31614158e8425662a4969ce9c299","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4ccd39bdd.0","@material/base":"12.0.0-canary.4ccd39bdd.0","@material/theme":"12.0.0-canary.4ccd39bdd.0","@material/ripple":"12.0.0-canary.4ccd39bdd.0","@material/typography":"12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"12.0.0-canary.4ccd39bdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.4ccd39bdd.0_1624551304234_0.3389989184240376","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/form-field","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba11c0a3bfebaba7c8a2bffea4b94f9c3dd682a3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.17553e9f8.0.tgz","fileCount":34,"integrity":"sha512-szjQh+0VvVGArJwd0zewZdbDQU/WbsJyzIq1HXAiFZ3CEdLS8puaXPaHAPqNUu5yx8yjsjXTPzwg9ehwo6BN1w==","signatures":[{"sig":"MEYCIQC3aCee41h7M4GjpRDPmiOMedx+xUgpWzwdMUbtYkxelAIhAJQpoS7H6sb37c+FsWqebYcnPnAPBAQ3yAuyL+YvdG95","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lK6CRA9TVsSAnZWagAAfecP/ic/RHgTUpnlndeMNMCm\nASUQyJpAlsc2qREHtbQA7qTCB9eeHcaTr/cj0KkRToNma/1qFl25i+Kj3rF0\n48ilOINJH8JfJghHBp0wTD7/irlix/yulREh2M/X90pjXGZFliGSTFRIhF0+\nj6XCQcENRBqMA8u7Ut/wGfIs5XdqWxT/xUptUtHf0h+Wc7flsr810EiacKX2\nLSdqRmOUoT1etILeSILkJvKk0tBIS+vRDz0hnkuDCsikOMumfw8VWmuGIpeD\n3VqeXU7fQ7sUVPHEC0Ii6Mk8P6RpDLtc6srybL0TY4mDGki6wW0E8Kp6YYMU\noS8QY/gSQHrdnyNU3xQc4Dtvmu654VYHZanVPU2xUsGSzoW5dwaOpW9xYOMv\n6m4+2LEX2uN/xkP4U2soKdMhbzd2BaN8j8m8d0/AJ7P5omgHbvpD+16S9DG9\nPeJV3JooVU0MdZ9euarJ5f1OOMGI3R2StqtePRJgjF4tFBE+dUzYeiPaJnZh\nk/vE+Hq1nnnsijn7W2w32jmMA00wXFeu07Wq/pjzVlHwKEGr6L1lb/4ycWLG\nx6tBEXh7t8AGJaSXfXUohmu4b0+Yh5c/mtmyD0W9iCH3dtzJh7N5QcDb0eDc\nfRYsT/787EdR5O1Ee1Ly/Epjbw7EBbmTinAP4DX8bvtcQEZ1bHLeSNLyW0mM\niWOq\r\n=dXdz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bbd7dc5fbee09c82081517ffc14264d4834209ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.17553e9f8.0","@material/base":"12.0.0-canary.17553e9f8.0","@material/theme":"12.0.0-canary.17553e9f8.0","@material/ripple":"12.0.0-canary.17553e9f8.0","@material/typography":"12.0.0-canary.17553e9f8.0","@material/feature-targeting":"12.0.0-canary.17553e9f8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.17553e9f8.0_1624920762537_0.40576417720656255","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/form-field","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f4ce219436054b3cae1e980b2c334fc31b0836a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.4c80072fd.0.tgz","fileCount":34,"integrity":"sha512-zCNM+v3pHcFnE/JR2ASxWAPnRWhKdV8Ve5AOo88WtqK8IbBuFcB29cY2z1s1sZtbvm3e9WTZ9muzVVyLrOT3kA==","signatures":[{"sig":"MEUCIHLowqccDUYw26Q1YCHgm0qfiJo4ZWVu8OBlfj6uOeOxAiEA7uvXTNKiw/3nV/FhuhwG/uuucIZe0qZa1KNJx0JGetY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22k+CRA9TVsSAnZWagAAaUsP/16Fo37yHunUFk+B8oNM\nZ6ZqaB25nxUgkkqcBTpEKyWKX2PO5N8XuE2LBW+JplM+EUJEgbjuQjujWxPO\neKCD1g219F6vVdBPRIox8/RUTuOWnjy9ttHnHqzrkjYUwurdzqp5NK2nNFDb\nxgJesfpl0S+vwuNzT9gIGEgQF7o5vgejr9wa0aXb7nBmjKsFySMFpLveUW4C\n0t8Q01ENEzG8Uw/JzyyteWgT+poFmZ01PuOUknbTU3enY1vfjzeat49cbJ8g\n5FqJ1i3gLWYZbE1GCjvPn2MHJCvsZPEeUvJaJBYT8ly9M8dhQZcg5znkL3/C\n7znqgIBvUDA49/ifa50I626Wbs1o60A7fgGqI8tv2xvWcfNBtLGcoeeJLACz\nRdd4NsZJmK327OYUi1h0ML2eAZ45BhlnEIWJPNEFe6Y1I61ViaHNQCD3H5lc\nqVoA24NqCtKGu9QFWlk5VstF27T6cxcbFIn1gWiiY4H19gCXXvlJrXddW7nA\nE7MUsxFfiGIjoywdYDykOSHixZXQ2f2Ql13rVUEJbxMwRrjOimCrKYxtK5ma\nx/oHzaWgY3h50JShuS9v4raFzGoZiKUMyFy4kXkxaFNCerYOK+WiwGlc7gKY\nLdtpZNzMudnGKC7EJsScX/Yid09hi9pyyEiKmTkOtMVPC98H0WHN2ltntg5Z\n2ZzQ\r\n=XD7S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9f6d10da43c6e0fbb1366c1e37fbca58ce00dc12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4c80072fd.0","@material/base":"12.0.0-canary.4c80072fd.0","@material/theme":"12.0.0-canary.4c80072fd.0","@material/ripple":"12.0.0-canary.4c80072fd.0","@material/typography":"12.0.0-canary.4c80072fd.0","@material/feature-targeting":"12.0.0-canary.4c80072fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.4c80072fd.0_1624992062475_0.6383195018517807","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/form-field","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.796811db7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"232b45b48acea53abb553a20d0e58faad398c1cf","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.796811db7.0.tgz","fileCount":34,"integrity":"sha512-SXOhAM41CwF9JPjgVFZlLRFPTc1u4/NlPGbg5YOt0IgWK5Lr6G5+N2zM6O20GKsK5eu/bP4BuBqdRsTTRJoU7Q==","signatures":[{"sig":"MEUCIQCNBjMidApyHPsrZCEYJpj8oG51RqoRXsk8cItWZqEdGQIgT0tL9fWrj/Awo/VoVKMWQuNg5v3W+TRnjrvTAmcRAqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QZYCRA9TVsSAnZWagAAUEsQAKLt0ywypEpChzbaBP25\nKkZG65TXRl0F5fvGp7U4FdXWq6r9PrBOhntuiJAx1TcqFadlLuLZGUWCCdgT\namPhU22IDfQD2YagolKduetUyl0xXxhiha+cyomHyPHNxJIaNTGohDtWI+jb\nnPlithmWYA4gHi+xbfMEf4MZ91M8rCPG0JjuA8p4mE6Y4tp4deKclaxZisCs\nhMWObNSggLRfCnD0eigy9JdpLsHMHNPSq0SFphjIXJhhAnga5nr/ZuCXhxww\nEJwwkfeksXFUFLescXwIguToRlqRVE8Lxn/XJ590YYMzcVZnZBSNl9dhOxE0\nBibczlP6YMHWoFGkJvSfDo+MJtTOjtKTWI+rHit6KFWCB76UrgChEE0P0Fl6\nQugz9nOALV0SwN0HssAQwnnYYamG4p8auQoT31Wlcb/n+GEVQe5oGhKhXf0p\nk9y9KrUWj3LGPKDA21SWc5buXbfJz5hArbKF3k9BD8VbGbagRre3p3wCs3ZK\nIU0+jlzz9uK9l0M5OvOFoi+NWzTYyMqKoW+d9G6cYplJd7tP7UKfZGm1/gW9\nzNPlioV9YtN9bonlY2akTQzcf70eJXaG0Hez1l9i2UlUT85s5GGjFt9deIYA\nTWKDPr+ark9Kq6MFu+IOjCcohtVHt733QkoNj3HO7lFhFb7OB1ToNL8UXnzL\nidV7\r\n=t4JR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b02de77dcf32bdce7d23406dd395390b35e386e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.796811db7.0","@material/base":"12.0.0-canary.796811db7.0","@material/theme":"12.0.0-canary.796811db7.0","@material/ripple":"12.0.0-canary.796811db7.0","@material/typography":"12.0.0-canary.796811db7.0","@material/feature-targeting":"12.0.0-canary.796811db7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.796811db7.0_1625097815632_0.6757662559037132","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/form-field","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08322257ee4140598abcbe79e3f5c325cead0c7e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.70e1efdca.0.tgz","fileCount":34,"integrity":"sha512-w9ZHe4un/+z+oWoZMkVR1jpHn3UmVkwdevgdBouCdxxN5ovP/IJQbafRwCqhOExBJ2ME7mpw4vfn+dylzBK8vw==","signatures":[{"sig":"MEQCIDhfgleMEswgt87UHvz78Lx/+6Y6UAuHXJDqIyhf6FgpAiAPOSAOkr9aSoeixbU6tDTgZSzdBc/p1pRZFtxTl1Perg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fYkCRA9TVsSAnZWagAAbbIQAItuqMM8rb4ndqf0y4gM\n9c2YHBX0sFWILLUr98eEXSgNZDYjCXIy6Wa1zv0YLEpvHv/Pb/W9EFkgXEAx\n6PPqzLm8CcgR7T50p7/HNVlImeI0fXVE3hTlyuN2YYy4uVb9MIvoNkgJCvzx\n+PlZ6/0uBZl2+AkU68HYsL20b+NTsZhlTcv0O7TXg25Nj8yDlm9bCq6keoxC\nyc1FVn+qEXu7Y/69MT0kIrw6ZR2sCvJGWY5ZmaJ4mUrXz19cWKC9uXPEYyEv\n+gtORyV4xDFUb30+Yo3N+e619onBeMBveRb8H4eG3uec4NGDq02uDb3/yeHm\nX18aRBmpaIdJMdYdIrGG+pn/IqDB3nNA4y2+3+kWk7yhfERw5vpvE5Eb5eI0\nop6BJhUGDwb+L1dElzVVoSPOPsGHr7tiDLk88i6aQDJ4ncKnQVB5PyWrQ72Y\nplA6M9BjYKydSt5Mmy6t5oZCQG9xlG9VTBMoXYMfoaDPv5gMpKHfp8doyfAI\nyzAjT053crHBpVHh5PQlHQs0Bi6MiTsKZyV9pRGMfRn33KzqyoJ1ApV2ga7n\nvdH5jaafADnds3gqICgYY7oRVmTFgtKjitFLV3vyc2XaeKTe2pldagpS3biD\nnhxh/mKZx8RuosrJrk55QpxKiOTjs+zeB7JA52CI6puJrhJMNsqnSk4pJsIO\nDVG2\r\n=2L2J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ab5924ae38bb3ce40d3b1c303e1ae6d175b844ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.70e1efdca.0","@material/base":"12.0.0-canary.70e1efdca.0","@material/theme":"12.0.0-canary.70e1efdca.0","@material/ripple":"12.0.0-canary.70e1efdca.0","@material/typography":"12.0.0-canary.70e1efdca.0","@material/feature-targeting":"12.0.0-canary.70e1efdca.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.70e1efdca.0_1625159203803_0.42823302249742357","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/form-field","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.435866d32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"024e63176ce29babc7d0bf0634f2885b0c344b4f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.435866d32.0.tgz","fileCount":34,"integrity":"sha512-E4u9kj6taE3Mt3yAazw3c2F9d0qo2J1xS0pSUR1JXjU34UUiTdxX1JkD7RQBW1CHCe7A5WUWCclmffuqTmSkxQ==","signatures":[{"sig":"MEYCIQCT7LpZgBYaDTw0v8InHzPotN72HgSc//C2xFtKGkqg7AIhAIu4MxozdBYIBgREIUE9QyKoHVkOQC1nfc1iMKnHcF/O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31kjCRA9TVsSAnZWagAAiuMP/0q0D2NZI0jwBedMDpKR\n05NUOVF9/YeVlIGVHG2GRP/mONzjZWWRRn18PT6MkyOu0tspQMFyt+YesCT/\nHtWwBBfG63U/jz4IztKv2PHuUIZXv/TlW1fBp3jjecjYoI2Gr06to2f6yGV4\nyCNL/35Gr75XycxR/AvmCaksj/2LMNfVpP/AS+TCtjDJ0GNXTJ+VarmUW/ie\nnhb5Y91Nc+aPz135zmOamMIyzhSIOyuis5EDIG4bJ5lz65nDX6vG+NpLld6K\nctnflDrBwNDgbCj9V0W5F+IE7czTSknxJ3ejrpga9oDhDgUqFkzOHWYlIdHX\na813f2QFPyGGzxXdlAYWRkLzUOIMMQxiksXXBBt0tPFSzaJ72t3Y6fuHGbXb\nrvViV0ez1DwJ7pXrHEu9b1ClXkuXWKj4HNJN6iybdaM5InnPM8Lp0biS9mLh\npLOxqPxoQpn0XeXW/2tU3ZNA7qXzuUZHFlNjO6jpipBFC0wEb+CrTnoNDorE\nFry4rgdZgrsg9t+A+9YAS+EdtgNiHjoRMYWHMdJWTqPVUFCu8k9mc5A6p6qJ\nekvvjr7n58hQK580301PSZeXDG3C60dcMXLpC8d9kz7dnCtquMvTOO5aXkfY\nLjRKk9gOhn65nHD6tRZhCDyYAxTzKKDghN03AY2m6ii1FF/riVjtcUVSiYzo\nLr4G\r\n=giVP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ecf68c368bd1ea5571aa4da569d6fe6c4b8b8caf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.435866d32.0","@material/base":"12.0.0-canary.435866d32.0","@material/theme":"12.0.0-canary.435866d32.0","@material/ripple":"12.0.0-canary.435866d32.0","@material/typography":"12.0.0-canary.435866d32.0","@material/feature-targeting":"12.0.0-canary.435866d32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.435866d32.0_1625250082886_0.2310824974389507","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/form-field","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"500c7aa2abd77829932a414f6e73a89a7a6f5119","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":34,"integrity":"sha512-+CusUOmjXwwOUM6YMvKHzH87xLO45GnNrBO4+XJ408HJ5F86rlSD1dzdqTsUXW+bdy8YicGP3+VtzGOLOTz7mw==","signatures":[{"sig":"MEYCIQCSWQ8iCZEg1ma3w3FaOiJzjEjOINp5cEI2xefSYhLDEAIhAP1vrx+ULg5ZO8AUrZhevTMJhuckgN7Vhzur6TQuzDyQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36iNCRA9TVsSAnZWagAAr2wP/iLiEH0WCH94cy4GNJSd\n+pvjBoBtElPOMNiVPM9fFMuaQmSzZP/TW4xNqtht1IG/arQrAwFY0DJwaFRJ\nQgd17nhkcKr/5eQPmoaLKvolJtK93w4STgBCpV3ZHhzCt5Mgp0kiDwPSkM4t\nHeTfts3bNzBQRANeGsUTCv420DaGS3eLenPYQnTcD5cTnIYHF/WalLW0duUn\n7Wp10o8u4jFk79nvif4toKb8kK37+ScVFqu8CaxteqPV0rKGIyieBj3dR7iO\n7heyYUnsXODeBjsphbuXMqDboEaHhbJArypommKL+YJTBviVvFGNKn4BTNSl\nyYv6nJWuHolfJg6wLin+NyCviyV/+Ou9V+HIYA7Hlds53b6t0SqGlQ2MhyyT\no2nIgdFwFxUTxpHYJCbczSgJnXfpyI6uFtb8D9fPl2AvS56y0hyiZ9gLaich\nKR47yv3i9wiffmhqfR3B5MgvLDPmD2cgXR6VcL09DNtP6A/Km6CuF6SnA3vs\ndDkC4/zttCmWhY+RZvGpGIK6aaag49iGPyuPc1Ai/aIb5ZZEKTMmkV//h6pR\nd1UeExqFOqalwDoOo+aswVX5um5/V5cTbswlogKNRh+qO1WILaJL9uDnNupg\nRxT5Pkn1sxgQnAsQI1AWEC6yWyJlBC2TcVyAeMHWPZCWozb5FNTQenOj0HZV\nvhXJ\r\n=rwl3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ed31c78c6a84cb24353ffd1d406693496f090e29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d0f9f3f2e.0","@material/base":"12.0.0-canary.d0f9f3f2e.0","@material/theme":"12.0.0-canary.d0f9f3f2e.0","@material/ripple":"12.0.0-canary.d0f9f3f2e.0","@material/typography":"12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"12.0.0-canary.d0f9f3f2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.d0f9f3f2e.0_1625270413030_0.9808634065209663","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/form-field","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.adeac0549.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e31ad1bf9f173db6f144405e57d9e8a9aa867e22","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.adeac0549.0.tgz","fileCount":34,"integrity":"sha512-k3zxTh7xvyXJePKoKd9VPXM0P86nsiuVdatBs4Z9eCtAQjzdGU7bQT9wWJ/alz2eLof7Kjjq27U4rpdflSm/Ng==","signatures":[{"sig":"MEQCIA1I7retnAA2mE5MKyJ3Hyl6lClXkAMMp7R5eqjSZmUhAiBpQlu070Vbcq0qybcReEJNS2Fg86etOcHoNqiYUdiyyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xUmCRA9TVsSAnZWagAAZRYP/jqD39BtjlOFhtAS4vbe\n2sRardbavmcef8yop+Njm3rclPmqd9XFdha+AKe/hM053snSMR95LKwnryYN\nASKGY6fBSTv4wH1i7q6blYg0b0fY8r3XXG2YpPodmkdProILzPt0IM39LHq3\noxxYpy3YwMHUmsTGExPECrFP54sRzcgzgnboNHANckZFgmUu0klsuDtXUDev\nuVkVhCximEa9skmMtplXQVKw2mjqCOFplo5jHhW6VVd0aHswDFlHjjZBM3wm\nrGMdlPGltL/w4/9QGGmExmSAM6P7OUMW9UO4lpArDo0UDzpb52XKht98lLMJ\n59TW7WBHBR5qu9mL36P7CsrPwsR5zTJyyWwTAI7PnoIGOQm9JMFCDQM/ccxN\nNLNKHB1V+8iKsQXw99NJpGvuifWM/rg6s3/6Rgk4+VyUE1+w+49z1yNr0wke\nuwCxTGHvsNRIGu+6GGB7d5Kd2ZDt0QOaBx8SDST7TbAcQJNixyeQ7xN8FWxM\nISUL9dTbkwGvzU2RFEY4J17lQ3rHNZVFhnNPCwtz2ihM7IZBIKvpIkneEBOz\nKZ41kUyt4HXYERjwHy0I7b/3E2dDp2XQQ0IDFSKtmFzfF2QQWT/JyLWGjDlh\n74eZN79CL3NkURoX+1tkFwzEvQ2xS3nbK3oqw1OCv3LWyEQta4EtiZJzZsKn\nxCQm\r\n=68+T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a189bfd7e13b17660ad97870e074af0ee245e36d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.adeac0549.0","@material/base":"12.0.0-canary.adeac0549.0","@material/theme":"12.0.0-canary.adeac0549.0","@material/ripple":"12.0.0-canary.adeac0549.0","@material/typography":"12.0.0-canary.adeac0549.0","@material/feature-targeting":"12.0.0-canary.adeac0549.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.adeac0549.0_1625756965907_0.788043365550084","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/form-field","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.068fd5028.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25c4392872158468daaff57c6bf0f5d2a30cf6d0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.068fd5028.0.tgz","fileCount":34,"integrity":"sha512-GQPiHy3rMd6ePkWwDoABfpKb65yOS2ss1Tq4SXvpJL4RBWXhKhql4TSq3go/JIXZGk6iB3sDCUm/uRPWFI0nXQ==","signatures":[{"sig":"MEYCIQCtksKtAObomSC66v/KfkJitxriORfkvJ2wpGSMTliH+QIhAOoD4mL3E32OuGEdtM9SBfh5Bfp3HhUr1gbzOyz4+hNB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50wWCRA9TVsSAnZWagAAxaIP/j0QWEg4NyNRjrmVixjq\ndE2oowmHHMdszz3YLlsuiriF6jHpjgUjFGpL6fSV7hRoEiVScPiknk6OkUwe\ni83rjfasVI8iyuDGgOOtfIME7mt6e/f0cCY8kcSDy1RNdpTCfmag8CgVnOEn\n9M7u8iUtkGnU9T14sps1vC5ls4Sxaus+9+fvD1UBVPc1NZW951slLX2/dEvs\n8bhZfOFxKgL+0HaTWT/enTHaDC63JmMvfY7pMF6R24JEfTZ2ngiUvISBF9XH\nyEBoAV4K+1B4BunZkeibj2sPxSl1//qaUQYN2weQEdwL7gO7A/YKsk3n3Vj4\nteuNLy33t0ZoU6wW1wJAOJU10+4AsWrOExV829sCyONio4sYCrIZQPclhsaM\nalAot39sxBmOKLsP3zVQdy+r5Kj9UJjRhVkjJb8/oGOMElSA7elguJ2UzDe/\nxT7zmGXAaMnlnUb5AJx4CzdL3WnJR6kXQtWAIG6emBmdPFXaaCogVJ1V8lZx\nfio91gCgZhx+LG6ZCPRu7UR9E8IJf7kwwiX7Gybo81hFATqmgLArvFk5iq5V\nGGqwy8O39P8OZbfkxm3zjuqo0rV2+E2Bbbtgn1YusKHRa7S7MGOnVZ1Hto5S\n3xB5JgRpw2CcFQnYwRuUY+N4Xqu9H1ExVBpzskQVV92oA1/Df3YoX8zRMKOV\nzeB+\r\n=dW+f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"daf6a798ec3c54ddba492f33c939c41a8d88655f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.068fd5028.0","@material/base":"12.0.0-canary.068fd5028.0","@material/theme":"12.0.0-canary.068fd5028.0","@material/ripple":"12.0.0-canary.068fd5028.0","@material/typography":"12.0.0-canary.068fd5028.0","@material/feature-targeting":"12.0.0-canary.068fd5028.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.068fd5028.0_1625771029875_0.33872846753419883","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/form-field","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3fa9644884b15f33bd826da51a706a53dd738b38","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.5dfec7a14.0.tgz","fileCount":34,"integrity":"sha512-EypHvJKIV/2ppC1exPfRBxy660udQY+N5OgIN0oqNEenMvgAQ664NPYBApffrWfVehiDakHZM0ZjXMGiP51+8Q==","signatures":[{"sig":"MEYCIQDaYiHv+XWwqZvdXflURWJRL5AgLEPmatYR+yWVjTN2CQIhALlTX1vg6Q5vnmrJr7uj5/fww+GhdKuixEnrBiqLo4mG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KBHCRA9TVsSAnZWagAAhQkQAJjl6r5XGqCh1BAmj3zF\nMNVeKD3wGoZEAc5ad3jnpOXFpz5+ioFb+Usk7nME5kgeJpOdcfjzz3nN8mxG\nkjAmNk1FepW/2s2b3MrqU8fcUarheF90/4dA6UBD1Ky4y2Kjcw3LTjzSgvG9\nmlW6o921G2Xg2lxpQSjAmJpZ9EwcnSvKU+XBzSDrtJ74Tsr/nAwn8cn55pwk\nlwpXy4FU2xrkEZmapAQZVdcEE3ZkGsKao4IpbcqgzoFBCVEnut8QvmpSeVLd\n7/I5YwSVPMDOOdDriPbj1lpvzRWJk4Xyj+J46cLQzLIxX2qN07Y7rrqZTanm\n0MQXLcngrSlW+9L8RzRSLxPJGaMktuMB8pv0yUML1Ymbqs6eLckgSijxwQqS\nMk1ZrioYODYi6PDAZIVjPA91eMccpN0aqq95IIXUE6IVHgJDjohZmyBMeZOQ\nP8KtPGNtacX7v1IJ3iDw2xi4nCwqmTBXEYZYuRms1/1yZbWmvJcziSszudWr\nWmS6rMYKvWaQj8o3QaGN9fwqI6yIT8gRJZ4kjRS95OVTGAb+59gP3sEAqn1D\nFerSi3JO+KjixubMny0anpfKaysShqo2LqpiwYB8B9+CFTfA/sfkMRQBnxKW\nshsWPwRsm+f5pDp6cu7lHhCVZJAAP9lSYq4QAyt26BV3eVuO5swkt1jux1TR\nqMdS\r\n=Q/ee\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7295656b25be2c03cf7ca7ca800e7dbec4d9b531","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5dfec7a14.0","@material/base":"12.0.0-canary.5dfec7a14.0","@material/theme":"12.0.0-canary.5dfec7a14.0","@material/ripple":"12.0.0-canary.5dfec7a14.0","@material/typography":"12.0.0-canary.5dfec7a14.0","@material/feature-targeting":"12.0.0-canary.5dfec7a14.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.5dfec7a14.0_1626120262666_0.967098983522982","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/form-field","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.07a73750c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b0e2893cd52ff3d8e968b7531c83b06b5c5a02b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.07a73750c.0.tgz","fileCount":34,"integrity":"sha512-Q2J6BC0u/2J9bhXZFFXNzwJy4IcmiaRJ0nnTjTEo1vXjDywbUW3aiGyRNTStoBD5/CoOod4mxzT93JhH/Ky4IA==","signatures":[{"sig":"MEUCIGaZof7kRg2PxUYoVOPop4aFEYS1D3sunIk0XuyX5/WaAiEAw4UG0g6GeZSwnGMJSX7FhVddyIUFdzRDbE6F35eKXvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KVFCRA9TVsSAnZWagAAfhEP/16EWNP56cwAeiPVti9Z\nn2qrfx9bg0+58dQTq1dUmOvC0cmOjE4on8mR+DIJlPReSSTJdOZZP8CGwBdh\n79usmGDo+4Wql7QWcayrUKo4O1G97O2ccauYeUoDNlj03pEd0WLHVQy+ffPx\nPZQgI/6dLFSpcjNsxp8CpmkGiNV2RmQdjWsUh6ZAqqmoReVlizqA8T/I+4kq\ndrk/Ww9N1MdsXwY6Ux4Qk4bcVDRXPBSwN+STy7UrD7MM4UVdlA8/Nq7Fe11/\ndWESasOtpx74r8jxTYYn6rAd4pvaI4hFKWjnZdScdSFFWdvtMgc/D/T2Ujh5\npJCzoyxx82gw+/jQbqkuV3+c+Xa3Ixf1AvrpiVkVlEtD2P1aKcFptKEeC0s7\nnCQOY6kazpIasrrSHU9KklhyeNLNQhMMd9aScWh8JQfuPJFG+rtq63vjfpqD\n40TO68J5YaPURibWduxbQbEUyTSJP1E3PUBwuXdEtHaw6ismfLcEu7tqrxMO\nMnI6Q0PSlAd7rZeRL6d3sFe6htpot82z0Pp5tv1w7mUM1soqGVCSSTbxx2ky\nCZQDB3oWWdlA1nbb2KqXwF6v6CjihnOLp0oASOOrkXrw93/uhtfcyS3uCgfb\nyMPzMwynL56fRPif+xpUan0kxljtzE/JmOOdywjMTbnLjLngIkq3nbJAn0As\n9ojY\r\n=zQI4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3534c8199752b92a52696d2065e73b8e4a997195","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.07a73750c.0","@material/base":"12.0.0-canary.07a73750c.0","@material/theme":"12.0.0-canary.07a73750c.0","@material/ripple":"12.0.0-canary.07a73750c.0","@material/typography":"12.0.0-canary.07a73750c.0","@material/feature-targeting":"12.0.0-canary.07a73750c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.07a73750c.0_1626121540715_0.18631501778727588","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/form-field","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"834dec94597310bda290a1f51546b72df9cead78","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":34,"integrity":"sha512-40rQ1nw5uDrRTIlmiNwV5QmttAa64c/6moz6vlbxludpPRps345QUImLtwkpjiG967TIbvIx6Oj5eu0R2eSqBQ==","signatures":[{"sig":"MEUCIQCZ/gXS5kE6TYmUiKPSUr/TaK1lXGqwwVv/sbS47zwMyAIgYlKkTUxwg4znLyLTusOzTLzu1NGp/vi1uGLIbq8++EY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PGkCRA9TVsSAnZWagAAmlgP/AiLomufGDBtKY+37Ne1\n1gl44JiMvpaiVORrUR61U7mI0eO266Dk6P5Mr/NTgormRBKig9DlMS9EZCHC\n4AiWG6rmjJfUs2p6y8kKnU9E0EyNuxISkneOmtDsydTVKwhRXX7xlCtZ0dZ9\n0lDPE0OVICShZugpjbYzrlWpICDaIRbK2sOSyDLyu+M8a3O8AJoxYjM6oNq5\nvdaMwC/cxDRhpPv4mEH4sSSVLrtQqBj3SPujTBzmOYEmoYMGUSxhWMaQpkqy\n7W94K/OZnl8y/uBQHCaBRkP+oxq1unDgIIb/ScfaJpdka3iQ7WKvMoaSaZAk\njpJM2kyoqGZPE7RnFUO/dRJSHPOiiqCRLo2SguagslOivs6gC+6x4nQ0WGam\nGKWTq6fp02NB1At+XvxitYg1jH99q9fkoZi5o8O4QOdjjRIKkGAamRfe/H4B\nqgG6nEIxkRPnM3UTULVfsDz0/6vEV3q+B/x3R6/NO9fvoq/SmF6OqGUsrheo\nlrG1fQlBjvymgl3Kws+mXFV18eDvcbh3oBta/Tjt3PHBA/fIgkQxzXYWJeTw\nC/C3NS/nM8mcwL8juK+KqF0TZVrCe69YPrAXVBrBBe6iMaupV5WJnpoOn3Tr\nBTACAWBdN+vWA2YdAbcw8O5JPEdcbAkE9HPtm9s8/b6KKAHk67n3BrMeWyn9\naqgV\r\n=Ixpa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1a6a8bc529062b0303c0df830b36d3110a389f4d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3e4c6dca1.0","@material/base":"12.0.0-canary.3e4c6dca1.0","@material/theme":"12.0.0-canary.3e4c6dca1.0","@material/ripple":"12.0.0-canary.3e4c6dca1.0","@material/typography":"12.0.0-canary.3e4c6dca1.0","@material/feature-targeting":"12.0.0-canary.3e4c6dca1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.3e4c6dca1.0_1626141092062_0.09562609455207638","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/form-field","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ce7cb99365fc434b90f08e95f5fafbbb9deb0a1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.ea77795b1.0.tgz","fileCount":34,"integrity":"sha512-s8pxry39Lhn0T66jX2/1desuqEebM3fThh4IdguKvwjrbZoRRm5Wacsi8RL1pp41i935BDNccPThwWLxHnNxZQ==","signatures":[{"sig":"MEYCIQD+OHsuNk8ht/D74A66//4GTZTFXs4QJSxvTg50hZy0VAIhAJMbMKPOxjMSQUGvS+1vBP25vOsDeIm57y3oLCzUwSVp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bYNCRA9TVsSAnZWagAAgIQQAIHZg7GssDVgzppPADiF\n55uQiXU8apY/QSkxeS9sLwJucbPuoqufqibPMVrZahjt0J8IKw13DPtKvU3g\noXCweELdh7lhBPws1t+qjEHtPL3/FksFhIsu/cUcdyxpu6dcKnjmPaEUO0Vt\nrvV1jS9CtLrb6D9XekZQ95J0nL6kavKRLvayuVDcn++Z1zrYZJFlMRBDszWM\nRSsk8e2/7BLKsPF3yECH6iM2UEzRzmYHNg/aNEm8+a4adRSBwEqd6XPE+ltU\n/+s1A87KtBwnvRNXT+nm6U3PD1VV+1VJqD/ZpyJOYh+91oMpw0JvgZ//kIkx\nvHul2caMvE3hlB08Y6xCILg6PHmPFmLFfCUt6AY8doKufiIYI/lglpAkv+76\n8SOtzeNZIt9Zarcn4p4dCzlOd9FjSuOXeqPC+JoH7wR/w6yea43xOthO+BnE\nzBnO67qRZSSIq/91SYu57rdG0L3OUSCjQ+k3Wm0267MXMnEwzhhopacHbd4V\noR0+PQrB1w6OjiuCPVkHToHR+MCcimluSnlatruMDGe0D1I87U3EgFjBX2L7\nz+qQjFQ4qhiqH3WtRZV9Xy3NK4oxkqEFi41deAqUxWB1mEIqwie37gV7dXWU\n/BH1o6PH5xo0m+dIMJDQYlcrd62ehbCtMk2lCfLY6xHz2LQV0ch9zzfEr/NJ\nhXz5\r\n=vXA1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"830444e6567decdb85bd9b22a92d5f85b103f107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ea77795b1.0","@material/base":"12.0.0-canary.ea77795b1.0","@material/theme":"12.0.0-canary.ea77795b1.0","@material/ripple":"12.0.0-canary.ea77795b1.0","@material/typography":"12.0.0-canary.ea77795b1.0","@material/feature-targeting":"12.0.0-canary.ea77795b1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.ea77795b1.0_1626191372965_0.29441575099571726","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/form-field","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.15a179fad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f44de6205768abfea305beb5abc22719a08bc3f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.15a179fad.0.tgz","fileCount":34,"integrity":"sha512-+zNDhXRaBmGCT6+EufFqPwXMyTmzgSxCMkh5AH09UQmvxPuHuZIhFeARqOQ1Q3s2uFerCXKg7MBHIn2Lm4gyuQ==","signatures":[{"sig":"MEQCIAS7A14vbji03Duhlnsvg4+w0hLjCWFwsfApBWd/vv6tAiASrYCU5FJKnVbvsyR68moazZeOYkbcZecoWJa6bTJcPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dbaCRA9TVsSAnZWagAAXt0QAJkFGI0VgQyy447ODvLT\ncYNME7SaSjA6CuX+XILjK0inKquoZSIG7EXn2GDwiCoSqZnGEb4WPv6I2E8q\n22npBymsIr3egXjR+o8iXhP7LnCFxYQgyLV+nPnNjtS3ADJqw2MPGLtN1j0Q\nPsONK98IRzzrFntGCN0QjsdD8NgLpqBcYDwU/Il9N1rQy1bzBcZOvfj9v63v\n1PpzE1MVAJpfATjDiVK7r9CpqIc7C+vRIaTeHgF1lqlNNinkNf+RM6nngClZ\n+zgVONbmEuSEVJUk+BxXqzTdR9vb7Z+lFZO5RYOUDgGzlos0Viyffkhq9U1b\nkPMtfHVYiSo41bQGE/4ihx9mGHSR3aJ9P5zlfKn7dM+Gj6thRQc27WQCQQSC\n1CMb1GXKoQsxG6UzUDqLLbwBobn5K8jN0l6VGO8ntzpaNnaGLWROy3vVph61\nkXTafFcFAXV50II3QYj5gKWWfC5/zvY3/x7S1fR/L+JKSg9Zc3DcgYOVd8tm\n3cf76NkSM+BMX/oxViiaO77WR1PqBDdvRf4ng3pBOIB/YMRHo0l0o1G1l8it\nokE/RqxMbZuQOI6LfiJRCFGG8O+LB9DOXAW5rVG77YEnO1vf1u3f1vAFCTZH\n+NiY7AlTGVuprIxVfcXj+MmnGquA5N/WYusRjAzhIJcCsFDi8rT5vcZYQlys\np6fd\r\n=XgvF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"eb659691c3a77be825ea082c434c0b24c53cd610","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.15a179fad.0","@material/base":"12.0.0-canary.15a179fad.0","@material/theme":"12.0.0-canary.15a179fad.0","@material/ripple":"12.0.0-canary.15a179fad.0","@material/typography":"12.0.0-canary.15a179fad.0","@material/feature-targeting":"12.0.0-canary.15a179fad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.15a179fad.0_1626199769791_0.7489714678448427","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/form-field","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bba106b24f6cc8c8a685c4f383e28959e7bd30a9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.c73142a1b.0.tgz","fileCount":34,"integrity":"sha512-T9fZSiBZRff56lzxwQmOnXc2hOZkAK1TgsqvKSrySg3iNFgiH+cjRDyncURdujIW+OC4Vhd3qUtIpyLoPVIduw==","signatures":[{"sig":"MEUCIQCnv0oG5qtsxM8QzJE8i1oNLtPevys0kiHyDSZt1MQQfwIgTs3wi/ZZSmSlPy+Dnxj0Kox1C5hKL+Ea1mGrf7KQRN8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d8KCRA9TVsSAnZWagAA7KMP/A3WD3dPynBPrXKdI5/Y\nF2WaXi2dz5wDoziiYby1W8grLecxKugHLTpPLwbrM4RxuRM8/NXuGKcQIeAs\nOFZklUEnYR9XDeedWOrWTYJU8yNeXMCtqTw6qMVsEByCMLyPT6Sr9q+lsuGe\nGa9l9ZMIY3FWngY9fXtc7X/a1bddCnmmWtsSllGZOkODnkt8jQ+C+fuIPUmK\n+lIz5rMRf/xbjumxsUdsP/uG/ivMtdNG9VeTeA+iHHmC7j2AYUXK+ISAui1o\nCiKY/FyK9H1vtTS0Q2Dzyx3TexK35fMCWaTtmifJz+tRd86ZBU9vgI278IoO\n8UyNlro61kSouKpxIISu8qbiDmWtaP9MhwELXQQTQn9AZiUyI0YM0XEKo814\nTe1MItMhgzoQkvIauRAPciDORdSsLJAyagnWdAgzNeOLEi/dHRBmJbmcnjDc\n42FVsqU5BvdcGX45o6t8QHG0xasaSboz3+Noa81jyZLxQo1uojF5IjjKYPX5\nRf6skdNuUJAYoC2EkqLMwpLpFsUtEqsTtXEHZHgMzMfF3QvhNHyKKkqtPuFl\nbfbfM5Xple6rjeGlNiM+WeQXnYEQ2W3l3w55L2WwwdUZ8p02K0gnIfzY/Pra\n++aPzEI8PM2e40u+n0UvPZulBOiKCNJajZ/OAZls4uykkiWxyyUTe2hq5obZ\noySP\r\n=pPGO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"037ccc3828bb7b7c6f3375754059c10c231a6b60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.c73142a1b.0","@material/base":"12.0.0-canary.c73142a1b.0","@material/theme":"12.0.0-canary.c73142a1b.0","@material/ripple":"12.0.0-canary.c73142a1b.0","@material/typography":"12.0.0-canary.c73142a1b.0","@material/feature-targeting":"12.0.0-canary.c73142a1b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.c73142a1b.0_1626201866157_0.48172009391806325","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/form-field","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.d923db73a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99596fad8914404f6d83bf460bdc399e95cd1327","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.d923db73a.0.tgz","fileCount":34,"integrity":"sha512-+k8VJQb6r3KmNQr26j5ljJAUgBOnA4Ptwxu3ilBnf0SRm+vWq584mRD8aQ0Fpc8mfEMMZmM2JMfB8jMNKqAylQ==","signatures":[{"sig":"MEUCIARRJJNtY0lu2QjXEn6rJGsyzfUQmr5bdRoDItbvghrJAiEAyOp7jspNYpxkQ9M1YRAdtJloaDppMv+U/3ggtz31gR4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f1uCRA9TVsSAnZWagAA5WQP/1D9NVMM60kywCBd+aVg\nGHR16KRctdYWPLjqGiWOQ3NSwoNAY950V1D87/cOvXpvge4qwtbYfm5adDsp\ntPDVr3JSh6AcaIeJ46Kz5hUlHs57MrQwtkRERY+2dPAlQ3ljnmVN6oKjHTGD\nttN3f7ZURLcVMZREjksihAqR92z/Lg08PTtdkAgeXTDnbUbyUqY4WjdjYv7r\nrboY2HG99hBngnvUoQ8lxSdwzUmu1j8Ysslt26chgCddZnvnttmQ76PmT60C\n/k0DKa7/kgQ85C+dGqFmsBwvbgdDiVhuek2JHvXJpzcIxtOiOgtIZsI4XMSQ\n7wj0001Hh0ZeKwDoFWccTA0AGV50vJv7gP+LJRc16GcmyJsqfzI7NgSBPxo0\n4hizvziRKRBN/j7FEFY7o5MtKj8ROhER4uZ9twKSPHOmSvL7tsDb63Z9g1eQ\nwsDMZjSEi3vBxD+jqT/yENKACj+fv4b0BqJlC6pWNrceEOvpd2+7Usxlkqv+\nLryfGyB0jI4ul+xL9RIsvgo5CrjDLPACDnSKSxVwSbBPEpcK/O0zVo5JyXWr\nB14TmtmZ6SF9DWts+nXmMYiAgNVoQPNPV6iILP4NVAmuBon+fMVzJ39lcZ/U\n9WksmAwdR6TMlUsP4daA+9NYmCjV6K2rjQ6O1xdrmLZnvNGdVhkU/E/iTPnE\noo2w\r\n=GwNS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ae010eec116ad324d7e442d7ffac5c8ddcb9edf6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d923db73a.0","@material/base":"12.0.0-canary.d923db73a.0","@material/theme":"12.0.0-canary.d923db73a.0","@material/ripple":"12.0.0-canary.d923db73a.0","@material/typography":"12.0.0-canary.d923db73a.0","@material/feature-targeting":"12.0.0-canary.d923db73a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.d923db73a.0_1626209646131_0.5643681395166018","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/form-field","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5e6a24de83f84af8e64db5dd84f21d1d2327ee3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.22d29cbb4.0.tgz","fileCount":34,"integrity":"sha512-wYNyh1RMqEviuWcredWYx8ENEjR1GYdQu/NE9SKlfK7zKsFxF7szwHDd/3cZd7BSYVJUeylveDW+KgXQaW0YpQ==","signatures":[{"sig":"MEUCICz+z4gEa13UnPcFpBI1eho/8ZShbJbe/gWPF/vDBYHjAiEA8I5I2nWiVJopm0YH4RvDraFCCl8174Rev5JCO/EOTAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hjECRA9TVsSAnZWagAAEUgP/2QjhPEk1fvBNGb14sVQ\n1ouuPXgW1wtqOsq+y3dkgqt2HamSFAD8BWeZoXEWPPwx5p49E8M52//TnKWC\n8aQg2rufiQLqPz4ZqYoGGYMAPAbOvMkcpqR6UmfFLJ8YKGzvc+rMsYXwgcrz\nrUaQAQWlzeUE2dx3mdJJTcWe1TeCOiS6URGHrat+kWpvRZ81cOzk8hb7nzft\necAxOL/3rJQHt30CVjiVRF1LApaO5InK56gJVKLfTrh88Dm8UqoniCSfiaBD\nT27CWkuCyvi+HLxDU04AOiGw1KX53x4QgZysSYY7ECdirjjF3WhBBbXYcYk1\nQfVd3X2t0hUpJInX2eUi4VPppR+HwmOJ3KAnJiNb9qLO5avs/+0ZcYp6YOEn\nWPpYIOS2Ltju+1kBpw4Yd5ZU58oaMm5yiL00cd87LaZjuLkkfAEan+xm0Rus\ncwuyKHxM9eKAJ9sNa7gc+J9YFdEW8Bikbb+JzMcY8JMsyb3U2AABTRzkeP4e\ndTIzONU+lFilAg8Ujum0Vd6vV2vkuh0OfGx3yEdteZtCYAhFfmGdfS7M5AtS\nnqgdBVTGw5jhSlhmeTHdG1vVeD/oK+zhUZ4RQ858zQMLkcxj437xQjvl4V1P\n0wgoB8s/IZrN+cukMfrWUrS019QpdloWT5WxMAVWVbgL9GsS0Z4R8nzuW7+J\nLkJN\r\n=2PnV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b37054450964af349924b81bae43ec6b3beb2808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.22d29cbb4.0","@material/base":"12.0.0-canary.22d29cbb4.0","@material/theme":"12.0.0-canary.22d29cbb4.0","@material/ripple":"12.0.0-canary.22d29cbb4.0","@material/typography":"12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"12.0.0-canary.22d29cbb4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.22d29cbb4.0_1626216643547_0.16812208856871558","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/form-field","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.2749604bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfda591e0c9e769f59e8f2c15e1b1e2706ce4f16","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.2749604bc.0.tgz","fileCount":34,"integrity":"sha512-qMpEq7hOHF76WWDNkI7QVkUDG0rQkw1FF4z4LjrUn6KXghrXzMC4ObIs14KqO+QUjKLGWWnF+ysENs2fQHZfcQ==","signatures":[{"sig":"MEQCIEfSzJuJvdByLsOp0sHLMEu4GvXk1//zWKnso2G9PV6yAiB1jrPkf0v7AC+0Hh+xPXV1u+ioKZEbu9nG4bMNhEqSaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w9NCRA9TVsSAnZWagAAySUP/0mYDBfg1svIvvKboerB\nLY3lCj/IEQ/+PrnKhJXN3oWL7VZzXD2DPHcNIWg42/JmBLLqX68AlLwJqUe1\nyETk1OiRpT6bjOIzT5kFFcx8a7Uz7sM7RGT+hD8BEHc75J8SKxaLIzhnwOn7\nqkHE/BcJy5jYKotvrk2g6qscTfUSUNOLTQSl9XS3uqmQV0y+ipXTziYZAnd4\nmfGX0VKh04dm5eTvSkm67pvko+iXPRi6cYwqTbvBDbrlLryTntiigHI5uVXv\ntsKYkjdBYPfdBDXwWW7dGb80Ww226MeP8Vg15IxUZLt4bXePBFcRlzLRyNMz\nOYDpsbVHZ4YWSlEbkKAXTDY+SrEp8u5QM+Y7plv0B2pho1P1uDV7ad+bNnr7\n1PbjeaKtypWP5HBiXfu5AxxM4i/8pbwaFHuPPOVVBygFVoHxJJ69IgZg+hC9\nF0nsSJMUrviunuK2ruIE9PXNqCYnqGP0OTFFDa34eFJxK4sGjgDvZfSNEcJU\nNTrcWtiMxOvI2HQbWUMdomAVyAzW7PJxe6hkGqLTBFKfMNSa5YuOxppp3Mo+\nc+i1K5juLHNWdJGRYJML8KS6XaTerVMI+VhE9HJHzzl7Q6aBtLl5s3LtHhjy\n9bizsbUbJsFXTfZkEv/84Ufuo5NnLRGUdQA5Lx+JLZIvKSlC4RJFBWr3EoiE\nZnnb\r\n=nQKk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"58ae4287239fcccbe4c5dd9259164a0660c76f85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.2749604bc.0","@material/base":"12.0.0-canary.2749604bc.0","@material/theme":"12.0.0-canary.2749604bc.0","@material/ripple":"12.0.0-canary.2749604bc.0","@material/typography":"12.0.0-canary.2749604bc.0","@material/feature-targeting":"12.0.0-canary.2749604bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.2749604bc.0_1626279757238_0.6458470142742583","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/form-field","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82788ff08eeed0494598bde00b73992f14c7a585","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.e1703bed9.0.tgz","fileCount":34,"integrity":"sha512-jdEHvC7eOlRiQr9bXN7NNg80yftxO+WoOjEMGQheX7rAxFUmHXMlsZGwHv8Ni/r2wLrOyRM2zkkd0fW4COxhIQ==","signatures":[{"sig":"MEUCIQC86jfK9+7is0hwmd4MdEikvbqHH6YUf4EnD4PxPInqIAIgIe4giUrnV+SGpwQ6cNkdR1BISxiR/1Wsr9Sel/pQBrw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71ujCRA9TVsSAnZWagAAwdQP/R+54Y6POZP6VjsjUeHv\ndu+ar9kCglPbB4B+tCutAXxuDyPcSh4FRNoDUhYQHFeE45em3WoyGO8WmJPz\nMEvUjUioprqgf2j9SiCLEpPmAxGyfx8mBJR4QwLGM1f17yrPlucvGxaJyV7n\nkXHl9BtWyR4a5FzCZl3Q7pOb5XilBCsRNzoGtUBls6RMS4EPUxH6qNogR7Bk\ncQD3/X5NLZi/16WQCpFe6MMD1UNrWWLcUmxuSk1uPrz0J2zH/H5kZJ/hj4ea\nhwJh3pErGFncFfl/KZjsFIVm6tD6Pz33wR4fPI2wgqxblr4IMqh0pUJvpffb\nB2t04QO9xskI71JXop9f2UGaaTr9IHq1X5CXqNRA7hNZ2j1eO5RmHmxPma46\nsmaVxHT5vURhDN0FqozZh1s3vqeAr5Wm8Fv6MjkLIthzk4PpABVjnWDlsmxr\nJ9gKm+XSRAD5cFY3jqvLmcRnEHfB7vc9tdS3ZLeyVKOCLDkVf5CJFJ8kg9Zw\nakTkVMxX11mUY2MN7w3ZX3mhsFwOBh+IYTFhZts9HWB+ca7I2zLWUn6ypso2\nru4rQgjqcSrwlzqmxs4KcWvBqsAMHEJWknxEZRdjhOpw/QDxXcfvuEDW4W2o\nNRKwHzmzhpFQlgneN4YDRyL7ml4Wq8DD3EleaNybF3okCGqWxMMYp6DGkt6h\nBmRM\r\n=ymCK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ca9075f939dcacc82290fe2b01214639958bde93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.e1703bed9.0","@material/base":"12.0.0-canary.e1703bed9.0","@material/theme":"12.0.0-canary.e1703bed9.0","@material/ripple":"12.0.0-canary.e1703bed9.0","@material/typography":"12.0.0-canary.e1703bed9.0","@material/feature-targeting":"12.0.0-canary.e1703bed9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.e1703bed9.0_1626299298832_0.6695645524561371","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/form-field","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c17e39b6d142690d17f4b12c8e53e2486ad4488","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.de48eff0d.0.tgz","fileCount":34,"integrity":"sha512-XRBVmb0cs5Myq7ZbjB/iz3hwRlZQfoqSwSqEufcu2tEyqtioRZ3RCGi5wv8l1mwTNJEi2iuYR+J3Yj5fyfGfBg==","signatures":[{"sig":"MEQCIEVFsLXoU8BdTcwqIp/JOxj4HM37SHQdiVgoYwSwnQiNAiADMzHc09htQyoH2SX0eTguVQDjg/DbwLjViqFRO6lgMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GuECRA9TVsSAnZWagAA+XsQAIQdo9D4YMQ+5poBPTBt\noYUgLQ6EoFklGwAv2huxt36XRvdMV3lslMVtJDEmzR1DR2uiWyqruoExecDV\nxht5LQgjAEdbXFW0Xj4jWnhO6CNfkI8azAlv9hWZ/UjE/tQ24legf9rGZJME\nkkJSZgWGY4Bf57hxiG9kYGldmIjsp9zIdXC1kQCpnkAy+wK+jNhbqwPYa8+2\ntimWmeIqLrNQw/aRg1yZ/GQXYNSt6yqhhGgZ2s2ALO28XnFPkcBOOgSSUSmf\nwB/QgQrI3fBAis5lc713ZUGq0L6Gs2Dajraj32BR3hsgCSjpM9qz5tBWhG5V\nQSLpW05P7QswHs80BoST4ZFZM5cSNUwF2YLhcvPdRH43sbvNFRfTjUy/Ie0t\n+ErUC9hsktvg7l+xrLS8YqnNN5XYXkpSN7id4x4mCWzzLLsghUqeG4MhIcYK\nMcztthxE1a20Tr+KG5TVGMX5XWv37USCFytRjp2M7b2II7cf4i/hCYPJItrX\nuwmSOj2kqSOEoFJCyshP0UFwaIZVDndcL+vcQlWhZvwULmpIYm35X/KVCrDg\nb7xTuNJcZUuvS/hGfhcYcAI8j3KbaCtYGn2e3M7zBWbMFbbAWfutfDzann/C\nFIunX1mNIHamtUo6zJjG+f9zbX/Dwju2jnsqbaCytfgXk08UoCN9Gg9EmR7f\nThQ9\r\n=sipT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"121530dfc073c7b24dc1cb75732a0d4c0e6a3f28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.de48eff0d.0","@material/base":"12.0.0-canary.de48eff0d.0","@material/theme":"12.0.0-canary.de48eff0d.0","@material/ripple":"12.0.0-canary.de48eff0d.0","@material/typography":"12.0.0-canary.de48eff0d.0","@material/feature-targeting":"12.0.0-canary.de48eff0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.de48eff0d.0_1626368900180_0.3713241054878089","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/form-field","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2785b518bdc206812dd53bf0f3a17d2a4ab75aa4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.4f060adc5.0.tgz","fileCount":34,"integrity":"sha512-cKtGvrbO2hp+BgxzuYnWwzpc+s8sCE3cE5YgyUKVxdE6hYNsqtIM1+RI/obd4XgM+Ef9iaAqKobMZM90N+jhOQ==","signatures":[{"sig":"MEYCIQCzPw2YkC1eu4C4F8QG++CLWNvPZerdRbr5s249OpZeLwIhANFSQfB4CFahb6ZLDCWyuJgAgLMwTT+WIOqZ5nmq80ZO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IreCRA9TVsSAnZWagAAJV0QAJFAX35q1BRlZj+RgPGy\nMxnbpGXNJgJh3mP39uZhvgiI7MlFYD4NVVNnGrF9VVY3my8bZsK67X1nOWzP\neGy2Itogvl3I4YDzaBcrkzYVTgS0K25Tvb0rn1Rj+djAYLjEqbbIWeRbQaKX\nupZ2kaqhKqyhLCGscpku4uFToc4+KbjNZSYuRC79QDey52rG73NPpgzGTJ9J\n9bIeZSotzh0mFfGgxRdohzd9/TzYdhiYBfYu/o83S5J19tgFxfvvK3Q+EkbQ\nll1BSzUjiFqfjlFtrB6FnKizCOaWvXtOVqkfKfHts43tM8tgttb3G8j9VKXB\nWReaWyRhhf7b95oHJRE0r2ZK5hQOuzrHyW2dBEs5JK3NlWKyy3K8odJx4cca\nXYfcm8UKwvfmxP5WiCUTcTwnqVlJbZSmRDudhLlvaje6umEn3np32ot/OFFa\nAqxeH1d6GYcYhEHLrxuX8RuIsi4Pggzni7MERr+qT4vwnBI3KiTbUsjOANhf\nEalLhskNOS/bT729WEWJWTac+cgSO5mD3QNAu5ezi7vdGFHzNvGu4QaQVQ0K\nBfAwzeJMW7iIgvzzllRlhFjmNOoCOd4BxUv9bRZGWemScteGxmyYX6i9qK5e\nKQeKYdNv566zt/xt5RAVv+uUHaL5gQQRW7kIxbyju6NFUtdWDaBdfMd14r6h\n9AyY\r\n=mqyq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2e70b8cd653f195a01f93c3e9928feabf39fa87e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4f060adc5.0","@material/base":"12.0.0-canary.4f060adc5.0","@material/theme":"12.0.0-canary.4f060adc5.0","@material/ripple":"12.0.0-canary.4f060adc5.0","@material/typography":"12.0.0-canary.4f060adc5.0","@material/feature-targeting":"12.0.0-canary.4f060adc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.4f060adc5.0_1626376926312_0.45741820015764834","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/form-field","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4741bc120b0a6c5adb2d98bf6e1c1b67cbdebad","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.bd25779b2.0.tgz","fileCount":34,"integrity":"sha512-d2zKt4FbeShpJRwZuxK5n1IBNbaGTFO4CFmk4qh3/bqhfjwBAu36BY24Tv06MVuog097BFrSC4C2De0WC8aD6w==","signatures":[{"sig":"MEYCIQDpNQy0ttoobN1h+HuhIWXexGJqfUHTB17UEZbUswEyKQIhAKggatqRUR2TxQrL3w5Zf8FIc8G1DWXK6MfaY1ahH0dd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J23CRA9TVsSAnZWagAAKKcP/1yEYi2mfKedRP2YmFwV\n1SVEjGBxZUimSi+j6+vRSgKYIilB5/ZLVDdgvyB+oSAa4x2lPz2MU7Qec94h\nUP6GOAYCWPQ5USv0BMh+7w5LtfvtCcyav3QrF05Tw7OkweqFaA5MdRVnhcux\nGprL/p8kOLw/VAb6LEln58OnGogSJYWNV8WXszvDfF/f+ZC+DzqMtsDjmt/G\nlLx6F4HFlArMD4sNB4i+R5EqHpasn0hc1ipkwvfLH1V2Wu6jAFu5da+YZpGP\nYUtH4cy/fDdwd2lDH/1C94rZ/RjAWVEWXonpiRCcHr2oyJp0DjcBumYGaqcL\ni5bc9EeJ9ojqJyc18pdWC6vUOSDxZk0wVtEmLzpaXzfpYdSn6z6qXm9Ikkfj\nNgD34J+wjAGpJXOYCLkOc7uGDINJCoZijKH8dq55l/QAi6Dztz+B5VC4SE9I\nkyZxrBF+kjY3a7y+1yo8ylyI3q3E2paLNUqf0kd2fDz43vrRfGgOb8MyF+oC\nAURNb72cEMiN3gVGYQSCwjMXOHKp5Fbgop2VpK0+f8EFzfDSpF6RrCrlBBON\na749y7kr7s+46DJgNVgCq+If+zKdkNYlGl1hbPBKH/UUqA+E9HyorRN45TxN\ntWWrdmwVu4hVUS6bih40VQKVoLNT4l8fT/56iawx3H7Wx6d2TRQpzvwYO42C\nMzem\r\n=mKU8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3ea8422325f9bc5f9a356842191da47e282aa4dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.bd25779b2.0","@material/base":"12.0.0-canary.bd25779b2.0","@material/theme":"12.0.0-canary.bd25779b2.0","@material/ripple":"12.0.0-canary.bd25779b2.0","@material/typography":"12.0.0-canary.bd25779b2.0","@material/feature-targeting":"12.0.0-canary.bd25779b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.bd25779b2.0_1626381751310_0.9487826596890099","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/form-field","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"192c229ace0c399a1de2da5b26f6bd2a21ce679e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.9f68a932e.0.tgz","fileCount":34,"integrity":"sha512-rZOcwgTPFhyNysFXw6RlSc3afQcJZrq9o3ZaLX+McRAFyTK6ORr5V200HkgX/E1i0u7xnKjj1GcBYHJ2eIcCuQ==","signatures":[{"sig":"MEYCIQDjUHj4FujGCUeWmF1lmXm19s9sMpmn48theUvQNsJEfwIhANr5MBkQtddbzky7iyfx0hfZLP8uD2ZQ1+2IYUkBKRhg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LGbCRA9TVsSAnZWagAA1VcP/Rg1j4BX38S/CCIRr2/F\nc07uEmZiIVgeAHVecPp7gC2MAZGmvo/Pf5lIcjbfh1kLSThk1d/Rewd8SuR5\nS8p7zfqGNky+XhOYgiwMYXiTgdWadK2QjnPgb0H+nmFKP56wC+PF3pN9y8Eq\nA8GgUII8wfS4GOg+I06pHJA8TxbQfndXAL1N7MvbEzDb6wAobYL1TzpTaxVE\n8ab9nzqSwLiLk+GwG1tS2zzG0drfmvIkvmc/wf27S7JcKijwgHQumJrSCWgm\nKc3M60eGpakxTwkMG6KVoeuqhDribVx9y5sGpMCG0jXJw+SbUUHWb47FHYEZ\nas2g/GqGWbPaJkVx+VNNyUiH0S/qTky6/0JeHXwn8zrplbSPYZQ/WJkg2KEx\nPBemddRXdV4H2AMSDUELfEPdZjDhNiRRQCIPx6/yuMeXTzBJO9PYCfKiGi7b\nRnuiKIftXrXROuUlX/4/f/AG6eYQ/q2AR0deQpJTCA5FrrnCXtgRXV61t573\nMaUsYOnOQM4F1ZdN1BrJmL+364i/Im68hWJuT9xL0XdrGR4XjrGpjTIL/oZR\nca8YjIY84BJJb+Es19h9BgTEsZ6WvL0oj1QtbBuhfsixz2jb8epdwlpVXWXh\nC/Uvm4jt1UTFuItyeAq/6VWRTyMSSLQ4Bq6R989olmPGCtdOQnUspjlQ6EvD\nkGke\r\n=138b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"34b4e5801eaff79707e9f2c769df2c1a34bbdb11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.9f68a932e.0","@material/base":"12.0.0-canary.9f68a932e.0","@material/theme":"12.0.0-canary.9f68a932e.0","@material/ripple":"12.0.0-canary.9f68a932e.0","@material/typography":"12.0.0-canary.9f68a932e.0","@material/feature-targeting":"12.0.0-canary.9f68a932e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.9f68a932e.0_1626386843654_0.505096462366786","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/form-field","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f50b75c9bbb4a59f66a12a2227e9b1296ef7e864","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":34,"integrity":"sha512-lr/aeiTlKXKwB+V5qIQt7RmdX9w/PcaT+308Q07SqM5bJsedYQn+21JPlT2nqeiiYd415Cj5UQyobg1qkJxG6w==","signatures":[{"sig":"MEYCIQCbihl0wGdvJV/In6Cqo5XRhvfo7NR59GgS9ZMuzpuSlwIhAL6fsLxVedL6soSJzFWnxP5rJXuOmYc/7CmMxxnZ+YFn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z6BCRA9TVsSAnZWagAA5g8P/36eJpuBx0WEOdsbsjvR\nHnLtS46EyH5YdHpa1DeSZhsnjd8Cg2iyIXEplfcO8bX0TIiudh0WA1GKX3gg\nVbBeXORc9+4PDIESx3/CG6VcaYzbcCL8Oy8om2UGSYzWbISUFykav3bGc3GO\nY+io7ExuXnspL7mbgTiofgacWqM349kmkqAN5FUEi5Bz3QUBsHZt7og1a/Vm\nXvTtC2fKrRij6mWB1NMW5oVdMJqYTExFJdiBtvKWgf3l9yyNGRriRC9rePvv\njMhtcGArkcVS6MwMnTBudBVsGuaa2BJboid32ldU7jAC91KgOckBH805cmNe\njOkGkj19MPDIGNrOAtyNCbK7mADWImfQDHKd9z81Akmzka6Hu4zEBCeVhKah\nJY3vmdh3XdW2cc7GCrmSSx9AwhWV/DYUWQhowFsV7ZtZSA7Xnh/5DIDkCnvo\nwz+jFMfOwIYpb/hnmALhbPS5yoEj9qDYaQdljPYq0KR6UrZFG03Vfw8oJ9It\nsFgiRY+i+0FlGORIZIU857I8/soQmkcH1N87DBRte4sIr3CMY8R1PTTCj+xG\nmc2jThVK96XHGUIdM4wl8gN7VIfwKSOLlnMn9uGGPC5PdEnrAcahEse8yXBj\nJz3sCrwdduy5BIJv78wYyo1aGcwWr5mTdsid98MUXCQgho/u4i1iFhrLlE/z\nVO9N\r\n=Z3OR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"89a3faf78d32cadbed38135c9ae10ab1f3c8e9a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4eecdeaf0.0","@material/base":"12.0.0-canary.4eecdeaf0.0","@material/theme":"12.0.0-canary.4eecdeaf0.0","@material/ripple":"12.0.0-canary.4eecdeaf0.0","@material/typography":"12.0.0-canary.4eecdeaf0.0","@material/feature-targeting":"12.0.0-canary.4eecdeaf0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.4eecdeaf0.0_1626447489063_0.7348013689750217","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/form-field","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.7239684d4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df143b2a07604f1d29f65b5411b742fb80e5bda8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.7239684d4.0.tgz","fileCount":34,"integrity":"sha512-q+uuO61tZSOOMKcgrGWb0dFp9tBJ3hnYMkvuyU6s5vYtWSCEGcW2uowiEdjmFPoZRuR/cQMfQTnJiDpMm9nMdQ==","signatures":[{"sig":"MEUCIFzmgdE5aqLHwYlOROQBqa9mvqTyt7G81Exkq6rpqGRMAiEAwYHU0N5a7evlmiI0chRHUhp1MeQM8KOn+o50Exo8n/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8azYCRA9TVsSAnZWagAAWeAQAIr/eejWpUG24A3TzUSW\n6P7J1JpjR4voiKo8XodJ9SY5gUnY36/pFvQm3FBxFtEjdHeUxCxJ2PuV8x5Y\nslZMF+2SWquyyKUrp2lz85hv87/YhBqozBxcv40hngsibPAeb7TdjLtTXIj3\n5mkdSGRPzXUm5LcjqNW5/nb043llTsefTHJqKJ1Fx4qnQxfJXeJ6N6w4M75P\nOwrXUgXmRya/VOj+e2rQlp953knLArdOd1qp2OQpSBtWHUze84WV8vtdGLWl\n3t4lAxph9x5cSnCgpuTv4p29wx7EOCeHmXhBWFll12gxNzVBYYw3p3dSz3UJ\nGcdL5eUmtCvLnGTfnfKSeRxhYNf/dQ7v3EcExDj6kSc5oInX9rc7rNcfvegQ\nvnQVtfF10+K2yBwcPtV0UEPP6zgBW+kvO3WmuGVULANz6N4ASV29KiWNwkE3\nql8txzgW52RWLIR3L27h8Q5IWpSBNGxckH3hjJdOUcSX7x81ntGv3JjqbNEj\nzQu+dugiTkIx7sFdiZAuDI+CCEgcIJ7Pou3tYvqKrgFG6lIFrolSbhMnY9na\n2L46J7BAPkGmzk3kDwWtKGncRR9WZFSC+/2ZUBcCROF1J60qAmlSGojLBD1K\nu1Fy8znIYwVvooQXX1f8EIeP5zt1xTePJEX7plz2C2ObfhsJKcviEDL1MsSV\n068q\r\n=+7ef\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4b35543a488bb22a0855f6f0d00b047fa76bd623","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.7239684d4.0","@material/base":"12.0.0-canary.7239684d4.0","@material/theme":"12.0.0-canary.7239684d4.0","@material/ripple":"12.0.0-canary.7239684d4.0","@material/typography":"12.0.0-canary.7239684d4.0","@material/feature-targeting":"12.0.0-canary.7239684d4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.7239684d4.0_1626451160672_0.2210866097372406","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/form-field","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb80c6981aa1190b063549daf040d2e86ab86a8e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":34,"integrity":"sha512-6lcha5Et/U5ZxJTrOBx21geUd0FBswtEB9FLwp09vto+G+KQ7fr1Qu9kFdzDP+5ICrCfqx82hlbQe9t82u1SRg==","signatures":[{"sig":"MEQCIECDEsjANcfIThcnI+MUWufmWOzJT6QUSUSJCL4KcCooAiAYWo2qyqHE7JQGb1C7MOZfVb/UjiByp9oLN5hPFL64QA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bBWCRA9TVsSAnZWagAAbFEP/iCKXO/HaOyuCCmNclFu\njddRnJpk8v/lc11Z4W1r30+XtJlvWIgEKbt0YL9n0JmTUMbWY0+Xze/nVOEz\nP3cYU0sE+fyXFO0pK6wJylHiceBG+3WZVHMWhaPa5BS9ILN07fhJDI17NXA8\nSrYl2zvHWWsi0N2/HWuZbcH3cmeim65Tv7YWaf0nE1OGmT5qqjaiFup7KIFy\nMqOeaM2eu7x5ZdyPIjNITv6kwrKr3QPJfJjbQLvoAWU1loVZqypVbQoS8W5u\nDgS8GZyS9BddtmvnL3uuSQmgwkW2UVVIlf+8aGyZlZ7YSWBB2uNfzvBugroX\nFYBWyoxUbSk0/9bMlwWeHUA/U9rHljQLA40C7HUTnF3g9GAzZvmt1y0/kqTK\n/XdPmhaMYN3IFda28V7D+UW14/hN8dlGKv05pE7FcRhWL3VnVOsCOMsW+wII\nTZm6ItyPo5vNnTA55lWCMwKwMge69nn16w+J1osZbVo+6h1wWBFoYcxjKSTl\nZmWr6CBguPqHxgP19AjkxpCNTgraRJMt+opBr6UJdrXFmWERIuLdKo2pi13Y\nRVRtNIHiK5g2d0o4V5u/9kKAze73EYBO2TqCK++iHf+jSGsOQxJGOueuh1NZ\nbvQsK9MmSArqBy30fqHL1uXaepzl2Lcc9FSs31C+7aQ+WTXgQB1QRCfMca0N\neL1Z\r\n=6Imj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ef327d93f5a591e88ce5af94a2bb181d97b58472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.d5f1f7c72.0","@material/base":"12.0.0-canary.d5f1f7c72.0","@material/theme":"12.0.0-canary.d5f1f7c72.0","@material/ripple":"12.0.0-canary.d5f1f7c72.0","@material/typography":"12.0.0-canary.d5f1f7c72.0","@material/feature-targeting":"12.0.0-canary.d5f1f7c72.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.d5f1f7c72.0_1626452054710_0.7097407478590858","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/form-field","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9319de96dabfbb9d0505ae23191a23b4d1bfa35e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.4d95812f9.0.tgz","fileCount":34,"integrity":"sha512-qP3NBXYBnh/IvvBbgE9Ccia2OXUhhY3sX9C+QlO1hgd77/IfvhJhyBZkKZ6RYgMAwRH56LkU7dSXA7ks6JVU7A==","signatures":[{"sig":"MEUCIQCGd5VC+9JMf829mazhPtXqHhgUF4uX6lgqD/9iUOfUWgIgS2JdJSR4WjHw/E2bAkSsNlBhHbrVWJz7/AyZrrFsXqI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eFZCRA9TVsSAnZWagAA3EcP/2R1ibs+c9xOL1DVFJJH\n8Zo464OHLj8DADhgdR7/zKAV/573WhBVOYMc72q8nqfXCAFlhdnJTIsMMPc7\ndPNwhL7ktrSQfDfdbf1Gy0MRxi4uRFwBIs1PezUpHaXEUPTSJ3lz6YHGwj48\nEHvo4xcOlV9Ris10JLD+QpKJ9P9aH37nuVhoSYWQPSfIZO55xjUQ5rfP36RP\nIOljvLJ3t/SipqDNwHATwfJLFsjLGtbqfBGlA/fqZFho6YDzUW1VU7S18pwY\nrfKrbQ85s8OxrXL8gxfsoeZq1SVpOb3ps9uKr8Wt055Ej6g+AVrHdjcqR2LP\nX5CGFSlHFYYfwBTaxf50EGBafTs0PqiNJGnl4Jz2MPHv+sr+Peis4Ry5Oren\ngGN30MAqFptccDyHQH0406+DirAyYHzX1xHGTvu5tnow99vi7MsdvxW6fL2t\nHVuA/e7mZ3qSx9xOM0K+q8lVD040QH2MZqESn/xM03ZjzDIOvde0TxjjL4rP\n5Zdero8+wn+oDU8dMwYAcs47sTIrrMcIXER1gaMeojm2X/qpHsfI3+2FFN1t\n6eT3lIWh4kSJ/3rfITDoZu+AyHpgI1ENKppwdHjvwJDDnbukyC0IurNGCngS\nQoh8WroFr9y3ELRJc/rCOjz1qKpFU1KHnd+kF41ZpjmxxwRVDmCpJ7Bfhi1r\nM2FZ\r\n=oOpy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"34bd44726ccda77331fa29afdc1d5ab7ff0879af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.4d95812f9.0","@material/base":"12.0.0-canary.4d95812f9.0","@material/theme":"12.0.0-canary.4d95812f9.0","@material/ripple":"12.0.0-canary.4d95812f9.0","@material/typography":"12.0.0-canary.4d95812f9.0","@material/feature-targeting":"12.0.0-canary.4d95812f9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.4d95812f9.0_1626464601079_0.34859968284160403","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/form-field","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d6abe1bac9ee5f9ee25eea79d4f1a43c8b8604c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.38d1846cc.0.tgz","fileCount":34,"integrity":"sha512-GNqf6MpKLTqNlAI1bJW/gSD79LdXikBcUZ2OioD7e+bZn9GecBvmZ0npDbg81EEDs37/EKfYryEDeEsX4oOMZA==","signatures":[{"sig":"MEUCIFMBI0VRGkncjM6qB2FEK3eoGGaeK90q7G5AANMdUg8aAiEA009DriQXa4buXNPFZf8Tbj/EtUgt/YVMB7Syqbvy6Ig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9ceECRA9TVsSAnZWagAAwNgP/j03qwR4HUr3VcfbSEmm\no4DY/kGUYaLl0HrO9UpesOWfccFSAeL5/x5rMsrUcQg4Lv9IzGq6DFOYLsWI\nBaSYmTLFsaCM71W1vtB/WTBtvN32omks7dmB/z97hlDJEe25r/TvjihG+2a9\nBZZSsX86dYbzGaw3ihcXbtdQr3vGTWg2Uq636Os4rnqqjoH25PZG60atjB47\n1OoZ74pvFrYmrABUWr6LS+3dA8y6SMZ+jaTdC9ni2vWsAV5uSM2NqhAIryWf\niW+90RrJ8SnymlUdMnDARvM+KkuwGtMZND3xopx3+xL9XKGe6Jka89XCYmIK\ntBDKVoKi9fe42WW9phiVLPVH4pSiwOkFbv3/K+QY8IZtBkrVmCcUaMG138+l\n/E9Z1gkxWCVrvTNc3LyRe9e5VMwqzMH0wmoXS8EUtrGSWwEAcKq+lT4XsLci\nG/JwFLhp0ehddDknTSbI5+R9WQ7YtN0VQax1KaCbmz2Ru7AvsUk2Hp2xr/rN\nQ6AkTw01T3txNi6rkWT9xMULsnEUAeflIC2jLQIb694X67u/NqxKi+qUuS76\nEWj0tlqJt34rUND5oPQjKxUAs2g4qkVpGIUiYKutOP4CiRKQ56raIm6VLdOO\nrnd4BDTb4T53gv2ZYs+ItyE8VXYvmMpVAxy26qEwIakCM9fYX0HWTzgXaOfe\nDcV0\r\n=+mCj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"77a8b2af56ebd184dae02df9198e75b16f4db385","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.38d1846cc.0","@material/base":"12.0.0-canary.38d1846cc.0","@material/theme":"12.0.0-canary.38d1846cc.0","@material/ripple":"12.0.0-canary.38d1846cc.0","@material/typography":"12.0.0-canary.38d1846cc.0","@material/feature-targeting":"12.0.0-canary.38d1846cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.38d1846cc.0_1626720132479_0.38956114197895464","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/form-field","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"968fb345136a84734b4c9947548fe02fe6a6149b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.3f691eccf.0.tgz","fileCount":34,"integrity":"sha512-DUS+gkxMIpDKnVS6lt+ca5BA7Domuq1wMj7Lta4DifDuwhBdEQDRru7+jXz88YPkpK74oST27dVPlUD1+qXj2w==","signatures":[{"sig":"MEQCID+V4RZtvDjI8yDzRzDZ/AjQr55o5nL1tY/qe2v5qW/eAiB9cQG+CkYN17HCzfLb8Egmi8JXlAZv081pNpJPuWuuGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vUZCRA9TVsSAnZWagAAcLAP/2zKB/3CVPtOpjHhYrz2\nmWEBA9QeFLBzktvco7K9jFXYr63H+sJHVxcyrCE++FxHRGx855HAWe2gWWTd\naiE3EbC2z9T7lLatDsBoHgLt/2B/y+/ykGYFpzmb1ZS4vxhGy2hbl1wxuaFD\nb6laXgYuENKy5cfLzzNG0sDcyNL0Pm3cttyCU7qAHtgyU+QKpxS3sxYAy5HP\n13iUZtwIbenEvoFa9sw8RCX4Nj3QDoHrzWy5opNjV7WQ+qPTXL66oCgPC5G6\nqXYNCofolTG5Ag3xUwvTYM73WlJGuhQT7qIb8QcH6bDXd0pZ+7zMcee8VWw9\np5RQk2UuvpqNUNrPjvlPlcIIs4FFeDIBOAjbTrnJAAh2SaWb3pvAEf6TkOC5\nDETfBtzHWbURx11o4HYlk6Xz6xyGY6lVOlVd0WXCNcmNznmSeWoTQ3KsNPaL\n7OhnetW775y0znDkqI0wmAgTA71QRQEL+unTR+rZ0G+Btopfv2thRaiCKQTH\nYZx23hZanb5EJAizg6lU4zrw7Px9jz+/H5yoro2Dt0p1o5dUBKYJYlpFMUVj\nq4HCCY6XOTEFd4QIEbi5auH08uuOMjsjYnFDjhxLfUeuWxH/ohETN5OzRX1y\nK8sOHX+W0a3EdCRrvv+QixJZDWCoOdhLqBvzvjCJ0jptMXfACFPr87XM7gF7\n+/+/\r\n=bVoQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"58271219b83ef8db16c68153037e69345831b4cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3f691eccf.0","@material/base":"12.0.0-canary.3f691eccf.0","@material/theme":"12.0.0-canary.3f691eccf.0","@material/ripple":"12.0.0-canary.3f691eccf.0","@material/typography":"12.0.0-canary.3f691eccf.0","@material/feature-targeting":"12.0.0-canary.3f691eccf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.3f691eccf.0_1626797337351_0.5402979946329358","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/form-field","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"870c818f1269e4e16fd43d2b83eef635cc96f149","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":34,"integrity":"sha512-AtYLuh8fF5HpViFzGj3Ch40oSyGonP8VJRo9fwTacz4lGx44HbNzSrlbpPm3ZHX4UGxXWD+WcBye+MNHSU5CTw==","signatures":[{"sig":"MEYCIQCKKt+5RDBvxGC+hCJ51++VedZcrpPwIK1OM9okLzqMVAIhAJ/xe8M2mGICgVGAG2pu8pU2YE6pCdluLpz7viFprIWt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wBeCRA9TVsSAnZWagAANqwP/1rfvhMlEKLhEqZtZmVL\nVaWTvT9q6c9q6qdU7jX1bZTSWqCUK2u4PGEbxC8cPRtoc5cOPTo8Gezyq2t2\nvfQ7OBIN+fZEtgeGlxKvsjQLCFK6xWlHCdixiCM/FiyU7O2jx75CrDRU+ca+\noogBJb8iRPsoyiGNjOOEtcj7Poy+bRpIvokg/le0blwZTUKrNN9LURNKGV0O\nTMxZqsJ/Z+m9285fNGcXLLbeLU55bXKIceUfQgANCUT0d3wIa0Fyt0ynIgo+\nUCWe/NaJN9BGbo/xfEKn0x4XqEfFQSKPgr1wjOn09VQ4/6ml4w7t7MxDygvn\nbhsU0ulupc+5z4FayxvpEVnrZZRXZUSJM0bJAmnoPflmX6RPJjcznbGc4E3s\npqWQNcpFVjivcP3DwcQWZRbck9FQLN/dmN1RhIT6sdD5VTNC1B6AG7cvOH5k\n5ZVwAaaC2xFjwmkif7qE7ztAdBqg6xFSfT7kF2bEq2lqM0CKWglZ6gI+8SIJ\ntFodJHMgDgw5I+pE4jS1p+pk+fxiLU/VNGH4U9cvyXJNkq1CmJWCt1A1oN75\nCkmfMBz1Qt4oik9jdCmGRDF0FFN4INmfvz5vwyNz38qyl12c0Sn6G9i/hLka\n+onGrzjJBKEiVaC7nu9huCKTByhvk3fYqmkWs3dBx8sE0pnONFxelEbcrYJW\n7iuc\r\n=oMIp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b37a38f7ce62c0d87ebbb4bafa0f1fb02aedb050","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ebb5c73bb.0","@material/base":"12.0.0-canary.ebb5c73bb.0","@material/theme":"12.0.0-canary.ebb5c73bb.0","@material/ripple":"12.0.0-canary.ebb5c73bb.0","@material/typography":"12.0.0-canary.ebb5c73bb.0","@material/feature-targeting":"12.0.0-canary.ebb5c73bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.ebb5c73bb.0_1626800222350_0.9323244215174671","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/form-field","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be4ae79389f6d44fe2a599ea679876ba50eceab4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-nightly.778a0e8a.0.tgz","fileCount":34,"integrity":"sha512-JoHnquVmuzZ/eYePqJt6fiXuu6M8nBfz/k6t6E5c5kLWZ8qki3Ws0Ad3UtdmM35vaHm80xFcFEeUIbIczjNdzg==","signatures":[{"sig":"MEUCIFPW88izVzxytzaOEdBTJJHa339xTuIp3To/bVmll94YAiEAhM6UJE45OiA/OoMg8MLpLnQ1R/MFK3UgWnl92XYBZHU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zqlCRA9TVsSAnZWagAAoIsP/iwHMUAKPhdNbUk+opDR\n1lnhGXgS0wjIEvEBEBzXOEmOH2GuG+59oL3lukMB25vLsPmPPmbLAKdEyG0t\ndwCRWiIuqNeEfmAwt9ijcpA1P7AGYdj0aRvx0alFuuYfzngHaMXmU+RlWlH/\nkKl5soAxfr1PgiDVVrcHS2smS5vdVIVkeWIG2g9H3iKsLUCOoixAMpD2qXdt\nZ/027jtyYdcjSMgYM7SRudgwvRwvsRbbMKXlkOYqb5g43MMSVfOmQsqdQwKb\nkj90rxpQgbH4g0HmfBAMJ+aW0S6NhYPv/3jVnMmZwBPQ/AuayJMu7cDBMzUk\nua5+EAiJ222VxmgrNUUAlC1ckZaUlmo/zvxMx3j90lT1+fF0M7rN/TSX5bQc\nqEZFsGss1ZJpMAk8SSIF5sPXJBkr/+P6+3HauWf99fS4PRj6K64T17Rt1/vm\nxbMlIyL63j5QYCWyHmonF69W0qeckdcyQrGBKOgoAej/8mvBLkPl3vxuDKKX\nfXRZLPPtzJ5rBltiTPHvna2UuJg18mXZJ5SJc2hNFmDBh2ULcxaT5OVLY8Ej\ndPK+895IhuuPwyWiAbvVHLv8OLtRheyg6CUb70SvvARdaJYFGZCHcu21IKcu\nQ6sBP9R7QXLvR1yn4YWkwSFstYF1s0PudS9rYhr4f57xDDRo7P+zu0OWXvBk\nkHIF\r\n=Hayo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d86234d661f09ad766ffa2f82c69582e585a8fdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-nightly.778a0e8a.0","@material/base":"12.0.0-nightly.778a0e8a.0","@material/theme":"12.0.0-nightly.778a0e8a.0","@material/ripple":"12.0.0-nightly.778a0e8a.0","@material/typography":"12.0.0-nightly.778a0e8a.0","@material/feature-targeting":"12.0.0-nightly.778a0e8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-nightly.778a0e8a.0_1626815140960_0.37471062083414086","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/form-field","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.791311bba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec04d5d43d385b038cf3d94112ddc5bb1eb20c91","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.791311bba.0.tgz","fileCount":34,"integrity":"sha512-9Gds0cjLzPH93BaTYUhiW7PKeimRXIOT3ssbJgfJqBTUyBRMi9TQoHqhplxKLg+YbB0ipQN7sqWzZI5BKwbSBg==","signatures":[{"sig":"MEQCIG/Z8uz42CkvuK7dIa430rtIZC1n7IYL9avKRS2ivbeDAiAzP3FtoyDJaMN4cJP+3Olj+aLHmTbhVa8l+MJ/Oq72Fg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90kxCRA9TVsSAnZWagAA96AP/jT0zRTAws9Yl8Ub9/E8\nhHwlZmJoLrVv4wwEa0AzLLr0bg2Wzkum5na6DfmBC6118fBj9ojIhqmNjpik\nWe1KuMXT647wkUVZjLXP08/IYqw+j0K+mJqpMxAt6gACBissH/pv9YijhL/z\naYp+LBt32sLznUkg1DwjtYrCIphRNaqXR+ScxP2ZKAfgr1zTZk4Gi30L7nzK\n3gYuny+FSJcBBQ7Ycw8DGzo2a3x3oh/ABbRpwo3grMlzLvoYHV1ZEg4+KPYn\nErOO7KNmtVWSFf5Dx+TMsRalbSiMHl5kpN1K+IxadRUCi/dFBbuseJZsEmwe\nkQJXL9rvyeJflDqMCijQ+GGcyXOFB7YFmt5ndPgZ+z+53MO1Qn/m1lTnHZtG\nKMg1WWKpMnvkB9GDWxTnWUq8aJ+ey56uNfmB0aIsIcfYV9/l9HiEOqK20hzG\nk61gnCu/WzZCXOXt4chPUivwfpiuw87aTtGjq/BIlP8YJCSJcUWtEL5lasuJ\nf3zXg3d03NSHu/0Qh1WJ8B+vouAyxypjql0YKPtiAmOAa/3Fcy8ykjPKV1PY\nd4g/zM6SWfkAv34K8wDkD6SD+MdQnoaSr8vdKQGitfZX3UOpCidqlTnVpOVw\n2ujLN9cLL+FNypoXprpaJ7tmaGYUtZSS8HDiLzlyAZJjkxW0vDHxfVTvrzr5\nIEmK\r\n=Yy40\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b915b82632a30b60ae4dca5d12fc23d5a5df4d4a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.791311bba.0","@material/base":"12.0.0-canary.791311bba.0","@material/theme":"12.0.0-canary.791311bba.0","@material/ripple":"12.0.0-canary.791311bba.0","@material/typography":"12.0.0-canary.791311bba.0","@material/feature-targeting":"12.0.0-canary.791311bba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.791311bba.0_1626818865421_0.09709387064944508","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/form-field","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"465b897bf75ebf5b7a4e52e90682958ea8fe5a5f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":34,"integrity":"sha512-7a8GcDtAluxUc5z6n38zbAIIlt1hkqM3GkbrJcpRPEKuvV+plCoRgd41A28yConAl+sN1oFHbgLIpAtgHbZV9g==","signatures":[{"sig":"MEUCIQDwsER1PWOpebDlCgqL7Ts743tFcVULMKdgFiV6FJj2uQIgM+BRT3ycaFaEfbOy4shBRmN3tpMaJ+FMPZXVZrguY3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D7pCRA9TVsSAnZWagAAxzMP/1TlBLU0yfYK6VrovGuh\nqjZ5B+V9VW7QNxtZXDmQKF2emInc+4bhRXQsfyJrb76lBpUXohGJl5MrX+Eq\n5TWmVtwqzCDPh2o2a87TcqpP1iUuUCeFNyygPzC4iW7ejuHPs/farWnVmu46\nfKFlqhTs+keUtJvqCkVzJ8etTFdq7Xe7el1iDkAaWnWznZ7/+xsMowEo4p1X\n4WRu1oun37Hc2YDWlEu1B1x/twYhafB+YlQg/loT5yBWULpuMs5d7bM3audH\nEBRcG38sdxs61AM4BZOo0iW/C+gW/OXwZlA35W/JUZNvw2SXJsizcPrJHEm4\nsB/bjq+9apxZc4b+wEwKLob59L+Idnn7SrA41bypBKmtM6O8ZuMfpF5D63Tx\nlB4WbF6WtmB5P/7AzpCk3d8Qx6+4HEtthu4GUtsqSlZaAwa+kDm4Mjf2TAOK\ndetyO4//bd+om9Sro2yYFhfOf+S4GdqnfV+NIS9mb1VzwbCyfVrGhoSD2ruG\nMpA2e3tU8skXGsNh8fd5AtiOtEhHqaALNH5ArFni/dy/RmE547/Rr1c7IkwC\n5GcV7Uhq8vVAwYM0rQqVppIcfIsowhaoRo11lPMy42LFKI4u+i53bY6ynK0S\nWvPkRBSRxzBjp/qPq92X0V4KokPt4cGRF4L+rNnKjUXMBb69HbRVCsPxmGQU\nsXr3\r\n=EM/V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"651354325ad21ac082f791ec2abb0aa32b3ba936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.85e9a6ac3.0","@material/base":"12.0.0-canary.85e9a6ac3.0","@material/theme":"12.0.0-canary.85e9a6ac3.0","@material/ripple":"12.0.0-canary.85e9a6ac3.0","@material/typography":"12.0.0-canary.85e9a6ac3.0","@material/feature-targeting":"12.0.0-canary.85e9a6ac3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.85e9a6ac3.0_1626881769492_0.5701823244743625","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/form-field","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.6b0442278.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de9a454925d325e23c041dcfbbaf0af251fc6b02","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.6b0442278.0.tgz","fileCount":34,"integrity":"sha512-xKomObvHXYcl3x7je5Ht10aS7FGfzH5VvagydyioHGsMWFgfoSuGcznBXrmcPhn1WThT96dsec+oxIW55q7rnQ==","signatures":[{"sig":"MEYCIQCOxibr9U6B3Bwjg+LVvw33Phj0Yee32GbSTYuJ9GtGMAIhANHiiOVscsrpEpgEipXgPJVY1lc6SIzc7aTgAmcI0+bw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+GxbCRA9TVsSAnZWagAAl+oP+gIqp7W6P/Q+vsZTvXj5\nVCo3aJ5/JDbiZaNQ+tzRyjebq9EcSnS7P4Ggmk/STf8GR8iWOAf1WNSaU1QZ\nyHi3ndPMeANQcy/+OOJ/duD+lXEOr/cZbQCePvlZWJ1X0s0MP6X/o35+tH9w\n01iJGyIwbz++cUEeMABZBZu9EQBjA5C4o+LEBGdoc5QyMqAWaJc3xd3S+b6n\ntML03iBN7pEbPKTlI7rjpgiCjzr+70Q7hViDIIp6SWI3930dkqP8ZbSlMFf+\nArEezTkJ1yEOwG5lU5ANIsHrsLyWG2P8jp6d6OzTYrj9aHa5NIbnKpkVfI4H\niYOeyAWTM5G9UX9tO7vvrdjSugd+Y+J4UjRhMIJjoZb6TG0foUOoacTis0hD\n3Ca04WQ+jW0uZ/2jHw03oRamYWusEkfaU/hPUgavQm53UJCKPld8rGelCetG\nZnuifjt2ZKt3oSyWoUl+XDLBymxFBe74M/R+kxl3muEnBNJpVCmtuE5NxN9/\n5Q1vTD4KbsAXTqwbbX1ejPLAowNdrWVeD4Gl1cet53IFwG6e7xXYfXs9q7Pu\njuH1+KDI76y4rERMG935G5EjRXtctUMsj5L8L4MG5kB7cHMGaSqh11HMaKN6\nN/2g86RBFfrAivuaHyGP3l7dS9qJ8ZVy6nWy5P9ML9C6X1sI44vJkuSWOI1G\nqkGy\r\n=/A63\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fefa69e22f9083ed30aa4ea05114191682b45a14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.6b0442278.0","@material/base":"12.0.0-canary.6b0442278.0","@material/theme":"12.0.0-canary.6b0442278.0","@material/ripple":"12.0.0-canary.6b0442278.0","@material/typography":"12.0.0-canary.6b0442278.0","@material/feature-targeting":"12.0.0-canary.6b0442278.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.6b0442278.0_1626893403773_0.4331637582105603","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/form-field","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e6657829c3029cd0b98509358235584fc2d3344","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.5f00e454a.0.tgz","fileCount":34,"integrity":"sha512-XyiHJVxx4RdbbvPNmKUQUuTtdGiJyFkXzFbv2vna/3xqictUVemqI5aYEfM5mZ3BAPLhLxCRSXf7zamrC+9Zqw==","signatures":[{"sig":"MEYCIQDPl68d1P2JS2kzp/RjQx1M0xw0zA4K/SuIa6rB0c1TKQIhAMgcVlmoeHUuifCTGKNk0NTG+ioVpNK+yp+c/v178nmw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aWdCRA9TVsSAnZWagAAHZIP/j1XBu09uXMU876Pvwfm\nAXhE4yoKru7um92pu16AJ25/gIS2SNaErwnfHgKuBEsZuJE4816zq9mVqb5V\nYK1JKKpvTOs1vAbTMCWSVADcvTJy+HaCzfjK8lwiC9asdYA7ats//fq5NP6O\nPqdY8hTFEF2t9pqlXCwDYarn5i0OllKNJDe+0M+rAlDdRAwX1HhdXtrCrIHU\nCfkWfNExemk8bviECLYUZ3O7sJU6OIAxhcvopS4f9D7CtccWCcbvadXeTU+M\n5330Qff4qjMIG2eDpXpoUPDBpG/bIsz8gKN33bxFHqgrUhIgJOXgQC7DL0Wb\nUiT54Qf3lF20IHQB7Bine339CFAgOGLBpOcglkSPErg90xXuZo+TZGQXCwSl\nPMpSvg/FdpKl28AlagZks3iRzqEUumDUQhd1qoPriGV9uQRrFiI9VUWTHzsf\nIvL3axU3v++Dl7xXeXnhSg6uSIrEOVJk/wVnjtFkuQRSpcyK6Js35W5Oy2Jw\nbqEnVkSLWu8eUNuh/nFbDNjwQVH9B+2jtuYyIq1q5yad5m7wRrqDXzERyFTO\nj5SoOy+6k26fllywOUQb6gZi2XPqnus8MV5QaJAYx02tIhwFa8759Oa+OKJC\nqWTMVa2d6IxQ2LV1W4Yp1wSNA/zi775sIS/nh6jQ6+j6UVI/jmNSFmI2nYXo\nyR5K\r\n=Cf6a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b9c8a5899d6bb5475fc5fb2c76a300d4a28f0ffe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.5f00e454a.0","@material/base":"12.0.0-canary.5f00e454a.0","@material/theme":"12.0.0-canary.5f00e454a.0","@material/ripple":"12.0.0-canary.5f00e454a.0","@material/typography":"12.0.0-canary.5f00e454a.0","@material/feature-targeting":"12.0.0-canary.5f00e454a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.5f00e454a.0_1626973597200_0.03466387800681581","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/form-field","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"facac25e3cdcc2adb5945498a7a94153bc96d011","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.90e08fc6b.0.tgz","fileCount":34,"integrity":"sha512-cxuWQywojLBIuqyrBeagr8+28lwOPbwOjH4dCrR4wSiq39/+wJXv1t9jhweuEVJcE3L40fTJ9BJ1xWlUHstleA==","signatures":[{"sig":"MEYCIQDNf+PLVblWYbeqh3rEjezsxQqqWkutZR3GyCSpCZAiswIhANEu5+rDunRza3tBz7+SBCpfFS5qt+9PBZAR/H71FIfg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gF4CRA9TVsSAnZWagAAUjAP/jt7r2B3bluVHPbxcg+P\nF8pCtuahKPn9bJ7xxUYPlBS9YXYn7x1Rwd4Io2cGHWmNeljDKcTfSsHUCtZn\n8v6PHtyePv0vH+Qc8KC31s4END8CvQsNUGeLiiUy3K4qbqIO8QmorvEJIeY/\nzpnechtbvSl1aZHQDKuaiTTfpJGLC3AZPE003abhXsS9qRAX0hPy9e0CkDaR\n77il5bHV6gyW2c6SyBQEWQ7DPy2QfwKUqkdOStvtnzucLrW2GiOrxvcMeaMi\nytg+Yk8UgaCQ8Lm76g7TWwdPwyY3QMyrY6hvm/74K3WMxhLQE77NYcclbEGc\nfOhTb1NhwMhGqKP7c6S8n5Miq6annu2Zq4zY3nIvXnYGQKl5gR0cfuwODD8z\n2pKn8u8wslcYPnR5MQ2grIxfmBYjFk1Fx74BIdUH7FLA4HZ0/sLnklb8P1PO\nnqhMz6HslIyeQCPKmaKl7v53m6D+++lOeJblGF8l9WT7E7Mg8z/Nkm8upYv3\nDXHZhvhqoAwgJNPwbirzAZOnEhKQMQ4bzeIDRCd1xF5q7vuS5JteMtMQpnjY\nQB+VtH2K7kE1QJyZ2kyDXNGiR8Oo2b/Ri5KqpE0bT/Qh3PikafJuOCm12Ilw\nO9YaFZjmA+pN/OElj/Ba/e2PDHlZJd3IGzS55BUEisFC6nwvco1SZmhky9jb\nADgj\r\n=tMih\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"267e307e557cdce4bda13e55c34cb0d1aa0d0b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.90e08fc6b.0","@material/base":"12.0.0-canary.90e08fc6b.0","@material/theme":"12.0.0-canary.90e08fc6b.0","@material/ripple":"12.0.0-canary.90e08fc6b.0","@material/typography":"12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"12.0.0-canary.90e08fc6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.90e08fc6b.0_1626997112777_0.11130318088200752","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/form-field","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f01c45692294d382ba697594c62c38f81d7b9352","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":34,"integrity":"sha512-paY1QApwIpHs0+jPCYvwsjgCiYB+3We5NskLz0N3oxUaDidWIGqejfll0iHDqvhYsjWcuRhlg1BF2XBpb8lxTg==","signatures":[{"sig":"MEQCIBB7CZZmSmtp842PPcsXqn/0ZaRQ4bd2VCXArM6lrxVQAiBOM/Rd47IUxM3Au9GrwXx5D+ddkrn762aH8Ony020csg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+waMCRA9TVsSAnZWagAANI4QAJsDUO6kzsM4bGexvA8W\nCx4bMO45d9G5MVBbdk2CVkxlISLPk7nhzT+4dct2l2OTtTRyyMW6c3jJuXrc\nC16Ae2SdscI9IM0LO5z7jHbGTVw8FBTK8juHcIkE/qQqNdyvzLSm0OtH7Fgu\nOZJnzjWNoKEV4wzdll5AKczJ0XAyF5GL57GKbRnq5GpXF8tjB5z4NkclzYO/\nCrBd4P9YmMUqjImyLQz/FB7vhsNfi1Rp15FH+1/jSFWWUO5171VEg2d+J+dD\n10kkHkKqiQfpm4Kn17zHVzWF/HBa+c4utxY4LExfymccwYGxrJTAAEVrlOv+\nz/ESBmLq57ysoXmN5NEv2ingHMHCzrmD47uUF2uPyCqtP7xphLl6CJ905yNw\nIUNwcndmSWhqzhyY8rnoTJUcWaWQM3MvpiYgHuQ30ERsLeYI0LQ8p9cwGkgf\nOQN2Y8y+uqRbotT8ImbC/k9szNZeah2E2K4Nr/3h66JorvcnEqDe8d56mk5p\nSFizTQSFcGsZb/5vgWre3NqN4ZF+nnTkTV+H6qUCZ6ky2BEndrTWuYIkT6i4\nh0UTmVXit4eV3bhm2i6AdKnzMRwynI3yldpEe8LhRmcSGSHSkcpGC8KRGcF7\nsZSOUyA6hnnBOrHPZ4oce3LHuuv8x2YYLvjs5S7xw9hFmZRDminljsnJYoCx\nzh8/\r\n=hC/2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8447b42cdc88335a4d5a37bb048f5babc1c5bc82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.cf5b9eb86.0","@material/base":"12.0.0-canary.cf5b9eb86.0","@material/theme":"12.0.0-canary.cf5b9eb86.0","@material/ripple":"12.0.0-canary.cf5b9eb86.0","@material/typography":"12.0.0-canary.cf5b9eb86.0","@material/feature-targeting":"12.0.0-canary.cf5b9eb86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.cf5b9eb86.0_1627063948126_0.388747687991823","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/form-field","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ed1d9447a2f1b9d95eb3c3da194587ebc5d455c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.3f36ac75c.0.tgz","fileCount":34,"integrity":"sha512-+4JC7pMu29ASotGtqdgH8FVhiMmJi54biUu2A+GGDHApcfYTtYB/iVqZtr44co117Gs9QpR4EcjXnxZk8LmWKw==","signatures":[{"sig":"MEUCIEzBQD+l9Jd8DAIQitWTDtuNhAz+nmWbUPDLRMpaxjGsAiEA2unLStDSmpTlIjR57fGZJhFIVz5gBqRC8TLV/LLzOvU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+ws6CRA9TVsSAnZWagAAiuoQAI/KzfYsvV/MlGYPlrJ/\nQjLVs6hiTDkIF1nNCxtVR5Q5AhxpBzDAqcFGCCCY3bQK8WC3R8GxBC5HQ4kg\nxv37kc8vlMI5W3h03Ib21WpDJnEqqerOToCd4rPAZsru0Hz2OLyzKYgUjOpz\nBTeoCDUiMYZBpglOE0wgVW4rKLxNovKPVVNGyZ4jgECQbpHNQwcA2PvzQPs7\nFJS/hFRYyyx/yexFvxoeSVKBsf5hWlnwu6SUH5xg4l2eJwazZPw5QAc1p72F\nyXtmT/R9kAo9/VpSsfwwriZglXxG6q3Gga17A80qzmJ9mYmY+xHK9EoMs+x9\n7tNyY0z3qeKDw9Pgb6/ZiPJ/Nx6TGI0zJ2M4EWS+LpNZYrAM+ywEOkHEbsBR\nWZ2/oJ3aDtK15LB3u9A9e586lgVveCw26Kzh3RS2fAP7KKTf9OQdJ/Alehim\n94j3W/rHTreTPo3hAF8dDE95KbEQDjWBdJ6BdymN8M3qWa81WVcv/w+F+B1j\no73sud0GyVJRkjRxuEk41AFr6+RYbRfFruiZ1IO622cMLaV1TyxXKx5zsgjC\n6ay/3X4lu3De6hHOYCcMnsdfnzoJxLmRhRVdj4yBam6Qu3Sb1SvnWvNyHy+y\nCFMXGLHmQdFLh4TAitMcSBKEYUjva6Hkq4cMcHgVQAj2bKJDZbFUexyqfMfe\nyYxg\r\n=PSFZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b0f70c5fff2a6f188b24beae7ecdf708b5bbdcb4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.3f36ac75c.0","@material/base":"12.0.0-canary.3f36ac75c.0","@material/theme":"12.0.0-canary.3f36ac75c.0","@material/ripple":"12.0.0-canary.3f36ac75c.0","@material/typography":"12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"12.0.0-canary.3f36ac75c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.3f36ac75c.0_1627065146378_0.7141941650988965","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/form-field","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2685c2e832c584dada95350566b04265be5ada31","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.ea1e1b850.0.tgz","fileCount":34,"integrity":"sha512-VCOCk8hnBb6hFvcQQps+ipd2tgZdAKJB4Q5/+RNOJu3q37zzatElMZmGnzVNlF+LiW+KdzgmgEqqKX7ypJpFJg==","signatures":[{"sig":"MEUCIDHZdyEGuxBFoDs31np1K5lwmXpSMW4k/bIa+gY94hMvAiEAlu4erWY/r+/COVbndAL3559l4mQ/G/CNz4EjWdOdx/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H5fCRA9TVsSAnZWagAAl0QP+gP6+Gjnd8TLOooHFzio\niuKrcaISohazTdhz9bkSxHGC1kDqls4h+1qfa/z92J4H0ykQLHbfLdND0RD1\nFrfqksaHDCMsidTTC5mdQuT4XA73qXeQJBCS5wf7pdhAWuyPLKkmnY0SeE0e\nW+mFnAoRYGyEv8o4tWyjnfBf7psLxtZOLLFh8XxQH5BCPvMBJ1/rUFQY0KAM\n4ab5OEguK5AsI8CafyNWkHNp2Vu3pAo3BCP8SqMspZKfLm+zaFWWobDsZ/uu\n8vYI1yoFCmFxppcv9d2c+kO8tjVaMX1wvU/BD0ktO5qFQ5lv5dyG7NrphEUV\nTrWNzwwO/FOisvZ95gtDrSp/4JzZSFYBbudZmyqyqA1LW9tXs1zMeyB9CorX\n7K4FqIUPTIwfzYpElitUk9x/CmecWystHJYBw4NdDrxC+sCrjnVN6MCWJRyk\nDc/Q340wk6rKXSqbA3GGN5wCJ0L09BO88urusyfCtiMCuswIffp7O30EAWR2\nVD66VNkLdB0bv7vgYJz3zhQlo/Z6ZsVsKr4ocQHmGBLiLDCWfno6YHYUeGYd\nKhst2qUbjIWohu2gwn5TSCoe7UFnC7CmqAHHVC7RHkHrX75ZWX4d0f2+lXLx\ngbsqsvL8jw3eoGU0aLrIBDTCkjWQsEvho/S8KAQlHKftGulpYQIPJUn8GR4r\n4d5X\r\n=p3C3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7c296c6f9b2c20eb32b0501c98b6415bd193dc46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.ea1e1b850.0","@material/base":"12.0.0-canary.ea1e1b850.0","@material/theme":"12.0.0-canary.ea1e1b850.0","@material/ripple":"12.0.0-canary.ea1e1b850.0","@material/typography":"12.0.0-canary.ea1e1b850.0","@material/feature-targeting":"12.0.0-canary.ea1e1b850.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.ea1e1b850.0_1627160159355_0.9641646771776149","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/form-field","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0-canary.22f390c43.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d5d383ed1cafc5d1ef55287ebe5c5431a80d6c3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0-canary.22f390c43.0.tgz","fileCount":34,"integrity":"sha512-/NQCEXAquR5JMfgq1YcPYZVIXN0ixKtQ/3+Yf9in1AmgGqn/pGL4P9/g7Dfbx/X3pHNJzMakCQwNisIOewUmyQ==","signatures":[{"sig":"MEYCIQDdqN/xaartwDmVxwrU1wbvbLZGO+UfHcg7/BTJvRrcHwIhAPxOqjHpcKR/tcMeojlHrVzRc36Ki8HTnfUbrYQ5W52c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFe2CRA9TVsSAnZWagAAJTMP+wd8wXwebr9jP8eav2vX\nqfM/bts8+LMYPGjLDScCcI6HP/X3HkWbgKHhklLTfk/gPsQokukqgq/aSIr4\n2V+4QYP+ZVMWQkYCIZWN9wJMQMVFT0W5HiljfhsemxVMkjRRnMONy6BW5SXe\naGJ1KInhJ5O4ETPTyw6f4GV/fDOQ0wczwOTuHC9qR+V/VdsF39andHtcPqTA\nlC1I2oekiyukGa8KoY93uQn0Ml0daJinwSR5DYblUfM/2rKVl8LSl30+tCKF\nd6FFumjTovdJmyaNbrHptYbQ3SPQ59zO/lsN7nhkUkNxRhNvgjHyBWA0UIOv\nxyxb3MalAm1Yi/3dOWxoYYGAXBghVWLGgoVv824C4Utg/7VLr/NtB2pGL5hg\n6z+RuUrL5rQZKhRK9P4wiyXs3DK678pCwwMDGk3KASDxX9buIHKXdvYYjBlt\nbT5AHacMyOLHT8L0hTCptMNdug4dN5FOv3+EJ6Nb18fyRIasAqpn0tqC5v7k\nd9SpXJQMZmMVa4wuqtQEkHH+kt/K0BYMtCIYkmMUGx1tW9fimwSpRT7px+dt\nDVRfPJ+ddUfRJ61Xuo+YOFJa15B3J2IeOB0FlNXLSm8MDahR1femU6EEYpNp\nEXTE9M51v4Olr8hhwyBGFx3AZ05HoCECJl7HAK9D3CfsgITlb0HTJgNqDawo\nydhR\r\n=GRV9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2eba31ea1c3ae3c0e3497f3dae6cde368675a496","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"12.0.0-canary.22f390c43.0","@material/base":"12.0.0-canary.22f390c43.0","@material/theme":"12.0.0-canary.22f390c43.0","@material/ripple":"12.0.0-canary.22f390c43.0","@material/typography":"12.0.0-canary.22f390c43.0","@material/feature-targeting":"12.0.0-canary.22f390c43.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0-canary.22f390c43.0_1627412406588_0.45256983935610795","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/form-field","version":"12.0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@12.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"866b91437f15f32bc484957aac801af65ef1f143","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-12.0.0.tgz","fileCount":33,"integrity":"sha512-es28doVewEhvh/sV1OqJNFpH+vVLRZyGLh5QvqxfGOmozcUb56nQbSAUrOwlK+ZINwdy0fLkZLJvUu8C9H33kg==","signatures":[{"sig":"MEUCIQCjarDa45jAIFX9FiGbEROM4uFB3eJwKPp6iZn2VdeFnwIgDlE8m1/EV3IgcejnqasY4MuHFp3xXeNKoqvSYmLF2fY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":193541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGNsCRA9TVsSAnZWagAAVVIP/jflaV0tmM9Qs/4a/+vj\nAQGJKjjnYoehyoAWcaHNDC4+zsNb5OqedpxADOq6m8ul2ArwkeGnOZi1OPTZ\nPoC3+Kt4z2VmXPoL+avucyfcGgMtdjKdkuqSC3H36uWPtu6ZCVTNG+BSswMh\nC1zCjup64gr6rDd3tIny9An4hP7Hh+BeSw8Q+ZcVxroSctPgLrK3SKHz5Ubp\nnAfLtUs7Mkhr9470bXzzkbw9t/hBsdtUm22WzGgPNjvIRZ6CUmdjQspmhrNx\nT0aS+s/wcOrW66+ITxkcsmNtAu9DHHpouAMjkVxWm7cdKtMkyAVdBm4ojQKT\n/FX1MXv+PpqwE2vOBIb2BdUxMSgxnVKGVIHtD9YX0a7OSD0wGFGvKhBzD2L6\nvco9oOY5hs3j+7ntXL5iM9R/Ijh1OUBPE6N+iP4tJVOWEtqrV8UvouJjTqdm\njwfCxCIvjA78EyGoJc7MfHsIZAuJPzGhUXgeDt5o/h9cNgwViP+TrweifS3E\nLWcgF/Opo09UVy8L8uHR7Ibf0aoNJrtM1zier+Gky2Kmib7Wbj5okDyWXPCr\nYuG5f0tK0midiGYCbW8v9w+e0hNZrZYnrY5G7fWROiur39Ijp3QpAYp+++y7\nuBk3iPtATt7fyrUpKiwxcl5XjOf9LsjAHPgH5Ff8MNtXJQUca6NK7XCTOQcz\nBEt6\r\n=uA6D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","gitHead":"ae85f7eba0d72f4fa5f3e8669cd316336b3e6828","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"^12.0.0","@material/base":"^12.0.0","@material/theme":"^12.0.0","@material/ripple":"^12.0.0","@material/typography":"^12.0.0","@material/feature-targeting":"^12.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_12.0.0_1627415404337_0.3680754792149117","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/form-field","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"753643d0a4c1743e0d8dbe4b7d25829412307092","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.ae85f7eba.0.tgz","fileCount":34,"integrity":"sha512-5r/LtPczMdpF7KviPJzGf08XB9FcJ9aOPKx54sIWDw8xlKlMEpgt/P0NpkdRhUA2Lz4lQxHSoUjwfbx5JqYn3g==","signatures":[{"sig":"MEYCIQC24UMHwRB/0nFEGywWGlJ/rgSJGpky+zGZE/R1DbLPHwIhAMt9JGBkFE3gNCYkbmEjb1mryFbjiyOY0/D3EEjxb01w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGPOCRA9TVsSAnZWagAAbwwP/2AdtwjLzS5RFhpNFZI5\nEDYghYoaY80+mDXIi+5/Qm8hjzP78Jddlqj/09VSHl1gbIUXW2O+9k4c8jDU\n7dofwy0hBlr05IOxmQolaexZl2WHijbWVZc1Uuiy9uDMSvsTHpWf31ZsIiuE\nKYNWnS+H33oxcnXs51rMb5fCzk/6cqhTR4PHvAhIJsl2mKjHDxKX+45mJnUm\nSlM2tHCsTJcULFi5N5WsoVpE5qaaadSdv3XwCax5Qm2T+ntgKQ1J3tf4t8vl\nQMb5gcfXnNIiYWbQo5u67xhgZPCxjP51MqNjWAjvaCQWzFsy4k/ZLYO9D/rV\ng9M17b2fPdsZxqeEcaCCbcD7rOiRXJRDYXByEK0i/6SrtrykWRcDnJABM7C5\nwSnqQFEFbmuBtFynBWIT0rXxsffJ/PhOO/tClzZHROnWga6AQP9idBs/HFgi\ndUl9U9Br8mu5m6Z3E8D5wu+N17wBqUm/839Y+4QJSlwmwW+L07mwrR0jhZZ/\n54uJbyyrXA6HIwPdWX+S90gwRlryDKGcoVds9xjQSCGrP3pBbHWxDph1Hu1V\nURA4iLKg861ksiCgNFIPqBYlI9RxcshnazvEsrvXCnAk9JYN+d6go4zFAgW1\nHbEyJPQ/AAYSP/TX1Z+ZvrNFEyVwNq+sRuycFf0UP4NfAdyb6FF0wI3Y5QoQ\nKB5U\r\n=whjT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"087c731cd84ebd8c578510bd4c8dfb5d11e8c574","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.ae85f7eba.0","@material/base":"13.0.0-canary.ae85f7eba.0","@material/theme":"13.0.0-canary.ae85f7eba.0","@material/ripple":"13.0.0-canary.ae85f7eba.0","@material/typography":"13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"13.0.0-canary.ae85f7eba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.ae85f7eba.0_1627415501896_0.8253005972817404","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/form-field","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.5981207f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9bf34aa5c834801d8e1df4a8d126fa7f092bb1e1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.5981207f7.0.tgz","fileCount":34,"integrity":"sha512-yiZOCS2C/3ZSKmoYuljQeWJqd3syur2uvlyoM0sfbXkJYBlylZdiTbjt9fO7edGXCmIqtfsURlYh0lKnKhwnLg==","signatures":[{"sig":"MEUCIQDVeEqfu3CihntY4t1pjdo+sAti9GgEkInk8axszLFuLwIgc5vJTmcMNLjxyY/LfFbOPuNFQauOVQBdmSnIHdWd3gM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJRACRA9TVsSAnZWagAAtdAP+QHoXE9sgD7katGVrFMo\nTQY2OWxpiExFFpLcCT3c46GrV309NZy1tk4lT2eXt7E23iiy1vuckodO3IAN\n40FAQ1sKPL1lvTSgUxHYxE7khnhFHEwyfk4ErXNeL1JOFK27H1UmGxB37yRO\nV3QBGqLVfTrHXdiwKkAvXePt32O/mtZ34y3wN3ry1pWtMOsSMu/ZrFCT/Zlx\n5kNqKscXfig2sPM3/llpT5lirdv8yiDBtCFaHpiZj6u0wwqyulW7kXMyIvSF\nQE+Ruwa8PZ607N21ABTSasIkF8pRoVtB+PnY6Ffi9BDGP4l2USVkHRZ1D8k+\n4RXrGXuX185dCGKQOF8NhMxHrFkeErzBqATIoinbt+6faUulEcT5M/MM8ECi\nq6iX3FvY2Vs7jE+chNhbCpkrncV3CqEEFjggRpOSnagtXyVrytuOpEAM7UxK\nfNbvOyCr0svmJ8/upYjBGYac9hnsbJ5mnbRZ0YgEljfMUGw7h/BSBzztpTAg\nL93CVFwTEi21nQ1zg0Rre7nRGqvodpQmYYX+g3jWEKMGdYwpWIQ4qBZDcjLt\nh43jakHUDEfwVthqEcoen5GXTxU3E0P3hVcPvawIfiTURlJd8WzdrgzQ70n4\nJFcqD4Hfl2IFAhAIOG60fwNxoQGIpHjCp1a4EypDe1P8qWClgdhF7ZeJDDHP\nXZ0D\r\n=SI68\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8a8b67c19b2a9f80923dd162098b373bbf34b58e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.5981207f7.0","@material/base":"13.0.0-canary.5981207f7.0","@material/theme":"13.0.0-canary.5981207f7.0","@material/ripple":"13.0.0-canary.5981207f7.0","@material/typography":"13.0.0-canary.5981207f7.0","@material/feature-targeting":"13.0.0-canary.5981207f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.5981207f7.0_1627427904381_0.6248454093947353","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/form-field","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ce67feb97738065b6de5caad849187c1d6f5460","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.83bdd0222.0.tgz","fileCount":34,"integrity":"sha512-9vcza42GHi1IDEJEJsbPrNUfwKF4eWjZ+oQmhn75bmP7vZ/xcTAQLpi/CL0WPHCj5O1S4I9tViM5g7w9dscSvA==","signatures":[{"sig":"MEQCIHQbEhW5XdiL2NN9+L08KmsRqUPK6Y6y5ssDs/EWZyVyAiBUqXInhU2oYv7VvBw9bH2O+tDOMqKCKK5WnaPhKByXGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZMsCRA9TVsSAnZWagAAW7QP/3T2qL2V6OTD+QMpeD2R\nBu2aizVEC+Yy18CEJhcwVSIFF/1COBHrHNofJWYLynRuuJPHO2/S435/Pm/v\n740PadsfNmqlHq14vr5rEa+miHP7ZzVpqVXJWV0M+73pmDnFgbVyscZxyRbc\nYsKpk/31vs4AU9s1EYOECcsHH5GnF3WdmtSvkITIQvAu05n5qhx3YRmbiTCS\nUHW26FyHSJ+5pAq01vmPx7VJT5Z/qaQIkvcQmaDXLZfxokmvoBOfEIfpTp5C\nho3KaalL/T8QUMNsyWJM8womMCsn8PTNVvs24tlhF4xeuBqVt09w9PdfR/wz\nlaYQKeDahZnfX7QQ8XP2iFc85vBXk05ToFDko93iQ45NgqNzd+hp56UhtNH6\nd3er+QnmDqqEKpsASCOr/bEDZZYKvyV6RmiIHshYHDH+njf0Z2CSlotqbT/+\nMemHovoG+lzkquGalGoEftBjInpfCcVI1dFlKOJ677ZbEbmtd4KqMoiqiK54\nxXt1QDeIdUdM4acf7pKXz21VXD9NavK8fklCv+lQCpPuCInjJ/LvmJ+k+erm\n/yOx6vFSTOECf1zxQaX81S1KOUfE+AsOaPSPEPZ22hMpoiF+tm6ML2TBnzHE\nqEDvd0ILh9wxeZbBI5YC2tbeJ5jXGp+/UpJh/6/ykbj0Y7IlFOA3A4gwurTv\nJ3+l\r\n=yKvb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1f2b23ad4bf20ade58cc1b10490e9ca3f9469405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.83bdd0222.0","@material/base":"13.0.0-canary.83bdd0222.0","@material/theme":"13.0.0-canary.83bdd0222.0","@material/ripple":"13.0.0-canary.83bdd0222.0","@material/typography":"13.0.0-canary.83bdd0222.0","@material/feature-targeting":"13.0.0-canary.83bdd0222.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.83bdd0222.0_1627493164272_0.9307074480595157","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/form-field","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.28656298a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"017d3c29260de5d23674b27dd80a106d50edf877","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.28656298a.0.tgz","fileCount":34,"integrity":"sha512-V88Wn8s83UkvNwFYJAOs7x1qMHHA9K21U2fmchfgR6eQi6/VCp2mDDGQYlr2pzyA0D/LQYKfql3KxhvEiJFrew==","signatures":[{"sig":"MEUCIHLru5UF+JD1Wl978vqe3tKEHOCiCbo5vcj+jEPEaS5YAiEAtOnJ4tyWjVQvwn57vv7D/qS8EX+u811JziH5M5eSXQM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu++CRA9TVsSAnZWagAAsWQP/2OqJiBqZHfoECzzhUqq\nzZsbTBBC57/hddCdcTVgotM0nDVOJG3atNJM/AC+hrS0wVeef9mM/J+dzzpK\n2JpXAqu5QPXFccZ2OVDBIOjFu0CSImp62hXfA4UPrk9uAm7tlVeT9ntPNgGF\nRUTKO+VPMJOYP6YLV35y8AAGG9b6Gr+dhM2Px+QS67Fv2/hENNjOtDAypVpF\nTAqHoLJ2pcgPMSL/3CJZVQmti4+4bRfJ89I2/QQGe9nISSB/Dj7tDV16FYg5\nfoUOK3N3Qoz3foKqLnS7u417xEPUYV1t04qX+sML/sitEihHft3TZcLFdQIN\n94/PTrNT3I8XRDtloqIFhwDoyWCeEUr4B7it4a/rBv9aI2AztGcqu31xUZa2\nFGWAoLswVyRcXYKehP56CCj/njLZjTkslvOOfErMa9n0t+eZT8btBtZnPC4l\n/qGMjj6ZDW/NHxAoYOA/HdYzBlzRRPbdMmVxVz5NJ/5syIidQD3IBIv9KAeM\ndaqCHFSSvBZv92C9kUaAMpWY+HwSTp4bgalztdXkkkcCc0q5qEr2hz2Zrzfx\nTK+DpEJ+ZcYW2eXrPE86sSVSjio4W8vEjMDTXcr07Ae6RMaS12ZveYYG0Zj6\niHY+gXyaj94UkoONnZylA+sPdLhqedS6vCrEx4onREERkEeGzc/NMn4g30O9\n6bmK\r\n=0QlR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5fe3e7fec89669c56504c13aadf80a71a543df78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.28656298a.0","@material/base":"13.0.0-canary.28656298a.0","@material/theme":"13.0.0-canary.28656298a.0","@material/ripple":"13.0.0-canary.28656298a.0","@material/typography":"13.0.0-canary.28656298a.0","@material/feature-targeting":"13.0.0-canary.28656298a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.28656298a.0_1627582398345_0.21056282722489938","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/form-field","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75e5d345274d6ec2adb4281914477243325ac5f6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.9e797daaf.0.tgz","fileCount":34,"integrity":"sha512-wv9ZrGsj6j1mGjh4ZxkvbSaLNmAXfKg9ICQnlZUkPnQbeZjyg2J7sEjEMh4i32DVXWLuQd/1cxq74MH2ZVfUBg==","signatures":[{"sig":"MEUCIGHy+uqa8oQQFZH1YkpQ1iu26xb3HI7RptF+2HW5HJ79AiEAnw9qmjSta8FoNk01+VO6R4igSvoV1ycIyVCnTIhKvBc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvT2CRA9TVsSAnZWagAAhwkP/R8s1O2iQooDv4e1GVR0\nI6lG8gxRQQCsL7GoPD112E6qXKPGN3GHhkXRJf3VHIsCupDoLT01QT8agIxa\nOnG/KOLYyPa8AjRyI9rQ3ydUruWs1fd6X5BRCF+QIpmQDiuWn9BlRQnbj2Ay\nVVDKE9sgh3e3KeVeoW5OH0lvu1xQ9SffcWBmvSWUU+PHK8aVSMFWLZLbhUin\nMeuCLBidVIqXOOKSSKhW893whvCFz4XMDkJCMELiph8mkrc8bTba/rCyIHty\n3OaTE4EN8ZBWep3AAVrbYPkCtdGXpOZ2hG3aECp3XOQByC9wLks/t6UKwIne\n9DZ5ktsEb+N29XQquAqe4BHA9xJQA0wG9tpgYBicdWqB99RMcrrJvokRfJDD\n02Z77Lm/Nq2gzH3YJt9EZ77yBrt0MevFd7VFshNWpGFSuRWfd1Caqb79/r5P\ndiEduMbLFoIkiM4QnwnpY/i5vRctrb8IKkhfgrWf/5zvqXnhD4ltAbG2fCS+\nfPxgDa2f6qA3j0qYYwYcVTPlh/jWwusFqKc8LPWqdLKQd8gz73LD5gkTEpW2\ngY7zuIaN5bf/xylEK0dIUYcKagkw4Xnu/MzN3ImFd9xJkN11MnFL0W6zGZCb\nRJ1akW0mIVBQ9Bbtx86ZElNgNV/o07S4PUvuD2u83I4wulGuDKrNnGas7m1/\nGRy+\r\n=GQ2t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cad664597e3cc10ce42dff721f26f40b986db48a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.9e797daaf.0","@material/base":"13.0.0-canary.9e797daaf.0","@material/theme":"13.0.0-canary.9e797daaf.0","@material/ripple":"13.0.0-canary.9e797daaf.0","@material/typography":"13.0.0-canary.9e797daaf.0","@material/feature-targeting":"13.0.0-canary.9e797daaf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.9e797daaf.0_1627583733847_0.6239972886159906","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/form-field","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f84cff19dd30676581d0d4042c1b2e0f7f0acaf2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":34,"integrity":"sha512-3V5CO7NwotvWgRJyHVkm6wJRIAs3Cg1JAW0hrd1ABWi0qSvoJm8bDlUUq6RyxTL5/p1oDRSEmMOW9BPjtJXyug==","signatures":[{"sig":"MEQCIBJ82DyMWpA7sS3wqk0ZFP2bpqR9X15DljL1uZC0tJo7AiA0l/aSwfLIJ5Ly6o2/IL3ku3BFNpcLxYJHZ0XXSh8Nnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE1tCRA9TVsSAnZWagAAql0P/12YC4/n/A2h/dT0qJEN\nqo15Re3BvTycR9jCqE9u1z+25CgBmIwxySnyLhKwlXIG/modidPf7y+ggVZl\n4/rHX2cUftvegZByoCnJawXOvmj30xKnAe98lQvNljfwOAIhAQMgmQLSvwXV\nh+hRsV0qPjdsEpXZ37OY4YTYk8h7iLr8OAgICxw21Rix2Ma9ziL4kZa2uSUs\n78YMCKR7tKgVruFHs31GPFbt6Oh0HwsDmsMV1VBSL+0stBy7gCFBuoH+KMXE\nP8hMeR68dqTccQFiICLgPHK7Wvc5YOFCA9bZ1HC+9bojl0CakZX+B+NueXVY\nwJI/rN0oCjAQTXYZhv2NzuPH6SajXVqhtITdKsKfV9oXKstJ2pIfRCP6j+Ma\n1kbw+taoArzVRTj2xGzwcjYhR5vya9td1Hth2gLU1y0CKGmF2A4UwjP/LRrW\nAf60FnhZkYE9vNR1CnHWj0i1c1p3dbACXcmB2NWq760v3vvEv86pxAuC7MYt\n8tqdoLb6Bnobzg4xz6CiVzFS0lK4F4VU3iEyi1687hvm1rUMtz5kFLvbrVLm\n8yZ1pN/HibhzjTxaGozQP9FLK2qJo7ocT8hnROmaXda4ShbmtboAMyybhk/i\nM7RvPYpVjs6e7F1unPa/p4+YODz45iUYXrE3xwxycF65aro4C3dSQpBVzuaI\nygXw\r\n=7hL1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"db010696805aae457c8d8c9da8b394efff28ee35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.adb9f1ad8.0","@material/base":"13.0.0-canary.adb9f1ad8.0","@material/theme":"13.0.0-canary.adb9f1ad8.0","@material/ripple":"13.0.0-canary.adb9f1ad8.0","@material/typography":"13.0.0-canary.adb9f1ad8.0","@material/feature-targeting":"13.0.0-canary.adb9f1ad8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.adb9f1ad8.0_1627671916413_0.9193010332177538","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/form-field","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.cc5377458.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"204ab5e92840ffb4fb32e1fce4fb2c9eb9b266dd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.cc5377458.0.tgz","fileCount":34,"integrity":"sha512-cjr4uA9PrrjtpcTNhIMU32rTvtvUdZVYJIOp0P+aPjToFz5g4Z9x7BSssBdbt+bk+bmVC6F+WztfNuOojL1+WA==","signatures":[{"sig":"MEUCIQCSXRp3TkuPmbfiEe401ucqCoyyz2Z+TZpTg2InWVOK/QIgVGdMPGQgnqPcC3HaLWYbAUcuNwWA/nxbkKiY9OmrXb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHAwCRA9TVsSAnZWagAAyfoP+QEcr+jRq5xHQFzXHJa7\nV4n5NOoJ2h5O66GXoL1ck4kp8iVWc5d4qpGM4XEcL9eRofRFFc259jXpzPiW\ncAmUy3VW/LHp9ROfB6nQjtuj+ZhPGF6sV+cQrtXyWfe5JYkvtDXo48BYLuPw\nH4bJh5kinItCjSRF4weV0BzLnF81XigWGyo24gKVOFp/gAvD6vcUF+H0uJfi\n2Q2Mhb11oeF1PAYnUgmzxs+Yd3D7Tl6qb91zDesCHeqhg3/ZA8DiFv6C5QAC\nuV9NuCv5UYDI1YSNHf2TxZ9LG49oMIk5DGJJ2d339FhrcOsholl74f8+A24x\n7wCiNX8yhMUkGbpd5USauiV7qTull1mZC0xMrA/O6fyE3kI7ajRN+BPDVRgY\nblhEofBR8K4DgSako9bDl5L9+hd+UYYUPBJa4UE2K0gc9w9qq2sTvONL0yb9\nsP5ukXngnnpKQTb+oTBu6rIM57IUD8yXziOBA6FuG1CApesFdQx9az6ESzxf\nYED2e8VajhZ/U/77WSMe7UqbusNCvAqAy1CAMChc+n43szeZkPYRtmk/Gka9\njtTEQ7FNovFpJ09vhNg6igu2qjhkn1NsB7Fo0/kOBr/yg8AP1pZ7jItoGPQB\nvj1ygMerkNtqp5wSDuxJo7Zol4fKUzcnNvZYtsznlknsYVmX+G8itVrfmjyl\n8OFR\r\n=D7Eu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f4f5852cfac85d68dbd83665da839943c29dd866","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.cc5377458.0","@material/base":"13.0.0-canary.cc5377458.0","@material/theme":"13.0.0-canary.cc5377458.0","@material/ripple":"13.0.0-canary.cc5377458.0","@material/typography":"13.0.0-canary.cc5377458.0","@material/feature-targeting":"13.0.0-canary.cc5377458.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.cc5377458.0_1627680816087_0.22767748180449154","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/form-field","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.a395972cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5301e4a98f3d0e856251b560d3ff8cc6d2eb104","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.a395972cf.0.tgz","fileCount":34,"integrity":"sha512-20c0y0mCmuXOx8oywPMsEaTIC4R4Mo+8kabyACMpiskFBlbXvcxe9sJ4rau5XqwUodsr4SUoFvDJAO5p2QzSig==","signatures":[{"sig":"MEQCIFh+hVX3D3vEgrz12wHMlpdodr5gW1XuuGB+wmle9LcoAiBLoGnbmITB/YboRVrQY4oELrRU+Jvo8UDpSjZ+xm6Xog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbPVCRA9TVsSAnZWagAA8NkP/2IsugjNZvAwWNiM06D/\npE5Fc/7REuD1NV48FHlOuQ/VQM0YX9O1SO98KgPjs4LbcIfytE+telc4JQwA\nSnDqdLaPEo/gPYoeJuUUUWve4GvFlMt94WntpvvnZ0prYDhfkAxYYRi66VnN\n4veazix4JmubgQGJxQe7dTL3XlYaDZd+XcjSdnVaCx39uOPbNcfH45eD3Ttz\nnlGsZqWEO56U/ES2374zqJCd9NPRNk3sRU6SKqR8fYxLcibpMatt/OuHQVmd\nkbv534mozQiyjX7eWzSGsfyrZYVkuy79MPWVN4qUQzEK2wnA/jVNTNcezhsY\nnCZmFE/U8N9nz51+0ADz7nn+PzZeaRcAwGji0g4dvCf8kYsvJbwEazDERCnF\nT/TfMI+NOwkfSnSxdt0gN+oGmfpF9ppcIUtEhvGapCEvWNarycMhTR3IQI3T\ngUhlt9yAvG5U++bhENtreInEp5Qsahk3tdmAscJqd2xcsYIJWuDHc7onlFdW\nNviE3VmN9J6DKtjaaCtGJ2KIGbGgz/+4Xp8lP+qicu39n19sHrAq5rBlbFzT\nCHfKx5QG6VEwuBFkqE6v1Nb0NkEQCDScX7loEVbUETwPjcmGbUItO3N/XwOc\n+5zRGwZ9+92+otaQm3vvzAzJpDz3HHPJRqGwimE/8/tZpP5/hkDPDZ6qJW0G\nruaB\r\n=QbQf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"00a6b6110465620df99cf5f775d52a1054c91cef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.a395972cf.0","@material/base":"13.0.0-canary.a395972cf.0","@material/theme":"13.0.0-canary.a395972cf.0","@material/ripple":"13.0.0-canary.a395972cf.0","@material/typography":"13.0.0-canary.a395972cf.0","@material/feature-targeting":"13.0.0-canary.a395972cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.a395972cf.0_1628025813365_0.8118148684093556","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/form-field","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b98926b8087982c8d8dc5ab48540e2aa2e5fb020","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.7c96e6b98.0.tgz","fileCount":34,"integrity":"sha512-g4ZcxSgXi46Ul63w6DWV9OYPK3J3NT0tOLPIFO+qAcvn1f6NCFGmcbcqOtKSSdht9TgJoC4wCpkWBQMAhlnj6A==","signatures":[{"sig":"MEUCIQDpZoGhIyg3FggoEBNm08K1EbyUj59P4pCYAABHM46RnQIgIg5VJgos3cFs95bEge862peItk/KAUzE90AAPh/7YYQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb+uCRA9TVsSAnZWagAASvoP+gO/G7XJ6W/gYqoXbWmL\nxfb/Wo9wCZ3NG+H1pHW3tLzlP7WHl3AIg+N0YtWRc71qs/xXXxy5I0wlUl+z\nz/HSRHb0ynKiMFZlqHItXnRWdxEkNduQpy7tWDp5eTHR3QpIRpxdWy7NXO2R\nCvaa91kZpSHmbdziCah9egyF3nJ5Lo1XskF8kxLqlhVgsUkckjXWnvP/GBCu\nmAlZmmA5oaEIk7PnqcyCwP6yI5X5Z2WTes2NVbodY+IAkfBpWUOKJgxPmoC2\nDK6+WxKdewwq3mcRo1honnCiO1e4O3WhizPYh04LBBsMtOyR8QeKh3XIVfTs\nmE+WOD7BvN89oRYjVNGVXHaVZqV2W5AvzYroTylZmFrHDDVNcpCcfaHs4UGV\n0USkE3YPd2v9F0SCSxKL9NETlHAJEHjqK2it+KXDtY173taAfb9FJWezBbss\nmLQEDu6zakZqqnhc//TdQgWVz05+rGlIUSaoMIX6H6IvUTnST8jlaMd04OL+\nHYyz6GrZC17TGwZ16dcG1zpvWpKfowL7tIW0E8LFiWycWIkIDJ8I4PHMY/Lw\nbUVJmV9g+kWP3hZDF7leLAwtFVY2yxrtvusq/LypTern9prCLfl7+jz/mdob\nE2lr2EP3AkdXgwG6h7Yy4YxnLRH17hZ68XzCFkStx9cKW+8FkHcvV3MJkwBw\nApR+\r\n=J6Nu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"38c48bd580ff0facb66c28bf9caeebbd2a6a4033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.7c96e6b98.0","@material/base":"13.0.0-canary.7c96e6b98.0","@material/theme":"13.0.0-canary.7c96e6b98.0","@material/ripple":"13.0.0-canary.7c96e6b98.0","@material/typography":"13.0.0-canary.7c96e6b98.0","@material/feature-targeting":"13.0.0-canary.7c96e6b98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.7c96e6b98.0_1628028846166_0.9575934654401419","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/form-field","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e87d3b91e195d948170a95570408d0d7564ca9a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":34,"integrity":"sha512-xLIbZ+3ewaCxXV+ihIEqEjHrDlMd8HsKqpp0UYv70nhzaPe7CBArpWoPiUBBza6TFTyqWdGNPeFET/Y6oHogMg==","signatures":[{"sig":"MEUCIExc3vB40+iHX+BfWjkvDqzmLYXzxDhoDNndLrORPGjjAiEA8PlUWeQPjqYgKeJLpu8/qhDc8W+nhxg6p3G+Ic8lyR0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCyn+CRA9TVsSAnZWagAAivMP/jMM7r9RCwbc4yjq2R51\ngyzMWIHXtoS1Xtq/k6skdzEfiEIVnRrHvhnIjNIFJvD5KDzbdg1NuN7/bBeh\noLH5A3+zslpjeWkdofEyxqiyAg+HZ35uQZr40gGYZTyUnBtYd2hS2Cmcmijk\nXTDrss6hkPEu4ddxXFQk4kgk2CBDZiTjXwCGnZO3Q1DmqQswFU7oN13wfmiS\nEo6RCTb4Y8OgufBvrbpYrunGRKATzIZSZZ37SSzANVyiJ7oxseGu24Q2qDtN\nQu8AZHzK32tdwGi/2t5+KuqpLdbqyi+rttm0ggGadfYqCVpHee1qZcdKxmrn\nfbnjm5Zshni6B0mLChuU1vDt+GICeiiX8LQhdFPD1uGvnjcOxYfbCpE3lCcI\nZn23wEu/u8+5qnRcYdUEUlIW0PxCKmOpYo2nopBtlgCHWMt4+Cpw6FHKBw80\nWJ9o68RzYYweaMHO0/VrrKs7wp7YRmTkNLwGTfDmZ5BLrXPxh+HsMzMHXPmS\nsEL24ymNJDKbbOoMqc/4fIpzUy6MOtIBvFMhM4dGFi9DnYFCNapivb7paDK6\nSAxNl2BPeY3vFT8hMpSIL16uOXxUCfrScBCWePxrSwq+++rOTo1kCGpQIhBK\nSduBk1B47X4Pox1W1D3hQzSdrVRD1j/YDcvxN+HgRovy2Dp0X6OoAIrsKk+4\n65dj\r\n=VDVI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cb4d3f1d1d37c50939ed5269748eebb96f798601","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.a80c8b2c2.0","@material/base":"13.0.0-canary.a80c8b2c2.0","@material/theme":"13.0.0-canary.a80c8b2c2.0","@material/ripple":"13.0.0-canary.a80c8b2c2.0","@material/typography":"13.0.0-canary.a80c8b2c2.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.a80c8b2c2.0_1628121598623_0.5709998722198721","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/form-field","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.3dd611091.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"631c835c31a97a4ef7bb3667d9f9b94bf4990991","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.3dd611091.0.tgz","fileCount":34,"integrity":"sha512-dBBqEy1CRUaIfXt0/kPOdG6crSU+ACUF+5zqmedOOvM6MmTx/zwSz5ojrO11OV7vbnHNaoilUIKyWB6WQUnuag==","signatures":[{"sig":"MEUCIQCPBFoNRyRXcA8XOF0GHM9J+VC3yj9KxnzkcpaCVeKE+QIgPT1aGVP55VcK+KWndIEQKaGKxmzKcY/fGij/OoPaRwM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2F0CRA9TVsSAnZWagAAJgoP/2wQwWOp5NysJqkxGA8U\n++akaxIx5NY8PsGKhvPdabgpYnERqyvk8viZ1nKUB7OUlAwzI3GQ9h/YhW0s\nTY+q7JSrNu6/pZ2pKyXyAzNztX9pU/kxv/q2F9/lNLS6pgfcLKWpDGpatwDi\nUbxGhXksZCvBYoRHRME88w5RAoD6yqz7EVexDTNNkFxxuIlTNkjeKc9C3pxu\nc8TOV0/+8i2RyVm4Jdnoj/TEuRr5cWp3M5QVjGU3/n5+WoVKRs7AFaW5P3tN\nBnQmHc30SlAG3VoCyWLwlMKeLlEy5UDl3AIX8DFsqYF8fW0d7bRqkjZ9KlK5\nqrnGLz1OSbKNdUYXiAC5yO9TsJ9eu09l/JX1GRqaf+VpIvZwJ8YIn55K2C1s\nZOPOBL2edT4BDGxGy8bvMFDscx1y7tp/LvkRSrAxYhN4c0+hWNy8v3gm4KfL\ndnJQVfcCZTgO0jf+Qly9TsDqa9d+dUaEMxbcSrKlPeEnFIhZIuENTYuZxbrT\n3HQ7HjqReJENAzYBOTcfi/r2zQVNUrx2XRoLrI65mCwZTL9y3cE2L58AzVK3\nTfRSdD9jLl9eXZs6X47B1FUnx2ZtOfE8qCDJq5p8tb5BeU0fEOQGlRsWlZ4W\n6qn07vTu3/YnvOWsSJ4NaD6uXg96bDFv6mvudWA7im+mc1+uLQQN75XTM/Tw\nMCwG\r\n=r/Ml\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fc6a6a59d9c86ac1f85efd94a4aa6a8e4c27c379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.3dd611091.0","@material/base":"13.0.0-canary.3dd611091.0","@material/theme":"13.0.0-canary.3dd611091.0","@material/ripple":"13.0.0-canary.3dd611091.0","@material/typography":"13.0.0-canary.3dd611091.0","@material/feature-targeting":"13.0.0-canary.3dd611091.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.3dd611091.0_1628135796528_0.6098595212779767","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/form-field","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdec127a7be8ec795c96ad67b313943fd532ed4c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.5dee37ff6.0.tgz","fileCount":34,"integrity":"sha512-axAP6d9XLnnfllb4D2W54+BUmnQBLJ5b4ZSoEnIVmBYIlgoiA4UnThGqEuFGcveuoBkNN/fNTOAqUPGRDnikyA==","signatures":[{"sig":"MEUCIBGxZi+bQFhNVb4gENWCW3HIG53Sq1ljgDqcVAdGobwjAiEAy69TZb5Qi7nrrTjGw2jch2T0Vzo/nS8GTTfwsPE7BSg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCMGCRA9TVsSAnZWagAAuMAQAIBvvPIA6psS+M2yvntk\nRUeZWZTT1iLEtTTrH/l3RLOvbnMuTGdBnrweS/2g6/fbjRKK3rwsOiEBFi2i\nwCulXozWOaecbDVlnBPd4VfloeRzwDLw2154aTl7zBnyGLvJJ9kH4qCjHi+4\nMms/eBoy3y2KjA13nEniirWKaGBPJX9IlKGXlzy4jRf+lHhtAonFZTFPhw2E\nKWq0apID/upiHqzRHeDS0a/eSVWF7TpHSa8a5gMt7oHJBl/oW2uP7nQfezr2\nLQm3PTDprEt5u+IIy+gGGbUhrtofzFPt9bbbTxTU2GZ+LOJpH1gBb1MUueJp\n/Qq0y5xLBaehSI9VT66VABuNpO3cGE9QIt1SpgIHWLzRYb+s3WirvYKbvveM\nTcQpozmibWeQDLqPCYQxXeZlWWFkdWq7dHaBQEYwUPfjjAzaNUsO53LrUf0g\nThum1rTRiKaieGyBHSRWkzKBNd1iKHcELWErPgZBQocfXZ3wwvhn4/JWkFzr\nwR4541W+SkrViv6an7KHoIWVnUU9poknPmRFOzLgVrpeDRqsHH29gZyHxjrT\n7iyW1eMmtF3KWW1sw9Vza7o/qYZF9tXlKxAX8b2qzflss/mZeXSVwZepHWFq\nMufdHu3hmEd3RHQzazVJxzwIIl6tAEdmVaMS0ZIT0ekw3iPopwx+iS47nY37\nvJPr\r\n=oiHZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a7b521f6e807878ddba15c813505134621ef85d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.5dee37ff6.0","@material/base":"13.0.0-canary.5dee37ff6.0","@material/theme":"13.0.0-canary.5dee37ff6.0","@material/ripple":"13.0.0-canary.5dee37ff6.0","@material/typography":"13.0.0-canary.5dee37ff6.0","@material/feature-targeting":"13.0.0-canary.5dee37ff6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.5dee37ff6.0_1628185349914_0.9413169360936087","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/form-field","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8492400ecc17a2eecc9ce6e9f45e9a21b4565d44","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.bf405d22a.0.tgz","fileCount":34,"integrity":"sha512-hJQMD/bTCZhlUk0eGzn0LMkaxpxL35UnZPJ2rxUJxcY//OBagHVQJhwZZlB9lmNPLppai1KVXeN+3dsWzLx33A==","signatures":[{"sig":"MEUCIQChPUmaidAgTh5+yPPGsxxethjUm+0/H38iMQ/SKtEkhgIgQLvqukDjD1bZob86bFfUkNBKVVSxgLS2XkGEdCiZjXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":194517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEeLCRA9TVsSAnZWagAAmRwP/joZ1bg0yR1XYdxBtxYk\nKQcFlwQWjAZqzP4jDvsCkWKtSGHc7nbrxvx7LqKXJCSp0FYfzXtxR1xw8VgO\ni3d5JLB2kLpzxYwg6tVymxHy26J8w43iBTbIAxhAxvyPgxvXBA5lYC0LU7Vm\nXMoploIts3Kzh6s9h9XWFOMpyRN9k3V9KT/IsAJfZL762b4Tvb3Afz4+N9A9\ni15MNDdqhStzh1SPHmeNfkYWZvcg/iSpZG7jxeGaFI1r5bdkEHW5glm/EHuj\nfD94zjHNMlu5tDhictUxV8g1wogGnRYtbQqcFL75TXTmMiDTI3iT8IYpqxEQ\n+d1EXOyL4vyzLfDa4SaPYc4owx4hjnUg+hBc8cKV3vvBiA68dDs5Uqb3JU0A\nfrePe9Zjb+XvTKwYQ1TMvxfB+pZegREiY799Td7I1RsPCLs4jLxoIA6/AwIc\nH+iycUrq1QVtkvxWrj+pAebnSeI1l/25YpQxXN9ZkQtFf9nyh9AK/OYQ7c2p\n8fqxDyLXu1kHZuICvDd28A/Y36kWLdLvm5ef4qCVbZzHHfwLV9Y35JRw0fq2\nMHtwLuv9yAlPsreJWatqHVIBqXnN69CHT7rejSEEJC95gdt749Vl7yAmt78C\npfINTfIjg9IsVFWURwcZVAKRU4nYAijW4UDOKo3CturjkAlWZ509BxaydK/r\nTjVy\r\n=6sDL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","types":"dist/mdc.formField.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"00ae15a245c6a46fa0a13aa61a02e5958c0eddbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.bf405d22a.0","@material/base":"13.0.0-canary.bf405d22a.0","@material/theme":"13.0.0-canary.bf405d22a.0","@material/ripple":"13.0.0-canary.bf405d22a.0","@material/typography":"13.0.0-canary.bf405d22a.0","@material/feature-targeting":"13.0.0-canary.bf405d22a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.bf405d22a.0_1628194699118_0.05139369162179008","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/form-field","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30cd62b3ca25c5b770dc014a281760f0e5a9594a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.b47dd37a6.0.tgz","fileCount":33,"integrity":"sha512-lZNI4JgPg8pNcvVWqVbW9X64DVi8bjjjLffaMYC9sLoCB+09diCjgZH/tdgGViZ+eW8Cc7SgfPFGZ6J/RgLnqA==","signatures":[{"sig":"MEUCIQDVSto4Vzdu7DxGkuLwf7K0iEgx7/6ThWLKIdYUPHnM7gIgZagJA5NyhuM8W+kNNQkPP+OM3WYdse+NNEM6UsmgrDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE8ACRA9TVsSAnZWagAA7YUP/0LIVvB42tPeik7KQsMH\nndacBhvrlfp4Ex1/pSWq0/gpFlC7MKyNSmQz0nxNtfW7FwR/od+hjwxNwRUK\nrT0JwxE80BPqyZTW2q2SBUZ1JL44G85BIRYBqO4QMlxtvNKVnUpxF3g2cIob\nzpKI7UefoX4sGnsIlh/W7pki4T7sYmOnlXC7fyz1vsIxh5SYoUOWKZ5J61Ja\n67j5Afb+AyGskyTzYJ6l0JKq7uS/5a6WTyc996XX7DId5uQG0lF1MzBVmY/f\ncUxJbe4eRmtxJdK5XxZerBOZNNAMWFRldSRIN23sasZQ7449pojN1k+ABYjv\n0ZESVBDmXn9EaR9ZWG4PHrCJXBW1RC1zy1n1A4dWw87PvhsKGj1JRtmo24Z/\nmheD3cGIeq5neR06lR5JpFjgSbsdkTuF7WxXvavtbgbw+RcveNtFiOh+LI8E\nQmDYNuJ55PlkGaPvWLTjqod8x9ZxYl8NcBToc7ahQeh+t9+yNFbCr6bpnP5G\nuSRlpjzkDyrykYiEt749fcHbZC5kxrc3NDwKURqq+6FU9bVRpXU+SADTVwTy\n1A3EmmbT2FNAQQBsxY7V7MBoSPnSMTppSOLyXNwWwPrqMWkvZI/6Ivurmhdi\nDw3aj9XaBTibf7OIPQDgUITh8pudGk1J9WuA31MYykAbyIqTmuSa//4Zovve\n8bSH\r\n=unr4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"47f67e5fb310c13dac39b9beefbd6b53fa54d1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.b47dd37a6.0","@material/base":"13.0.0-canary.b47dd37a6.0","@material/theme":"13.0.0-canary.b47dd37a6.0","@material/ripple":"13.0.0-canary.b47dd37a6.0","@material/typography":"13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"13.0.0-canary.b47dd37a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.b47dd37a6.0_1628196607695_0.13296777202247534","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/form-field","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07ed97b982d66d74c7ca2bfa730ea3ad9b1c3483","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.6c82b965b.0.tgz","fileCount":33,"integrity":"sha512-Gsrwnr6/z7pPpjZ/XY8wKOI/tLuYYFgR4JF9dACly9+kfcmx0H7f00cdufYjEMODXXvYr5UNOfLf+QnQA5aV/g==","signatures":[{"sig":"MEUCIEJnpPvKUrvEeH9NNJVmKuYUdO9AvR4EYSuCle9u4xF0AiEAl+TvzCNYt661jpyF649r1AcImC4YM2c51ynbhZE0BgQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWAKCRA9TVsSAnZWagAA8bwP/2s1QwEwe+67p6PhGd1I\nqblbx6WoeRz78w906ouc5qZKa8yp6guV6aE5OqYuDeXOa4Y3Djf+jin262YJ\nQqULiWZOGUbvMj0SrudUIeW/7DjHwge+SI7ErsGm2Lx00kyE2JYkXRBfofpV\nz2YGzTM4/1t+07bo11X0YVMoxu7t3HuyUGw8it9LdiOpEMKe9XSsHQVYPV+u\nL5fQShP25AUMR47ybKoLhaMflhpUrMZl9w9m6wTwQjXzHtR9edjI8OUVi6yP\nPMVTD6BnlMEFrIY4MdY21FCavPqRrzW+0Hx6Nn4YnTirOmLv+IAJ5EHyPxiV\nDj7u1JpoLHAZR8r5MtrQMuMJSPUohD8sFtcJ58P+O/P3h0Gr2uaD3S8bFEgl\n3pdCtvNi5k0wf05L42M9hUVOO++INhRTV+r2BufzCthxblan6GY9gsRdk5yW\nxjTcZVV3qjev8EfyliPvlprng4MXoCYSuviBMwzMLHtWJ+DkbTTLgvG2g4Cl\nIIam/+2EULj1EnIPMn5VqcCdG+omtsy4xtY877zsSIWStbL7lGiLDheCFLZi\nHfa+iReRuD+yx81xjqmGK74i34kWYf/QvcOxI33gZguF5OOcPsF3a12S0ayE\nr12gF/6brJaq1sdQ5GJaqXyuorpyrAU6tALNKyMslWDmEt+HcVtIB0+cdzJ6\n6/6A\r\n=MODg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"434420b9fc9470dc77940d2240234a564be58d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6c82b965b.0","@material/base":"13.0.0-canary.6c82b965b.0","@material/theme":"13.0.0-canary.6c82b965b.0","@material/ripple":"13.0.0-canary.6c82b965b.0","@material/typography":"13.0.0-canary.6c82b965b.0","@material/feature-targeting":"13.0.0-canary.6c82b965b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.6c82b965b.0_1628266506348_0.34949355255917314","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/form-field","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f12a86ffd3ff9097fa31711268ad04b30b0a39d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.4ca11fe76.0.tgz","fileCount":33,"integrity":"sha512-L1/aToBtepGnz+yAXxdjoWfyNn5cJrYeRfGtF2JAw58jls2ZhjJBwwEaJAjxqhzRt8dBQY/J3KaIVRYIZfGJNQ==","signatures":[{"sig":"MEYCIQD/UD4P26hJNlQ7Q1xzcJixvN3BuKwDu6T4K1/MAt6mbgIhAONKKeuaUkaI4Q3IOoEIshhT60dddRQll2CbMgBCuQ6A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWxbCRA9TVsSAnZWagAAdFMP/ArOggzGvXRYg9YDZ0Kd\nnx3rpKNvQbVz9NpHVgc7IdptdAxQYfdNv7x9ngGNpp/07cGPl8KvO8PvsxeK\nPMWawgEMzU9yi9SpjBO8MuzogmyloAwefUq3fOKYQ4UDUjVjemkSD/Co7EBw\nXh5315pqAQfyQbO0a13GmY9cQ6SFZS9s1eLqxmxZzOgIJmFDe6XoAu6RQOXj\nuMFxA7qQtOjz8eJ0JhGVTVJuqiuqqAllHfsqc+L80J82K+Q9uJUrmncET1UL\nR1GdNsEbbWrZNyddwmSXrakW99W5ahmzoVlKJ+UDhH3f6DXIMGde/k64ee77\nyURhG5PKb98CMPtBk+u5WcZwnILMZsyfkNaDd2cRftYBTcNZaIUwbl/W85df\nQcKNOz3BbWhBjgsy+0G00Xw/voRYVlJ0sVMfYiuDUEW7G0xm2FHhjfjR3OTi\nKed+E4St2NwGRNUGrCafjtjRQvkC5ozNfqv3x/9re6V+IWjbSsf2W+PRmvcV\nSnJ/QJ4v8joiON196SwcGqAKAGh7ciMDUzbpmp1dPyvP7uMd+IEXwzE8WrE2\n1ylkXOxugB8GC7hJ0GByohMRb3NiUwTx4JY85O67wW9UXqSmDU9HH555Hnzn\nwLquVTSs+bxjpabn+fEqmH0MvP6qD5QkxZ8v2ObOIPrzvhZDzviRnCDjsyaG\nbllz\r\n=Qcan\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f012412147804a7e8c4bbcb205a7a48a045cd694","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.4ca11fe76.0","@material/base":"13.0.0-canary.4ca11fe76.0","@material/theme":"13.0.0-canary.4ca11fe76.0","@material/ripple":"13.0.0-canary.4ca11fe76.0","@material/typography":"13.0.0-canary.4ca11fe76.0","@material/feature-targeting":"13.0.0-canary.4ca11fe76.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.4ca11fe76.0_1628269659261_0.18103357270477227","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/form-field","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cc920c53d2a0fdd35e389add2e33a685c16df8e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.510cf90f2.0.tgz","fileCount":33,"integrity":"sha512-XnapZZDUTidWj3bFIRvKEC9Jr9nhnGNtGXyP3il/69Tvc+yJ6Xk4DPxAVPZPT6RoGRmywiC4p/pB62+4Df3FYw==","signatures":[{"sig":"MEQCIEQKPkHPo2x/k97iyY+wrBj3Fc4L2g5PtjX5yrvshbZPAiAzmV1rxGyORKU9syk1sCaplvyqh4sxvoXt1fkNWJv9sQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWMrCRA9TVsSAnZWagAAOl0P/0movUnQPsT2+bu/0tzq\nOoxu/BHAPi3WkWhp94Ynf/fmOvw6cvdSs6fMlq06W2bkAhWT9Lmu5vO77yn3\nMADJmEu6amNNOaYWjJug8Z+E4EezalPZ9MsjUusgOQJjvc5CKNSH3w9gRP4i\nn9NZKHxgjdMU54EdtQLto0poIIyl48C5RNWIfZRiTVPfDZATgCafX1r1kV9B\nl6BTiELRpZiPo3ixKs9CSdIGEDok3Mlr3y7uKhexXBI/UAMZ+zKgYfxoL77k\nbFPgeYN/mfxrwH3UM7hY5r4kW3QKMxQ1C1PgaNwj+H3oCWqXW/7G8IIwzzvG\nnSbw1dStwWicqGFE5OxSYQw1z+q5PJr7FZKCi2+oi5r9s+dn4SQDLdUsvGUW\nra9/MJVzUyZdmkKJO+HrN9qyMHvM2elu4JU3NWSNu4x/FjLzC51o6VJm7oHI\nil6WeShWRWVL7+8P+8Vv63i93mLye5ZWhqoyGwH05iCYgWiPX+u1r+b3pBh8\nKis6jPhY2uWqg6DD3fzITy/oArtysv87TZqSjySGVBUkIfnw0Q01DZfSsSWn\nG8v9XOKtSp+ddzZVkbrSqrU611puFufri+am0lgdek6Qeon7avm6Pp79I5nk\ngyq7//hsPL6NlXEZuaAAZ1Afgu/DY1XlRSEaWnRDUFPW5xzhjxz0F/VVTiHi\nM3sx\r\n=1Qmc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1e11d1f2c4c830419dc862b62700d4484604a3fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.510cf90f2.0","@material/base":"13.0.0-canary.510cf90f2.0","@material/theme":"13.0.0-canary.510cf90f2.0","@material/ripple":"13.0.0-canary.510cf90f2.0","@material/typography":"13.0.0-canary.510cf90f2.0","@material/feature-targeting":"13.0.0-canary.510cf90f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.510cf90f2.0_1628529451226_0.4585842481919946","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/form-field","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fda9a54cccdf693ec25a0f7d46334739e623425c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.17580ebf7.0.tgz","fileCount":33,"integrity":"sha512-JScULmsNNBA+Rsu6flejrhpMWDGILIKq57Nb7wgnH+Z4fNB+fe+r/DGZi78oKy+qs7MXZMsr7NcDSOXy+zfFkg==","signatures":[{"sig":"MEUCIQCcIemkIm//sdPtn85EMOO4rzg5sOmX0K3zcdzxoG2QQwIgXPMESjIou22ixuHNTyvtyNYeaOgy4rtSkzSsbetXNDE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXFMCRA9TVsSAnZWagAAP6wQAJx4N8+wks3zDjxpFOKQ\njwLO9yKXV6KdjrTV6JI9cUxtMSSn9AM9xUMPFejuHMwXHfhJbikPyy7XnWcy\n5X6cgxSfPj+xxU/W94bqjUMSMLVbiNcnRqoLchxnz7edZ0voIH8X74uxVBaI\nfdLhbgENjgPpfKjam4kFS3d8bLCExVwRYaKZH2QiSmRSOdstecDAy0B0Alu+\nx4ygfm78hN4uYFwXUSPDpQ58pUf3BFfsY+2ou3bPE++kiQDRj34jK2kllgUz\noVmUkCkmykFh2qGyhrZG79Xkmijet8x9+PvcyMlKU/DssyXXDwQrfuM8rMtp\nkv1d5fONmHm0OJLUhLVlkNUg2RQt1nMb6gS/Z0K8+HDLWtxfLDr2GfaVDURi\n+aOSi4ffC7dFo1U6wY2495ISqKrbjzFiN3/IqQiMB4zIIZVx5/POIo1UCg8X\n1AWUA9OioHO268U7fBbx4ctZkKmtfWk4iTzBtH5ZY0sddOWCw691jJ6A1qs3\nwcNe3HkDnwc3DtZ+Ye9lvvGgweCnQLyoK2xEtTosWtlOkOAqHtfpQKxJuMgQ\njPVxUyui4uqDfnDngivForN202+H02W/CCj0GQzE9u9mNGq2i5jXzVVDOK9y\n93aVA0yOcRB6/jtcWG4R/MHTTUBpfkBuHmEKar3+Cdf7pVjJ50b6F/8qJcJu\noWha\r\n=nrf2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5bde42052101fa1fdd48d89c3dde8b9e99bdd1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.17580ebf7.0","@material/base":"13.0.0-canary.17580ebf7.0","@material/theme":"13.0.0-canary.17580ebf7.0","@material/ripple":"13.0.0-canary.17580ebf7.0","@material/typography":"13.0.0-canary.17580ebf7.0","@material/feature-targeting":"13.0.0-canary.17580ebf7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.17580ebf7.0_1628533068229_0.31919225907628923","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/form-field","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.7249a3060.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f3ec519db5c9744ab47658c0e576f3e16cf471d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.7249a3060.0.tgz","fileCount":33,"integrity":"sha512-cxWF5sZhzFY/ar/ji9mjkWaAgZb5TZXsU/KJOB1WwmpDfgbQTAzR8I2xFsfdpSVYq9D4NlVLpE8U8HUw7YlN6w==","signatures":[{"sig":"MEUCIQCU/4816FszFpzGGhs2PijKL7ZFYPcrxk13AWwjaGUpYgIgBTvuB+H0GigpkI0tjRs90x5UyPi3jffmAxqxNWzfqug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXI6CRA9TVsSAnZWagAAmdIP/A1/pzdcdavfYOwPtrgO\na+NvYxLgs5dm/Wg2l+Vf2chOOoLYbtG4GiKD1DazEYGiUtJ/Q2bXHNSwFhpu\n7tlFbkAI673FryuOtKEwi9KVGzd7/Ni8cDUkHYWr9SyXQjuMSlDs2afZ8Fix\n5LuNw3RyAEYd8QkiX10lGbLEgOFK2G6hE2jxobs3iCugfl+LEfTDOF0dagbI\nfexDrTLPOIFc6K+/UfRUUtasavMTDKFrwRCMR18En2V6UNJG4nUlIHZo5Knm\nOJasVdo2mFtTr7Kai0HUCR/rgL+XmKHS2JtDapbLOMG7z4TKOc4DDmnPVQQu\nRLnAGdZ7MY16uGYn3DXfM7cYwpsupjiBxF3DhIr7iFx0l49z8rVISA1cq2WV\nn7SOhjjAJtkVp2t0YeP4wNSMym1Z0MvQpUOjR0aPsorx8w8JDFSV2ll5g4OY\nmZh1L9dHbQA8bsCetyZK0O2n6vLIkUMDQthqkTpK4++kSuRB/0QHe4S8XnD6\ncqz588Ru0rf2tIcrcRKlR4KdMBL9PcLZijsOkWIv8F7dNrBSGwdUB3Vmbbf/\nfSuKkrvx5tji1OS3nKktzyofdP7OddSF2/HDsdZFLdTVqLTonYQ2Q1QlGRgW\n1ADXjb9hH8FqZPBKKm+W/5qL9Gs49HYE8nc+5Y+3yR/y7kFLKaF58/sDPFY2\noT8Z\r\n=qPLC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3412ad644836acdf464e70d019c36080ab377321","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.7249a3060.0","@material/base":"13.0.0-canary.7249a3060.0","@material/theme":"13.0.0-canary.7249a3060.0","@material/ripple":"13.0.0-canary.7249a3060.0","@material/typography":"13.0.0-canary.7249a3060.0","@material/feature-targeting":"13.0.0-canary.7249a3060.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.7249a3060.0_1628533306667_0.9988041299771737","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/form-field","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.4c405863b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"779461260599fa88345f232c6860e29f7a93917f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.4c405863b.0.tgz","fileCount":33,"integrity":"sha512-RF11uLpmdyIX7h7PkjHhhA+swkD52k8QKA5fD0q7wss/XjR/4C/JRJLwIGmDFfpwRgBquI0Q+c5OZxIxRVkq3A==","signatures":[{"sig":"MEQCIEquAkIGyCYmCwg9o6R9MtNn7TPCFuWU2AdBSrZ9asMjAiAOmrhjMeqhlGtEkU8FpzUzkwJbtBd0/s17vfrh9au3Rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErozCRA9TVsSAnZWagAACfoP/0RkTEP6hASkC3W5bI63\nozXDteKcKhDcGXjk0ZDO9eTGRpbWFXVIsc8R6LCQ8cyyyYJwjKTV024HZpT5\n3vKQynmhuukQy5dEh/Z12J8W5rBVY4dckJcp5SLUb3HAyePzvspBDN1QIGqH\nQCD8dQvNrbE1NZ43mNhL1fcWiAniwfWdE/Jomh1vfPMWdYPwEUVmW3PCe+M3\nxxM7DW0LHcSaVWN4vze7mnexw0+lNz7x99l9J1SV1sTx8Zonqt8WCi6YjUWv\nV0+9p+y6sleBaalrb1lezUy1rMufbGiz7HQ7naqKegnDWCIHMOk9pTRx6yX+\n/CW1hjXfs8Hd+yW+GkuLJ11RmTkhLQSXbm8Iq0XnBXrYB40K/mJl99lqXgj2\nrbTyzAazCw2Ktth3u47d5z9WTwZSYFguzAvrRaGlK7hIphd0ROxEkfeOD35x\n7jBSV0BFnd7wW39vI32cp47RaZoBfpCW5Qxf9QqLSfjRVULLElTEhbTmDJUz\n0rxoVwHDHncymjOIQgzT1aCFHhQdXy2GkPwIrHyOICz0CyeyClhArkLzXb9P\nPZ4yvYfstG3XXQJuxHxG6+JZjTYIyfFHVkqTV43UIX3EAQ27WanBP1YIpJIE\np9gB38YNNCxFZxE2H7DcKs3rZgNLeEvphb/w9sOeUewXDNG1kGgRd/a8fFJ7\nFW05\r\n=YcnQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b3861554313a19a861a5f6850f9df33ae5bc42b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.4c405863b.0","@material/base":"13.0.0-canary.4c405863b.0","@material/theme":"13.0.0-canary.4c405863b.0","@material/ripple":"13.0.0-canary.4c405863b.0","@material/typography":"13.0.0-canary.4c405863b.0","@material/feature-targeting":"13.0.0-canary.4c405863b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.4c405863b.0_1628617266920_0.02491558779231684","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/form-field","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e29c4d737b9bdb1f24abc4f699733fbb3db78de3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.f4241a42a.0.tgz","fileCount":33,"integrity":"sha512-mNQtJxNTLCozbOmFTYyl0Kf03TRMnXXdubYxjqozzASBW3aXcxpmj4WGIXrjBBabJwtS0aCgm6mQNW9aGlKucA==","signatures":[{"sig":"MEQCIH07n71VPPsVneTgEhv2JBjc4KyG8r4jR4Vv9lYX9FoNAiBzw23UzZoqfBvKicfEd4yGAsz/GQn6RaKhNV/7rguJXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAIDCRA9TVsSAnZWagAAaFUP/jM48ujzxatjBko6wNoe\njxos15XX/VSxyCe3X+5mwEt4BeXQ5+DnB37yF+dWqng3Qbxr0571rIpGSoL7\nwXn76ZO+C50Al2CUlGBIGmE2DJbxA1oOLxBn+LLQw3a3KpfgVNXWUAGJch9L\n1s5/42q0gZOuEWTKkZ8TKs40X1q+1u+lr0F+lV3qTvypdTFc2n+hq08tmVt7\nZ3EjtBdm11eGY2oVI8Rb6TG3CHjZeGurasqGjPwS42GmVAyd9SXpG6dzMO4w\nQj7+VsL94MJDGun3AtaVrwpgrW2HZtfHQ2xr9Vuf+K9b4ogblMDqG0jE0Ivs\njoKHhlr6CwpnMAGVA+UjSpskrMugK/AIX6I2KdsssuptojYlaPWc6jicGdW/\nLXc09QKZ+Yi41OgP3klb36X2XuWvl1nrVoXjQVSRlTxWbtWYq1WFoRrXyxly\nawXVzoArK8g0r+Ykj+o8n/tmJ2A+c7wfazKFU4RSk4uizdva12NwqPERjrak\nxa65QrN2ausjcmH6szgBgkVPpnlKue2vxhgS2DIUApjwmoElq85ObEzEqL0I\ncCoDFLrcqR0AcX4AFCLcMytjjwevnGKLbbg1in28Sf14XfCPuK/eqoqV2oIP\n5la5xR+7UfaSwJaeYj6m8JGxMARKciYNx2DoILye+6Oya0XdDZ7i4vklaoC3\n7moX\r\n=XL/5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bd97e42dc6a97fb74d92a9cb04e919c5c8af4da6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.f4241a42a.0","@material/base":"13.0.0-canary.f4241a42a.0","@material/theme":"13.0.0-canary.f4241a42a.0","@material/ripple":"13.0.0-canary.f4241a42a.0","@material/typography":"13.0.0-canary.f4241a42a.0","@material/feature-targeting":"13.0.0-canary.f4241a42a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.f4241a42a.0_1628701186939_0.8191973152188443","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/form-field","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abbe36fd648c86d925197de64fc460012fec6797","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":33,"integrity":"sha512-DNBZ93rt0AuNk0O0kgo2cwJ7xzGVodP0EM1wcvM5ZP/w95uXjvuFZuCLdhOVBAGhgT91RHvXlQipXiIyh/cfEA==","signatures":[{"sig":"MEUCIQDMy4sTzfCZleEKxUgGcU+F8PC6OjmumlrlDn4j/q7YbQIgUVjS/Lazh8L0ZJcq5CMrtGIRt4uwolazHv8IBMmjI4Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEEcCRA9TVsSAnZWagAAXSoQAI/oQn9wKCYtsf1Zx/YX\n7F1D7jgHxtsG3BM6DaLyLggxnIBOyzmEJQHeOtmhDiVsiTvxOUHDUspJOoJn\nSN2ey8K1hFg4KkCgNfiGJj1JA/P0isF4aPueyHg1c/Tj4AzX1a9w/g70l8xI\nubGKHiJXrlQrSqxhokpYcrBkXHXRuwmzx7EZNRGw1bC7Tfho1vWdxHdZgnIe\nRk7QNZfITKhBaJn8t9AAsBXj2iCJRkcUGipeSvUgeFK3DE04rS6jQ8Xx3xpd\nSw5pZf824XqG/BoDYk/66YtzelncdDGtIKNj8HgnimcPNz0+/peDx6T9hc6y\nNrkRVKV17tl4/2PQ3OlkLbLnXS10qfN2fEEqzOk6r3ThjiS7TmdCYyO5TW/2\n0st9O3JAgfC5a9QoT7VHq8BNMCNx4+9Mfg1fVS0KdPt68llpLj5b+Q6EFqgz\n/MST1aAg9WQs/xv5wTx0yl0DTnxcoJSSiNLI1TtbR4CaJOdLK6A7KJd7eBlc\nCMGnN438bR9IPH68C8l6QBtemGOKzM382inu4s9BexkdHIlQl1xmp6vxFa8R\nvoGvsUumV2AzW2xCOd8xGvj2/j97LW6qqyiz6TBN/pYwpfQeMSlDfalRplVY\neoEK4qNSc+yERyZZdlr9Si/iQ4B+n9KMGZ/AbltQc/oi0Xu9JQAJzY52fYIA\nQkw8\r\n=oyhr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"db28e7f3596365b1d41f14b53d656a743eb28bf3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.0ad12ed3c.0","@material/base":"13.0.0-canary.0ad12ed3c.0","@material/theme":"13.0.0-canary.0ad12ed3c.0","@material/ripple":"13.0.0-canary.0ad12ed3c.0","@material/typography":"13.0.0-canary.0ad12ed3c.0","@material/feature-targeting":"13.0.0-canary.0ad12ed3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.0ad12ed3c.0_1628717340329_0.44029396161265444","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/form-field","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6326eb5d2b0ced387482b6c40545ee640c2f41df","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.077dcfcfe.0.tgz","fileCount":33,"integrity":"sha512-V6hxwMiJW1XTgCcBK3Sa4Sbvwmp61PKXEIGEcSLj7/6DmDUwrsIR649pj2MYRlEox8fZkfzZkmFi/9cIm2Hyqg==","signatures":[{"sig":"MEUCIQD6aVlk3MBJDCyivyGelLI5zBo62mOYDKsN6qMZ6cK1PwIgdBMjMDdUt8hDHvHrVz24Nzy3h8HeGc30UBJEL/B6VZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWCVCRA9TVsSAnZWagAAmLsP/AwDp7fQ9zILPemFcFR8\ntiXKq6nuzAsHOhPRcRQOxdFQmCZsleK15PAWw9CDqgGkQTMB6bTf9yhgLYmS\nW6b51bb4DsgAM7cXuKp0KmU/Gp6wajhztSGc8l7++gt6NbLGG6nqlJ2c+Mfd\nqUFkT4vshRXoAWxxB+/jBfl/k+/fHxDWpxObhLO7lLc9jzyYot6uk7KuJ2aU\nf8foZ37OK3rBOH6iX23J3eqpIioMysDsSCgsyXRuk5nPLfFgUbUZA4Z9ZoG2\nHF9PM7TTtVMonIAt2uza0fU3DzmMGeDAmzk/fPZ0u9J9zteJX5EbaCUkShhd\nHNs0X6RBaPKl2Fdnj6vweEDDKvb2MVSxjoQjCL9Kt7nAQ9xjtu5SmfvDPhPn\n37q3UN4ZrJOUPeuova/U7x35BZa10f3HvYCFk439/3yGmtF6Z/DMvHWAUOEe\n6Y5xQRD9VPdoq1kG6jCCFs8pPwDUF0HcZKQJJ9cHlKXtkJVrtilv34YX6bGw\nCsG+TwBaxoiWZbgiLtaurFzY0HSWYw4sDfSXtjvkU3DZKAT7HwhkkmNgCCBH\nD5ppkV/bltLqk8DPOwwAhedBjadXDvM8tEkk8yhKj7+vngXUnlwpviOZQlJ+\nEARnV0CZ9sJpBqY/7oQGLY6i5oCZGqPDm/8UabKSVD8l2AFM8eS94Fn41GCu\nFLlK\r\n=9wE5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0ce840a62c702182bebe1a5f2ed037bc002472dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.077dcfcfe.0","@material/base":"13.0.0-canary.077dcfcfe.0","@material/theme":"13.0.0-canary.077dcfcfe.0","@material/ripple":"13.0.0-canary.077dcfcfe.0","@material/typography":"13.0.0-canary.077dcfcfe.0","@material/feature-targeting":"13.0.0-canary.077dcfcfe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.077dcfcfe.0_1628790933662_0.7200137717122277","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/form-field","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.e3346766f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6cef55e5037bb7c5e17bef41de9cb97d8f6e7cd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.e3346766f.0.tgz","fileCount":33,"integrity":"sha512-BHKOBQOlbwU9LUUeMhA9ULbIhS/bBNZ3FNR7aBK0uz03tuPVf1jXVF9Z8cTru469QfQ2ctG1jO6+Q4GUvs5pPA==","signatures":[{"sig":"MEUCIQDqE9vGxpcrXV0fEfIT3Z4xvcKu8X+9sZvoCsq15XUWsQIgAI2teMy43UcPnmWITqnHnOGIoVTZC3UvZF1jixALibo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsvcCRA9TVsSAnZWagAAAZYP/RLJP5/rp+/4R7/lILXn\n/xk6L2SAGKjFYB5hdLpIjNzEAbT7uzKIhk5h0PAeOfGAJE6SFVvrX7wlgocw\nTHnrbeWFvV6CUhW00a8Ec6Gxl8jI2g/on/3on63X0MnQO3XYWkaCuhgUb3Zp\nmtanXauIjb2SY+azM8PLvhi7JyNgE3+eZ5+beMMqhzqbVkQ3IGC/ZRbTytWr\njnGhN4b0bMwKxT2xsZ8/L4vF/4QdYw0iP1IUkd7zTMe50tkssm8pxFCgiFEa\nVIHfxZcKyWabz8khCs50SqaiwZZT+Sse9iPsrMwBh7zaDgeAe+xxyiLjGofy\nN1c38pOcqYvWB9vwmghf/EXdjadizqylJdPn5IGCjNlCVOkHEOfvS/ghL8pd\nsocvGIbVbzJkESKJjtAN8m/NHzC9GS8Vn7aLFvCuvSNVgq5F5Jrj6U/Rdc1/\ndwrtKmA8x0Lf0sOvQZ4tXqfZ4vWCoT3wUu/QZ6Q172kGTNZ9KD8ciiNovptY\ns2dLV0bnHzpmSp/o28LmCRD4sqwHh6R+1fXKbE1+iRe6MtiqJWo5TqafOuTG\nKshDL43P5gZezn1znA1gUZd4Mfj+2MT+l9N0RlRY8dotUNxwCEYvZ3+MQIaP\n1s6biwER24w1mzzuKC6KEs06to9js2psSdlfCGf6HEsiN8w5wKks7uFxWp3m\nDPl3\r\n=prN9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"03da616c76c8b7fab07a24f82209f171a2fec41c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e3346766f.0","@material/base":"13.0.0-canary.e3346766f.0","@material/theme":"13.0.0-canary.e3346766f.0","@material/ripple":"13.0.0-canary.e3346766f.0","@material/typography":"13.0.0-canary.e3346766f.0","@material/feature-targeting":"13.0.0-canary.e3346766f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.e3346766f.0_1628883932673_0.9818885518899019","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/form-field","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e1772bbf875be340435bff66603adc79956661e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.2fb068fb0.0.tgz","fileCount":33,"integrity":"sha512-vtSzItyban6wJcI/2Q8MTNctVJucoba7tw+n27ufyYOGzRXXXA1DZaFUl3IxAH2AAP/NfZFRSAiGKxCk5ZdhYQ==","signatures":[{"sig":"MEQCIDpAbEiuP3zTy2VrEStDoUEphpAP7MP0AgEQWjmoz1JDAiA8DNbUxq+VJVi1aM29nAjwPtcETp0181H1xqhCPIPN9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsycCRA9TVsSAnZWagAA5UAP/ik4Il4K9W+PzgTGzCU6\neDvEkNcjzcKtDNNaOkM/ksvg5VFscTjmzUrye359mJZ0vezRh5kW6xV04kp+\naYFO/JVamyrpzZAnCqjW1yeQJ4qyf98FH8EwTxjWWSzTWvDCVlFYGWSuTb+E\nNJhz5KIHoUjgjEMVWyCSIxP1lGzWs4Fa1A1/kPP27Zr8IVGkJacDIfWBj2JB\n/RBngU+xGH07w56K/sazj5F5aQL/gR+iQF74KlmQuLXB8g4scFoxlfJsD5r4\ncDtYUI2MxGtETaZTDuC7kpJDzhUey4y2ZgyWCe5SBgOXKwRZNh2WhTteMxDK\nUSgvc2QrKnDf9TlkoIolKfDvxADH+tOnXARXUBZsvjQG8Z1f7IrrO5ME+zRS\nuwn8ieH2E0q9GR2Ik75ynRseqVtvXX5Rwd7q0Onz1acNkGNlOF1MFIhwfKQ+\n1l1yK7Fp4KfViA1B95CJlAp7blsCoiGmy7NchNCXYs/KwDPzs2iic8nXfEwy\nnwTHMECcZ/FlgIL9YN8RbTCGpNORu66aS9NuP8e+jHQiAW8G/4SSrVSpvwVv\ni72rVr98/J9x1Novn+2/Oa0TLTUyMUbeuScscfYo2GDBpYbsgl0UDbmIJN/L\nhNLk0/GT0TxqFML8iDHuttN84JE5bEmD1sNi9HY/IT3zHfZjL/RXg/owLQSV\ne4l8\r\n=lNXh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cd1967c0a3a80639eef1dd76a8e579a4456fee90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.2fb068fb0.0","@material/base":"13.0.0-canary.2fb068fb0.0","@material/theme":"13.0.0-canary.2fb068fb0.0","@material/ripple":"13.0.0-canary.2fb068fb0.0","@material/typography":"13.0.0-canary.2fb068fb0.0","@material/feature-targeting":"13.0.0-canary.2fb068fb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.2fb068fb0.0_1628884124540_0.45888438706199164","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/form-field","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a121a2a0a3ea73de99970eab513dd9c7b643861b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.fb76c5069.0.tgz","fileCount":33,"integrity":"sha512-bl30MWZTyCorMkuaL54+KTa+4yUClUrfiz1+vjE9L0+dkWFQFiBDNU1b0z6Ef81yuEm/tJiqk0/gEhsbts5muA==","signatures":[{"sig":"MEUCICtfEX+CvNhV2LODaoDOsAeE/3//FHClCj5Mjf+D25LdAiEAlFa+zA07IBUtNKUmIfhMl9S/mJYoS6K1YvuKVRgKhcg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsW0CRA9TVsSAnZWagAATlYP/jwx5XGgfM9sIIwf8JUe\nYls6AMx7oYcMIMBM+AO3V8mYmuL46IT/pb3aAYXXUQq9IRF5WuJVbXJyFlK2\nkjtpmiBbZzxDnTCUZ/hv9VPAk4om01VbTAPXXpCUAWsuSPSZrQNstLtCsLmL\nJUbx5fp612O7BOf90VOTzxKSJfTisG/MI/fCtsqqUOwp7oQ8iMUygIX4eVIN\n1/MD8sgyHKgMCHeYpiAzM5hp7s3e92CH3qyUkNuM0tUs5WXd/k7T8xjKTB9R\nqRtjx5n5Y4aVURwHL2ILoXZEwTIZw370emhE2EMEGgnT5egVtEH7+yO2ZNKt\nFZOSyZZP/GfmLeKC83iss+UyOk4Sh1A/cH1qzLtmllR97tZxZXVYiMaZW1sz\nYZjimiteDluJbcFnVeGAXN1CDfT0JsIaon0tkTIwdzQrNgSfAGYiNi4EQcv3\nYfVSSMal1zUEaFl65da1fFK/BpwFyFWwRl5rNgyIQzPnnd9w3WHij3XWBF8S\nMoR6z34Qcqm25T2ISlhEf11L7fGgbD1/JgAi3aPabMXRLOEpsd6Ix9Ygf66I\nu8DGQ2PQqYR7p06s3Kd4MBa+I4SH/qfG9jCYXGOcjjcyNtUNJ4YuoQokRvs6\nIRE1h38WRK23mVOahUo1kig5BwlqTl2R9om+xPgcTO9TzqxvmkEhpAvnZpQe\nri1R\r\n=wTY5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8a969624431e3c1b8d80c2e2a37e5ea5af6bea4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.fb76c5069.0","@material/base":"13.0.0-canary.fb76c5069.0","@material/theme":"13.0.0-canary.fb76c5069.0","@material/ripple":"13.0.0-canary.fb76c5069.0","@material/typography":"13.0.0-canary.fb76c5069.0","@material/feature-targeting":"13.0.0-canary.fb76c5069.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.fb76c5069.0_1629144500566_0.09391277481736937","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/form-field","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.457d89aad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dabeca9cbc55d4febaef574632251741c3a1a83","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.457d89aad.0.tgz","fileCount":33,"integrity":"sha512-zQMVWs5zaR5VrBGEwVupprBsr1+Tl9CpxVnpXCZmcmw1t7U4QmyjwiQM27WSRBeBlLS8zWT+QUYHgTfKIapOVA==","signatures":[{"sig":"MEUCIQDDbwesnuDRM0T8uZSkv/KKmjMt0N+cie7Qb7A4Nc6E9AIgZ3rumuWpX32pMCflNDjB8tIjH5LGBj6xCZNAKbCc/q8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9QdCRA9TVsSAnZWagAAu5cP/39APqqveiGM8TXXxYJ7\nSLV3Ugd7j87cU8wsLh8uHQ3seSbJQhrC+KpOp4peQtx90FQFy3iAERwfyc8y\nskpJZGTaMxPW7ZFD5+zYul9NlQGUE7RrnvMRlKC8yPosz/+XEIeDvjJXfgYn\nJAJGyu/8WQPb6DTH+lRPOsMVcLTBKShphQvacOpsOR9CJ3qIGBnJORSAME6B\nSQvZZRaOnEVO3PIUuh/P8EaxscXCY4prs4uLk6TA/+nypGMlMFL34MrNmMwz\ni6oPyav5VPMJ+QXTYOCRsmbWHMfvwSx1zwwdxcThug2N/zDkEIXuwNE1ngaP\n8RYLhgljCkahP9QpeD4a7ig6/XVuIluZseQzyzeHt3Jndj1m7C3im4oEQ3hx\nbQHvjqQf2Q8i6g9u2EIvL7OEw8RB+z33PB8UVb1Dz02CBXVfZRjDBthkd7RG\n/q0JpvPfZCOhPNJ9VLPZd1KkjmOKZA36UOnXuVZ9sZlfDARFd7Y3YuQZ5AcV\n4PcotsZ12m5knvFQO1zUxmvPTbce2APZAa2oaUMuGIVXu+v+QbaAJKX3iwCx\neZrW3qH+huP5hLfpkRFxv8Pc6rcQmrxh53o+djJTbFg1XuS5w6WZBcSERQr8\nF5VG8oHOX+1nHKoexOZEufabje8slf8YIumqZjG8zB8HuEWNO4bTncso35MC\nhWOt\r\n=WGJt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e1aeb9efe0d3f4d8670a6ce174d17d7528b34438","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.457d89aad.0","@material/base":"13.0.0-canary.457d89aad.0","@material/theme":"13.0.0-canary.457d89aad.0","@material/ripple":"13.0.0-canary.457d89aad.0","@material/typography":"13.0.0-canary.457d89aad.0","@material/feature-targeting":"13.0.0-canary.457d89aad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.457d89aad.0_1629213725047_0.29459104440217043","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/form-field","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"deb3598cedcf3a8b0d1222da835585b29179dd31","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.0de2f2edc.0.tgz","fileCount":33,"integrity":"sha512-8bxE9Qb2E7A5GhKNVz2sp4OpKGlntTaJXgUM3fUsrKzTlu58FfhUxoSsAeITIVOu+xMQ4ytpfqBJ/oND7StyLQ==","signatures":[{"sig":"MEUCIEzztZWGD/PXE21ZSVgqx7mdc7xfk1NUQqwvhyWcXtzsAiEAzKlYa0Mqrx/A8yAUicWVRFCSqiLuby85Up5M/15KNl8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCIGCRA9TVsSAnZWagAAKLwQAJ3SGviw4HhbVJhn0y82\nw9LOfZaixvxfzkyKlSTdKrf+ljqfvDkPgudBHmvG+V0KwYipHx5s3SUW3PjY\nLG45TuYGBpUxKsfrE4llyNKzz+slxVb9LMfm7CRnyoSs6BasRCKWsn9LkFgc\ni3Qfiw5hmByZQ5jWKKWzBRwWVrvXhy48nKc2GUYqkCs6aU0roNuD1FaQbymF\nneA5DC++1k1cjiYKx9sFkYE0GtVDhlUIm5bt+us82dWkoGXuOmPrxfuCJ3tx\nsf7Kh1l8VTZWQn4/4sMjK5EjmXtrEmzf64k9g1kclgyRWb45jiDB5S2Onw2b\nPId6fqkiGXi17tbLS6zL428nfPuM0YwLFBexxRc3OQHTbWJRSDRLMsVTiFEW\nBtUpmO7YanMbyXm07UcSx5q3DkDMw/JmDWyUO99mYN2q595NfS+yb6rFbcfb\n4gcrNJNT6PRop+FgvD0Ze9xWDn9mO0vs0HbrEYT0o8GXTKPG18kZjpcvuqnC\nQanjnFZdHvYXFbGO0GYSozsuDNc7VSAESiUZKW+CNgTb5Xw8u5zUyPQ2+ARr\n21Mh3UnsnrC+dCPHmUyNuCY/xW+QwvwdWMAkX5/GEkzwr+RXh05LvxeYaZGM\nJhNs+w3hGyG0Kj4QEXodgAijDXBadZJkTWkYLlLKZkHV8eh1KkgPiBGEYEt4\nnIyC\r\n=6Mrv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ecc5e8dc0157f612d4cbc7b03507e3779919d5d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.0de2f2edc.0","@material/base":"13.0.0-canary.0de2f2edc.0","@material/theme":"13.0.0-canary.0de2f2edc.0","@material/ripple":"13.0.0-canary.0de2f2edc.0","@material/typography":"13.0.0-canary.0de2f2edc.0","@material/feature-targeting":"13.0.0-canary.0de2f2edc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.0de2f2edc.0_1629233670489_0.19742063218736505","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/form-field","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdf113ec41c5278a45d583e272d80d104fc938f9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.1f9259b9d.0.tgz","fileCount":33,"integrity":"sha512-yM5wrqJ2r/qr2joEvA1ECLSHlmyIQLJ4ouoIm99kvY99ku8gKhBRtW1iHOpcB24tbIG0aPt7GPRl9KGTQBJ0kg==","signatures":[{"sig":"MEUCIQD2ASD86urm+GcWwq+IVon7xRPlKSRwbnPBiLaRREBvOQIgdhw3etL7jXs1kRyGeabwQi82TOs+7zvikEl0dkolq/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDTFCRA9TVsSAnZWagAAeIkP/0FnrUd/JJmatBgyrQUu\nEr3+XF8/w6MLid4Xw9hTX7STc9SgUh7r9usFeA03ttaI2CFFGfdftbCfj9Oe\n51es+pkBaTadveZHUo8nS3Fi7v/gFf7bZ3iFI2ipLGeHFG6SkSSlN0Qpobo6\nQk3d7CTgROlaegopFaW3BXTjZRrDjmLQzA6uMA6ZhVceyNz8KBcVCVHACVRl\nPhjMpLGmlzEMd9YaDGRymNvtbMvuk3kAwlGezE2IcpSlZoPpWvy/BZzQAOM9\nnGYF4umWxKrPW9TQi3v/n67sYBLB5U/rwMGGf5Pr6F3HKwCwEu9V6GeN8jWh\nrQNp4zF4Y183R/ZxQMCgHmI/T7pobfKDJxJh4LYAJNguYtfjwYMYe75angpH\nFvPOxs0PhQxioHxwjV5GkVaF+N6iHPdqOeT1Emh3fbTd824WoTFi1sRiPTJX\n3e1gmQrnL7NGc3XAUyfrlmh7eccsHf7ZlEP8hfYLcumoILD7g8Ol4JA6zch8\nNmWx3f0vMG5E6LCZLfyLGvH7CeCjdc8eHoVJtAyTKosiqQYhntKsOsGExAZg\nXy4rkmMYFg/xm3rtVRsvcYyOzfOTx5U2mnh+E3lAj58va0/iLqx2dxORiv8f\nZKC9ybkDRU4RA9oUAs2f86aa1o7mnXNNQMCx6WWS9oYEm2/hDLmr5L7Qd7x+\nnASC\r\n=ScJ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4c2c9aa7510a4854abb7f568046a44631dfe3e7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.1f9259b9d.0","@material/base":"13.0.0-canary.1f9259b9d.0","@material/theme":"13.0.0-canary.1f9259b9d.0","@material/ripple":"13.0.0-canary.1f9259b9d.0","@material/typography":"13.0.0-canary.1f9259b9d.0","@material/feature-targeting":"13.0.0-canary.1f9259b9d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.1f9259b9d.0_1629238469293_0.4330314138548912","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/form-field","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.3b9290351.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36c6459408a67839e11dce37101808a50c033fcc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.3b9290351.0.tgz","fileCount":33,"integrity":"sha512-6fND8vjwFamXS7B4IiqGKuoKVCSDpvy5ouFFDQsS+QMd8tsNpPOXpMONP21UD3ICKAdI5V1gfVNWzwHeXPr+cQ==","signatures":[{"sig":"MEQCIHpHcEY6TRmvGyOfOjTEwIV5NqgxnuuqVLneImBrRDixAiAPhKSCfp+dCxGWrkg3UEIA5VVI1Fw94xVIxCGEjxiM4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJlmCRA9TVsSAnZWagAAb8cP/Rxf5KBLtVIWgP1fT6AA\n2xBcFzWDzII8v1kPBMfeDj6+/qAl/K4xxoZW3swR5NAdh6r0AMHgZu8eyGdC\n4WCsqJ7/kOhA4IbFNAM8Ps8rhySfTXgkDNXr+McfBSRHF/zIHuwDdMk/aFGG\nsW4sd85nVGgjO2TRFjXJOGfb/S0KlxFju+f03oE7K/Hp663cBDd/7SLmoV5w\n7Y6kfD0v2rDya3NFpibeAdSoq9zLXtAWMC06ywPeRLkTXrEsqBofuB33M8yk\ndGdODer90qi6a3ZuQyLODH7l4KTk+jbZ06+A0a7u3OWd753c12R/nCOto55O\nsR/lAoKVt7M99LXz6YvGsmAfi9zy+KvZo8JYYM5zeUj7wuUgHixKMDGj26oe\n0eZPQDC1B5oyQ5QxHwmpvjvvqMT7wmqc8prWW3S3Q3EtNG6edivdw+N+5trK\n0fceBhWLwT/Gg1mEO/pUunyVB2mDEdnWtlQUTMu4tqs+ZbvVlGCg1PmMnvuK\ne31a9v+OaGbx20R6uUOX61fS2C3TM0SE3LZSjcNBQeEQzzqWjBpnA8tFzuhl\noaBvycCjLg9Z2T0lc9Ru0e8sCuqKxP6MlamJx5rJ1WDAQhfFG/sEAHUeyRVN\nvhD15GrxyBsdhxP+NpO8VOI41Xy3wPKZwbOmdUEMGvqyonjCQ2KEIQCCbFYd\n1fkL\r\n=Y0s3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"15fe006947f65208dd0e450f8cad53d361b2930b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.3b9290351.0","@material/base":"13.0.0-canary.3b9290351.0","@material/theme":"13.0.0-canary.3b9290351.0","@material/ripple":"13.0.0-canary.3b9290351.0","@material/typography":"13.0.0-canary.3b9290351.0","@material/feature-targeting":"13.0.0-canary.3b9290351.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.3b9290351.0_1629264230032_0.6617378991026399","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/form-field","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54a599e52dcabfa47e3a37e357fc6e1bc9fdf632","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.43d2eed2a.0.tgz","fileCount":33,"integrity":"sha512-5mlcZuqzOXDYHvLxTKgA6BSXkXTFKpU2iMPz46I+tgGE5UocyU72qtjmF5U5PafPXmI0aw3gTVyWofoJsFNHiA==","signatures":[{"sig":"MEQCIDTFXyRia3GpZ+lptfC1vy0KXRLcw/M9D/CcsQ2hRybjAiBwzpiv2Got1Vb08Qo5ore04gVyeBRwUkRtfqNG5b7uPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS8VCRA9TVsSAnZWagAAvIsQAIlA4yHvrZvpG4GVbkOX\nUVXPoeubLOe5zMdAsMgDFNhPPOD019xZHlnYnKdntg5E4tZrQHdUhVvA4ZmZ\nGHjFAaPFSzYlfnUznBoaA8YxJhrzb8CALbXuPEcHyQ2TKlEF0e4lFWs/LAf7\nq5c+0KHFYIdLGB1GiIGvAoVnV9kz4q9oXcZPUQ6225Ab4IYjpYYApZV4wx2x\n8vCaV06njKNUcu9hVIeEa9WOsauyiIjYr5AIdiz4kwhtDZDMVuHopW5zVD+1\n7r1d9eytmiqturtZ+9q3fu6j6wneLDBcjDEExiI//5xDxtyzCmXLEYwwcTeG\nd50R0kN641N4chNcCddYJa3eDuKZRunS8sIbaypL4FzbiMEMDG7NNw1MC8p4\ndWlo3m2xTKVRZ6Yj8ODMrOmuBLpNvzHqJPOGuxUa6scMlPrGmAVOG8SErcXh\n2MtSWLf4VSZJEa7TKyOhtq4ISOEZFXcmCC5U2HjOMNWcHuxXZzkEmDEHeyQp\nsis3klxJPuScNVqM59kC4pfFwiCj2GjXVP5bQg5kBA7AJeK4NJHJkCbmX9aa\n9qMiJDD5Dulvty0CjgcGsbaov4tU5Or6xtccjwjVTb5gizDwpMQdqhn//bxf\nHnPCZvhxpKyWM2HfttgANq4A/0J10+R0zlKKZKVjZWmHxWVbaCmWb1qDz3zC\n1RY0\r\n=1xzS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"687e2389ae76da9a31b26968c0cdd837208d3359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.43d2eed2a.0","@material/base":"13.0.0-canary.43d2eed2a.0","@material/theme":"13.0.0-canary.43d2eed2a.0","@material/ripple":"13.0.0-canary.43d2eed2a.0","@material/typography":"13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"13.0.0-canary.43d2eed2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.43d2eed2a.0_1629302549613_0.45856441175830787","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/form-field","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.0a9069300.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"337c2a0e57621c8dcba321c2812e7e14240b9420","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.0a9069300.0.tgz","fileCount":33,"integrity":"sha512-t8gcMD/78LBKeo/8IJxijfaDCDdAjRCXIaN70VXtqkgSvKkXxbQ9Nf8jq3jWobtLaurjlj+HrX7o9J7JcCh8ag==","signatures":[{"sig":"MEQCIG76QFPufDncEfHkN+MKBvJL0kfYoFq7D5W8m/dNiXsaAiBIswdRcU3Vxy3g6uqj9X5Hq5AHRS9zMh5bZ5C1m//qng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoQxCRA9TVsSAnZWagAAlJIQAJQa0EGSX/201GWmjg05\nYNWGS+nTFVX/TxwIj/ASHYnOuo7znx1DrAFuJ+Mi/tqUE4G7SYweY08mIyq1\ndeQdCtfYXA6BOs/DaoN/94LrLB1Zs9gcNhcaP08IHIN5Dqpn4EdRxyAOP7px\ngLBsy4b93slFqogeLU4q1Y23PsY3DMcnW71uYEcDMfvkq52NhRARMXY5Nuy9\nfSb7lu4EKHL8fIl5X4mmh/HybJSeXr+h2PSDw6TGDGK62GX1EWTr93TBiMZH\nWvDB8wRhIsE6cu1V3dlMm//woMM7M7eT9hepiLxHsvwKLNwc+SDVwIfgHd0h\nbn2azcUZIJ5ko22PCWBzJkEnlcYtMMVPHYk2ErnXJ4WiooC4pSVCs8Rj/zUY\n442ncro4V/mEPXnpnf/yXfJXRBK+3wFg8VhlBAAdQCWeV2bmg5EwHHesuGz8\ndPqcETq6mbMSg3ZAYM3ND1DF/LFKQCKG+zPDj5NThLozEowLgafFZRQhE6y6\n3JhC/NspkIoxekNbw1NkWbgePiMtgdMMjX7rFKEUfeCStFBuNXSwxR0zHV+6\nUPFX4KWnTsmwtX+tjiOL3OsP3mpHH2yxHS2M1LqLdyNMTwBDGgoZzq/XdDrs\nLxv13nfccEvReqhpHccl6FDWHXkUeB7p1HYLMoNF4jEzcFngEA69ThvYRkP8\nglqd\r\n=UpI/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a7249c6c2dd2d786b2134e129bbe3b4ca596fee1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.0a9069300.0","@material/base":"13.0.0-canary.0a9069300.0","@material/theme":"13.0.0-canary.0a9069300.0","@material/ripple":"13.0.0-canary.0a9069300.0","@material/typography":"13.0.0-canary.0a9069300.0","@material/feature-targeting":"13.0.0-canary.0a9069300.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.0a9069300.0_1629389873503_0.2640164063036481","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/form-field","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f698ffa8ab97131a8038737ca2eef8b3aef15dc6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.7da413ed8.0.tgz","fileCount":33,"integrity":"sha512-CKKTXtQ1U4q9N4mDjpyo1lydFppPJJSGpRayy6L4x/Xc9p8sERslfUWbam9ha2QjFC78fCCnhgaOxk5xXZnRSA==","signatures":[{"sig":"MEYCIQDW/beOQl/4vMdCbcrPfNve1R0RtWnbzbqO46mEi0oRogIhAIaP9N5wxkmSg3tRk0hjJzoAotbPnCA4/4uMAqr0de3j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH87qCRA9TVsSAnZWagAA2f4P/08RgZ1HOg/n530wx8/6\nwHgfJx49WyN7klz8yhvHA4x4a5JGg0veZw3WIwex+RFoAd+IttEB1P/svdsH\n8oaozkTTAFRQctHGrOm+7rlMcS+JytxSnV57+x2i+rGdRz40Ld2l5xGEuT04\nrGV7aIgm1dc+vDtlegjM0L+UJCpxPvUi50Nh632YItI/buRbYZrfHHFyxTQY\nTQIBcuJuMdO60qmP+A6bbf4miYAIHHq5nO8HsrL2Gd3JwGIoHKNfOc20k+wm\nnyUV2ovy7XtQplsjnHzT4LC1ompwkarF4Kr3DLCOt4WTkBO5OtYV6hZhgzZg\nTAuKBGt2LwKYJ3z7uQfXCFqYp7/z1hI7yBrB7KPhRdvcvEEdSGfCkImE6ZSO\ncaR2Qfc0X5hi13J6QmCaZ2K8HnL3A6dQwjxgNS9M3kADgr2h7tfW3TuB+K1t\nlmD5fYienu4gSKdpk/I7jG1N/UpShdeXwwMThrJVPIBhdrLVZiJIsx1AhItA\njLeZFRhDjzkEFzg7jS5cnvRN+AQmQTLpfhl9TlVlZJehw3l14oirY5Pb3UTw\nghT16bzF2Bja52zNYQEwdC5xmQBP3cLB7fH9Oj2AGNaFUNBj22OqDr29lnVa\nc9RevkuuK62cR+DV8XdLVx0Vq+8i2mhUzq+Gq1OyEiJVHAVnGY7mHkOI35W0\nbSBR\r\n=LUEO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"66fc8a91fb533a43e898483e7c4e1fac92aa0b7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.7da413ed8.0","@material/base":"13.0.0-canary.7da413ed8.0","@material/theme":"13.0.0-canary.7da413ed8.0","@material/ripple":"13.0.0-canary.7da413ed8.0","@material/typography":"13.0.0-canary.7da413ed8.0","@material/feature-targeting":"13.0.0-canary.7da413ed8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.7da413ed8.0_1629474538717_0.3507989966902918","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/form-field","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4be11046af5d7075fe787bf2fefcc6c6043d1b09","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":33,"integrity":"sha512-NUB81MF3FLq86YPeiBjdIK58ZuWxEHRGPl/2XLdP/rwbT8J4bOL/F6hKX3tNV6v5L3gK0Y7Yr3jIoedWPP9klA==","signatures":[{"sig":"MEUCIC269c6bcicHKu8ECnFCNz1X2qbani//RDLCHCNFqq/tAiEAldZ9HfcXHksvJ5KL/ld0y4DQC+0h4GsYXVvVJUvhFCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIANQCRA9TVsSAnZWagAARDkQAKBBV6hnq19MNUzkg/fO\nt5SZgcQ7Gw9wtZmi/kjPXb5Zkqw0ujnF9V7TYwIvUwSAyq512aWX2teyNllQ\nA7gUxeGiXh8T0S9eJS/+0LFpkzJq2GgWv842C27Dv9IdS8b/OPPCrX/UX30y\n6UD/cIIYv04NiUKZZgIXH4+oQKmCmxkdomrnHSsrU/Uloq3pftdtyd3xSPnZ\nMrLvS11Q2HGHBQLgRYRuqaZQUgxD/DzjroCz6LNFQIsklH15z5KuDg1u/4L1\nsZfN9MQbmuyk+6PhbqPXV4UQC1mud/AqNzGbNVLamyC4DpWyYpfM4rXc+gKw\nuhIwSwTcQdJJa4VTmc0cWaEbf/9TmPrh4RL0ZOd2v4mHcw1Po67kd2ZmpZQb\n2ZCp+tnXIQK3Y+nBGpOTvM95Tg4Q5Fn8hZHv6f8EtbctMK976u65krXs/P9r\n67yWjwPeOhI3STiegilVRrWaZJjz3xmAN/Y+WMGvg0WTggIwGb2BJD2NyX+B\nOVEfIGedsFxhWbJgiPAnHQENJ3PUzeCiJfQFw5ABaXWcZSHktE/7RN46VKJG\n24Omd2I9uMLB7iQhgMTHjCWlEeibheSK+CQlCzgPGyiqNucEPxAaWcu0ALu6\nuoTLqN8p2FsoJ+gs8ileTr535WYHtSe7v7bKzBCIjO7Zevswavz4ZBWSQ67G\nKnws\r\n=yk8T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e400b9052366c6e1d6e27533a72ad00199b6313e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e1e69fd8e.0","@material/base":"13.0.0-canary.e1e69fd8e.0","@material/theme":"13.0.0-canary.e1e69fd8e.0","@material/ripple":"13.0.0-canary.e1e69fd8e.0","@material/typography":"13.0.0-canary.e1e69fd8e.0","@material/feature-targeting":"13.0.0-canary.e1e69fd8e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.e1e69fd8e.0_1629487952092_0.96684042214164","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/form-field","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46ae1ab0051646ea0b1b1bf6ae162f9b4a82bd57","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.f5afc16df.0.tgz","fileCount":33,"integrity":"sha512-B9mCUU+QHDQOdXaSLiaQAQWj0BiG50etBJ8QFWcnACTI7n0C+M24wmHcmIHxIEEb2hQZIrd5bY0ZkrkNr2xTYA==","signatures":[{"sig":"MEQCIDAzYVcQMPeECw16A+S79UiMfSS9Lgc8MXp+wpNzHT+0AiBcN/k8pGlaPpuU5aOxaL54XhNv7R9cXtFubyrbHykfAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIBAOCRA9TVsSAnZWagAAs50P/1/ffUa5U9COp6+/Ct3o\nuAlv6SLuNuLtA6VUv3FaFjr4/cVQK3W9AQoA24YuWHhsm77fHuU7jFBESOrf\n7Rp6o2dHXWQkb5WJOkbzDbncLfqq7ly/c8cIISVdJGPIu8y7g8gtdwWwfBGa\nn0zOq3mR/ng3rblcpUVZ+oO3Ynn5A0HeV2UblQ6jRa5n5WaQp843XltNbLn7\nRw5h1vXjR1FLjXr4hI1kTcvEW9Ly0ALuYGRqdcAvOMSqRbBw2NHUO7KsLlEv\nMZVQ5+TkyPQB827gaRU2fdJkW/1akxXFqn5pLUsAekuCJ35NmatOWkyRH9dS\nFWtQfKd2JgKWxQEnZ2CzzOjzINJqIqFO9sENxtnsADOkwiTf+Z68EqAVm8Cs\n0beFucexBO/2WAp7+tSyqGyv/6XUBk9QuZ6PSXdHP4J0SKkaRTd86oyWxbsW\n4ibEYIredN5ibhqHa6aH1qUhtyFU7lE/S/hrEFtNx0oyT1W3SzCIrNPeXMI1\nQ5hg4Pn/sDK94WtmaiLof/i81y+P13ULeBRIAIkvxPubSLDA0SmbuSQ4Rdv5\njTpGqW6CEkgST3bwGYCJvCBM/Wur9NtuqJ9bSA8cXV/Qf2N7PuYuTUqh2jvs\njbAfK+52lA8R/2k7YhD1KqdKOUW3xH3+k7DMOdMsQIjH1Twbk3/DFcNpYUN0\nsTee\r\n=Jbgs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9a5934ef5d223f46f61452bee68b0b45a21e20d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.f5afc16df.0","@material/base":"13.0.0-canary.f5afc16df.0","@material/theme":"13.0.0-canary.f5afc16df.0","@material/ripple":"13.0.0-canary.f5afc16df.0","@material/typography":"13.0.0-canary.f5afc16df.0","@material/feature-targeting":"13.0.0-canary.f5afc16df.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.f5afc16df.0_1629491214111_0.8902151310964883","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/form-field","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43677a5de682a64cba52f6d101f4ebd6687e99e2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.28d0d75bb.0.tgz","fileCount":33,"integrity":"sha512-kSNDVwS6HjBwb2xV7twVpJbs/hVSXrpAeX5QOfoHaC9jDdommM8NllG3snWWeLS4dA2/dGGfLrOGbaZ/x+EC1g==","signatures":[{"sig":"MEQCIFGIrdoU5uws8mRAPW5mXsbK9H9PJP8HIRacQFvZ0SgIAiBWv0UJskPMOuFXQMZ+LJCV/FiPhBAkMk7YLIKGufCCuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICq1CRA9TVsSAnZWagAAI0QP/0kscqeGh0X3ZXfVMRMc\nmsLSilGD6AFmt1IhFhq2sYcONPz8ufEiUVb86Iy4RkNfNmGdOnONVhD3LE5P\nJqW2uSURhElCYvFBtfD3rJxfsB6Ja5yQkSjBeJGEu4wvQt/TOL8qdlMYWQ1u\no5+lFLckwgW0TjWkAJPjkNrtKd94en+C+kJuabjkPAaAMHEfOYAcqO1JcjbY\n7oaNwgzdzhK03ShJUaET9M5wexqL3vYXBD1RGkZymZ0G3Hj2yCJCKpIIHU4u\nrm16uP1zKbL1KnEK8+bScLr7/ZIvkTzIvBatXMvkBAvZ1zH/rAlLtCA0HbP8\nfy9+B2E2e+8fH/vLwI3x2KZ1o/erYfkrAsTBf6u+oNLqxDkUwKt+Io8rms8J\neQrx8dhbXULykqAU5Mi6tjzh71CROfglqZl6QjWJsQQEMztap5mgssjI5ckw\nQmA8qiTq382zdrRoYuUrrTKo+eOCe419A+fY98d8ttc3cV8IjCDGq63BtIwe\ny+F0v2pKSelHRQnvW71SrodDHX4cs9SB+A1Mu0zOUKkiN25OlKuyzKzkkveX\nuydCfunFSo6DVu+Z8VJ7W1hdbemBck0BcfhUveZWy46PhQffAQb5KD4y/MQO\nnnnsX+gnbigye9koZTd0jtnAr99BMy8Yx+InlEs5aOM8nQFG7ELJkR89VOph\nycf9\r\n=xty9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4becb1aca9e878d432cf8308ec0f14cc50e9699b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.28d0d75bb.0","@material/base":"13.0.0-canary.28d0d75bb.0","@material/theme":"13.0.0-canary.28d0d75bb.0","@material/ripple":"13.0.0-canary.28d0d75bb.0","@material/typography":"13.0.0-canary.28d0d75bb.0","@material/feature-targeting":"13.0.0-canary.28d0d75bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.28d0d75bb.0_1629498037418_0.4702392229434915","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/form-field","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.21ece5360.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e834dcebb7040ff8be7727ffbf74861151d9bef9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.21ece5360.0.tgz","fileCount":33,"integrity":"sha512-H9vEjK2WDrocBtHsT7NL592E1OEF3y3a4bfeGwLZIerhi0fqaaDcElnN3/j2olGujKrUwhZwXpEQ74DftGyMlg==","signatures":[{"sig":"MEYCIQCGCkAa4N5Z09TKzUwgLGHKgedvwKF2pPyrcIJYNCwOhAIhANZupyBjpiscfR87dirolexkIy6/ato4g4huYkk1XfbO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID5fCRA9TVsSAnZWagAAgrIP/0Ks9ClJdCwg8jMiMAO+\nKshB/Br8UCPnbp9Q/59MCVr3UTHMmSfmrCovCYzihqYKsNn4G8xzPWOa9JK4\nBZodilysbMldjckoYwb4d7xJc3/RJsLM9LS6Kz6/e7vtPDhZkU9pnEKSrtbZ\nnGGDShRXTGfFj9bFNAkc7slz9/hQJioq9Wvc7ec/50SzNdL9Rhc3Jb8jQ2mK\n756ItDirMUV4k2Ww00uobRQ2MQGT15VnQSK8oep+gEHzjC3DHYCR/fu/xxr+\nb1fxjc8dv9/J/BZkdNy4VZgGwjIfSWjil9h5dXf/QNSVdBLCVP95gAoKAXDu\nMr8fhy9AuwETKHlcoNgMa4E8Gg2OGRQI398mrCfqRh+7xhrCRGHQt+/usFYz\nbRAFhEKzeSZKCi/c82gf11uuk90hUczTVi5NVBqLaP6p+vb4vieJammLfzlF\nTe47Cy+YZ9i/AWomePANoVB7vaLvnIxk+hJcDL0TMAWABkGWvgZSGcNSZSML\ncHLRb5r1/VJyn0v6bs/ORmKlZBg83SpTNteiekUfHWuog+X5Pybw785ohRfH\n1flXjQzg2AABZ9F41zhZE2PKEZDDHXmxEeQEkZ4atun5f0QBuieTV86B0yjy\nUVg0y32g2GraMDRYeRMKykap5x3HvJPCOmG6WUkC1O8/l4LeABreixVZkYMq\n5zZU\r\n=g4p9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9625caffe59fe4a84aea358993c2811ffcf33e74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.21ece5360.0","@material/base":"13.0.0-canary.21ece5360.0","@material/theme":"13.0.0-canary.21ece5360.0","@material/ripple":"13.0.0-canary.21ece5360.0","@material/typography":"13.0.0-canary.21ece5360.0","@material/feature-targeting":"13.0.0-canary.21ece5360.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.21ece5360.0_1629503071336_0.6755319544964447","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/form-field","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ade9ecb878056167bc47f970e089027f536061b9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.8de07c02a.0.tgz","fileCount":33,"integrity":"sha512-Cv2cq2Is0bhBXrgNDtm4iMVqN4pe+X8eAp+3DXW7BIj90SkkkxKoeFKY0SOgK4s4yTzoe0blfO4wWmOsvBvJtw==","signatures":[{"sig":"MEQCIEki+bMNnphmD1V/yqoGN09/onP+F2NHK0xtEyydAhY7AiA7JZAeytT+plgX5PdwIVZijK7OpAqjotNFdWqlVqQhaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI75BCRA9TVsSAnZWagAAB2QP/2RxgQXAM/pRmQeFPDX8\nY2ui752Qf78qY1CgMuJXDlhFPmv/Piw+hAth13NEQ1oFLWMEW/0IQn8Rg8WL\naGqahFqM9759H3UjFc6f8dcM/ut5ZFRBLuO6bOl21533HKL4twVBi2oXyIX0\nfZ+xz4Q3vsubncX+M/GRtUFnM/5CoyF+z/u3nheltQXBvPpttJuTryDjgT2P\nKG19BfhzCKjshxUOghIrqEci+AZZ838to9iEeCykwAoluLroZXSx+spnE2wn\nkuIEIzWpWcHameCIvTjIDbgHEn3KKH/+dR3PUljPIHRJ1wlpgY/IWda4FLor\nmkL3r4IQS0/+dZY4QiI6nKEDUWZy22vp6vjJI2XK3jjOL94D3RugZABLjO9M\ng76JF84/+3y154PJuVbBEc5tKhE9EhWuAPAgouEEOmms6K4Vse9Gs+PHxXfl\nKNbpBiK5AhJ/sPVsHbDAYAlD310XI9xdkGZAxCGg4DCV0AYb3ZLokwie6GRi\ntN932gdPK0TPRuGpD3L53qcFtgdhR9tRlUpSxljJkpW12WHUehD2d821ueYc\nqhMvgypB0+TOKP8RBDRRmBHGQi6BZ9sD+4+JxC4FbLSqLl+i6p2VuS4rBYA9\nKZdw/1Owu8HsUUOpEHXmd27cneUGfdgsnIYbUjc8cYYJmLNeCtHDqcrAFF+u\n2Mbm\r\n=UMBQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e55081eb44f85de06afceb7c0d189f0d358ad60c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.8de07c02a.0","@material/base":"13.0.0-canary.8de07c02a.0","@material/theme":"13.0.0-canary.8de07c02a.0","@material/ripple":"13.0.0-canary.8de07c02a.0","@material/typography":"13.0.0-canary.8de07c02a.0","@material/feature-targeting":"13.0.0-canary.8de07c02a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.8de07c02a.0_1629732417028_0.7692989084693072","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/form-field","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8e09e6ef464cd298d394c8b8633c0d1854e78dc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.65aa63b0c.0.tgz","fileCount":33,"integrity":"sha512-fD00PlY060bsBlRDOPQ0tSkLTuJbqTVmcdFKHRF/15tknexXcJoxtdmdJ/LSG41wIuOI2Y72un4Su5hkeXtKGw==","signatures":[{"sig":"MEYCIQCZh06KuqKEq7VEh7PYRbLXfRivAX4hV2hACZs0Nb3IxQIhALMGMhglCSEKqumYVt2mhHw81tALUyP36rG2324mP0mJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRAvCRA9TVsSAnZWagAA2OsP/20i+XhIyEVh9fwbTiR+\nzw+b4cKJ6gmWe5bKF5pdkSqC4YhBo2rDoYwJ6H+EMr9V44nTQZV4e73V119V\nKcxyZeuHX0OmLLeHl9essK95MmHXByRR96Dcioehyx4H7V+J12C4D80sRyKL\na/5zxTDaaXf2Q0BghuzXECCSzD+wzQfWBJ2cTNBxP5e0/7QOlBOCiaXx6YWG\nDQSn2N9g/tIAEK/PgrQ1q2i5YUwsyXGUoQjDaH2GJoThEl8k0UlKt0Heguwc\nVH5EgUyvqOqGRA7oW0OReIPoxfGSU12tYxXz6DBxAJR4FS03G4HeBwTISjhc\nTZ9FbsNiVFxM1d2tGaElgeCgtrQz0JO+xYq3kzHCZ9UaPWpC2pbHi+2P31uD\np8Cn6JVfjk6xWLuleQA2sd5pZmc67pq8HD3gGSEXUDg/g/N71MddgMkr161x\ngQpuND0SiMA4eZVrl+u5/zvbOVYOXSGghP6kXk2uRUG6J+0x6pSH6c5Z5fqY\nxDi+GRB4VCsQcy49PV1TLynpyDALlegHD1ESJyvd9KeCsQPzyCeWrRB9bDCZ\n6USHjtKVBy8QfFzs2/+VnY5V29lwftxAuaTbjXPj5ijlrqmV9iU4JxJApjs5\nC9BSh8QgPxb3cz4F7E5ns5lR0s0JZUNFuVWcCzCAxZrsoglaFNbdV1sHvm3/\n7Ab4\r\n=TsgY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0ac2dcf03064da43ca7eb352045fd4da0af02200","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.65aa63b0c.0","@material/base":"13.0.0-canary.65aa63b0c.0","@material/theme":"13.0.0-canary.65aa63b0c.0","@material/ripple":"13.0.0-canary.65aa63b0c.0","@material/typography":"13.0.0-canary.65aa63b0c.0","@material/feature-targeting":"13.0.0-canary.65aa63b0c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.65aa63b0c.0_1629818926937_0.1527793302533338","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/form-field","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9674524f23da49357672dc3e0b411a09cd98b04f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.15981e9d9.0.tgz","fileCount":33,"integrity":"sha512-nJqXwMX582SCRCCccOC71BamQa6Kl+/GFOBT32A8hE//k2KCnF2caL/dY3su5Y5nRZKhCp33cqiB8B2o2b8emA==","signatures":[{"sig":"MEUCIQDouHvYi4sL8zCGNnhrlKG41cBkcb2yMiMtsie6k/9nPQIgJ9hQoEWsRp0C65rKLYAwmiHyDFJ+4FtQFZDRwn41w7s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRuOCRA9TVsSAnZWagAAAVQP/RHNb4PW+1DPli8H+7Ps\n+ym3eIvTWA0Hy1vZom7uwUdSE9TYuxhdWIHjTFjeIQU3CpYL2i3XG3iojDSY\nDAMTXbHYG+bppw3N3cHPWaIYu7dU8cRUavxPukNomH/bBrw6AW4NIJ0jc2E6\n2wN6F02FZ+s+jR4NuewPSOGlDjXKTZe8gS6n6IT1hUHP23JFEJpadKcDNrHZ\nr5MAY91uzV4/BBYaI7r8KNPkZjKcdErjBQJDg6MyGiELwT3pyoeTX7gytKZy\n/yQpMPn0lKEOuBpeqCjBnnCXPOBRL8R60gnuV7xZKz7bK9kNQvDRRcIfSKu1\nUGkZDTniNk3lvsyWegHII5t5rLSTL+XNcrRti0kbW2GIzR4me13K+SJH2CiJ\nHUwOw6j3LrGJ4+aftTRtzU6GYlt1RR8yAf3foZi6LUEgckL3UHcMmf+r2ON/\nf+b7JkW/WiJaCOjnJktBLo7DdaUIbpfAvFE0i4632nYsSfmsOoxP0hIJQ6Qv\n1vkqEh4/zRG2BWKX9kN7aaZZ74fiumg7eyKPksrTsplLc8+GZREAeio9Y3x5\nk/i3MOEyCWxoztOL5/hgaLtkoCDNOAWE5Tfc9K+Vt5H1uy6oyC8NuEE7dQxE\nozw4NXaDzt+rRuQMyVPpzAbbz7ZQn7+j1K7QHfF8psa/9T0Mjq9bCbvmWZ+A\nFZma\r\n=VbkI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"93acc5a9963b30cedb03f35eefb49cd35c93656b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.15981e9d9.0","@material/base":"13.0.0-canary.15981e9d9.0","@material/theme":"13.0.0-canary.15981e9d9.0","@material/ripple":"13.0.0-canary.15981e9d9.0","@material/typography":"13.0.0-canary.15981e9d9.0","@material/feature-targeting":"13.0.0-canary.15981e9d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.15981e9d9.0_1629821837857_0.6332579375625953","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/form-field","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"323aa97bac974e2ef22578fec1effef4f9cf776f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.fa7520f62.0.tgz","fileCount":33,"integrity":"sha512-YBlOS5EYy74RN8bU9+vigCsTZLBV4ChRWP0zN68ihdXffFwIWZmbsixr6AfK38LRxdKjnEjPvAhRXz2HH3l29Q==","signatures":[{"sig":"MEUCIFSX0ooVhlqDnH16mzQvAMIFpGwi+bI7HPDTJtxjmrC6AiEAz20htwInVw+MeZsYbjBFAwBMrtn8gnjEWk3BIbyQ+mE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXJ0CRA9TVsSAnZWagAABJsP+wQKZx0QFtFO+VD1J+lv\nzFs6ZeOy0Lp03PPZ/i/M4mYBlTmbnlFmTyRNIE1z3+TOVfKBd6PCQQYufYLS\nBTOJUDiEfvzTa94YvOM/UM0mIvl7FSGcj1tmCNlnlnfXSpod1/C5w2Ud6A6o\ndVB6Arl4ayUxkTaNJb+g8s6Gar2qedN2t40yrp1mvjWIe5j8Bzps24+Wzp92\n2M2O0A07MTwvcDwAbzsQr1EL6f3fDu26Q6jk3dj7IUabgDEdno0svfA/bv9f\nlUUuONAyUFjuQbgms3L12e9wdb9Bk1/PjxeibR94nGMKgyNxHGv1TL2PQQOW\nkZ9QGkpANMV3n61HrEEoqH7Y9c20jFCeqgzHJIGyXXCzJ0SmSLGYZ+Ao76Yi\ngBSmtvtch3121AojsdwNlVfzOf74GBFPhV6qtmDpTmuBjMApvt91rEXrZvsD\ne72CMvQUwjV3d9v746KXESp9p0EB5C0xTTzTo/GTlrQW/vs0uoCuldDNTsFp\njthe/EQDEImfpbawoHl79w2B47MY/He5wWSKNDZ2rviT+HcEfHHcPwvQJAcJ\nlS91+64VthRV00Jt7E0jYwbvQ+YK7G1JDj+KKLRe++yyQw4VvJ9R3M7QRJJE\ngyitzbzCXicRkGFElc9qglHeMYQN+30FNB1KRut+gySDgCgvY1BzwouOWOYx\n7T+L\r\n=3VV2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ded8a7ce355618969092a7bffde0da813aeec162","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.fa7520f62.0","@material/base":"13.0.0-canary.fa7520f62.0","@material/theme":"13.0.0-canary.fa7520f62.0","@material/ripple":"13.0.0-canary.fa7520f62.0","@material/typography":"13.0.0-canary.fa7520f62.0","@material/feature-targeting":"13.0.0-canary.fa7520f62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.fa7520f62.0_1629844083903_0.6910944005225377","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/form-field","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8141cd7d8e47370fe972e4c81023b579c0c7798f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":33,"integrity":"sha512-7uK4JcToIxVFNx6OtDP37d42ljN4RasJHXpY8OT/vcyYHdNW27r7/EXb/lf4+UDFjczmhTp+MR8xbAtuFic8zg==","signatures":[{"sig":"MEYCIQDPknJx5+GH9Nts3vq5Y81/MZESFmsw6CfTHawbRt6zGAIhAJDiPD65WXXFM9kApgq6zbBAS1ryKHDeiy8ujJLXclry","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXdKCRA9TVsSAnZWagAAFWYP/RA3Tm6j8sFBqIlt68Zr\n3XXnHY+K18k/priXLq3dyvAWucHB6kQFPqq6ryNWh/kdtIixQ1DipeK376D2\nOIUjYqr7TMWL61fbyfmFcQSvtcKcLf6GTRdJNcmX1/NQTKSdX9Me5mGrQZ3Y\nm4xJxw5L2/cp9RNOuOdxH59FbOhjV76xKNTCEkdtaRY9pMIaIM9GB2Teob9y\nl9kyXsdmZ4Fu8nZmVYgekSbkFOkQ2MxqBwb/DU+41wZTG8jYlBxxqxIPnqP7\nH8I+0i4C3KtmaG0ltjc+yIQh+20/VW8oVjkFwnJ+ULkWwFBlLjDJjZnxWX7T\nRuyt/QycZ6ZxXjdeThkw3hFU58ZGVP8RPs/LeU7af+bYr7VXT6yYrGKROG1U\nVrYJgEHKM0EyX/qmsRThMY0PFxKpSh3JOLM4fJcEBM4I3V7JScriUjwCmsI5\nsbT/QsUNra7UESifupLxAeDjSK7djWOIDknwxrJ905pCs8rbnq4YfYCrtQIT\nEA405SJT0hNlfPKmXpXgDaWRiNCti6HPYnWn+whMs3xbUtRI/jMenPzox43u\nReMInWlKhY4LPB7asdlZsSyCk4FGEC54hzTzkFPyCCUa9Mhp4w3y/BJ8UaS+\noO0xEez9wUtS/qZfnt82iYnBkLwsSzSmBwIWF2lIP5gUxX4M0w/qKngZX6v/\nFhQW\r\n=X2eF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5296a1abf91023fbe0806f06b5b5fce528c40509","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.ce25bc3ec.0","@material/base":"13.0.0-canary.ce25bc3ec.0","@material/theme":"13.0.0-canary.ce25bc3ec.0","@material/ripple":"13.0.0-canary.ce25bc3ec.0","@material/typography":"13.0.0-canary.ce25bc3ec.0","@material/feature-targeting":"13.0.0-canary.ce25bc3ec.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.ce25bc3ec.0_1629845322137_0.9085900318745208","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/form-field","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f62137a53039f6fab6c514eef793aea8eb37cee0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.12f5622e1.0.tgz","fileCount":33,"integrity":"sha512-LlPHs7ZaS+stLCYIvI5eSSn9IsrRNPR3CTtGkaE0H755iVvsgakwaPbq8Tim9MWiVivfWLM7oqoY32niPxLTqw==","signatures":[{"sig":"MEYCIQDZm/iObZ3VBX7bPlv3+DNh53yddrtx+a+QXs53LAaqBgIhAMxP1h7APiM6zTd/c2TxzZVgqefXwBIjOwtC4O4OWhGC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX47CRA9TVsSAnZWagAAnusP/3huEfMbc48dspxJiN7S\nYguoSQ8FIe3LfedUwegKioLojzedUiXrt0GxzY0exF1m4YopfeEG9PSamC2B\nIyyEo4xl0mpFwywUBkd1GilqJgMVdMLN6CEJRX1nttpC2UrAWcx71Jitvlo8\nxh+A6WivYnARE2HuCoa6YTOB0kcUy+68qtMRfdHzovi0SKNlX5Da2Wucxp99\n7GkJ3vGOisw7ZnwNK/RDm2o4s6y0OxropC6XVZflOxiiBeDxUOR3sStg4T+L\nI1qsTr9mnO0zc8aBataR887/P6Ag8E08LJCmPW5VIWHMc3KrLBrLz3DmmaIH\n9JsUchUjnOi4OT3H6yjUqilNkyAOd/WNDAllAq61qs0R/DpEt2vUp6N2Dphl\njN4HzmjOTkPeIqxv04h+A9j6RVws7iSdaMNJJ5bt7O9FXc42s0sSKq+IkaOB\n86nx7Js8DB39hhDKpfXKngTqy9I23CLwXH1RrqukA45HObjCweBMOoHnms3Y\n93x3SB875V6YXm9F0WpUpAJK9QxD0+uGj7kQHecOhGCR5GHjvi2wbFgA+YUc\n3Qgu/H0AU5rkf9ICOi/ZKpiVF+sQcBs6RVuAgqdyCQ9Kq3fx6t6m8pOcaqlA\n19QdONRxuMkVfLFnNgME+Emr0L+NhESXWWDvAL3ZKWiWtYwWuwy+GTie6XFc\n3KKN\r\n=Op+q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2cfeb72e6002a5f3cf296794da5216b3114fbbc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.12f5622e1.0","@material/base":"13.0.0-canary.12f5622e1.0","@material/theme":"13.0.0-canary.12f5622e1.0","@material/ripple":"13.0.0-canary.12f5622e1.0","@material/typography":"13.0.0-canary.12f5622e1.0","@material/feature-targeting":"13.0.0-canary.12f5622e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.12f5622e1.0_1629847099279_0.39941452456923887","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/form-field","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec566dad175cd709ca076bd148528c2ab358b2a2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.d97f8f133.0.tgz","fileCount":33,"integrity":"sha512-QVab+/5MnAGNZXZaigiv29dHCgiwDoDhBD414yQkmdu8qPOqauhw/xdYfsd9H0SW/aA81XQsUIndkJovTmBWPg==","signatures":[{"sig":"MEUCIER2jWey1CZQEPjLnJKTgKtlDbFTLbFXpUlokd26b0fjAiEAh5tUxcnpqdaxDRjYJ0AwbNcFD1B4kT0fjWFRXjV/sfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJoz2CRA9TVsSAnZWagAAZJkP/iBwx/khUaqorsu7hqW7\n167uQfQKkw9WGrH0mshb/q5zptrPeLpQK/7NVwRNpdugq48uys3DQpcWwMgr\nvNkLanuyf0Q+IZmIsPzrm0HMHmEMWc5h5Qt4pjaYBilOQgJ6sJvIuJRbAaDs\nUUvJ0LbKJWqNbgLaLiq8asxpNcFpQxTZA5+yl6EGctfUg7YxL6cSUEWkqpmd\nwE4Z6tKQVpNHGXIySvu3rtSJxEZLws5z1OLdfn9yaGZSIgFjY++gqZUxfADl\n43mDIeSyI9i/2LXF9j6f08y9HzNd5chudfuu5+lkbRdpoqztkKEgy69BvCqe\nvLzXYIH+k9IsdYlD6laqZVHmqaVtEo6xr+TTpu65zF8iOYfLEi7DCBIkpSo/\nKfq4rddjOpFoXoDnBGm2LscSKtwOXokVO6ebcd0UMhR68P4lXcZwOPbk3d4U\nsaacTUSYF30Gwhg5gSMmblaNidgi8GQpe7uTbESDChEsdLcYCzG+34cNak/F\njy0rr47MVHv98DWUeI3ja8COHKEm4vH4I3sNR+TlFT6oRpeJcWHsPdgsOzKM\neeIAvzG4zl1ByqQ9xnSKRzZUAitqRl22odsnEIxrjOW8F6cV8AMjoi1Hg4ap\nyvF2yXkb5ufCQtBk4uCwn+KxNLUzVay14e3C1tnc4Wr0bs/+59N863JeIRAU\nkWYF\r\n=EwjS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e7295f4786bb26bbc05939b4d6e3e42f011cc033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d97f8f133.0","@material/base":"13.0.0-canary.d97f8f133.0","@material/theme":"13.0.0-canary.d97f8f133.0","@material/ripple":"13.0.0-canary.d97f8f133.0","@material/typography":"13.0.0-canary.d97f8f133.0","@material/feature-targeting":"13.0.0-canary.d97f8f133.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.d97f8f133.0_1629916406286_0.7884603639916421","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/form-field","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b73ffb5cfbf72d3eb3ec382dbf90117e980f2f67","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.d86fb6fac.0.tgz","fileCount":33,"integrity":"sha512-mSN3ihuyWALwx1Nzd9BnSOw1CFtUCuk+Jm+X93u8JWXQk6HuEa+zbM1sBxqeepGHHh+kE7m5o9JeKS2aJCxj/w==","signatures":[{"sig":"MEQCIA2RTEbnyB4dY1Un5xP+J0ri3aMv5Vc8i2C7RRbZNJZzAiAYZ1reFQ9WFTR92UCGKs3R7QoIKH0AlJzOdcubTfvKNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpHFCRA9TVsSAnZWagAAU7wP/0F/1Hhtf3EOYoLs0mXd\nqdmY0cwFW4/X33SuVeJN1poE9ZDkkh9CVF+wi3i0J4v6tTL/qXnF18JM8bur\nmLOqno2lBdhJqFKq2XlvQ63HCjhiKWDdXVRop7nrU5Xh0OVLVVaZQNptGj3t\ndfjr7r7hTxYyxrxEhGB/eJxeNrCUio75v3zDG65SGGoTvkT54BQdoaegYU6x\n5/Nqp66M80Uw1DBePZO0ie2AbtE/Jlb3pHVKqhESEnRqO/astqpguLbszPKF\nffOFexkxAJpPI8mUYkWaGnLta0SkTMckPs62URdXxTJ22JMpYmmzEZYQFcx6\narpLw+MTfcg3iMnu1Zb+yFZG+kSwLXKdDo1qd6VA+k0+6e7+ndz+9EqbadHd\n+EVWvWuOmFtkQ5gF0Liht8QWhcT8igH3AcPu+Lo+VC9N/0pNubNpCmHS2GI5\nnKeOuGePJbEfVQpVMwyj5lrN3zqfZCP2TuXjaQkTL/S2+BGWED/CuhHyHCUw\na8XYLkKGtniP+v9Oh+x8FlwfQMx9hGM2Xes1FL07tfJCFDUUd+sEfA5ZpGHw\ntuX2+sUMsVApoBzjdF4l5EgU1txvzBOHSASYCQY22k6si9mAly4Un0aw9lLr\nhG4nfnc76hL7Qn+ILodBr2VgHajOtJG3610cD91K86IFG4eYasHT54Pujxy4\n+NR+\r\n=qQZu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"35d13d1a20fe14c295e8589fe5960bc9b4da1925","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d86fb6fac.0","@material/base":"13.0.0-canary.d86fb6fac.0","@material/theme":"13.0.0-canary.d86fb6fac.0","@material/ripple":"13.0.0-canary.d86fb6fac.0","@material/typography":"13.0.0-canary.d86fb6fac.0","@material/feature-targeting":"13.0.0-canary.d86fb6fac.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.d86fb6fac.0_1629917637664_0.8215017718748272","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/form-field","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d62509348381b2995e2687dc099d6d635b172419","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.e8554dbbf.0.tgz","fileCount":33,"integrity":"sha512-qohcN1RkDgZUYmsJUwR6O96gp+hDDjoL+ZGJzvty5ixHlCzbRzQXueuFuFErKu7Dq0RpDLx60vxv+h2hNJ8zVw==","signatures":[{"sig":"MEUCIDOpnuah78oRajTume9XINgBptmltYDI1/mLC69xgEnUAiEAoqjGx0ixtDoG/PDTrXd+3D2vgq4nABlyRP63Xj9lEJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr1JCRA9TVsSAnZWagAAxQ0P/i3jmi9mK3Vzc2jNBwjr\nlWJL/xPXnO4X18N4GW6RnBWqityNyZUPfiPgevex/U19jE7FDWN7WduUQuUH\n5hGyF07w1BAOmb5ZTDLLqhbormmkvSw/oXEHE0iYwNvvht3OiCSdZgHPIFED\n/j8TY4R9RcG5jVyRYdmQdrmWV7wGiBbobqZ/UgVhvsMxdOONsTTzrsoBStbr\nGGSL8f+bvBwh8pAqhBoVQOWpu0FsBGGU+NS/TgcdWnaHmcjtlQtTKdDBFTKP\naOFAUdsqOTqZi/pWf7zW0OBRMQUuUrvhxJ/QYzWmYRYSMjMTC4LEirIqdBy9\nqBVjgh6etURXnhAMALKuIWaxHGtadKATk0/bGRueYHJxR+29ekmalO5YddYu\n4sxV13bse1rMMtuk7Wua8F9VM782mOiWXBaODK3LiFgQ1hrJaEnugjq7y+aG\nfmoS05nqZ9Pe9cQIvuxvwEaUnoL2W6U8a7z6subj2EIC02T4GHCEGvPD/TyN\nghsqO6jC9fqJOE+Chk20m/CGI5ka11q7f0+mv/6enH8hU+lKhZpf3/29mHxQ\nNEJ9KYfTh2/EYKW7YU7+FtWXCEf53RBO7BJdTnJpjfjOx9yj9sUEg2+W/z1H\njd0kMMXBkc2G2MSGZBARduVDEJlEwphTc94J0QGlpcjiymene/pStwx664M5\nCX7C\r\n=iv/p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"da636a8d32198c6289df3bcef39340bf76cf8265","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e8554dbbf.0","@material/base":"13.0.0-canary.e8554dbbf.0","@material/theme":"13.0.0-canary.e8554dbbf.0","@material/ripple":"13.0.0-canary.e8554dbbf.0","@material/typography":"13.0.0-canary.e8554dbbf.0","@material/feature-targeting":"13.0.0-canary.e8554dbbf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.e8554dbbf.0_1629928777014_0.762865525187185","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/form-field","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0692991f244e1d9168b83b3e34e5f349d7b9d7df","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.877e3fb0d.0.tgz","fileCount":33,"integrity":"sha512-qW0xdmzfaJ1/Ve47u/6xCCRmFOE/9mz+OEsGUPuFKuW5QuwO2cTAcv3WXROouQ40s9e54iQHcdIsyGOPx5j4BQ==","signatures":[{"sig":"MEQCIGVLFZuNuyRbi4UNnJEkHGZk+WS0t/mOgyLi4IYaPvEXAiA9mFog4nH5G1m8yqijaKIjs/CF9SP57mcc6oAhLQCmQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7VnCRA9TVsSAnZWagAAR7QP/1U8SXzC2M9qzXyUO6oq\n3Hgaz+iYVKopk2AdwK+xLfHWqMzYjepq+rXgwx+IfD/Xx8reyyp+aK6ojOXx\nGW457wUy4A05VvaScaukals3npE4SshHf7ibDDtSgMnQAyQc8i0k6oz7tXqJ\nHjPhBtZUywjWpp6km3PGvwGyGt4jkKAIwDUb0zn90fwOZ+YoWiNP5Ft86hmM\n2cc8R81ZpRbHIKKoLHTuhu4xqIU0x0mglT5A1rG8xQXaYAIGMl/0RFQHg8bu\nAPbE0HlybHIP0HaLL3HP6/zKDxYB5ZS1DzoTOnepEpdlAMSNloEJwDJ/kafc\nA+ckeilgHStWZyEVAfvix7dyYGlTVNg58r3rryHVXN6lEOr6uJ5WB3txmO4K\nG32aBpFjvM8rU2p5PkNpjBOwdsVbE1VrwkN+27tl19hPZsyeUVxQo45Ha3q5\noZToZD4LxBQJoE5Ok1MmQiEt8SiO2qVN/5f1S818JAVI0D6ZA5n8vux9e8VY\nL1EbuZyCYzHsNEYG6mtqDHXp25VcZh7zekUyPnZKrvVN2tm0AXLdv2FYMA5H\nd0jwLqkZC0gMSHcgpRonfr4rkMz/eaAJ/cZTYlZ+Oc16aHhQ6Dp1laQzzAxI\nw4V+T5FkhoEleTWguN5kmrvGKklkNOUIDRdTJKFg1EPtp620uEYXZ9ZdLJXo\n6GkR\r\n=5Jvv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"849a956f7ad3e0da0840469b917eb66537c875ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.877e3fb0d.0","@material/base":"13.0.0-canary.877e3fb0d.0","@material/theme":"13.0.0-canary.877e3fb0d.0","@material/ripple":"13.0.0-canary.877e3fb0d.0","@material/typography":"13.0.0-canary.877e3fb0d.0","@material/feature-targeting":"13.0.0-canary.877e3fb0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.877e3fb0d.0_1629992295395_0.45432750348862494","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/form-field","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.6236f3576.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b384044579e1497ddf35389a5d4cff4ac2e313d9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.6236f3576.0.tgz","fileCount":33,"integrity":"sha512-u2TjVWos7juOnInzsyw2fOkPlTCuQWgmf+A3pnFt1NUDL5Nxo0sv+mMZjpBK0w3ZqhvfDda0JrdrhqzP+ghZmw==","signatures":[{"sig":"MEYCIQCvBGE4s9YDpiu87wif1oIjkTfPuxj/lQHg/esvOWALbAIhAMloE6Q5YZdt5B2CFVmOwPQ/o4ay9HgNlCpegLeX2GUj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7vmCRA9TVsSAnZWagAAPxIP/ievmcsSdM5ZEeo3dsBZ\nfVmAw7temRqBLt3AFprqyS4P40pDL0/Qbl8iLGCWVUgrRy2Op1KLBj/VcUcY\np9UkpBakzn/p527vZkGEofQxV4dncgkhJ+l9g8c6A+uaTtwCpzouaMFPrbE9\nJKjTblrvNIldtAK8iat+Xstiu/wwKDHzAt/5FGJ2rp/qdKJTvjDduylmPQbX\nq56/A9G+DJCyKquCdVelIxT1icMNA8w2yss/PAcrXKm0SD9gQtQlZGvhMriV\nYQKG5f/BMN0CBuPYINc9l15WaHKt33a7i/84WE+YhYoQUBEmRqd4BzBH0PM0\n17fX3X0/jXgES2TO/dI+wYsQnYtDkvkNR3at/U5SQO72CSSCoBO0gzqFinfg\nyp4ZGmUT91JS/sWymRfPvm2TwdAMKOWrXEvPTbwjlU7uClb8u5C/CT4YjlUY\nL3x+P+1VfYgJww3eciwk0HWduXU1457g7/PbndOdd6qN4CONq7gFY5GPjEq+\nd1OijyMkBfBOL94dwYHQNmQ6BRGo6YuujBAcl4oZCeieJRgNi9E4dQ+Vm10R\nDQeTnMoYPAlujI/tT9vCnL+tNGjbE1cJ9llDj5elap5ldJE1SSvwqIUKgWiZ\ncSJt3tAfBVkWJEoJT8CqjjUThksp+/+GwGueUN8HFQWjpx+V5KrUY0ZdtHLH\nBQQ8\r\n=JTA5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"27220fe16ebbbdcba193340cb99388e30976a2d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6236f3576.0","@material/base":"13.0.0-canary.6236f3576.0","@material/theme":"13.0.0-canary.6236f3576.0","@material/ripple":"13.0.0-canary.6236f3576.0","@material/typography":"13.0.0-canary.6236f3576.0","@material/feature-targeting":"13.0.0-canary.6236f3576.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.6236f3576.0_1629993957777_0.5268127650899479","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/form-field","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44d60540025187ae4318e6cc1a7120cd4832b0f8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.1d19158a1.0.tgz","fileCount":33,"integrity":"sha512-5XiC6VR2Om8Tg8D+gfAMHR+CmTiAuAKfCgbfps8UCIUaMgkgxEp+IEdaD2gAtMc0g5bbNFvjkvgnEjNUWQtCwA==","signatures":[{"sig":"MEUCIQDW13UL0MF+4m0OcKHnaSvBgUDNFnSHM/mt5AkutFM9eQIgcINOttrYSW10sfvz1EL5hZXQfVSW2IgcxZV2+SdkFb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8q4CRA9TVsSAnZWagAATKYP/1qegai6i3+5QncV4G2v\nR36PrCeKOqMNEPq42BI8/YE/64duShgzU+IWBfL/B0+uK7ijTORsCyxOnqLl\nloub9zw75ETBSUQvyGZP1RkYDSKCHF9wlY6pmiO+A4LMdgD67NeNQiGQSK/7\n77tljHyBqH46GFYP0N8U1nyf3soBi445w8Jus5NVuKha6ti6dWFzrMKaYtvI\nS4flsnrskrYCHpf56gmHTdgxRcOdniK1O0/+WYSfvIB7tn+mkbZveqQMFdIm\nTL+mP42DYDPzUznAIJ6y+Phe89CNfl6j5VakItuGvtnpSg4jCsSfBPaNiCbV\nzfVBAUjoU+gc68ttN2EMsEhx61z5HZ3nifm8XeHnVjlIPSOvXUgm+C7+nZVr\nHDRf4o9WsbKOmp9i3gul1mzg+sq2qcgwHm95dNKisUp60WGXTFPnYiiA5np1\noeHkAEeqWTyAr55Hm9EcNcD+R/GVfFBXy9g6SgHxeojcYqm7+ZTll/10e70Y\nbjf2z4pzM6MQbPSvNcK/ZwBsq2c4Ah0hmoMavvUWKT09+qb9hHsQyl/m0p8m\n3KStfM/NPyhdLBHesECQ7buoSORdUWWqjvL0AXJE/9SIqjaMHCET3dtP0My2\nHO/2+yGTAaVyCzQvPjETznsMCFWFzkaY5yMvF4B+78ZyWGPcl6kjxk6aHh1X\nGllk\r\n=GkV5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"451d11fe02e89db73e3ac79cab01741c3da63ab6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.1d19158a1.0","@material/base":"13.0.0-canary.1d19158a1.0","@material/theme":"13.0.0-canary.1d19158a1.0","@material/ripple":"13.0.0-canary.1d19158a1.0","@material/typography":"13.0.0-canary.1d19158a1.0","@material/feature-targeting":"13.0.0-canary.1d19158a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.1d19158a1.0_1629997751845_0.002490549568732181","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/form-field","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d39d15350fc74c0282553ca36f15702373874fbe","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.6adc9e83f.0.tgz","fileCount":33,"integrity":"sha512-ls98S+3l5Qy95+o9ELKRGoiF9b1jj8aoGPj02y/CH5cWoYoWEofw42Hd5ljSCyA8fxVGNGHJiJ0PCQOdW1YXUw==","signatures":[{"sig":"MEUCIAwdv7UGtPIQQWLfRXRNNhr9W8ni5P3QFEKwH+9ksb3EAiEA+06jFLMUam3QQyATT2hiTnugg448gxsiHy39Cz3xXdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV9OCRA9TVsSAnZWagAAe1YP/3vgejW0FfpoZhbG/1Fi\nSCvUgrgxTvB2MmZqbALFEogNMZ5LoEbAdr8dFhGz+9KmOkVXOi+GZUIsKOhh\n6kTt3NCa3ka0GTcqGx1wtQh7wgMYXtlu+jgVXGoSumpy3dsgVsvvoySgVFSA\nhKnIOmGa5sdm30xJVlZvJuqyjfpkAWiojmwERuYe1X29AU37o2ijdlqRmUx3\nSC5Fgt/B3sw3wWgYMyC9Q8dR8W2APVAQq5x4AQm2p+4i/YEee5egvOnRigwU\nNpjpxHNzIZ08gF2J1DDrwv71ryZFwjYlHqBF7Qs6AllO4A5O2G2VNue/2ccC\nJVnJ3J5kwkLvz0TZwGfNK+nuDiQihYydzR07h5DEASlADO00RZi4K8s6Oc/n\n6y8BwTW+AHlPGyfVihDLMnr34tfHg+tV2DH5aDqe8cXZah6+M4QsSSrXat4o\nSnLAaQW8EiBB6m2LvQI+JvshVTR8U0pjiNqAEri/aR52dKSq68wagTPzc3x2\nlyYJDYzvWMi4qk3XkLiEG1OjNTcUK02kevCwOGqRekzlMQi/uSqVaWIuqKK9\nf64i0T41V0xuh4njSwSn5RdFsN7RmeoBwtTKc3GSGiGMrPQWLflnjC4o/2hb\ncLaC1Gna+2I7X8hEoJDCpRVEgSc56kEpwzeLu6DJg/wh+G4i2OBo1atgFdLk\nyECg\r\n=/HFO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d3d9f017c96584c46d77544b9f0dcb6e22eeeede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6adc9e83f.0","@material/base":"13.0.0-canary.6adc9e83f.0","@material/theme":"13.0.0-canary.6adc9e83f.0","@material/ripple":"13.0.0-canary.6adc9e83f.0","@material/typography":"13.0.0-canary.6adc9e83f.0","@material/feature-targeting":"13.0.0-canary.6adc9e83f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.6adc9e83f.0_1630363470449_0.3832859623014615","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/form-field","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.d082790f0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8641f6a4015fbe17c14de231380919778414050a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.d082790f0.0.tgz","fileCount":33,"integrity":"sha512-yuQcai+CZMxYp9Cm4ZNvh62UXY7l5xNdXBkQLqqgWSBjqyclKqan3ZMD/BzRd9Nbpchhm0LLrH0rUIbKpT96UA==","signatures":[{"sig":"MEQCIH7EMWg0CXztI61nonKNNN17tO3JkE4UBtv+AocsIEV1AiALHlyB/bxoxH/2nEAOJ/CZsQhEwLnNnL9NMrZlf2voNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/aYCRA9TVsSAnZWagAA6XAQAIFaZmk4C4zCM/8WKaQn\nyuxNrb+eUTgVT9uAOlvgflHorCwMHsLMLJXcd2sa1UCjQ21+nizEnkWDZpVv\n/7MMyaHhT19h3VTeu+oi2MejqJ768g3VSs00cnw/ZEoM4soCgGWsg6mLILRT\nSTKXlla1f8rs/+DzbirGFsOriuzg1JSewdr6Nb7vVd+rA1YMu0pdLdhMgA2a\nJT5KiJg+uSgdNyzyGN2xudCf3dz3DUiCfXrM93QbYpxHij6HRSQSMfp+yGvu\n5z91baNr6S3kycSkapQazQiYx8MxP/lhQkx/lFIOMjh+u8m7G2quACzTek6Q\nP2yZ3Aw/jd1emUJ9rE1vef8i1Me4lE4Arsw6IGKp3aS95faX0uxASGvuB7nF\njJbQUW5OdC39G4Wlbqx9q2E6DFg9R32iA7lglvUHpvLon1X8uNROuuq1s9aw\nFxo1f0jinN69j/ugoAZFTu6RTx/GJkgFu7qVOqjs5GjBFTEBsKwgeIgMhLHk\ngzGYeSSIauRsP8iCSlaZvZHF8MuuqbHbUVfD1n1uytm40cyM7RKEM44HjzZm\n9pEaUENyhM4gNwFjDQE0sLQJQyzmH5IGF+SSduKwN6kBPwoz/0afL4fNHmWw\nHb+fwwVEE9L/fbtXy/RLuewtmSB+qvwPVa0VllubEdcN7aG3p3MToZ1f+91w\nOgoa\r\n=Wb/3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"77212852cf39af4379f15c0daae076eb8b562c15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d082790f0.0","@material/base":"13.0.0-canary.d082790f0.0","@material/theme":"13.0.0-canary.d082790f0.0","@material/ripple":"13.0.0-canary.d082790f0.0","@material/typography":"13.0.0-canary.d082790f0.0","@material/feature-targeting":"13.0.0-canary.d082790f0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.d082790f0.0_1630533272431_0.9641929988043398","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/form-field","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f71838e2290e5cc301f6e7acc85ac20623c6e4c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.e2c4f0196.0.tgz","fileCount":33,"integrity":"sha512-lzPhUiDtFGTR+EvkECq4ilE5Bz6+7ozcfMjDoNOHuMnTfXoGQmT0ZEqJliqq2cOnRrLNnoHXTzuNK1W/mM5Bkw==","signatures":[{"sig":"MEYCIQDUNLLRr07s3dFuMRMJuvxC6Szy/6OKPOl7ZphpkZJrwgIhAOTO/sQj4klMDgcRVJGmnLHxWqiHZctB26Q8MWa7f/yM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDLVCRA9TVsSAnZWagAAP3wP/A+cPBu+RpufClf79zpW\nLMmUYkJ55utE/DBIiYUjVuMdX6clEXAEu/1u5Y2VvufZQyRJ6aqFTM4kWsUS\nq2233movG5KGDXHryREQEwgBgxCCDorR/D7uWG485AZKKkp7v7uxcnIRDTDG\nIjbs6YZE50KDyv+vSajhCwRzaHzEiVNKoQDFq/4KliO0WFhk97Rdn9ZOu+CD\nCcN6NXHNr+zjXVtHssekQ4+1EzwQfjPdXQwr6jVGvZ/DJBzq8oZV04FtCmGE\nxrqzglkPueAdPom1qr4Pz/M756Q5B/MFZR/v1E5lT6F32B7ksvcCPk3qsaOk\noAejjpt6gIcurhffS/bDEoecp11/fUboVcMFlVCQRQMakfuNuyntsyxzHMsG\nqIi3Ot5LWm8CKgNX/cqoXTeOVyAtTSbRVhpeX/hZY49FSMPQGiH/iQiHkxxJ\ngk+K024HS/AAmXbNPcYVUhqPIOP+HSiOqs2BxYhXY6MdOnuAk9pji2RyHrCP\nLYUO0U7wTtZ5kTl3b38eBf8Ne71xvbb86ewiMX/BosytwXZQlYeiX/6KMSN1\nTZ6if6LEY72jj58yPe86pcP+ZzellnU3tqM8jwq2UOSKN4+pB3Q39f/BtOvY\neC3dqkbZTF+cVmhAa4yOgFG9r7pr48gMTofjP6TNzG7iaI3PIQtnMiDn6P4z\nLJDw\r\n=6/A0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2100e21debb7fbebda0966c953fb24e1964c19fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e2c4f0196.0","@material/base":"13.0.0-canary.e2c4f0196.0","@material/theme":"13.0.0-canary.e2c4f0196.0","@material/ripple":"13.0.0-canary.e2c4f0196.0","@material/typography":"13.0.0-canary.e2c4f0196.0","@material/feature-targeting":"13.0.0-canary.e2c4f0196.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.e2c4f0196.0_1630548693196_0.33338662101005334","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/form-field","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.611db508e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9dde79dedb6e7d5077f2b0c4149aff239fce12a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.611db508e.0.tgz","fileCount":33,"integrity":"sha512-hcyiDFSuEbh4BciWYSpBHNOhrCqU6zYLKKPuBMRMWjhRjeP8K5GMILE15tmEkK3Diot6oAruXWFsZcBq2qMTGQ==","signatures":[{"sig":"MEQCIG7jf92IP76uetTPvip3o1ILpRcLXTaL/+kz7vRODlxWAiBPhnTEwn2HEAHjqKChID4MZURdgqI0rhBoARPTusMYIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEHDCRA9TVsSAnZWagAAUTIP/1AFKjJr5Zmhm/fFTB1g\n2iEY+aCICWleLiOGJ8fRouK2H+iibZTf4iiEYvorpBOA+huiuqAQsEoqVL+E\nOiGkgz+MRlLPmTxoRWcjrql9yM5n1VPtKzmZUyRHNmWamDXLQdm69GV2a4n2\njZLrPoMWWzFZ/0Y43h6C5/60+q5H9Gf115Bby7rqhQ8n+MJoRlMdbHogbAp9\nfdCG9mshZ6YmvCdEcQGxmXpE9K21cqye3tcz20tw1ui4f8RNNsAJrxZXYFm/\nhv9p8jyW2MobtopO6cl54CoBXrm4lge0GhdKN44uNRmZDdcEQjH/oN75/rrB\nRqPGeBRJ2cxos8XPEfnpPcQdEx8DYQoCGKuwYevlwiMxFu/j3W6QmBXuEWSs\ng+jhnSFwjkov5MQ0VOYy/VVWvDczTAZA/ncu2i27bG4nCel+GBOsZb+e8S/3\nrPzdoiYxtPDpRlWljk5/BBDeRHUnP3+sHdPE9sPq4Amdm6zqomFT4Ofz2zIv\nXBxVOCEDRZU7SUM97LlNKM+gd5lSduEjoPfKziZXI7ikC+S0fZysMh6ZMk8G\nmM4dzViWVfmSKEJilE96FBMkImT24VXinpZ/aSP5StQfPNJfcmHfUk/+sH/X\nzI2kLyjWq68F8NSLDGDIhmeO0M41hgNpp6nlH73P8HITPPOCS5xXTFFH/Rnw\nacS0\r\n=t2t8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5d75be4b0e067fa5d6477869a053c630a67cd643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.611db508e.0","@material/base":"13.0.0-canary.611db508e.0","@material/theme":"13.0.0-canary.611db508e.0","@material/ripple":"13.0.0-canary.611db508e.0","@material/typography":"13.0.0-canary.611db508e.0","@material/feature-targeting":"13.0.0-canary.611db508e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.611db508e.0_1630552515603_0.2728846365518012","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/form-field","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.d4706933f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa98e5f69ce613660fe28d64459a4d444182d9e2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.d4706933f.0.tgz","fileCount":33,"integrity":"sha512-1W1g6H3tL/66uImvn3JipeYGz0FGSAeeEdVruauIYcMK+RDSy5kdBrRyLUTBgh5RFqjrXy90P0h9gUvbUGBG7A==","signatures":[{"sig":"MEUCIGUlpLjtr7yBZDJoIlWsj4OqoBdCOpcsQ3+hMnKLJfbMAiEAh8C5b6sZ49dDLG1hcB8NNTuOaFSe895kWS7uVQkihmg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMO/TCRA9TVsSAnZWagAAKN8QAIB83DM7H1/eyqdJCwgg\nrRijv0qnucC67zDRf1s0FQX/LqSvXgqHSzpE8KEzs6VzrXMGr73yy7FVKr+1\n1+LVkoMpZxV0OTuiximxy1PBdOkN8d6La6T82cTvO4so3Nz4zw1i055L6FXs\nfLrlL4J+V1vRW2MvBLOkcNaJXK+spy0OfZQPtQx16YcEUnnSTaNYBxCUwaaY\nszHWSSjOMY9nSf9BQME6Qktze/dl49y4Rzrs+/+x0nlc7biPlLb0NY8UTmej\noDJM4BXhTONWWqYWtdufpF3c1yu+GhIcB1yLTIXUCub+DNT54dY/LOMMqpUf\nr/hR/yhlex7Gc3QMUo06dsRdOJQnPmeVYqH3UHvHlij5ElvC/2uwf3By/6xh\ndEl3aApUCtcMT0QzQYM5XrOnxX6oKFVx5dQaRQRjcoh3XhfFscqrWtbJeS7x\nGGdLa5S9YZFPRjKJphcuJjTrKcviviB0ijWL7kJsypEyCdZEFuiw4j7aUlry\nCyV/aER+8q8FC1yRCQoWuFdV+Kdqs4W5Wu5AYVZH29krXI6Gb4riX12W3VRE\n/eW+shBmAMtAthPKBQovN7KbVQEVmf3DdyDmri/l2yKtOTQUWJXBiK/Y125d\n+aNOAEzDk3p3Uo4wYUcHWzTemQBpXH5/3kKjxA8UDJ2cEWAse8yt5Vmr0PYc\nzrtr\r\n=+tyg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9e7edb1e0621060d55bf2765cadc8f2ffcfa0f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d4706933f.0","@material/base":"13.0.0-canary.d4706933f.0","@material/theme":"13.0.0-canary.d4706933f.0","@material/ripple":"13.0.0-canary.d4706933f.0","@material/typography":"13.0.0-canary.d4706933f.0","@material/feature-targeting":"13.0.0-canary.d4706933f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.d4706933f.0_1630597075686_0.4614410895318777","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/form-field","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b1b1c574b5c6425c50a94aadbe239dc5ac7d6f72","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.c16fe03ce.0.tgz","fileCount":33,"integrity":"sha512-MIvff5UFGcxvjLs6N+ehUlWVKVNQfkWX8tDGeigsB/IUv1XrqJSxyZxFA6RkzzCXAEK0xdJ8fhi0c+SRtiNxgQ==","signatures":[{"sig":"MEUCIQDs2R8UFwMnZoHiS9Cb6ErBxpxUm7xwihS3lssxv2RnjgIgFIzwjCaJFvtCbI1X/d0wtbeLk/UmDTQY7161GgAMn/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ2aCRA9TVsSAnZWagAAvnEP/jjWLA8DSTbtkQEcXWsQ\njOgFsdWJ9ji0MDk9QbyhsoLF0uO+rcWsbYFxuSU7xAAYDsKBOS6y3mLxf2J2\nTXKkjoY6QmCBxp5WDwiLwL4TmcveUKa8vxy5szcVdJww3k/medjp/5vst8u2\nZqjJUVCqA4TPnuk10rbKXphCZya6++On4k/KnKPGLl8lsVCdCGd/roPoY8Jj\nB3oXiIQCdfR1MooTgNiqyauVZ7rtvR62FlFjAeH5WpdoqRAUeWZ45YryLChX\nYetuild/GSwlS5oG1r7U0d2/dl5iQdaFdAd7lC32vkuAT2RIiUO3sDbz8yu/\nhhAyu5wyIKaSheGp3oXK+WrJ9TGPisCuay8MQLy47xjTLHdfGEs3jJBQgLkZ\nFPI4L5f7q+IMj4ymMYg2dDsoOb3GCUbs2duV4EJ7PUH1udifD9GvNt0w2Aq4\nR6e2WolL9M07iejR5+LY0wTH5R/iDRBM1UVPqbqk4t+aJqQ6YMFa7lLpuAXR\nHk+Y8tnzOXvKC2CMrNOLfr6ZOwo+6K7q/m3c+c46OwMt2Nigh8h2ZCFzoeuS\nViBcqOztNqW+HjHQFkMZcXilDSag0Pf4F8kAxWE9+jgPgSwI+bomnLNLqkbu\nJOxXL0o6poqDCMIHlIkIDrQZ4F5bV9/AsekP277TKnuvEl9bGk9uJVljC+a/\nDRhh\r\n=rJsu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"28281c91b41ff8002401a21d1210e0fc629d55ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.c16fe03ce.0","@material/base":"13.0.0-canary.c16fe03ce.0","@material/theme":"13.0.0-canary.c16fe03ce.0","@material/ripple":"13.0.0-canary.c16fe03ce.0","@material/typography":"13.0.0-canary.c16fe03ce.0","@material/feature-targeting":"13.0.0-canary.c16fe03ce.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.c16fe03ce.0_1630604698012_0.08444075590875433","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/form-field","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.9203a958a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b93c4829f5e4d47e26a239f7bfb9e5238e8e7bcb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.9203a958a.0.tgz","fileCount":33,"integrity":"sha512-V0G4lCjX74Z0pTTHZ0acjtx70An/Zk8QIAsb+hiAxx9L8zhVG+Rx3RfdrqYpIYqhijEX8NOvjvLN9FWs74dfbQ==","signatures":[{"sig":"MEYCIQDsyeem9HsinkyjrZuwBMeQ5NwoVCT2xGYm8B65MP3OdgIhAOJrXSLj+hZ1ZtW2EuAmvmbpjSyIBQzzZXuyXd0mvsA6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWJYCRA9TVsSAnZWagAAVUUP/1BvBMifMHC7fCDGMqfl\nLfNfULx5LaqYypnvWDFnxoodc1Ep6+jZT9rwnZ6c4ojVfe1WY6WMPBjr6PTo\n5fqN/WuAv2f5edl88ew5kStBy58TwFJCMwDAMS74kvGEKmZL+QAA1Su7PKWb\nBURzHyR59rfoeOmKY3G29w0B1dKpXqgrvLPbqJcvpBJHiInMtlQEanD/v0tB\noyQDhqp+GiOXvRNhMO61yQNcZvL3xx+aXEd31jvaKVBAdUMJLKxNV6JQjhT5\nf8qM+DdjdJeQhkPggjV2MvOgNok38nmJh6SnNU4UsgEqWDKrrRcOyRCFFuc0\nHAs+4J7ehMWlHiPZcHPIXTRhflCJsvYVW0kexOxbPF61j8+Y84Eztmv+a8Tv\npPV43DIpDYD0BuhpfAKa8wt9IMrGPxbaRHeW/4ghaEOnGsDyOJdzK+o5KUai\nmqLN1xqZsTxyac30enA0RUIkPMm6dem029sngGJ6N8DsWu7R7t9qE+sU3ETG\nQI2PDqd5mEp5OJ5uGEg6MKhlUtQUGqPH/egSfzA4r79qr9gLa84r4QYbdv1H\nPbF02cTjReAT13QA9Gt2fwlG7IESxStb32ann64r55C4BYreKAAR3EcaaxUa\n3Zs6n/CS+wvzM/PwFjs4tDltbKbHgVYWswhGC3lfvhq5MkVn+h5rFuMYdEiU\nU2Yw\r\n=fgY6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2e0f9de34d700b0d1eabd5186c5b5cf8080eaf74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.9203a958a.0","@material/base":"13.0.0-canary.9203a958a.0","@material/theme":"13.0.0-canary.9203a958a.0","@material/ripple":"13.0.0-canary.9203a958a.0","@material/typography":"13.0.0-canary.9203a958a.0","@material/feature-targeting":"13.0.0-canary.9203a958a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.9203a958a.0_1630626392050_0.8435849139186145","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/form-field","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ec41131023b0ed7efc492066cc0d384aff4e545","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.fddd5ae93.0.tgz","fileCount":33,"integrity":"sha512-sHVZeSpz85MkqOGiuZaXmtvB5IR//hKHS3c0XE3F/aifV7ysgcmeExVicuNi+W5p6RvpSAX+s1kTkDK+mRAQBg==","signatures":[{"sig":"MEYCIQC5hM3m1AZD+EMKZochQiy286bU9AozhtwfBC8dNHU39AIhANgjcp2CjBsbd1p+rbsagqLoO2eSQp8TiFdQmCL7/2UE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc76CRA9TVsSAnZWagAA5RwP/3iKCL3gGRXi5Xr9n4Lv\n9v5LzIpYQY3TdVdrTjk/655mHBamAzNvxNg44rKkNgvg6Lf40vHR/7Wryq5j\nmrYorWGYvNXkYtU1J0P78n7zc658xrwhtmNbmEBvSEEvPHbv9Hx3LI6MZhtY\nevGScJnvBCDp9nZFfszr3cnbncsXG6BVf8E+RJGLLq2qZFmlk0z7HwwM/Rbg\ni/wk3sKfqYYsDlpmXQBb7Qe2P2M0qoIxw5OM1gOU7aqmDV74NTvcTvKodrDL\n6SNktc9MSP9DuWx/hAtvZXxkw09OCAtmJcIQR0SSgJUlJJMLhdPVVNllvqK/\na+l0EGN9KQUP41rCf4QKVr8VXuZODF2xLbFTgYwTwAZz2T33soQ5B9e1CqRy\nbj4hOkyCf31fmceWEkN52fTVlXJOfG9HfPX7ezwXsr+nQRfp1D+zzoPnjI5s\ny/XqEt43rLpFiGrSPFw6ti2oKML78NRwhQHhNSjlrXecHumQGa/pNACN8Y1+\nCJJDJICJICA0OckXJvsvkhca15F29aYcsGoMUKAYabGN5wnOTiHPTScelAPs\n1icezDsItU0Te5zS0+YS+g8KvHgkTEQYXxC7o7LGcaZjKvxLSX8xBo2ux+ZO\nfPhI4bG97b/lEDTmJwn+DctVSP2xMnby6k01pU45d4kRUsMU48dOQDwk9ul9\nwno3\r\n=Q5aF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b5407901afd7b18f851e64db0350e0c38797ae29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.fddd5ae93.0","@material/base":"13.0.0-canary.fddd5ae93.0","@material/theme":"13.0.0-canary.fddd5ae93.0","@material/ripple":"13.0.0-canary.fddd5ae93.0","@material/typography":"13.0.0-canary.fddd5ae93.0","@material/feature-targeting":"13.0.0-canary.fddd5ae93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.fddd5ae93.0_1630654201893_0.23889759113182074","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/form-field","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.117599a8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38b1afd9913e0bba9bc42fb6dcbffa4ad98bf53f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.117599a8b.0.tgz","fileCount":33,"integrity":"sha512-DVmMyHBQ2qdMx5RT16YdxK8fCnuM3DJxRnucdCghFaQO+dehNo5wzuJxNk82mL349jbVxSaqEQfg+DiKdotVSw==","signatures":[{"sig":"MEUCIGmisGRHuvMSu+Irs2hUKfcyDgOpC1aKdKiX5R2GKtmOAiEAw9F0/++Gk6QDiDQxGD1dIbUebPc00kY6JKJfTzY+DSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc9cCRA9TVsSAnZWagAAbSMP/jbYwlWBKwIfZjlbwp9m\ns/cxCHb7b7bio55FFHPsu9LVZFUMiLulAoEQ7qCR9xtJ8YaMo54M+YTFVzax\nuCHKGabhXq37RIWYohcs4gyZakRCQDZd61Ow+KklDCMco+WbjgrDsyBx7Icl\ntZEGGptEa/+zlfICoojAidBS/fx4qkcyM2H/h2fqSzCxgrH/VKotaoSEhMPG\nY407gbLbmH2mJCPrD9da8bKtuhBPmtMPmRM3n9WoRVvpGm5inKgzFvq1L4El\nXkyZLwdkShfB7X9G2809Mr7BwUvnOiGDdUu0VuQW3pE1C/+iz9CGKMegwtrS\n5/UYCbEEit06UqKX51LS6HmGvLu0NZlFgvKM/rxtw1xkg1dWR4/VnLWmSiXX\nJaXfLq0phsYQPR83uyLTn9jQRns5MqE10OoPhr6KfboSBy3Uoheoy7UCjB5f\nUvz3aLNBdvZzp/0X0RXpQweYMP3eZ/RK6QfX4ztCYCTE6gcMiS4gVahGVgWc\n7gqqxKT67jbVHcvqr20NcMfCm6BZ0NyqSubTNHpbOApWjiPfBkZcskueuO88\n2/K+ecSuOrnIavolEClmAUC2FQsUttICwS+lhii3nG9sX/xeh/XtYo/xUVIT\nxYMPqofkppBf05kRf0tE03RQCeUkjr0d7q7ldUDceU3ZRgx7KPWeb8eXOkfy\naezT\r\n=e/3F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3dd17eaeb796b36aeda593de120f16c60ff06a0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.117599a8b.0","@material/base":"13.0.0-canary.117599a8b.0","@material/theme":"13.0.0-canary.117599a8b.0","@material/ripple":"13.0.0-canary.117599a8b.0","@material/typography":"13.0.0-canary.117599a8b.0","@material/feature-targeting":"13.0.0-canary.117599a8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.117599a8b.0_1630654299833_0.7167556662304764","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/form-field","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7f7c7ec280a1bdc74cd373897a0e248b6d42cf8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.e4180d07b.0.tgz","fileCount":33,"integrity":"sha512-9OCN0+HG1Om72P6XCPBITz5VERD3RqckoWmQVMUtBQxbgcIqWf094hwlBrzhbRjyJC7GEPuaVRl5ECUBx+XvSA==","signatures":[{"sig":"MEUCIQCuQnwnm/ooE9GdrFOvPIFlLP8KeujZsYa/kZLiKxPPHgIgRsn2NMkQt7/7ARLTcJ1QXhUqr5Do43T6I6Hpid0rat4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc94CRA9TVsSAnZWagAAxK8P/0TmegMGB7bWlzzcUfuL\nQcQudrQkIfdX1+qKq55vqRgy14n5k39J2UtDsDKrcQT+s1mDKfEEWnFciz2F\nlwAUI3FrCT14Q/dM6QbjHOYnFKxAD41s+MBRd6Q3bX09y7ipZjEl2abEUJz7\nU4WSyXxba2859MgRgcodBniFatr/RYPp3aLc1EFIr03xVCpHjblOxNX+XDRe\n72qDbr3zhZ1riOAmXhZPeWLViw/S4JtD9TBtQ51nTpA9TyGFCCh8p4/enz1i\nSE/3eHAJflqky/umEFHeepOfpx0SVAByS3Z5rzhXNrAGCH0ZMKSgBixbRCbQ\nb+dvjewTiboLj46EfitBgSj7LPg/OvA5oHEHuBJrukEYCl5yQEtD+AjlYACp\nGW2BBLGYF8DylefmtHGp7pNYIGdxlHd1t9ePkphEkgRAaFbW0/11noyEQN6h\nuCZp8fWfp335uh593ZWN5bxpCj+7N+3CwBueRFIzPoCOWvmkK/niVIzg/u35\nxVxOokUbkjZ+UjP1FSbL6l6UYvZ0Lw7VO2zTtyPDIBGNNiqgs9c9XzFur7yN\njzqhmv7hOse539H4oT/s+Z38QkeKTfQn0GGLAQDvOhYkBjgTjL5m7eVsf5nA\nnF8i8yrfRf0B69OzKXfsV9JzHM8Tg/iaHL9dIoVKGKgZMgQEzPFCQOB8G4Fz\nL+CP\r\n=b3am\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3b94d02f75df256cd0543dbdf5062823ee527d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e4180d07b.0","@material/base":"13.0.0-canary.e4180d07b.0","@material/theme":"13.0.0-canary.e4180d07b.0","@material/ripple":"13.0.0-canary.e4180d07b.0","@material/typography":"13.0.0-canary.e4180d07b.0","@material/feature-targeting":"13.0.0-canary.e4180d07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.e4180d07b.0_1630654327808_0.2051726298273675","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/form-field","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.42d175efc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fbb9a261ec381bf7b74199045cb4fb1f4df72c79","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.42d175efc.0.tgz","fileCount":33,"integrity":"sha512-I+H4iY+rHOWQI1SfKNfGG4R+Yinh+IbI6Ben28XFvW2h7+LrtVmmRXzAppBgiOI6TAbD60gnn0ykcuJoxEsmQw==","signatures":[{"sig":"MEUCIF90lb5u30yIlED7pZZZj112uDxwiS8frMKeSLpUT1A3AiEA4IHQZKdrX44XfjBsS7z+2lxAZMygBBnAnlot3BIbAQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkKCCRA9TVsSAnZWagAATxQP/3EyChFJvkzEdI3smSW5\nf/ldcBHOYNm+0nd+ggC4eukcLS00D4ZBXsfHFXXeuMTZRc5nRc5565gIcXXh\nwmF0VsYAMN3KFigUExUmsd8t6vN1WUjHOWoMRWjQSVOkGL61TDtzVvSANdbI\ncaCH4+GffCKzwbV5NPk/k+kCMpffD4bf8MmmtBJIBowSCsFxDDlsFjWbzDN5\nST3Kos13WyEV599Fr2b8ZeqR+JO2yC+FD1CRWHrNgfn8mohpdPxABQxRwJOH\npJmG0zZIEv1dpwEwq8+MqZsTmW7sctHSRR5RxlQKdkUggUGcGy00tKqR19LM\nBGOy2uHgWde4mVGz7XYpPluP0uMaop7lbO+PHuNtXVfshnJcrm/cvHtg1L41\nMkckSu/SBJyKothN6p99LZ2m/1PiqVfy8bhplLWQL+it3rQ6sJUarQVcLko7\nj5VuQL/gXkdSRhtAAnPpxZ9tCVMg3v1bt3k0c0Ej6CaUCCxGNSTRCIGaFABC\nzSmM5SePGY+WH7WrzTFt4X2x2+73HVqqQCYToJGPfGDATEw01x2R/lnU8MRW\n14TvEVU92UPbcdeGpVfW8FbPafrBtkafwzvF78xux07A1qnoGgOW17LDLsOo\nyAiIPb5OMARvd7rOD5x3DiIeiPaJ6s4VIzmi16DzvVyZ9owyB1cWZ7GabvaH\nQSzW\r\n=mX24\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"64e749d9e76a60e5559d8b19e4b57da1f44ebf0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.42d175efc.0","@material/base":"13.0.0-canary.42d175efc.0","@material/theme":"13.0.0-canary.42d175efc.0","@material/ripple":"13.0.0-canary.42d175efc.0","@material/typography":"13.0.0-canary.42d175efc.0","@material/feature-targeting":"13.0.0-canary.42d175efc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.42d175efc.0_1630683778621_0.3689789528609617","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/form-field","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.72464476c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"569b1518e99df45b36579e4bdcf50e337e22e09d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.72464476c.0.tgz","fileCount":33,"integrity":"sha512-jXtHEkO9j1BfZR/fJRQxucs2YlCkOEeoYv2AhH431fTx9bRHPH+2NLQAtNJV+Bnwq1cGiwiAZTn6qJP7dYyOWA==","signatures":[{"sig":"MEQCID4NKYbjBtlnPoyxN6/oEeSr5RF1A4lx2eNuxNqg+XkqAiAPleq+ISDG0VxX6UM3JXovNQNrOYQAWWqToXejU1ajGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4Z8CRA9TVsSAnZWagAAx/EP/1HHVZ8Sk6QeoiCzHqpU\n8azHtaf4Lao9spj21kCofLyLsqtv/HmLmFvgZoX0kY/1CMtbKv8XZDuSsVJg\nAAG473S/sM5X3yUop2uXF054fZUb1ErRJNU4Ot3aqxDCNXxtEGHvdwDqJyi+\nlXhv8OxkRoCehu/fJW47wH0sVPLnNVznNclpE2zjSI3wwKIi7E1s1cL9zr9F\nsJnJ/2A0Tx7hvdCOTbvJonChNJblw18ZL2TUHnJz8Xf/NsjCZOnG/pEFZA5U\nWCqJ9ZstDBo3fHgigAdcfAXr40MgK5un8OQJuB7LymUmZ3FORyyoAzwLKKTo\nqhS3Z+GxU6FboK3dV4v1x6XI4IyF344f070wTZ5fvmEDr8Ql+UgS/uRlPY6k\nwFX49sOjduAjylIS6VXf3bmDeu43rdepHZfwA3QlBttysCqBjCoFPCnfRaAM\nqVXNVSR4GvSPnYHy+e4bJHSAnP45XO0QK1yopMAvno+Z1Mag+Ap7QkYbRbhn\ni8FX+qOGtPZSXPWm22ErM/S6eB9jduSHhuDWR5aMx8TS/QDJ2+X+KJeibYw0\niOR/T2ekDBdSnQAS5v1URFONTV3zoEffc8A7dVU58MMwfzglqw9PA6e8KGXQ\n+iLY0LE+Y1pMe4232Gbmmyhb/mpn9Fd+94V1qzLOxkcSHZEX5+0gBNQaw8tl\nPSnv\r\n=XpcK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4c409a18f3ef0a7ee6f9b223a514471c0515b639","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.72464476c.0","@material/base":"13.0.0-canary.72464476c.0","@material/theme":"13.0.0-canary.72464476c.0","@material/ripple":"13.0.0-canary.72464476c.0","@material/typography":"13.0.0-canary.72464476c.0","@material/feature-targeting":"13.0.0-canary.72464476c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.72464476c.0_1631028859826_0.11172279245800332","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/form-field","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.37d4db866.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"694265214742ca2c647f75209bc6e8cfd63cf6b5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.37d4db866.0.tgz","fileCount":33,"integrity":"sha512-43hI6wIO8cIl4XBvjGTUrEqWVh+WUEm+WJysn0VI341dWTl5C7JnrXjv1feYbmk6QnAgYAHtF+L3wMjrZAoPbQ==","signatures":[{"sig":"MEUCIQDbDc38QXfFiVi7YLLmX9m8NUWNkyZJsQBXeYhnHzdQ5QIgE7RyaPGv9859zMkZsCxl3GlfQyYuwRBHlwLgNEayALE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhs/CRA9TVsSAnZWagAAx6AP/35Ue0xe3RlESWFrhcFV\nh9fW11kTwby9CU/Px6S6b7+u8M8FYT+4xK2OtXjp3LV3bkUZO6QUd0kpQMmX\nyCeGY94PTnMh46PQNk2XJ/EG5fpqhVCyok2BH4Gdw5zzuYzGpqjrGNpd9Qul\nYfIOSsITLEcNFxPC04+dmW5AglcNAND6wLwHnM46m/aUUmKuTdMzuAYYjg+1\nuOQAlucnNrJVGCM0vLK5DQD0fbvb1YJjOVbk6jY9L1OKEk/pkXFoC54ywblk\nMnfaNhaNk5UyXLFQCNkxdMBTfIxIRtrE2QI1GGCC62m8Ksy+Uhyt3myipX+x\n1b0izBZ1Od+o5VkDOjno1Bjar4UqYojZ4ozRaG6uNvX7R0e88MHq/gzAYJit\no8mtVxQ/uFxUUshr4i+ppJuDfslC+DAn5mq1eSaoSRpq8HkxZGQ3hbHefqJE\nPASAd6TNN6X6RnHqyMS2pN7YZLIzeNYGyQ5bb1OqdVVGzIo3IfBMFpl8rEnL\nfJ/HGUM/+rITpXgR12VcBdNvQwCcPJYgugvkHVbdQrPnMIgVjNfB/Gv9RTWV\n0DnSX5S+9A4bIe/UkcNXPAWIYlH1O/2Nmlyqpj6h+LtNrh1ccBMLZNu8jHaX\n1ZKwVHR03ZmywpStec/jGcPfEBtXikC/yhr3FDxtS+OEBwlf0J+McwW9qwXF\nhjUU\r\n=k4ib\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"25270b452713f831fa1adf302fa3f2c357ba759a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.37d4db866.0","@material/base":"13.0.0-canary.37d4db866.0","@material/theme":"13.0.0-canary.37d4db866.0","@material/ripple":"13.0.0-canary.37d4db866.0","@material/typography":"13.0.0-canary.37d4db866.0","@material/feature-targeting":"13.0.0-canary.37d4db866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.37d4db866.0_1631198015337_0.7301189421983021","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/form-field","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.6df682e74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b76474bd9fbbd75e884c81cb511a847bbbb1cfa7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.6df682e74.0.tgz","fileCount":33,"integrity":"sha512-mYHXpgkxXcyDUopNdhV1PF6K+v61P0NXU9JdwexxbQgZrPFSRPa57gJA6di5rOFV0hMW/GToXxdmZmvhwZeS+Q==","signatures":[{"sig":"MEUCIGt7niMcw/ESKslfUOr1fuNS6QEX+6gujTVRSmCXipDfAiEAx1RmzTtc5BR+8vb2fMJZqop8WrTcuOhf7tfVkcVLa9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOiuWCRA9TVsSAnZWagAAoQsQAIQjGxMhx2sq/UUOcOCV\nkfBcjJW+ov1r+4ZSn/UQwjr9FhtpA+L+rnlDdF7cAan0wk6418YtyWkkQWug\nHBorRaYFScBJUFg3yYVbBx6KznxbMkI9HvWvZ7khVA07LcXH3gX4j6xRN9RH\nk7Xop/v+kCzpDp47pm4u3XCnCR1U2M9FIvh7p6tzL78bFc77LsGO2/GJ6qbd\nV5RO/4SNBK9UzwfejaTtGO8Hm9nionAsYoFCsej6XiokRf3RbecMwwscZ4/k\nt3h8DaQRcz+24/Uf+tsb5Fg44R7HVxwLkNWFNBYBwtjmG5mDP4vfmDVXqmZx\nn/NRTe+juZ3kFRCwxKxngJEpJxMfICSvHOhy2rnnuqfgNlYU2rWqd10TH3+0\nvbJq4qaoRlm7yDvTJLePk9d9rLluwXgPRc+XbQkaqOQZwrMzPojmie+HAm/a\nVLdee4yPZ7/ouynjCc3EEioegJ5kyXZqlmkEij1Qehnd/6l1N0fsh6bjqUtG\nYvYQYBMsxy9s27R24GJ1aQ3sUTp0EbzbPcSgAglXYp9tjzI8PCfT8xb7ZO2H\nGOxkvvyz4XCAKRoPYPFjNcyxMeSxdFN2AaGhLMd6ongSA0Ij4PxUqNgktOsf\nqZG2hw5K2caIwYjLQjoxLQUekrj/AgAsm/1e82EC+9deE5vF07mQokF2c6jA\ni4xH\r\n=tfyp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f8640926b088e6e6fd8688e2bf177fbb60e83f2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.6df682e74.0","@material/base":"13.0.0-canary.6df682e74.0","@material/theme":"13.0.0-canary.6df682e74.0","@material/ripple":"13.0.0-canary.6df682e74.0","@material/typography":"13.0.0-canary.6df682e74.0","@material/feature-targeting":"13.0.0-canary.6df682e74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.6df682e74.0_1631202198635_0.012883755720797252","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/form-field","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.b49359c35.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82891b0a47891f635d1ebc4831f35f70f261fc6a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.b49359c35.0.tgz","fileCount":33,"integrity":"sha512-k2YddSpU5T/1q15ZYl6JwxAcqq53/qqAoroFl6TjI94g6VINuW0TVCzl0ITsgKaKZpv+8R9YhU/g6BzhPC2XMA==","signatures":[{"sig":"MEYCIQCILid5mtW7ywIK+sKoirXSD3W29S1OtGoXv+4p0t7DJQIhAPFEC91H5sfChuHiX0Z9hwzibiFGvm0oBPiEz9WhR35j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkXoCRA9TVsSAnZWagAAEaEP/0HuuESbPrXDdMzcsE16\nOXx6ANvJL78whKNv26dQLst5fjwAwuELyVr63ZWiAdPUiXW1+0q+sflYFoIP\nrJqttrb4sVj9AutB7rzXHqfyKQmCL0OjDCYQWs3bRLz44/eIhUnah0PjRF0P\nHZlGnmIKgZ4jzVVjaRpZhcXIjwbeNQtuZwvhRO3LaUiIfi2K9qrI0Gj4fBRj\n6PQV+0wcafTJS0myKoVf035P6WYtuQ/EiK+fBEDOhic5b7jMB1cCkTlRVnO5\nvnCWeoCYhbJtH7kiZryqE8F0xJS5o7J6+hAdUu8r2PrvSpqEIoVkDG6jkhwH\nljKBSzZmZ+5TJyPO0ZBoewGy6dHdx25AhUYOJxD4Crgaknr7cDY7ltt69oQz\nPB4Qeux0FKv7PmAzEzv1afjBU90W+3RGXaXP6kVQaYHnI1RqzFQlh1j+cUpm\nT21LvgW5nFhybxwQeVi2Ywae12nvNbV1l2aysQH/6gKw3gGG8Hv81OY8uPSN\nBxEFACB9PPpVWz9czolJNb4VmWAELjo5tgdILPscYvFfoopgTp8635HlyB3/\nuII2b9585BSeqbfme9ILPjbzulW52BsOpdZCCDrTrpLDcLIwoN8K+9npg36i\nKU1f1XvDaajv3qJgnivN7usmwqTlXbVB9XkImIoMegUIWJeTdMB0lBgYuvsc\nngMl\r\n=jMMm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"817b18da85c93007b9b038927a1ae036f98f686e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.b49359c35.0","@material/base":"13.0.0-canary.b49359c35.0","@material/theme":"13.0.0-canary.b49359c35.0","@material/ripple":"13.0.0-canary.b49359c35.0","@material/typography":"13.0.0-canary.b49359c35.0","@material/feature-targeting":"13.0.0-canary.b49359c35.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.b49359c35.0_1631208936481_0.8330906589447991","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/form-field","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab4f9b44c68854c0194add58c04d9e347b99b903","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.470bd34e8.0.tgz","fileCount":33,"integrity":"sha512-hIV9lBCoupzvK7fKZyAcG/ZW++67BdQirDKv8IyYvOHZ67svt5i7lvXly2af7IPsw9DknSzt1LA6xXlmo5o50g==","signatures":[{"sig":"MEUCICtkaeNgjEPn5dL6yGcftwZ6dII1eCXD8CMwOsn87KgoAiEApoIjH8lsx3+MDIfQdojknKDZuTYoDb0uKx4kFfOuGEA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkv7CRA9TVsSAnZWagAAckYP/14Xm0fQUIOi/kpRPX5g\nJ2p4fOBO+vg6OI/zzq6esnqvj2RTSYq28ddHf16dNCd8qYa8qZSAZDtZ84GR\nb2Z0+PJr2vsd73ZCXf3/4isDRTurJ/hfXe1A1tnIbaISXP8aZ4DQoQOlmm66\nFlCQ1dTX1wK1GmoUxZWc3tnIijLSWpeV5clQivl2Wju8PJW9Xu6X8CYb/v2e\nG+0FI5xl0IYE6EkqJb93Fjzv2X0Uyof42jUd12BhyXadyCv8udC5BmtjQ2Fw\nzuhzZ/YYzrRH4ud9JHl9eQwiWncL/bGLgdpf8BBQuAqvys+D8MV8VoSMv+70\ngiS4oxm2SeA6iG1X2k02ficjaV8J09VCwVgA8TCn6D2eQ64fxYnnzvPkYYzf\novEopJLzLykjFXUqLRCAInOmbBYvmIXvul1PIqGxfpngGPocihIeiGKZ9f3q\nKJHcs+njoQlzVenu/IFfVYWl/daXaU4tnNFuWfSavHXqMuEBH94G99+T05TQ\nSnnhQd9DOmfpdmQIg/ScjAj72994StohkKzfIDNMtLNZd6NNOkMcHEz7uiQU\nG+gxKYerCK2OgSDIJHdt3L0WQK///qfwb7uxczTTiHq48YnGZR/NMIhoW5PY\nQxXopc8Glp11MjVyks3OuNJOt3mHfCUG3JE7NYAtElbIHLKAZ+5JZOWcFlpY\nyefm\r\n=iFU9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f249b00e3cc067fbfdf722d71dd85392d031ca0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.470bd34e8.0","@material/base":"13.0.0-canary.470bd34e8.0","@material/theme":"13.0.0-canary.470bd34e8.0","@material/ripple":"13.0.0-canary.470bd34e8.0","@material/typography":"13.0.0-canary.470bd34e8.0","@material/feature-targeting":"13.0.0-canary.470bd34e8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.470bd34e8.0_1631210491000_0.7300603824094827","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/form-field","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.d48a01771.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd024e46862568825b46d94eb38754202286945f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.d48a01771.0.tgz","fileCount":33,"integrity":"sha512-Y4s4A4PqEgbpXMB+ZSBFrFbatBvwcXdeEE64Ey26ZDdJDW0Cz8K3bt6myx0eqFruHs8wNh9/ByXmH4fWjPpm1A==","signatures":[{"sig":"MEUCIA+9XtK4nE2U5XjHotZywiz3xnHXEK3SAoyRnEx9e913AiEAkIRpnBeUZlqGb6XhgKUMfdhz5AP8SZ4XlXQQYMoPrZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk4VCRA9TVsSAnZWagAA8m0QAJ+qrTnR2v0sfiBzgJay\n0BPslRKxMrpBX5sRvIe/UEJxk5Hr8Ak5PlcluSIJF0lBFVVA5fSHpjuIb0Ck\nlRtdpEvRRIPmGKTOlHd5KB1DzHPzpV1NIMfv/EYjltwLG45svJ8iQaGiLi+T\n7n1Y3qEZ7JMTWpFMSSYitXvAOeg38NGBLAXYKGYc0hHlQrZEcn29SiZbFRC0\n1XBP7yze3GXGzJl0qtg6bk9DSKbG82ad8ZHpKJ+juPUT42LOOytk9Tl4Bcob\nWgfS7syDQkpwb2HoFU0mVXkPs3z1QFlAizFdNeSShnFgVupKkE+DY/K4UuSo\nNEKg85h8rlsdAfKvirpmLthkRsvsLrBYq8ejSd7HTrvZ38AWeik0vg9zb0/7\nzNj5UjvlZuYxfoV5JV4oiFMqfTfTUervy/PkrPtkR7sp3NR4W26dzP0yFKbo\nTu/w4fAePbfUT5qdoU8vGvMQVkVjbvQ+A8iUe9HacNG8rdA+gYOhaXF9eAjM\nhJzbM62atdkBMPWd7ylJC2VEwmqpMR6yh/EOEuYF9ublDqTjULZpIIwmPWyT\nu7FGbqStd26VUBwL94JODzsNZWXZqU3wf4yUt8MfIg1pfm4In4Ro9NYVhxLY\n0lgjV4L03/Qw3HfziMWrSXn9TDK6CoFmvtytwX6Wf1RT397Ijmj4nWZ16EPo\ncs5H\r\n=qNh1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6796441e86b583e99919b207640bd02efef6fdeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d48a01771.0","@material/base":"13.0.0-canary.d48a01771.0","@material/theme":"13.0.0-canary.d48a01771.0","@material/ripple":"13.0.0-canary.d48a01771.0","@material/typography":"13.0.0-canary.d48a01771.0","@material/feature-targeting":"13.0.0-canary.d48a01771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.d48a01771.0_1631211029222_0.6637589142125395","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/form-field","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.13db34b34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c945305691b9c4ef97c7b662cb1db600c56f324","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.13db34b34.0.tgz","fileCount":33,"integrity":"sha512-LDlH9EZRJzhaFcKLtOTHfwzrhFHtEcA40R2z4RvQlzJaP6xlBSesCqAXAUhW+5oz2UeX2FbA/OIdX6hxKPxISQ==","signatures":[{"sig":"MEQCIAwQ75r+N7Tv8Dv7r++LLxMkJ/rgwJhIJ1Q5hmrZPcpCAiB/gPyDRyRx51q6mEgImwPQADMPONuiCNpW+nTa8BR0tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlGZCRA9TVsSAnZWagAArJQP/iyMS9dBI6MRxkREtVDM\nhJ7GlELU/S8ifh9DHT8JrYY3e6fSoe/NYoetC4nkb7daQCQYxCUXPEJWN+Us\nCzRI5xaieeCzwEvdYxK0DLrgoRY1k+7lJc1PfAL1V2cMN1789UAALdZPpD/E\n2PJMdHs3IqRzptU1eTeACLl2l93im/LBKm6If9SF25sT+yAgIYqHKzU29cCC\nCnXTMUSgOJPDQyv+wEIfJrWxTQ4Taj2GqMSjHB4Snk1UpCkG4/9D/B28ijdi\nnFvVblqtlpeRzjLlyJBw7Q0ESQegtInEearNPKyBQjHvnABLVNZtpBuBVCry\nLAdsl9y469U8CIzM4yXF31sgV4pbH8OFzCnGgV02MNIF/821xeGzENpDWbxq\nI+LA1MV7S8cQ+JuGu8JvWt72x0Nfa7rIPu4+YATU341CT8/RCuP543hEwK80\nGoTGfqvYmOETmlxXunAzuZNrayMoAsAfpTcex2dEBDQHp0HCOQemVoyWsOgi\nH8xTkK43u2ZPaTFqsmm9Uv3MYCLs8fvAckHwUg/u9CJJ7zFaf4hCPyOeIuVC\nntFLeF/NUZ5DSycWsAK/Ky7G0nUVxXyHOaX5OCk1brcXiu1cVc39yuLxYB/h\nJTzV2mCddxC/s5u6DiJa37TweivhpQoglxhKOuy1JOeNu6lwqfv7rOy/Ajxo\n1D5T\r\n=fc52\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7883b32c9c6a3280e801925b874df667e1055809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.13db34b34.0","@material/base":"13.0.0-canary.13db34b34.0","@material/theme":"13.0.0-canary.13db34b34.0","@material/ripple":"13.0.0-canary.13db34b34.0","@material/typography":"13.0.0-canary.13db34b34.0","@material/feature-targeting":"13.0.0-canary.13db34b34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.13db34b34.0_1631211929296_0.91455236945106","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/form-field","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.864798678.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76e16cfe20cdde8825e9d7cac3f40ed943bffdc8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.864798678.0.tgz","fileCount":33,"integrity":"sha512-sDqCcMklJCY4+pZ7PpBCVQa0zT2dXTfMQm+DLqqSxm9/vh9TiBdpHJhXOJYNN4iUwBftbul29KRZa1N5fdJyfQ==","signatures":[{"sig":"MEYCIQCv2xvWyBJzEl5U7qQ+78NCX5WwjTzuLkAk93R8xo6lAgIhAPkjCF/Z0ndmPIK0d2/ZHCFYpkhKe+qNykXE7XHxXj5m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlRFCRA9TVsSAnZWagAAI+IP/j3qqtFc91FrUvtm40Q6\nLvx/NfREFeYGODN3w5bO1N6ik1DURAs1saZdvreaeBd8gU/nWbCx2y61LrmM\nKYM3W4BcAtNnMxvKK62KhgfjsM5rh8TOz4/v3SOKMJM+f5Jh2XWv319HdVYP\nQoTrhaYSRHKiFYOJc6tXHmIGC5up1njYkkNMlGb7lv0PPTHWzxO6ENZ2rvBn\nYgwqzyKfiLQe01zVOmHDEO/LTz2IhK/qSPQnAHHsEIY0oHQsS1kQxY40L3ho\n4Gw5FoyXnsDYBz+CkF+OLASCQvemQs9nkYczrL8iIggLpbjYC+dZ6mLegNwZ\nuZDf6h6H6CSX5VjRBmDtvV1ctYfvOzkQqjfLsTeHQrnt/uyLzywYuWmtnZzJ\nqiwVrNNkJCxbpq9/HKoRJ3Cb9PgYNmFx3GWZmB0BVuy1SONfFFQyNhYFHnrA\nMuexwbGKbEowDEZLxee2pjXO8a8NTBYxLfTMRSMDkXF2n2wQhnsqbK7PzbI9\nYtdRlkB2QwzGtHWUqSZ95JvAyttqRle1IrXrgEDJ2gpTgZ2LXrQ8kYl4L3DH\nFUkNdKnV03MFmG9tYg3O+NRSLVTuFAD/E4F/04RIgTUipZ8iqNXVW6eeg7kN\n0K3P+dEmUBHZKwEW304OJUHMJqY12h4V1S+6XgebaG25mqTpq5Z2tcf6jiBB\n8rGJ\r\n=oT19\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"08d2ae683a56b5e86f7a54eaf5a2090fd4288df1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.864798678.0","@material/base":"13.0.0-canary.864798678.0","@material/theme":"13.0.0-canary.864798678.0","@material/ripple":"13.0.0-canary.864798678.0","@material/typography":"13.0.0-canary.864798678.0","@material/feature-targeting":"13.0.0-canary.864798678.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.864798678.0_1631212613356_0.08390434851500661","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/form-field","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"615f201e3a62b4de6c83e6750cfed5a54d5e7c6f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.d04bda3fb.0.tgz","fileCount":33,"integrity":"sha512-e3LtUYPz0JdfYBF3mA6pZ2PacwceJW9n2WBUbDmTBBHmV/NafsBWMzokPMr/e6B7UqPEAd7Ori2s037zPisFnA==","signatures":[{"sig":"MEQCIFeq4DZxuF2Uzbclvt2Sz0PgC63wj7zVVawclL277PW4AiAS7ZwRt9CF5IMFavRtHdFWWk8QT39gPWaYRgmxYnDSuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":185596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3gECRA9TVsSAnZWagAAzx8QAJ66f9WkSFdBQircrU18\nMQ38vtnQ43zLOhYvNbmbczPHanoTDZbtc4QZOopupxKm5qnSO4Bi8/Rfmmrw\njC9VdcIIw5J8VKZRhngmRhHWNDz5gwBxVM8bjlnBO3r/iiyY3iIZTb0MIw40\nVRhC4W6P6/sITipn74bRf8DxIGKXhYCTXgI60pNx+nQFR7CLyM5UBAga8yzg\nUwyW/Fkkkr4BO0Di7BspjchKmrunmHwKpBlXx7aK5ctNeZx67655Bym9Jz2K\nfYPCOReKIxshB2zrHrQgg7oC/yhQIcDvUF6qKwpOB7S11REr6SgyVDvsumsS\nLA1wACay9/WqQzkMJ6vy08MjcscEP6xEmlniKB+kDkirxztaUxVtf8qo+0C/\nMSC5R3Ft4o4tTKDhU7cYCn4wuqIjRuFnov5pnOP2bAp0g5nqn15WhkpqX4H7\nBYNvthiuGnDmN7GeI3nCr1rdNqBB7mRdIRNPHd06mg4cowV356c3QZ7NDXPk\nD6B5p0JtjZqViZc+9AQhQ2wfnH38TXGTbauW3On5PTnjJufviuXhePoDThRH\nEVBc4hpGzVpxzwq8LNx/NzhmT5bveH91m4tFxIbTZ54wBGiPzr+A0CiLoUWA\nxYLmNEKSr8LcJnWTlpuQ6RlLZLqwRgCyANnljxMUzKR91aQTLo5skeqIRzeb\nnXzw\r\n=6MPD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7dcba6a47b77f0011a1f0e22b3540e2a70b285cd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d04bda3fb.0","@material/base":"13.0.0-canary.d04bda3fb.0","@material/theme":"13.0.0-canary.d04bda3fb.0","@material/ripple":"13.0.0-canary.d04bda3fb.0","@material/typography":"13.0.0-canary.d04bda3fb.0","@material/feature-targeting":"13.0.0-canary.d04bda3fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.d04bda3fb.0_1631287300698_0.057912200641793365","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/form-field","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c79ff76732fd3f1a2cd971c4df2e10cd9dec19e1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.5533f73d3.0.tgz","fileCount":33,"integrity":"sha512-Ctc0gb5L6q1A6lYVEtYA4ZaAq/IQLXeRZoUP4aCMWRywqIf5UkAa6d4aG3ig07C0hfjetoBF+gYoPtgdTJlHJQ==","signatures":[{"sig":"MEUCIH9OP/DrcWPwwxNIjQPp9OH2Bn++7/LVs3TYM+fxS9XnAiEAqPFyElJRRPty+W17It8V9YjJAH4gHAZdzXFtumw8ALs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9jRCRA9TVsSAnZWagAAg8cP/R00XcRiHqspOSk+S9Ih\nVkXX/7zEwE8O0W1bA619kW4rq8RoCbrKstDtQNfDfd+eW3pqvjauANiGoMy1\nBOzz2crjYzm7yNYPKJ6gzcd8s7KUKkiawSBNZZ0tJ9UKoXnGFNlmWptYdZM2\nA5UmuVJrjTFf3FFCR4RYj0h9qqdvL/iyl8e9YW6+513+DmJWZMLwsuLos1Aa\n4VeC3uEZfItwObb8dbD3SAX39GplNJLdIGOCYSMIWjlpN+eyboMfjvZLtQro\ngHTA1cqwxN8VxYSXqmM1uMztvvr0f1DjLUhyTWiVw1PpdS9AoOS5gRixFtOx\nZlUfQlrLYfwEK3LQejUFYUJa9w7a6kuJd+mSms/ZCj3DvqvYkixvtUH+fM21\nefS1ynpUOOoRi7vRxQeV/X1a2V8BiQm6/bMyWgBPzlgW0s9y35pTY/cN/1nJ\n/wXHg/nAneerrmQb9X5yZAoqao3WXwsnPDrzxui7/HQtwXZp7MX9Y5v4Vt0n\nvJDwg8eOy+ADKtGiWdGrNhGEAFx1vsCNidiGcgykYdWJQGVfchxxlO75bm7e\nsgO7l23xvqDMz+TQhHJuG/qT9E3olIliqz93ixHPtlxoInz3lqUlAtIy2Wc0\neJNwQtG5RvOfg0W+nJv3reLWCFuXF0e5A+IqIzYQF4fgIUj29crPKI+mEdKP\nYoHe\r\n=78zJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"20bf1d151f241eb77dfa3233eb61f4e35d5b2838","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.5533f73d3.0","@material/base":"13.0.0-canary.5533f73d3.0","@material/theme":"13.0.0-canary.5533f73d3.0","@material/ripple":"13.0.0-canary.5533f73d3.0","@material/typography":"13.0.0-canary.5533f73d3.0","@material/feature-targeting":"13.0.0-canary.5533f73d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.5533f73d3.0_1631574224939_0.535204934589427","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/form-field","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.08398f880.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31b313a0437fd9bc6d1475f6d7395e9ad4db1299","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.08398f880.0.tgz","fileCount":33,"integrity":"sha512-J35oTrESvyP/uuXbeyPtjdszT5Kr97xZ/Vji6QGBMRzNIMpzQvDfzB26KmfZ+Dr7W2Bh6zJ3koC+dapsy2wEGw==","signatures":[{"sig":"MEQCIAw0Up65tmj1BkqQc+5cn1VVbcALKc+4Y9iDUAHe9m0bAiBZGtcLb3FEERYxfn6GPKVRoNobavCTcH+15M2WNXtxtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP+ACCRA9TVsSAnZWagAAYBUP+wZdc9kW8/VQ9T838Hkz\npLuur7DZC3JjPqD0jNsJknZStY7MJGrm2RjYLmGU4rDHBsooRo6xo9oKs+1Z\nzgsMx+tlilDw9jdudWIdfPk4dsQ5NlcdoO+RqwHL3/kBSztJBK9K5qp1UrDi\nnxKh4mwIg1c776iqeLlOU9DzG3hDLZC+/mZwCwn6wCpPHv4EFtpciyvNLK83\njE4UjgEjlJxk+EurL7AEZpxuM1VGddlsxxwCU/eqrc0lm95C9kbxqV0ntJ/H\n9BYA6qZEwSUUGg0nOWTfkEqHFsNY+/3roa4ytPTH/FuQU5l6nVk21C9tvWAt\nqtqXlguCwhzOIlNkHjGbNOL7OPw9MWeXWx6Y8/ZeLYt/C/k/lNo7Pfm1HMDX\n2Mv0Ig4H4foxtcYiDzmlmScNc8HJKFGYKtb0ZKWtxm20ISiqX93d+H1Btbqe\nSetQ35CMl2KXx6YRgAfH8fTUVcG71oAJPYmjguv1Ff3tMmOmiGzseaGwYWfC\nO3T9m0E6ouZAEuYJ7G4TkAU43x1Vl8zVDewOCvdmqznJjtOBTxtix2m8qFYK\nInwv/3DqP5oK1o+D1WNzzhWKKdprXZFy+RlD2xV9i5OSxRGhRF63DiAcFchZ\ngTzJa/CVw0va8l8QDMMCn9/eqCJWu+KS/4RhgY63HeLLaKPG8X7/ytOw4CQ5\nrgI4\r\n=nFpF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1a993a7d6bd4a018cc4ae230bf1cc3fecfc16d1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.08398f880.0","@material/base":"13.0.0-canary.08398f880.0","@material/theme":"13.0.0-canary.08398f880.0","@material/ripple":"13.0.0-canary.08398f880.0","@material/typography":"13.0.0-canary.08398f880.0","@material/feature-targeting":"13.0.0-canary.08398f880.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.08398f880.0_1631576066739_0.046945147194834114","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/form-field","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb036811ee8ef06463c5c102a36d4fd0cb8c5c1b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.818f4ee93.0.tgz","fileCount":33,"integrity":"sha512-mbeJ5eHnchxf2pR0bRIxLLBNyHFUTIiNoB4WhuqbUU/PSxGsqP36Ve5gWdInIqC2Qi6yRyZB0LWri4mks8iHkg==","signatures":[{"sig":"MEUCIQCmzERZg2VLWx/WmGfqhLsoGGbLN5+b51GQgbMwlaovtgIgdXIUJIKg5d3NAKkuNqtB//mgSMNSdlv69DTsr9jks/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjJfCRA9TVsSAnZWagAAud4P/1LYmjPQlxKHOeKBS9jn\nKc3tcWWb8mz31+qBvtHzpkoIWOxxmknJzjoB2M7zd1dVqn5sjUOMD5EM23Ez\nIHMoiRbumTNQMB8dBS4i/KXX5yT5BcOtn78qVsL/LrdywoyiBRITJERWL6p5\nnT1bqnn4QbvgOP4KFtQVhgaPZaiNg3ETcp5IPBLmfxFZvB75wF84LdDLLhN/\nQVPVjDDmbZMmkDjr4DEl7gNSnUvyjZzv0xOSTHf2PC8yWefPVGqbyzor/XaK\nDiJZgRJj+g0A01ixybwY3hgeHpnL1iSOMurx1w/+ZzmxrbgAi7RHvPQC9tvG\n5FqiTFE2lxoCpS2OoJ0D3tc2Xbw/x0vLLngAFJUMpjkgh2VvsniNLkm/UrhF\nK2zDxdT2xPeVmqCG1McOqo6zOdJH0GNW3L54uzucmd7tVglg+qiVAkvSIs9a\nazWgJYnih6utT+bYukT2II+7dluEHaPtFrmujuvMANGij4fcmpb9U166ri4Q\nAj1L7terG+qsQ/fYna3dx0qdMU0jLvmN9eTj5gzD2eiMvlQedTAnS44aiNG+\nC8SzA5BR7r/Z39Ge92bVerTKb+XRBfYn1LS1o6wRSnfj8mOqrOb6WeC2mqO6\nttfav2dKgAoCAUF0Qtx1oyr3x14BNXurpq6dSIC+v3RWNhhwp8fGRRAhLCri\nFJkx\r\n=Usnu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1d88a726d331a878c9a8721e3237e8cf6df49f1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.818f4ee93.0","@material/base":"13.0.0-canary.818f4ee93.0","@material/theme":"13.0.0-canary.818f4ee93.0","@material/ripple":"13.0.0-canary.818f4ee93.0","@material/typography":"13.0.0-canary.818f4ee93.0","@material/feature-targeting":"13.0.0-canary.818f4ee93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.818f4ee93.0_1631728222810_0.49868054738768275","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/form-field","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a223952bb1a912547600051cac449ffbb95e9a3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.8355e14dc.0.tgz","fileCount":33,"integrity":"sha512-nHro5R/6UIQFwHozo0KrGgoONK3MVZ81asC+QOa7+098cZPGMz2YHIHTEoVo6zPmi81z9Eupk5PNqijESsBKFA==","signatures":[{"sig":"MEYCIQCvyA9YGpBeIxZtZVD9aOIdn967rE3mTViYixsGRgYA3QIhAO9b4hvq4NTAvS+lMaYy6TjpSLLKu0vcGhQwCTlScmVP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkWXCRA9TVsSAnZWagAAuTQP/2dUfLgijOStLjmozDjh\n47BhA8cq1pUF1/fCN5e7cVk9v4EqXY6p5aHg189D3BV+Q/zaWY0VYxYLeled\nIAc1jIqyH6pvvL4ojSDfBgvn+ZX9qnFibqP4FpRJqq6WCYemUP6ATlJGjzg0\nBPLKBLLaKYuG9V8WTdP09S+T4hK7sTiIyMvacBfVz6az9T7spwIR6JWqv67G\np9ZXBeLAB2scHPW6/upOBma1SmX3r14WyjCKzBIXLc9ylOpBTdpbdyd3cN0B\nJrWTvtiG+2G5PCPeN0eYZzoq4qKlNWCdbDeOd3P0n9N5IMGUJqfLWAG/9x6S\nX7/9RBLwmsPA6tUhDkJTWxb1Z5ufhv/7gF08ou1l4tnJj3EQzr6Fb/KxLN4x\njZFyaoDHpsQZGWsImDGu89aRd3yIQ88rGOlnMCcBs5nJ/krjyUoQ9aSZQD6L\nqVpR36yfF7YAGSUmv+/XbyyN6ZCBK8YMzcN6TRgvYgOkWAEIR0+C6TKAUCHf\n85h76/tSR9QyV8aTOyDuOieY3mQa/f248dmOT8IkVJjlGwydY5QUbMSdQy9e\neweD2oIcVH/PYY08KfvBWCUJreeTm0B/cS6oRWERNVeIvcqzBbREej0WkCBX\nYO73Cfdu9d2c3arjCHAqrcK+cLmyXjTVwo5CvY2uQG+5lxIvUvmnqd3SPdgP\nkJOr\r\n=rnAa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"065f64e5cbd54d86f092d8d1406bbd0852b2a6a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.8355e14dc.0","@material/base":"13.0.0-canary.8355e14dc.0","@material/theme":"13.0.0-canary.8355e14dc.0","@material/ripple":"13.0.0-canary.8355e14dc.0","@material/typography":"13.0.0-canary.8355e14dc.0","@material/feature-targeting":"13.0.0-canary.8355e14dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.8355e14dc.0_1631733143065_0.7831598313734185","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/form-field","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29a60bbeeae9bf40e13d8afca2b39db04098e928","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":33,"integrity":"sha512-JWhtB/qs2zZ4qOpzNdQKILl9Ja4e7z9FwPLQWcBskkeGxJ1WUIHIeP/8vEk8Es0Wf4+bPkWN/OFpS32oRLsBrA==","signatures":[{"sig":"MEUCIQCad4K1hZzmKivK4I9xokdKAlAy74DaIK7PGiFpQw764gIgaIL1w8qfuTdhqYI+hMBNwRtZ9JBAJSeT92PwPGPSLig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmysCRA9TVsSAnZWagAA6aMQAIB0/wMPtaxcSd+gzR2E\nB6yy+HnMW5maHY5Fj1l1wDk9uIyAHQr3xjjfEtDDbDGhtR4OoNiFGgJg7VvK\nkehaosgzlz2jT4fmDY40a1Imm/eSTT2Xm7mPFi2AP6OqIe2PKJqwtyv1Pz84\nvzcBKYlrH/efCctIZqDh0ODZgkjqb9pXcRgKR6KtE8F+XmiA/2fIKb6t60Pa\njaZ2pNHpeO2k8vdKXXzZ+4mA7PHS6162XvQxoPTaPkuHkzWOrS2Pkl7ugIpy\nG0zgdgnwIhT0JlAtjqgT3tdhDrFNZ5nNwKGvYfvoP90vR2yLdRVtJ50UfVs9\n5cXHWDJ0mZJz1p22E8D3aQm5UBPnSQVEqOIoPGhipMjQ+5kGf2/HEWECifdV\nKDjvyqAYPtoGpgVonjPOhb8ldi3ShoPboZd295i6fPkDg0UsXo0AcBr8uGuT\nImK67w/GH2IRn4KiDSLHDyJeT6x+s1yru6rueeTEdBdGWcAw5F0FNsvMcuTz\nKOPzseB5Sf7R5F9QuN5itf4hkIxG8zSUdjKfOOARpkjnizR3AhmmaeL6PA77\nX848qqXKNJ+5QS8RypIDUZvEJNX+AxsovIZxACRuDmC/ayKU3rlw7z6+LvPi\nDcL3ZEBWk/GMC42ynqctfW5ztQZB8rGD8pPUx9k1VwM/nWU3kF567kmCToke\nlucS\r\n=oiMe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2c2d0c3f7c18e3a2b581679df71df5e7a0e2fcb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.d4e16a6c4.0","@material/base":"13.0.0-canary.d4e16a6c4.0","@material/theme":"13.0.0-canary.d4e16a6c4.0","@material/ripple":"13.0.0-canary.d4e16a6c4.0","@material/typography":"13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"13.0.0-canary.d4e16a6c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.d4e16a6c4.0_1631743147939_0.34459628033379097","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/form-field","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7011375390ec9467477c45f4ed74b54d74888b7c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.65125b3a6.0.tgz","fileCount":33,"integrity":"sha512-Y41jeBsQqploivo81ubcI3jJFx5C+r58JT6KMt5c2IqUluW/4ABMd8txgO7J93M4scdILY4FwaChDKf8UGq90A==","signatures":[{"sig":"MEYCIQD4MIAm2wRh4JsU+6LEEyCyjZ3tmBoZCOwF9ZtHzlQ9JgIhAN4+OcdNxRtebhkNAP7U0Q+uvR7+nBckCzq0mVagLDyu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7RmCRA9TVsSAnZWagAA6IkP/RYBaCi8a+VPvXaVkm7m\nUfhwDbvAInZ4lFO7RppCFkl0qVSRbPkJTLkXwcB7BPVT45Vi7OsncGJBfNwE\nsRW+akuFTeqYaC7JMPBf81AEDbiX996fYFeWE369jU1FwUjOvJhi1NptRPx7\nNEjsC/1+3qNuOdvN+Wp9lq4NHJlAXWvFipmdVsIjp16/C/45pwTK81n+x8RE\nsmjDbF4bGPKG+O2NsIkfna5dOJ0D/Kf43aJtfsWsE5H3iz6ISzCMFvJZKMmU\nbqXh3eYSxwoS5YVd4R8+8S1vSNrIDOProOMhOWhaMcRy2Uy/bG6Xz1Y5PFmd\njpnq5iy3ZatktCrL1erUaw9H7kRiqA8r7cPeuysFIvURD41Z/XlJ11AtWpoL\nOXLeMUSEyvspNZXE5+tLKLKobne4o2+Xrwjk3S3Wgun90bxIHVmM/t1ahJXa\nK/KbTiG+DQ5x6/idQhTS6s8z01+DYG08I9bOtd4thMRYj3eTE9oCx4ogbQkA\neGKGDyQmXWwTGZUX1HXPVakp9Va0ujqmnWvcpw+oC+LxjBj220eWSx5r6by1\nMGBoO5dUyVIwdvkmR8mnmZU64/QO/CslKLr5QqevrKdp7gZu0cgO6dXt4Qcq\nhlrOJDgrIJxReQ9LXiJKofPZb3I48Z/FFm5yKAEj3cQ+luG6IwuqsgO2qfFh\nB+61\r\n=PLQI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7f141fcd82e6061ac62fb457dad40c0ad70e52d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.65125b3a6.0","@material/base":"13.0.0-canary.65125b3a6.0","@material/theme":"13.0.0-canary.65125b3a6.0","@material/ripple":"13.0.0-canary.65125b3a6.0","@material/typography":"13.0.0-canary.65125b3a6.0","@material/feature-targeting":"13.0.0-canary.65125b3a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.65125b3a6.0_1631827046504_0.19895241219698878","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/form-field","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.80a583365.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d14bf7d81f5ed9fe61647f10c8d95b03b708b01","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.80a583365.0.tgz","fileCount":33,"integrity":"sha512-Qlyj2bfgDg5kEQiN2FnSYoz7QasUdkt/kQt9hY1Cdaek0dz9n9diwGZl1VLayKUGJpk8uTY1T17lTbkGxpjZDw==","signatures":[{"sig":"MEYCIQCjGjupUkTtED9ILbMYgm++MDBZWInQ9AERU5rTQKpbCAIhAMvH1TBXqGjxuOKfWwoocAJMHptJo0hu2aejgTNoumva","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187991},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c174baf193216601da7fe07831dd2152585c6beb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.80a583365.0","@material/base":"13.0.0-canary.80a583365.0","@material/theme":"13.0.0-canary.80a583365.0","@material/ripple":"13.0.0-canary.80a583365.0","@material/typography":"13.0.0-canary.80a583365.0","@material/feature-targeting":"13.0.0-canary.80a583365.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.80a583365.0_1631910940780_0.5235228914532031","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/form-field","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.83900936a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b250f8e6cea46af2c79f06c3fa34752e2dc1c3a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.83900936a.0.tgz","fileCount":33,"integrity":"sha512-JB06OHZdi5Vqdia3k8U5nct1j+Dm9l0RRhl0OqSRzuIwvJKrsJZZKo1O+fRSkBubgCSrGtI073VLKccOKq8yTA==","signatures":[{"sig":"MEUCIF/z9CY2IVy6oH5mtUGpsbExeYQolxnzi22jr5IwEp8oAiEAySMAST7vEVdv3hc3+vgdfsKVflYpqKq3utkMSia9N7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187991},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ca6026fb6b378ac9a4f14997612369fe29f31093","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.83900936a.0","@material/base":"13.0.0-canary.83900936a.0","@material/theme":"13.0.0-canary.83900936a.0","@material/ripple":"13.0.0-canary.83900936a.0","@material/typography":"13.0.0-canary.83900936a.0","@material/feature-targeting":"13.0.0-canary.83900936a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.83900936a.0_1631921053572_0.6634927849450125","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/form-field","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67d08c95af85a1d90012f0759de4aa2133a026f4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.860ad06a1.0.tgz","fileCount":33,"integrity":"sha512-zovw47Ulks1BGg8XEkseXj+vnWF5XJO34PYgbTkGUpiHwPDz/ZIkfdZlejD5RFOkBDRKPo03h1+lAroczxeGCw==","signatures":[{"sig":"MEUCIG4pBKZpoxr72ToYhlrYTtxI9YKkiTIPfQ0mzdmTZvWWAiEA15mMHP9yL+EErsJ6r92HLBE45FTOrwUpiRCVH0NIECQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187991},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8f156ac018a526d53d5f5077762518483bfa7dc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.860ad06a1.0","@material/base":"13.0.0-canary.860ad06a1.0","@material/theme":"13.0.0-canary.860ad06a1.0","@material/ripple":"13.0.0-canary.860ad06a1.0","@material/typography":"13.0.0-canary.860ad06a1.0","@material/feature-targeting":"13.0.0-canary.860ad06a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.860ad06a1.0_1631921763717_0.9912891454586474","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/form-field","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19a8b3b5d5b8cb61d79381dae21f65714229025b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.3b8d4429e.0.tgz","fileCount":33,"integrity":"sha512-tOObVHYC9bLOwAcWod0P53Qom5Z1a0mjlAZa93op0CAAaL2f71BonyGxrPOIca/WzABUahG08+Gf79PucKDIRQ==","signatures":[{"sig":"MEQCIDG307b8/S6h6UfRttpQWsnrAO5ol/u1a+fcxEp5n6AlAiB9g8xdlTh7aBFHZ2rGPD8jJK97tU6s91XffYKqPKVVaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187991},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c548d2fdb2731631683bc92955d6701cd0c2bd14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.3b8d4429e.0","@material/base":"13.0.0-canary.3b8d4429e.0","@material/theme":"13.0.0-canary.3b8d4429e.0","@material/ripple":"13.0.0-canary.3b8d4429e.0","@material/typography":"13.0.0-canary.3b8d4429e.0","@material/feature-targeting":"13.0.0-canary.3b8d4429e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.3b8d4429e.0_1632160049738_0.035349945413619466","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/form-field","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5159be1dbcc20312486c02ececf7a10203393dde","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.2da3606b9.0.tgz","fileCount":33,"integrity":"sha512-QnPMPMH6acGZLF3+YfuodMLDonvH6gkQGJVlVBUEk1x3v8lhArPYQ6A1hU55xRLxUk/9oLmtStfRFWYsj/aL2w==","signatures":[{"sig":"MEQCIA/vf4Zc8F5HwveTROa5/9qumVDXwAPfhDmFy4EfKS8vAiBZUzjz2iZJf9n6xhe0ON2Kdr6grlijB7lupYsm4oLqdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188081},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c452408cf52d900869313ad573c1b84c9d6a3105","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.2da3606b9.0","@material/base":"13.0.0-canary.2da3606b9.0","@material/theme":"13.0.0-canary.2da3606b9.0","@material/ripple":"13.0.0-canary.2da3606b9.0","@material/typography":"13.0.0-canary.2da3606b9.0","@material/feature-targeting":"13.0.0-canary.2da3606b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.2da3606b9.0_1632166656482_0.4130787214803604","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/form-field","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa15cd53bb5a11df53dc1e316afd1d3a475d4354","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.e8c598d1e.0.tgz","fileCount":33,"integrity":"sha512-vKJcIszwGduCrI3r8ycPD/1yqLYS2p6eVRsQc6eWCO/xjHCyzAXBVjgfrRQyfOKp0PvDlkpSvlIZf90Od4Bj3Q==","signatures":[{"sig":"MEUCIQCcum4WK0jz0z4uw4btQ0o5jESoarFfsFNJADxlA9ZX8wIgb9VbOx6jJVa2tQYfIunVCtgPZK5VA4oIRcRF1t4Hgmw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188081},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"11ab5557b275cc7f950ff2123684083e6245eafe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.e8c598d1e.0","@material/base":"13.0.0-canary.e8c598d1e.0","@material/theme":"13.0.0-canary.e8c598d1e.0","@material/ripple":"13.0.0-canary.e8c598d1e.0","@material/typography":"13.0.0-canary.e8c598d1e.0","@material/feature-targeting":"13.0.0-canary.e8c598d1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.e8c598d1e.0_1632172308820_0.0551165482994882","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/form-field","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"870c168ce7627ef24368bf9af9a3e2fe4c6d7983","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.1340ee9f7.0.tgz","fileCount":33,"integrity":"sha512-oQkV+YPHalFjhDJXmbdV6zBf0Oyh9ZDqv6uqfvCwKA/eefp3f2ybGjBAa1i1hb4k02IjufXKtCVQRvO187OCLw==","signatures":[{"sig":"MEUCIQDCG4hAtRplC5Tx1CDpiz1F/pmA0h4wLDVtQIlg0FPJ8AIgB/hVsNQedsF4l9lzokMjQi5lXaMPx1jg9fy924Puk2Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188081},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c9cbdc93fd9954f12cb74ebaf2cfa5806d078879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.1340ee9f7.0","@material/base":"13.0.0-canary.1340ee9f7.0","@material/theme":"13.0.0-canary.1340ee9f7.0","@material/ripple":"13.0.0-canary.1340ee9f7.0","@material/typography":"13.0.0-canary.1340ee9f7.0","@material/feature-targeting":"13.0.0-canary.1340ee9f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.1340ee9f7.0_1632333479097_0.24219887934937367","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/form-field","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.65084baff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c900db198a4155a5731fc002224ebfd2fe4f518e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.65084baff.0.tgz","fileCount":33,"integrity":"sha512-VdNzx5p8oUNYDHT2wkT3NG8uEf1sUSYo/EXaAvKtrE5+LQ0A48iMRCWLUkZnjbF10/hR/Jv17fHeLiuKp/4u2A==","signatures":[{"sig":"MEYCIQCRsKxU6Ie0IXVNmdPvW0t8qSS7dafRm1bR2pmFAjslCQIhAKR/4KjbLy+TuoASqyq1FwYZ9/a2jI0fGYkMiPq7AhKy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188081},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"afe4cce0d8c7e5038058ea8198ffd72e99e1c941","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.65084baff.0","@material/base":"13.0.0-canary.65084baff.0","@material/theme":"13.0.0-canary.65084baff.0","@material/ripple":"13.0.0-canary.65084baff.0","@material/typography":"13.0.0-canary.65084baff.0","@material/feature-targeting":"13.0.0-canary.65084baff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.65084baff.0_1632432332341_0.34603615807936405","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/form-field","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5610bc08b68723fbeb470bb944e73bdf370fdb6d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":33,"integrity":"sha512-hTOpeKjPHSOhay1Hdi6p5QjrIoKlS91c3kQal57aJ9/+2YmMy8Gdm/Y7zExGlXKM5rp9zVmexUby/jP+8z8TPQ==","signatures":[{"sig":"MEUCIQC9ZHHaOVgHHgFvLP9oLw/K/Erk4zfstOYA/ODTBL6xeQIgHKKvDWTa/AhGuzVFtWo2qnynCLza6FLSknR7imNb4m4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188081},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2caa02d38f883966fd5f78948743dabdced9b689","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"13.0.0-canary.c79aa0cdd.0","@material/base":"13.0.0-canary.c79aa0cdd.0","@material/theme":"13.0.0-canary.c79aa0cdd.0","@material/ripple":"13.0.0-canary.c79aa0cdd.0","@material/typography":"13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"13.0.0-canary.c79aa0cdd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0-canary.c79aa0cdd.0_1632490918577_0.7581723880550071","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/form-field","version":"13.0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@13.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59f50b342bc20562fa2c78c17ac4385236f89c99","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-13.0.0.tgz","fileCount":32,"integrity":"sha512-cXs5uYA89KgrXrU1UYkl52JizeIK3Mx9LjBw4ZYiyQJzFaBTPYsYWGSJMad1HZhWlRiigGTyN1M9ePIxtBpi0Q==","signatures":[{"sig":"MEUCIQDcpuuDXFTMRa3k6jcm8bXTvvM6z3VKyMl3I0obRVYJLwIgVlmyMFdNwx1JDMbkJhbhImW1COqXdt/uxOmHnBSs1qs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187573},"main":"dist/mdc.formField.js","module":"index.js","gitHead":"198431fcd8ff3028934d2cf3a5b292f8482a4570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"^13.0.0","@material/base":"^13.0.0","@material/theme":"^13.0.0","@material/ripple":"^13.0.0","@material/typography":"^13.0.0","@material/feature-targeting":"^13.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_13.0.0_1632512745757_0.5590860092768324","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/form-field","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.198431fcd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e78f996568939ee3fff6eb396bbf135a8cc35ff","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.198431fcd.0.tgz","fileCount":33,"integrity":"sha512-rDHcgA2kAPR/ojERhV3vDUkMm9rC53shz4+h3xZ3IHQ5gW7fnLbghATOXOo0qJgN2sIPewq2ZL2NkHVskfMtbA==","signatures":[{"sig":"MEUCIQCXeuf9k/bp7We2R1XCKB6eHxHZ7Y0y3rTtAJGbv0utUQIgaY5t65RLxdPyuiyJ+7puKuoCnGeUdVWEzKojCzI8Te0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188081},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"34242e3354729334618dc12d6bc959e0a8f14dd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.198431fcd.0","@material/base":"14.0.0-canary.198431fcd.0","@material/theme":"14.0.0-canary.198431fcd.0","@material/ripple":"14.0.0-canary.198431fcd.0","@material/typography":"14.0.0-canary.198431fcd.0","@material/feature-targeting":"14.0.0-canary.198431fcd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.198431fcd.0_1632512790339_0.054909540025240844","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/form-field","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37d226228312930020b648ba5d39d26a429fe187","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":33,"integrity":"sha512-bXLTuOs2NzqveDDqH9rpes0fkVwqTazbJL7IfjeJhlCshv74a644w6lYmt8weFy1smbxZssR4wa3mOBx44aSZg==","signatures":[{"sig":"MEUCIQCsUDiZ0Pmot32g4skroo3NcrahZaShi289igDOzFtNSAIgUt81KwkNkZ/A3nj4BmOdCeH7XRGmCz/SsKwrNrspWfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188081},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"13e91b1150d6339b15d71c44c8743eb9e2026eaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9a02b6ef8.0","@material/base":"14.0.0-canary.9a02b6ef8.0","@material/theme":"14.0.0-canary.9a02b6ef8.0","@material/ripple":"14.0.0-canary.9a02b6ef8.0","@material/typography":"14.0.0-canary.9a02b6ef8.0","@material/feature-targeting":"14.0.0-canary.9a02b6ef8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.9a02b6ef8.0_1632575465149_0.7046614819899284","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/form-field","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f0415be09eaa6c83bf00a7a69f7c33c369b61bc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.758ce31d9.0.tgz","fileCount":33,"integrity":"sha512-5fBKjEZdaaWtJd9oX85KaDjrbtQ43JFtXQv8uXiZtQMVJytrfCT+6dT3lWeRGm11k5jM0l+JKXUrflKoGykg8w==","signatures":[{"sig":"MEQCIFbNSNhIH691YzTbUFnWov1/dj7Nu/gP2hjkrnd4tVC1AiAh0DoEaYI4naiFhiGNtP4OFp6pGTRzrX91pcaG/XY49g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188081},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"09083795b738aece76a37f8a1dcc8daf958204b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.758ce31d9.0","@material/base":"14.0.0-canary.758ce31d9.0","@material/theme":"14.0.0-canary.758ce31d9.0","@material/ripple":"14.0.0-canary.758ce31d9.0","@material/typography":"14.0.0-canary.758ce31d9.0","@material/feature-targeting":"14.0.0-canary.758ce31d9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.758ce31d9.0_1632763758643_0.6449499427024024","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/form-field","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de6feceb83fd39400703464d66617f0cb992bf45","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.86b50ef74.0.tgz","fileCount":33,"integrity":"sha512-JqIxiGRPL9GV8OjUVay36Zj6GFzCWfxhRM1gmREm3gWwjaWQb/v+ppscticVlLKl09B0HVqowj5sg3ejASscpg==","signatures":[{"sig":"MEQCIE+N+APkzHSQDWW0/vx1TFiOBCRABJfqZors1kcpCcXxAiA2ao/Tw9VNN+TPjtkO50SctoTn5b2fKm1XU39nYznADg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188081},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5941ece7c1e494e720865be940d098a5556de149","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.86b50ef74.0","@material/base":"14.0.0-canary.86b50ef74.0","@material/theme":"14.0.0-canary.86b50ef74.0","@material/ripple":"14.0.0-canary.86b50ef74.0","@material/typography":"14.0.0-canary.86b50ef74.0","@material/feature-targeting":"14.0.0-canary.86b50ef74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.86b50ef74.0_1632850986865_0.5863505420732587","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/form-field","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0e9aced20b660521c362fad23c8ce5edc9e65df","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.b2fe3528b.0.tgz","fileCount":33,"integrity":"sha512-d5n/RM2tPQgYf2Y5xwprIbYoaprKZhA8+OdlaiE+IJ9hD7aP8j4qOe2I7Y6giAEd35FzZ+ei2KF5UZyrYeJbfQ==","signatures":[{"sig":"MEUCIFqTxtmB1Qpm38/ej+qzPQoOdb+KNqRYdQtgjP6RCkAoAiEA5NDVkDDMlPWbrRXxC3oKbKh9wB89uyMFr1zEeSLX2Ak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188081},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cce11b1c181ea84c0bfdbef26112377518afa98b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b2fe3528b.0","@material/base":"14.0.0-canary.b2fe3528b.0","@material/theme":"14.0.0-canary.b2fe3528b.0","@material/ripple":"14.0.0-canary.b2fe3528b.0","@material/typography":"14.0.0-canary.b2fe3528b.0","@material/feature-targeting":"14.0.0-canary.b2fe3528b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.b2fe3528b.0_1632956209177_0.5934761304158012","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/form-field","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.586e740dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28225d9a64c8e10e1109f432614168e9e679a22c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.586e740dd.0.tgz","fileCount":33,"integrity":"sha512-G+kZ4wQFLnSVxd50Y3ZMeMxKMBYF9+L+QeSQKtyHSk5B7AmkcmxXqsuQK540d+AlQ3TIBQwPV96x3aY4Xcj+vg==","signatures":[{"sig":"MEYCIQCNsoVdI2OaVlr9GD+VA/LqrlDEq8UWaxqxqjSsC+oJSwIhAJLMDLpPLxPtd8L9JxSD6w+9zDwdtPazmchyGlTTwhew","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188081},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6c765889db11456de00c45d7bb289b6c7cf3ec27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.586e740dd.0","@material/base":"14.0.0-canary.586e740dd.0","@material/theme":"14.0.0-canary.586e740dd.0","@material/ripple":"14.0.0-canary.586e740dd.0","@material/typography":"14.0.0-canary.586e740dd.0","@material/feature-targeting":"14.0.0-canary.586e740dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.586e740dd.0_1633019471675_0.28867004305574184","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/form-field","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e25dde080f0818388b658d457f01e238ecceccb3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.2ac92d766.0.tgz","fileCount":33,"integrity":"sha512-I/lYUE9y6nyMGWPN3k1ao77GITFk0MApJmVLyIzZ/tOTZJHu0DnVHAgqQ8nVCPNv1oPyrw2KFi3sujYEJ3y2Bg==","signatures":[{"sig":"MEQCIBfRbGjZg905aoAximaHxJkOp+7kQtowTwp4Wd87MUiLAiBIrkuf5jp9fsXdF9xgdTcdMKgzIvPTxIYrrl0wBRZGQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188081},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3a797e3a01110aeaf8270a13c2cc32d0871a8bd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.2ac92d766.0","@material/base":"14.0.0-canary.2ac92d766.0","@material/theme":"14.0.0-canary.2ac92d766.0","@material/ripple":"14.0.0-canary.2ac92d766.0","@material/typography":"14.0.0-canary.2ac92d766.0","@material/feature-targeting":"14.0.0-canary.2ac92d766.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.2ac92d766.0_1633462116811_0.1964260017777173","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/form-field","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c093252e86eea94072ef5192fe24df75e7efd37","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.353ca7e9f.0.tgz","fileCount":33,"integrity":"sha512-dZWG07ulb98sjSlsTWUIBzcAyzXUw0xQ90QxKgxhTjHmOVmfHqocMsN/bbl4+1w4D1aT4LHc5Uob/YkRClSUWQ==","signatures":[{"sig":"MEYCIQDPcQ1nF7icijNMoNie4Lpvzq6cCgdh3cSaIwarINxwlAIhALhWbMLpVLU27z0QSFduBXn5aPUg4pg97RA2Z0zRIEfn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188081},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4f091efbfcb52d523712f9b99808d737b06a60af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.353ca7e9f.0","@material/base":"14.0.0-canary.353ca7e9f.0","@material/theme":"14.0.0-canary.353ca7e9f.0","@material/ripple":"14.0.0-canary.353ca7e9f.0","@material/typography":"14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"14.0.0-canary.353ca7e9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.353ca7e9f.0_1633718810472_0.7835325500523433","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/form-field","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03afc2047e3ef4ed09eec35e5e8eacf6db2d544c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.c78ff0429.0.tgz","fileCount":33,"integrity":"sha512-8khbIQI1Q9pGGMWBqDIRZ5WARde8SwxjSEeW4Gk0oUfJsLu8Bh7huOAg1Gz2TcCLnQzaAJoUhJtYifC7inmQ4g==","signatures":[{"sig":"MEQCIGCNjsPLXVP/265xv/aLgYovyqwFjHiVKWN9OOzcG9MUAiA4J0wSMTVATcw5QfpbfxxOLZS393U0VySZej3mv3jbpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"55d918ee5ce9842b93075fa0d0ffd2b64b5f3ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c78ff0429.0","@material/base":"14.0.0-canary.c78ff0429.0","@material/theme":"14.0.0-canary.c78ff0429.0","@material/ripple":"14.0.0-canary.c78ff0429.0","@material/typography":"14.0.0-canary.c78ff0429.0","@material/feature-targeting":"14.0.0-canary.c78ff0429.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.c78ff0429.0_1633972928616_0.9678208526202416","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/form-field","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.261f2db59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbea4cb27eecd8539da290dd9813408b17a8ac03","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.261f2db59.0.tgz","fileCount":33,"integrity":"sha512-NCc/o60gwuF28PVMgFkHrKcHxIaCMZK9JRVfoaD0sF2BINYrjaCkFZ+x6AhNjAWLUQMhJMfc+1WXAUE2T85Mug==","signatures":[{"sig":"MEUCIGteEDH0WFZWS7BE2ZJ3XJ1NZnlnNT6SbpYxBC+XvYZQAiEAzMAdIVe6wvBA9CbOqdTTELGhtHcfTkdupS6ag1h2Ycc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"22c1cb4091a589b9a53b844da4e8d98309c75acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.261f2db59.0","@material/base":"14.0.0-canary.261f2db59.0","@material/theme":"14.0.0-canary.261f2db59.0","@material/ripple":"14.0.0-canary.261f2db59.0","@material/typography":"14.0.0-canary.261f2db59.0","@material/feature-targeting":"14.0.0-canary.261f2db59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.261f2db59.0_1634749183534_0.15503013775676178","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/form-field","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e6e2ee335de31c79408fd86b89c3f215534e9f7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.9803d2dc1.0.tgz","fileCount":33,"integrity":"sha512-te0ANVGtibLTbTzanpVDXkpi67DvjFaSkrXPPN9M8A8S9fYS3hraXFp+sCOutd32shc8+rH/GF6R3EqoVd4Qlg==","signatures":[{"sig":"MEUCIQCBhvWN1HYqwHtEf+qLl76Y1ZJ+VweCkoUWMq8QQSoX5QIgMUhZpO2yRmHdSMykphICKPcp3TESJ5QqHjBMk7EAso4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4ef0574fd4b362b2609f5dc9bc002ef96f07fcc9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9803d2dc1.0","@material/base":"14.0.0-canary.9803d2dc1.0","@material/theme":"14.0.0-canary.9803d2dc1.0","@material/ripple":"14.0.0-canary.9803d2dc1.0","@material/typography":"14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"14.0.0-canary.9803d2dc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.9803d2dc1.0_1634757706018_0.8347223191011683","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/form-field","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.348665978.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61e766682571bbbd6098f53fc26238938c98d8eb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.348665978.0.tgz","fileCount":33,"integrity":"sha512-5ffJW3okcBIA6IR5qWOwgb7SfjTABdbbEWcM/1gR82AJZEVLfSTiG9dEJPuk2X03rjyFiUhqbacoYc/QfmjHPQ==","signatures":[{"sig":"MEUCIHXm/XPrJVNNmVAeHHpID8/DreRfg1xYh6vNWnEkgKvxAiEAjSj6NZd2Fowq9WdAae13RvV6IbDywBKSOSQqKtDX6oU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bf16d95c07dcfc371fc864fe30028299a2d5d0d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.348665978.0","@material/base":"14.0.0-canary.348665978.0","@material/theme":"14.0.0-canary.348665978.0","@material/ripple":"14.0.0-canary.348665978.0","@material/typography":"14.0.0-canary.348665978.0","@material/feature-targeting":"14.0.0-canary.348665978.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.348665978.0_1634827835588_0.12258822325282503","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/form-field","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ee9345c0ea0fb14e3427451a2754f397ae1367d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.b2b979a8a.0.tgz","fileCount":33,"integrity":"sha512-iGzhUaPnoH+KrTjWB3xIOQZcWmpct6qj6u+/NHvgltfWBz7LD6tCDrgPUyt8hreWcDa3lLcNeBx4LXPeRFQpLQ==","signatures":[{"sig":"MEYCIQCvIVh4l2t526pXrEKo84mVqeiSoGkIPJ3gYby+Ap7FdgIhALz615WeIvLKmOUts9I4Q6ohUreYf8a1+ktTtxdnPBWq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"08377359fe2dfa41ac960f776df2ba00e50e9819","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b2b979a8a.0","@material/base":"14.0.0-canary.b2b979a8a.0","@material/theme":"14.0.0-canary.b2b979a8a.0","@material/ripple":"14.0.0-canary.b2b979a8a.0","@material/typography":"14.0.0-canary.b2b979a8a.0","@material/feature-targeting":"14.0.0-canary.b2b979a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.b2b979a8a.0_1635433928338_0.21296665974845652","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/form-field","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c972aeace705fa28a1912438e2db965440b4360","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":33,"integrity":"sha512-MeY7DASplc9rKLA7O0PAwZ6LFeDogvLvGY68rJLllrE19XeUxna7Mj2H9C77jubUXHSBR1FeWZSFDYKrmxwLtg==","signatures":[{"sig":"MEUCIC2KqCvNheFKls7mz7wEU5MCHedbayCw0lTBGG3r+qxYAiEA10C/2PJzGGnL3eaWgumCcIN0R1aCATeNHxaaqTcy00k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3673ef3144cd47c5faba873a239454e11e3d72eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.1af7c1c4a.0","@material/base":"14.0.0-canary.1af7c1c4a.0","@material/theme":"14.0.0-canary.1af7c1c4a.0","@material/ripple":"14.0.0-canary.1af7c1c4a.0","@material/typography":"14.0.0-canary.1af7c1c4a.0","@material/feature-targeting":"14.0.0-canary.1af7c1c4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.1af7c1c4a.0_1635443573758_0.027224777417937718","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/form-field","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a627acf65a5ce50be7e658411871a054d145732f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.4afd353cd.0.tgz","fileCount":33,"integrity":"sha512-aTlyRlpxq6f9RbHucQY0LzyDgivOISUALQukVUdMyg2XdvUDlOMCnXlj2yqMmvda7/bWmVwMAN3rY1H0Cy510Q==","signatures":[{"sig":"MEYCIQDjNkupx7v5Jo9lMn9HLfPg5TON1Dd0WFfOy3DjiG1K1wIhAN8zCY4LFYDfIV7ovli75GcuMMaFpLk0mHNkUTimuhBm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"491d940b4e97c65f274b1b4d42b3842e9bd3a4f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4afd353cd.0","@material/base":"14.0.0-canary.4afd353cd.0","@material/theme":"14.0.0-canary.4afd353cd.0","@material/ripple":"14.0.0-canary.4afd353cd.0","@material/typography":"14.0.0-canary.4afd353cd.0","@material/feature-targeting":"14.0.0-canary.4afd353cd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.4afd353cd.0_1635519698692_0.3261318635248409","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/form-field","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.a986df922.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfc1ea29b542a75333064969237284b1f6e982af","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.a986df922.0.tgz","fileCount":33,"integrity":"sha512-ZtDvLlMaZR9q0Yk+mJzJ4UiYpU25muKZNnKpHOxQv5T/agCJInL5s0CWlg96htLjQ1tHd18QNIpOEP5EFFAhvg==","signatures":[{"sig":"MEYCIQDY7CUZRkWCbZoYXHotPNuSzHTm+EmH/Pcwk8XFjud9GwIhALPq7lAIA04/NmI+f9lwuJAVrmC3tvO9Ab5ty5X6Mwe3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6fd5c666012fea37f8a5a820b4979cc66e59fe9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.a986df922.0","@material/base":"14.0.0-canary.a986df922.0","@material/theme":"14.0.0-canary.a986df922.0","@material/ripple":"14.0.0-canary.a986df922.0","@material/typography":"14.0.0-canary.a986df922.0","@material/feature-targeting":"14.0.0-canary.a986df922.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.a986df922.0_1635543307426_0.23318516187125904","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/form-field","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8535e7588ee56fb2cba0efb3f60a8e1bd4b884f2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.c3cdff07b.0.tgz","fileCount":33,"integrity":"sha512-SMQMoIeUQZg22mn7oqkceg/C+Gd4OaXUvg8EFLgeJUFG8B8X/LOJigsO8GuKZLZxbVGsmIeh6AkpZGnd/G5Sgg==","signatures":[{"sig":"MEUCIQDocJ/4wmlnAb6CQz8NE2kI1aMauMKytqG22yIitW4BFgIgaJuwn3F1QPWr2CSYrzs9ht2wZ5yuVTqTjMu2wCADVx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"078c19c333e3161ad6b51a3fdc993d883bdc19c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c3cdff07b.0","@material/base":"14.0.0-canary.c3cdff07b.0","@material/theme":"14.0.0-canary.c3cdff07b.0","@material/ripple":"14.0.0-canary.c3cdff07b.0","@material/typography":"14.0.0-canary.c3cdff07b.0","@material/feature-targeting":"14.0.0-canary.c3cdff07b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.c3cdff07b.0_1636484759588_0.08556395321904398","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/form-field","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.468392606.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1fe982263be282b1818892e78637967cbdb66225","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.468392606.0.tgz","fileCount":33,"integrity":"sha512-rKs+JJJcQhWjiVJRVZMWElbRi925ewHHyyypIyvi63Qlwk6pyHkZpd0Kz9aY0FlHOFXMNIQ+wX9ICo+WOynZDw==","signatures":[{"sig":"MEUCIQDO2CzhlA+XIsr2qYX6thKPpnF+sGtPX4qW2VfQaEDX2wIgDmbXVaQDd+U3sKYiDlz6vS/viZd1DD/o0wxyL67Z8bk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ac451ce035a924184caaae0df5252896a7392e33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.468392606.0","@material/base":"14.0.0-canary.468392606.0","@material/theme":"14.0.0-canary.468392606.0","@material/ripple":"14.0.0-canary.468392606.0","@material/typography":"14.0.0-canary.468392606.0","@material/feature-targeting":"14.0.0-canary.468392606.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.468392606.0_1636659603522_0.9792205603288862","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/form-field","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.828f9803b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"296f1809186eab52ff53c37688401f23ab8b3591","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.828f9803b.0.tgz","fileCount":33,"integrity":"sha512-3RzlBqfsSLjJ3HIDynaQl5BL9F0c5OF2xBTS/8Mqjg3eb/eF1pbJHdx5QXh2hHokRJQ6rh9vyzNSPguhMGaOZw==","signatures":[{"sig":"MEQCIAlorBF64OPNgGT4Od8kepvRldri1WXO0qHQQ6R3aTWVAiBtSZVjT6re5Vi4VP0/KuLkvi1c7PFxBe9LJ3Qa7CozTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c64e9f941d45dc823621c068481be90a0eaa0f39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.828f9803b.0","@material/base":"14.0.0-canary.828f9803b.0","@material/theme":"14.0.0-canary.828f9803b.0","@material/ripple":"14.0.0-canary.828f9803b.0","@material/typography":"14.0.0-canary.828f9803b.0","@material/feature-targeting":"14.0.0-canary.828f9803b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.828f9803b.0_1636660245515_0.7382357082600617","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/form-field","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.8795cba87.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9127a7442d8bb2080ccb20274a931d6262c4dd60","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.8795cba87.0.tgz","fileCount":33,"integrity":"sha512-8hxTB4KQkuivwduBpVslRRR5s+qrxOkxnMxhNpc16gmhTA3OFDyBRNT/2xG2+WQCZuRnVVAoRvj6a6ujkTyV+w==","signatures":[{"sig":"MEUCIQDyrkqiz23/C/FFzax9elJiup+5Ho8HdSCVn/LGuDHjEwIgCv/R3ORdZepU0jk5Im5RVPkb8fqqjzDyNmUnpXZNCUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"12c2e8ee797434819828bade998610af66a528ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8795cba87.0","@material/base":"14.0.0-canary.8795cba87.0","@material/theme":"14.0.0-canary.8795cba87.0","@material/ripple":"14.0.0-canary.8795cba87.0","@material/typography":"14.0.0-canary.8795cba87.0","@material/feature-targeting":"14.0.0-canary.8795cba87.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.8795cba87.0_1636660601801_0.7939117117346977","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/form-field","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1acca16531514a25365c5b9b8f4c6be5fcf38c15","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.cd7f8cace.0.tgz","fileCount":33,"integrity":"sha512-6slQJz/SfHsAOWg0girIHUFX3Ggq3pGjPe+LlG9Wg2zTDVw3tE39hVL5QD8u2O5zEevfKMVXf6OpdMSyliOrLg==","signatures":[{"sig":"MEUCIGft6XTYzKPAOnJN2CYnR4AXf/LIIPQyusCCU9kdRJqFAiEA5HILycvkstREKNHoR7gNCfQxjuFxskoo6mPX9gyZfbU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6f1e9f39fe9a43e01e67b849cc2a96a5a31be67c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cd7f8cace.0","@material/base":"14.0.0-canary.cd7f8cace.0","@material/theme":"14.0.0-canary.cd7f8cace.0","@material/ripple":"14.0.0-canary.cd7f8cace.0","@material/typography":"14.0.0-canary.cd7f8cace.0","@material/feature-targeting":"14.0.0-canary.cd7f8cace.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.cd7f8cace.0_1636660703495_0.6843431665866617","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/form-field","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.207230eb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a48e88422779c5324c7c45a9de40d240c85fca5b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.207230eb8.0.tgz","fileCount":33,"integrity":"sha512-Qo7zuJJN5Z9oyLNpqmXJ9oJ7bkpnafsE9PTvGSzeWMedOJt/HvjeEFliqlu3xkwewcZKOgNQBtF25Fic91atSw==","signatures":[{"sig":"MEYCIQDTHI4PRyjTrLQOojxQe+cNvHlh8UlRYSqXwUtV7h/eUwIhANfcdN3ah7jPuvNsH6zNEsvvZboIgRoxhIXFEoUDYkT/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"de1b12d24234ecfbfbf5a665f46c26b71016be2e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.207230eb8.0","@material/base":"14.0.0-canary.207230eb8.0","@material/theme":"14.0.0-canary.207230eb8.0","@material/ripple":"14.0.0-canary.207230eb8.0","@material/typography":"14.0.0-canary.207230eb8.0","@material/feature-targeting":"14.0.0-canary.207230eb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.207230eb8.0_1636669474483_0.5774072432927357","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/form-field","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89ff6c7f947bf3ab84df72eb039ad409845e91cf","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.991fb99f7.0.tgz","fileCount":33,"integrity":"sha512-6VbUkmbFgrlF2yioGiCTWV0leBobP20dw1c4Y9t5wIWp8TvB+m/7z4gx899CDHR4thIvJTInWEW4awij1Xm6nA==","signatures":[{"sig":"MEUCIQDjxwYwlyd8/F4UgWldZeWtV1414cUYuM+BEobGp6EnJgIgXByRzIwV48m4xW9Hajg11yMkZ42ugiLvUug9f83lCY4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d13dee60c11cfef5bdcac33da4fff6f13626c05b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.991fb99f7.0","@material/base":"14.0.0-canary.991fb99f7.0","@material/theme":"14.0.0-canary.991fb99f7.0","@material/ripple":"14.0.0-canary.991fb99f7.0","@material/typography":"14.0.0-canary.991fb99f7.0","@material/feature-targeting":"14.0.0-canary.991fb99f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.991fb99f7.0_1636670182374_0.3395098807138539","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/form-field","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.15db4f164.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a469f87eeeaf5f7a7fca8608a0dca725749c1519","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.15db4f164.0.tgz","fileCount":33,"integrity":"sha512-DJG4sy7Ln+YdxWn7RAFZ9sJNECaIHxbOAz4agZAVH00+79gUCLR0ZpwddJSSEgTRlEd5QsRIrlCNU4WPH/UmTw==","signatures":[{"sig":"MEYCIQCbjaMFaDWkZ3qqUT/wfYzMyMv4Qnj1nFrLwrTKcdXWPgIhAMq+Vt5Jg2+r7g6yXTcaLNoS9epLrFnAjKgi9Vshcc3S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"562e11bb445a0e51783e848adc61b690a7a1ba3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.15db4f164.0","@material/base":"14.0.0-canary.15db4f164.0","@material/theme":"14.0.0-canary.15db4f164.0","@material/ripple":"14.0.0-canary.15db4f164.0","@material/typography":"14.0.0-canary.15db4f164.0","@material/feature-targeting":"14.0.0-canary.15db4f164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.15db4f164.0_1636738183424_0.7787847375578183","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/form-field","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd211cabaf1f02020b70cf36e2118c424f77cc5f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":33,"integrity":"sha512-45RzjBDBHoxn5xHNjvX9cTbHKygKBZ//BDDEpPe8YYmexNEEc261z0XxlMvwqFhz0nY+LkIarbKCo3VtJkRPTg==","signatures":[{"sig":"MEUCIQCZ1HMA1pd5mTyzOGRJvxHgJ0bFzYfzdXpiezbKU9GQlgIgFaNcL3x8IcS2qcgRyju0NMmp+rtZ07iLCFH5YkDp7p4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"14b654013dacdda833d34b73c1a94811202298d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8fcad5a3c.0","@material/base":"14.0.0-canary.8fcad5a3c.0","@material/theme":"14.0.0-canary.8fcad5a3c.0","@material/ripple":"14.0.0-canary.8fcad5a3c.0","@material/typography":"14.0.0-canary.8fcad5a3c.0","@material/feature-targeting":"14.0.0-canary.8fcad5a3c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.8fcad5a3c.0_1636744434766_0.8568905499478812","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/form-field","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b57f560a7f02b14ec0651e4f971c1e7c04b5a3d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.f81fb1d23.0.tgz","fileCount":33,"integrity":"sha512-xn/LZrJo2lGhOpcuCKUxD5tCq+o6Twws3Vn0ExEwz/jD0HBlVSt3n6Nys2J0NXmxK+5nVirdsowNNVPyupiDcQ==","signatures":[{"sig":"MEQCIAgdEnB+23V5dWHB/XXBS+e0QTpyyzMZoMvg9LMk/CngAiAQo0+tboqPr0huooh15VJMIqPvRQkLWYRK0cQKJKwPDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"60600a1b8cf651dddedd6881a54b20db7b75cdc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.f81fb1d23.0","@material/base":"14.0.0-canary.f81fb1d23.0","@material/theme":"14.0.0-canary.f81fb1d23.0","@material/ripple":"14.0.0-canary.f81fb1d23.0","@material/typography":"14.0.0-canary.f81fb1d23.0","@material/feature-targeting":"14.0.0-canary.f81fb1d23.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.f81fb1d23.0_1636756810998_0.7844358866737573","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/form-field","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5f956e8c88e4813f5194ed1d81c9b8997a809ff","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.783f6fd5a.0.tgz","fileCount":33,"integrity":"sha512-EgVAdwzpLmLuqPBGVLzNR3LsWP89MAaUe5oTOglBoGTLVVyRK3jm+qgXxRgoa6NHpMk3K3YYb5KfBriZZqbJTw==","signatures":[{"sig":"MEYCIQCYaSHQDlJfpz3u+cN4WdKVB5YiNUb5bKK8yetsqyoAOAIhAM4Qc+UpJJD7iwk6Rtmh3etigZMXu2DKtqUvBGSGFXPs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0aGCRA9TVsSAnZWagAA4acQAI9xQaEmv27BF+rSc6O1\nSOCia8rZzU7YbUEOAIk4ois9+/iWk8vI5py5cO0mvB9g9T86sMHxyiQTKM99\nb3VsHGPrlnQvQgHdykadEApURb/crTmz7UG9IKe8dkyOarbUUQIyULqOXZuZ\nbCd/7gKRBg2UAAioQPEbtnwKKs0Or11eL2NSfMg7NFJmAg9qNQm+iSj1Rt0Y\nh+YFCBRFTGFTz4DkBuAyMDYF/z/LsDWYukjNRmP2PRYcHw/Tg7CDAVOy4snV\nw7mJ3L2eoH+wFyL6CVyFv+w0GjNVbxAEUDlNVR4jaxb0IboihEDhwXlCf5c/\nHAeiz7ux5kofH+ufk/zWy0knoutZbToWbsVArQzMpDNd8k9Jl+DCqsXgunim\nkZ0vzrAKj4O3KX6+Q94kuDquDSfiQan43mnZ/LN1G+msFlLJwUe8xjo6ucq8\nWE1OLQX3Wf9jJMTDWn2e+miT+k4HmapxHIci69rkruIu8SpqACayf6kpXkdO\nCawn4RM0FuiFybjwqjabdKRIcjiKPAsjaUuiwiBX3eQl9GQd++GuFZciF2Xn\nw8mZQirb1cAndEnWGj6WDyhX1oXIuKS7eZyWdalsuvm7PY651u2zWr8zTlLh\n1UpvX/LJya/kF6lqMKg/S+Zc1EfQImM2VZd5bHMLUidgRl0mKaWrJiCJTUKl\nyZ3s\r\n=8FG9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"29ba9297d5424f35d235c8ff87e393874c1b0a25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.783f6fd5a.0","@material/base":"14.0.0-canary.783f6fd5a.0","@material/theme":"14.0.0-canary.783f6fd5a.0","@material/ripple":"14.0.0-canary.783f6fd5a.0","@material/typography":"14.0.0-canary.783f6fd5a.0","@material/feature-targeting":"14.0.0-canary.783f6fd5a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.783f6fd5a.0_1637041798792_0.20848478365695056","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/form-field","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74e0ec2cfb429030b8aa55c7f06cadfbc325c5a4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.d57ec74c7.0.tgz","fileCount":33,"integrity":"sha512-Wqm2YUzMEuvQRxPKATG7b5Z5oVyzNYlPyB3v2TnfZYaPifSIJo0qFpE3x2D4FWS7QgPdIBMxbjuGVrDYiRi0gA==","signatures":[{"sig":"MEUCIQCz7YotzF6ecbmnkDzkxMMDChhlAxsFOb4AqnibpYYiHwIgIBeGbEx0CFakqdr1Qmk3l/Q+rQoU0PYk9DJWdyNzACg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9lYCRA9TVsSAnZWagAAGSMP/0vtDXQajNA05mz6Waf6\nu7eELjjLe+qh46yPGhkUzSpIdOK7A45jOjSMgLV+mlrlVBj0veY0C/tfYKYn\nu65z0zuhrVcYA6n5YKFPT/qtuzBrmzV3sVLR/2ksN3dCpQxcsROvc40fzCV2\ngeURbTROXi7+5VLJ6+sG9ZsMvpvCOwD4r6NF+gIuI09TntAdJ3TICvb91PtP\nXIST0R8GOl/g1Z/zYohO3jNyymr1Y73bR5D4cTDqy9YQiz41gG4F5OOcV9TM\npX8Fxoj1Hr9xkgxlccA8tvBvBKgeaCSSJlUd8XLwUaDnlSAF/YqrRhZ4s7RK\nX2vtQUJefhkQMpN69zD+FF4RWmGAxgakerXC+sRGlbkKCdLsjCZGZc7c+Jz3\nyytGmqv50gxLTIv8OnAFpramcsQ9CBuni64/jZoWYZic4f65VUmznXPRFrHd\nstKiudJiqUrT8/6AYZBj+SDQN/hvD/gD6DmeXhJshud3+JL5ycXSGjF6Z9wP\nvymSbBDE3UJLx48JX6dX7bQSf/lPnGrk8Sg0wzjnF0a1qwuNfPLfS/4Q2Phx\nfihTF9MuR3OhcCW2WNDgDKFqOv/34C/9uESbMD8iIT7hvKJfKrA3kKke0wa8\nlbg1ltYBPZAkma2VCMdCCcmTIcecdJRDbemzZUCO443wnrJiNXu3xg1heCC6\n5Fzc\r\n=8Gzd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dbbd8db21de66e88b3e713faa99419e6b2f53c68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.d57ec74c7.0","@material/base":"14.0.0-canary.d57ec74c7.0","@material/theme":"14.0.0-canary.d57ec74c7.0","@material/ripple":"14.0.0-canary.d57ec74c7.0","@material/typography":"14.0.0-canary.d57ec74c7.0","@material/feature-targeting":"14.0.0-canary.d57ec74c7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.d57ec74c7.0_1637079384104_0.43180430520008306","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/form-field","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.554c71829.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29afa03b34c51abccb9ed9ba3436c8bdb2d8a25b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.554c71829.0.tgz","fileCount":33,"integrity":"sha512-vCxnL2dvCPakzALnZLNfPTNg6VriPNud8reV78qKCR0uEqUtd+lhxLEfvYHhuSEziZedRXAK2VN46crIuAQm2g==","signatures":[{"sig":"MEUCIHrds5mgQZ8v/TKpKDi/jKlIAWKOk4Hg5GoU2HHCISvdAiEAn3GfN0RwvarxRPyGQA8IVi/5WIy9vF8oC4x+GFW25Po=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9oFCRA9TVsSAnZWagAA6tkP/jHVtQwALUaVV9RFYMVe\nQXCHc+igIHqaBd67GyrLKPhG+GaZPke1uVb5OQji66Pi42pdqrA2U1o5LL1o\nUAzwyvpVjEacFY6r8Y2hS3wdO+OUTLKXoQZS954VkFKmzozqmwzseMyE1QkT\nDmRvJOri1AJuHigJo4T+M0w+rUC33M25NG99utV+LdIh/Dq1dG+D3gmwnTrY\nH8qMR+IxMCekPXeC/BjMl8b+f6HKuZupiysLGRDczhmE7ilscrWS9k2yPyJR\nFnFTo4bX/wDfLtraP4j9brRbz9jx2HwZg5vwHb3iNBUFAEicAoF5mtZjMv+K\n059Knn4UeKg18b85V1pFO7/j6Pu5xpDIF0xpfNnUSeVNpiDSzEML8RKa2KF5\nHe073KpmlHkpdRZ4O3DI29eY4HJUZu193QReRN+ypmQbID7sTKkB4sDsy15v\nu7DRKKkate2HFxIU+QFQ07a0wz0xKoV8rZaXrxQX+2Sj/wuW2N7HpbqDU/t4\nz5uFUhJq+w+LM56O4Z2+3IXMl2z/CQCj4kfPecZ8jjwOyBjO4GRoB15cLl+N\nEr1SU3k6v+3wJdhHc+S9P6c20dXlbRvIa9GbNl8/NeySPrUCP1GGGVLA2tOL\n8c2H7xiCr03c5+OrbRuYR3GtZ2pYh1tXgjXZzGOqcAnnpewSo4pTcVEPojK3\nE7T/\r\n=jqA6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"be0799ddf10fc34b46ab20d754f7ef73d9efbefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.554c71829.0","@material/base":"14.0.0-canary.554c71829.0","@material/theme":"14.0.0-canary.554c71829.0","@material/ripple":"14.0.0-canary.554c71829.0","@material/typography":"14.0.0-canary.554c71829.0","@material/feature-targeting":"14.0.0-canary.554c71829.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.554c71829.0_1637079556983_0.03292088939791182","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/form-field","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37bb28fb051dddc23ec8390a6745a57da22a939b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.3ef470efe.0.tgz","fileCount":33,"integrity":"sha512-pK9CLBrTS6w5XzSB2tXi1RYGTIXXyDOOoPA/MjS+QbVK/qNXLrcK2Cy2O9FZM6RtIQpHD33CpdOWAWGkjCgl6Q==","signatures":[{"sig":"MEUCIQDNbC1Ose1LShfQ/mGIp8Z542/UaYcNRHA0D2ref11Z2AIgOWRlT/KN7X0Gi3G02kh7Q96otXmnut1Tjk1gQPKua2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9soCRA9TVsSAnZWagAAjvIP/1NaRsB4QPtBX4FPx6PW\nzCQ6wc34q8ZI1rEurRa/UMd1+LoHVn2lHoK4i25RxeNwGMo1g3fm/BhefFLj\n1giIGmu4BNSfzKgYXN15c2GTaG2/vV9H6ucqc6e937oR0slLp7tpaLDwfNTV\n47eULLvQALOCiP8W3m2tSFT79zJWiTmvVBVAClvkDfSJiDsF9uZBt1t/CUCG\nAvWJogQg151Rq8qcj5Zcop7gJXQkuX/vjg7Zm5/DIgOtVqEel2PlgYE8PtbG\ntznx2Sew+JGUwsZfrb1eKG70qewokCKjrrtKSXtKWcHrj8OvpDrrkGZBIT0F\nK81i/SnHvb1RN89ZcECphKukI5Xn0kYxBD6WfDSNALMCch1jMzUWYSzIr0aa\nc421z9yNfBM+T9p3NYV/38vhpVYZm3otLlwxBk6AeOucpxbCwKgjmY8Wmi1Q\n3V3DiF0pwhm6eHv/aAk7EJ+HP3Mv/amiqQF6naFVo00ZSPwAw1DZmtCQ01xO\n1LodW30TIlIWEExlzWdrUD+z4xtoBuUr0Ygdx0e88gNjxjBQ0kxq2wO50dS6\nsRkWsF1rbdWR295H4T+qsX/6dJ2f9M6nRjXJ44tHgG1wzLhIwYDl6OU1GzUi\n1HbVtopUEznfD+fSwEZqq3sa8oK3mWmmVuWq9VohOG+P3zAO5HMVZ7eTR2X8\nQ1qv\r\n=uqtm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"49429a109e0c13bb4f9d8fce0142cc5f142a6afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3ef470efe.0","@material/base":"14.0.0-canary.3ef470efe.0","@material/theme":"14.0.0-canary.3ef470efe.0","@material/ripple":"14.0.0-canary.3ef470efe.0","@material/typography":"14.0.0-canary.3ef470efe.0","@material/feature-targeting":"14.0.0-canary.3ef470efe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.3ef470efe.0_1637079847703_0.643140385837744","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/form-field","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"992dfc923a576d8c405b0cde165c13f835660110","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.61a28b2b5.0.tgz","fileCount":33,"integrity":"sha512-iqK16g3QaggLB2Ba9ZCTp3JYsoz/W/fF+xo9fefJufXZzNdGBykPVHkjdNQHKfkZpRl5LnT40j/TrOt/mTrN7A==","signatures":[{"sig":"MEYCIQC1FVn3zTDmUAq6ARHV9NvsGIqpYMb/jxd4WdWMljaPLQIhAKJSZgwbnDDNwuHcqB+FhMFnlsVBkiEfMaM4cAmFSFbR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVEBCRA9TVsSAnZWagAAEggP/iH6gg1KIuULzNWcdBxf\nXFSEowPC/lDkpuFlbAnruj6Zco3dzr1HfNMquEmU3Vtd8NzRuSnqhpaQk2s8\nzof14TWukVl8QV2J3ySqcF7odO/vLgmPauY8LaIAT+XiHEAuEUshQnYdg5w2\nAeMEXk2giURUPTllz1zOK5sOzIWncBFAX0l8oTnbJoJBX9FioMwVEq/YlTJq\nahZNCO10eNnSp+0oXBmAxCBFkaqOS0QDzPMgmo9hS9gUmFDKX9BfxzK21Agi\nnsUoSZPC8VFBr+qG5n6gvWC+qAVZWNa30ASCKV5OsE1RkjHMXUgy6hifPB3a\nw+pJgTLEP/dBbauXt2J5YwjR1v8FJu9ZjqPB6JdshpF7rrBwla0MnX2A88op\nhF3797iMjYSR2cKZxSaBvULQTV2VQtfrR50gNq2lrcYXq/Lat6f/lDtTDJhj\nfWDdPEyAh1AT+yqKH6xvOh2mSNXFIpOCflrGCTCHaPehyibNdGzhuOI1Nnoj\nw2AzMYfJtDqjRx9neCEclRgaYLy3zPC2GkAyDv+1i4+sEk2RQD6IpO21VFQ4\nyu1IIAUXHDtZDFM61nY3nd0FW8liJeyuD0agwrs1MBsYc84w3cyj7lAibq8o\nsc/M5mG94fmR1a27em+gbMS22ctaOzlvXD8/GzObqvhsMT0R0P4tigEgRQ2t\n7nFk\r\n=ozgw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"314b98aa8ec5a35ba8a45706765f4cd7496dd803","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.61a28b2b5.0","@material/base":"14.0.0-canary.61a28b2b5.0","@material/theme":"14.0.0-canary.61a28b2b5.0","@material/ripple":"14.0.0-canary.61a28b2b5.0","@material/typography":"14.0.0-canary.61a28b2b5.0","@material/feature-targeting":"14.0.0-canary.61a28b2b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.61a28b2b5.0_1637175553285_0.032172965233150164","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/form-field","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.fae6c652d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"568bd299507abc1c25ac272847c45d8a839d03e3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.fae6c652d.0.tgz","fileCount":33,"integrity":"sha512-t4RGQVEA/YOew7JyobEWRbQAyX90X7sAVRz/qdm8zBxjL7qYk7T920pbvGeMqH1hpt1WzwuVa0hnhW9lbQqwwQ==","signatures":[{"sig":"MEQCIArBU/svRj5uTv6+3R+usMu5JbkKc0vt++XIbRfCIieUAiB0Kir4uTzM6Xh0Zc37zC0hV5SJR491OC0ZfM/o0pB3wQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln5aCRA9TVsSAnZWagAAQPcP/3iwUl1M85CFkwVT05sf\nL5IlmblWseW7/CzX68Jw7Xui8IpEz+8kjr5VC1jRLtk5JUZiZOG3LCk5EO9q\nY8oES+kuZAVmNvQOlvi+ZkXFnkcAdojuiwOnEff5rLLbsA9nf5URaNC6AmsN\nAls/9EitRVYeN/rW1Rdi3EoXOc/4THFCzSDAVKOGgs/KHzSZAyUVrpXpFPqt\ntxBADj7dXnrhBvIhKXxyuXhbhmFULbqibjkzAPKtX9zcGZ9udjrW6KnsOZJj\ncxgXhzciMh6qPSHtlohnhcl6/NUgeiEHZ8H8VIH597iZtyPdXDTINy3Zl6U9\nRDMz5uLa+4P6B4Z1lkePLEdN0FIEyoHwUPzyCvYX6CMhK4McuczBpj5Nac7W\nayfYfGP7l7CiFpf/6737LpayTrxnauWOS7E/0V8qjeCG5UPxYB3FtXyw3HfA\n6cca8cJ6qhwql79jO2+hEasLG04sSpdlFM5M+qlGPmAfMxvT7ErQCeXNmxO7\nwsz3ucWE8QyaOuPv4BtjEgRNZCmjUuzzp33VE2axeLGnv4/Ao/7eOPfOeK/k\n5hd/jne2M7TwKK6VjV8T8RXWqUqCdnOLMX2Bcd0SCZ4CfbKGHuII11ul7BYt\nfVwL6YHHZnOaP9SoBJe5orw6ZphmQYsQjVjWmdU5o3/9y7PWc9MhJ+5HK3j6\nMUDV\r\n=/2qC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d27c4bc9db002b9009b70cb7437b393ce59b9992","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.fae6c652d.0","@material/base":"14.0.0-canary.fae6c652d.0","@material/theme":"14.0.0-canary.fae6c652d.0","@material/ripple":"14.0.0-canary.fae6c652d.0","@material/typography":"14.0.0-canary.fae6c652d.0","@material/feature-targeting":"14.0.0-canary.fae6c652d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.fae6c652d.0_1637252698507_0.613063677696297","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/form-field","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.978a3b5bb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2841d8202cc82978ebf0ea095a81f58cbdcbd48f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.978a3b5bb.0.tgz","fileCount":33,"integrity":"sha512-E8T4K/n3apgC/2IBlu1HhWWQlXfptefbEKbvocDm7uFiFN7i/8UBQDwJhc/Spvcc9WAGSLRjpocV4AFFzDz8sA==","signatures":[{"sig":"MEYCIQCaMx9aKlAOJzSzK/7mA3mcClyFm8m7ghVuLRWgrWFMvgIhAL4czaK2Nd3Xvgrx4LX+WcWHM5wpk0ImdBMIx5Lr4kdQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/1iCRA9TVsSAnZWagAAMy0P/j+84c1+2vB7LgAejJEn\n+CPdoEh36MBtm2xTCF5SQmpaRKCCpfYclDr+xPZVzjKSAql8gGXOYY3TYrz9\nlFkv2pp1FwnnVQrnN3lPPFEo+tA/AqrlYQM+y9HhxbjiErMT5wIiNHdTNDbd\n9dnFYROh52axVGK0ukVUvh25gnJMNDeA9yH5kWKAhceZJJ2+YeGdlcPWGABP\n/1QUxhUEucx8xlWpDjGONaL3/G5t/LV96LfkUw+If2v2J842uTjV20xrmSA1\n9xZv32gK+6GOeRH3x2jLDvYx5l+Rsi7CtPW2LPJbAw8UMAvWfFGexiGpUuzL\nsSIN7aohJOK7TH39E2FniKFCmGzDNbtdlmmpCihdVY2RTzsc+qBO+Y8zSrnl\nTAbOOIbF9gUnRIUxriFfV6JSHzS05ZBQO/u66pEKghmYl6XZsSDveFdKjTg0\nCz8E7qggELD0lzS9hNwZtMgzXd1yPeBHCKgj8VwzQWe4oRk4NimzEGNkDz5J\n7nLd5xts9PP2hAJDUayK7W+cHng6kphI8tKCGTJPBTi/95k+j49Lci7YveyE\nzGhs+nTCayV178djSujfOWsELMFgwrooL7wbwjLhFc0nW53KaejX1LTjBzQN\ndtx8UbptNLomzxUIGay7y/PKf/B59XlOjDFmDfMxO9bvwHHkxSxxSUxUPgy5\nrWpl\r\n=YnlU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0d21a3472967f5ff791662e03961fb034a9227d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.978a3b5bb.0","@material/base":"14.0.0-canary.978a3b5bb.0","@material/theme":"14.0.0-canary.978a3b5bb.0","@material/ripple":"14.0.0-canary.978a3b5bb.0","@material/typography":"14.0.0-canary.978a3b5bb.0","@material/feature-targeting":"14.0.0-canary.978a3b5bb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.978a3b5bb.0_1637350754344_0.208273554131998","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/form-field","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.e6f43cf44.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f6e2df0bbaf945f227662b0a8896af6fa42bd34","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.e6f43cf44.0.tgz","fileCount":33,"integrity":"sha512-oCRIVOBkfXrCdz7eVZ0dlsTSLhKaQGre3meGLKrj30pb/jylbPpDX6QM3PSeQLoQgUTeovQR2sJStO0y+99kPQ==","signatures":[{"sig":"MEUCIH9K+JLbRLLmq2+SN2SdYR4RppES2mbh+1r8CQtPS6eXAiEA5wKJ59cQOxbP4SP/j5V3LRbrjEGK1/DQrXOkyIx1kQ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9TLCRA9TVsSAnZWagAA6+EP/i3B8/NiozvC52qBBMU5\nPv1WPS4JAt/jwd2glxWEfw7+YDBF606JWdKp8MA2+md6lx9zlcDld2v7oHc+\nvTN+Cf3pMtltnTJjg1sEWMW8swrxfU/Oh0KsdMeuYHx1/+hWLDlHgxBil70t\nexvjKcE2wMRzEqmm+cZoRp8oZmDlrn9ohwk79CtqH6c0PpQSnGokrPk2Cpk6\n3z2zi358I2S/7p5nq145DB/JEYwGzYxC+nQ4WLiCZlzk68DgMSRSC7ECIoG+\n124fbCimKIBUk0jo3YydJXxSotRh48/UeID+XgdbQ9LI2yxql1BAQcBobJGU\nLGmumnnntVz5A9uNd1by9RbyYLqIP3mciWIZ1E8n1hAkSYzxB3sh1SXIBKNk\nDOX5d8gFd3MyjPpjuExNIIZVxQiL6rhKP/OPtZJcHAtx9hthFAXHI3GassgO\n7uzMQtDQBmWctCtVgeH9t5bzj5QrB7A8jG7lpLUo7HUGtyesfeg4kxHJkQOj\ntXQB6dj+JNF1LgroNP5WqhLt3omukD+XWypd3O3NYAL3vlZFKfORuDwkqpeY\nAo7vC/n89kXeIV4oS9WP7cj+mZGI8mKPs6zdzcluEGlXBn9zImhFciho7hdZ\nO/Q3Qq3cO/J80IUb6y1Qozzu0x83bDokkFaEvpeRLxdcMZqqqWchtMVOJVhB\n99BO\r\n=jbln\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"36200e7acad50905888cd5fbe17075663a96ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e6f43cf44.0","@material/base":"14.0.0-canary.e6f43cf44.0","@material/theme":"14.0.0-canary.e6f43cf44.0","@material/ripple":"14.0.0-canary.e6f43cf44.0","@material/typography":"14.0.0-canary.e6f43cf44.0","@material/feature-targeting":"14.0.0-canary.e6f43cf44.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.e6f43cf44.0_1637602507321_0.4847800539957805","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/form-field","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.39cf14bc3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76fec0d6fedf65a510127a7d9a2c57272d943edc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.39cf14bc3.0.tgz","fileCount":33,"integrity":"sha512-ma951qZRlNnhFizT3gmYu2yZ/IF8YNCv5qujieu8vK5kPHa+ozBpBICsHHMdkffawTi85AwjMK64J7mLXXXVPQ==","signatures":[{"sig":"MEUCIHJfb7H7so8PivvDJ4uy4dIIc0nP43MEurUwU/QK+ftOAiEA90OndNvL9tOnWLKv1sMR5s6XkfjTtM6zsis997uvSU0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCH+CRA9TVsSAnZWagAAeEAP/RXf8d69UG/yZDsQziMa\njWZ7rNLESZ7t9WupKHKaRfQTHyCuAR9BQVyBVLe1wACsLVvlQy8HvAN3kGks\nncXJrQD+f03hBM+X8ZR5ogl/Yyzyks/Zm/QYqH2J2otnTCqOfDFZYUvQQaGl\nG3/lsdoREj8C1bHxmvqLFUtQr+GhPakfidEgvlb+YbIu0z32244Ky8DyBx9x\n4USyUTB5xPBBLgi9SxS9xTj/QitDPJipS7sNOZkwn7Z+wNK5fm4cw5ARwhC6\nfyxmk3tu+HUFatYbPZ0jvYs0jYLvtVDaHWEzZofsgRMZJ0n+5QQBv3UJxwdM\nFlcIntWVCNqk54t57ir+yd8NkmOgrwWZCeyEBiA26PYRyEoCaQo73VJUntxN\nCWW0ndIRPPY7BcePwJALBO/RvSmwkvmZHpTNFAgP79nFytqgBMdj6LoXUvWz\nT/Y/5utpkdMkk6xe/1BCFhmoE0hC/fDfkuWpg/m01PM+Mv3nJzcasQX9vs2Y\n/W+7mgWRPUD9AORCxJoYAcGQAlYHMjUGC08KjaPNHmSeUihkvnvR2qYOSaLX\nxqoVqZpPHEoGXc6ms2mjEJ0Rwl8HPp6BqYJJbqqPnRrPw/zdqZISE5CGTRbk\nWiMGXzKA9UHthHZAp7fkbtiloxFHvsdsvUEg4Ussjn+TOr7Cn0+qrPRsJexD\n12FB\r\n=NT3F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7a4dadfef1095fc344517a394b0286ecb59751dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.39cf14bc3.0","@material/base":"14.0.0-canary.39cf14bc3.0","@material/theme":"14.0.0-canary.39cf14bc3.0","@material/ripple":"14.0.0-canary.39cf14bc3.0","@material/typography":"14.0.0-canary.39cf14bc3.0","@material/feature-targeting":"14.0.0-canary.39cf14bc3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.39cf14bc3.0_1637622269778_0.10169201386479076","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/form-field","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.93134d453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3f4519b51e82e323576303962f12427366b89b6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.93134d453.0.tgz","fileCount":33,"integrity":"sha512-WkxCk8AoQuCRK4hnjOi4xfUYt8T0ZExN8zzKcr4r6F91cnFCsaB7YgC5F3E/tqXhyNQ34iN2MkbpezAtcwPxVg==","signatures":[{"sig":"MEUCIEF+DHdw+uRFqc9EKIbThtCB4u1VqgjM2zf36KW7O1YhAiEAu4Atl+FvpsZxsoJRBy0pFo+uQMJZzBlQWLMBc3e+fPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQsXCRA9TVsSAnZWagAA5YAP/27X3UrMXJ5+oRWUjdPm\n/jJmYZ4rbDHISH1D01MzLGRNTPKeO5X7K8EnWjkCQIdhfMXly8NV75cfVgqb\n7RJA57g63MSZgmdHFTMH39VDoPRe4oefWiqARN0zx4ufUAahWBcbtZ2WN1Gb\nVrQylg6PKyvNCP62WwX+7mRa9cijxuEbBEctL814dWu170UDwJHMAMIpF6eW\nVlluEwlyNBNTyVrdWQcpySp8vgT2Fjx3WZByzxDhy1uGmNvggOIamrB7bVE2\nsN46sa2llg6izxFUiihDnHKFU1565oeumkRA2nuGDhi+9OjYJkvLoe7Agdpj\nesqjNE6g0+cIQJLyrqAH2rCZPyQSUIFvOqw62So3xNHYnwsGhq7uROpgbSoE\naMWMfJTjTLdXiyy6Uf/dpEvhEzguMyMKxIeSQ4KycNzR6EEW5JO3I6DFL1ls\n343HJAOaqXrdM2IJnntZBKkJqVc61u2WaFK8dv14K4luqqfZjJ1gHPGKvxqK\n5rNIp+NrNO7ezQ+tYcO+7pt9BTbcSKKP+qKLxksrWuNKoFvSZYTa8USnPMaI\nlVfkG224+nudjeAszxIxaEf1j+hp/fniZqfh10Y/IzRUw8fkPgd/NulvVrCo\nQZi2y1gefUadM/grBsNmRHEY3dj2evjeFuWy7YsjqOyuAgiSSK9zNswhN90W\nQSBI\r\n=rW3o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f37d4e46e027a3258621f6950e12796013661afc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.93134d453.0","@material/base":"14.0.0-canary.93134d453.0","@material/theme":"14.0.0-canary.93134d453.0","@material/ripple":"14.0.0-canary.93134d453.0","@material/typography":"14.0.0-canary.93134d453.0","@material/feature-targeting":"14.0.0-canary.93134d453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.93134d453.0_1637681943723_0.97509150823947","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/form-field","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.bbd11268f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f60da5b2d1f4a26ed846bff58fcc68e8f581462","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.bbd11268f.0.tgz","fileCount":33,"integrity":"sha512-ba7EQcNmoxVKJCgXcb2nI8paOyz3BPmDYLQcAf9GEFN2NX3iHAesWsBO+jtvHu8jgBtO2bj2m7Lg33iYH+4r+w==","signatures":[{"sig":"MEYCIQC9OJRVfseWKPhCcgYshfqzOksaL7/9+cnnUikO+BY91gIhAMZdbbKkUgnUrwgZh1kb+g6j37zKSNeG8XZLbB/Mjjtw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWvvCRA9TVsSAnZWagAAR+QP/iDE+P38CdE/ZyRBLCKy\nhVg8NnZbum3RrHuPzDccypys8GdYAjSRjM/jUFRmIlqLAqWtFOcpc08JEbMG\n462HmLOPqFg+PcbscmsrIM1AD9byeLbZeB6HuaPVcAPf3yO+lIYwW87IuBmy\nBAaroCtzk9XNhkiiYggIJDLEqHN5OQsy+4DuW3f5W32N+XJxwVkX1i3S8L2G\ntA2H+BFMiaNav/+4cRTEJdVEpQQGen222zhnCyJShnSW2YbtTyv4l0G+rlgo\n96tou2RnR/ZSZ02aYCC37xxqLYliWrNlz22mqLsbiuIjDjGFp5dwoZc0oGvK\nhsqKpbsMjOG8jnsYqqxphWhNFn7qN4X7Tv4L8h9I4faT0rv+j9ubBZqe0/yR\n8Bsoa6Oo61CAiVxvUm96TK7yekUYW7joc07xSxETAoPW9lDk9fPkKcqdzpSQ\nw9Fu43J0dFXFHuOg6PunNBeqsCa4NDL4KIuGOpdF+JUPv7QtqHf9eD094jJK\n5djg3QmbpnVccgeQehBgxI6A1sfUzkOU+GDd6SJnIPV5qQUOEXXGAKjwb1PW\nzNzp8CphIzDRMtG0AMhi10BbR/CTiWhq8OHgNzFvx6nU5z6y7WpPjSEDBjY6\nZ3Rd3D4CO3abmTxqhJApWC/Cl2pnHS2KTlqSEd4j0wBYO/Kbm+eO5WkM6/Ig\nTOgH\r\n=Lu/R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"46484a77ecd0c6d7b548301f4e92325ffc4f8010","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.bbd11268f.0","@material/base":"14.0.0-canary.bbd11268f.0","@material/theme":"14.0.0-canary.bbd11268f.0","@material/ripple":"14.0.0-canary.bbd11268f.0","@material/typography":"14.0.0-canary.bbd11268f.0","@material/feature-targeting":"14.0.0-canary.bbd11268f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.bbd11268f.0_1637706734974_0.3090633703172667","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/form-field","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.3db9c4d3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5b6de55b0510332ea4fbe288e3cb67afc71f2ae","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":33,"integrity":"sha512-jjHO7Ymb+yZpGOr60NXmsMKh9SmYGVd8kvHjAL/eN4KaMlZKOOBhzXurkNNPKbDDCEnx42KGrIbm+NU06nIORQ==","signatures":[{"sig":"MEUCIQC9zRNsH/t9qKmqtIgwlbNxDtsTIvKUuwLpy/brFE4ZgAIgEon0erro82IF55VNLtkH8t76FhrQMQ98bb/x+rXL0vs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlw0CRA9TVsSAnZWagAA3uoP/1ORn6lhw9bUQl/9owf7\nGPuzQcgu3kR3DprcnH+E7KMxLQMJ/MtkIZ1KFQ3mTA1Ug2nOvLv6Yzx0XiqV\n30fs1jXlC1sz7BPA6QAe2ax0Il7tm9CLbQtSDSAsjmPqOwkJZNiGuZRDP9kB\nbnIw/UiFnyHWSZBlxdRcyDB8a3slOnh3pfQrXDOS/iBWoU4Vx7Dg7FIIFxZ5\n84x7HU65pKIAxbDlfUHVMDWOVeqrvD3b3UP/WviG30bbhTuqmOcePwudNm3T\ngG+g30AGz78LuVDv/xa5Q/LehXkq2ou2Iz8Ibc5KyhuaOoITNfdS9VxMueYY\nJIBEyC46MPve6Rs+YYw8bqaLX0sQ267Dfu1jZklNYjwTq6kwR7UWydgnc4t1\nFWuhZtytj4biuWhX75GYA2lI+I74vXfnLeZPWyqPf81QdYkBluFtAp6F2p4B\nVLuYrT+YdxpLSDveNVEU/DZ/wB4zCFwbRNVsbZuL6lYcUjeRxC1eqMJxldwI\nalw7Y0r1VZbU0Tv0fR15jOcT6FgsuMuHDSr4XUagbFe7NNchpMnfdfh+7fjD\n0zXELKlnZypGhjYk8+yWvIuNHIjqI7rbrNaSLDrynMsvybskrFJxMlqGYQVE\ntiqAQZPkBeKVNDfL3cTkcjgpF1f9dsUchvnysaznMMsohxX//DfFHsRqp5l9\n/3Ys\r\n=eqUq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"61e9de8c9bd6ef83a5f0949cf53ce4a8b689f158","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3db9c4d3d.0","@material/base":"14.0.0-canary.3db9c4d3d.0","@material/theme":"14.0.0-canary.3db9c4d3d.0","@material/ripple":"14.0.0-canary.3db9c4d3d.0","@material/typography":"14.0.0-canary.3db9c4d3d.0","@material/feature-targeting":"14.0.0-canary.3db9c4d3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.3db9c4d3d.0_1637768243951_0.15838187134870596","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/form-field","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.78305b6d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e6a06f33a3d6ecf1876160be3ff0ecc3c663d6a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.78305b6d5.0.tgz","fileCount":33,"integrity":"sha512-kP9uGvgR70j42IDWPis1miNlfKHefaz6QWkUIsZhm/YfnaYGihvBJO9dcaZGCGHmo6Zs+zLrMZFrfrN+IaVsTA==","signatures":[{"sig":"MEUCIQDyPZVkEq6gE2fKAEe0a4psVStuny59EyZba2x3n7lP4wIgShPhfOUFEBNQdWmh4MYDSfVMimiD2HmsnPMmJTu5N6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpeOCRA9TVsSAnZWagAAOY8P/RwkwlibvrINJb6k6QW0\nJPfLPXcjXN0DI6a6U7p7HLalANpMQlj1tceHLwWKmJctTvLAx+2uqn+COhYb\nniTJZy37zXJ8VWX4K/9jf4kriPamciNIu+hMJ5RSo9Wz+9pwvR4qmr8+Xy/+\nSFQ0ncF8+oHhVsCQ1sjIvl2liSxIBHdc5D58owOpCluiZmr9tq31b9ME6V2R\nqyRxvSc/SMW5fF9SRtFj8qQup8nGXy0elhmEMnWOfzuIrbkzJNN6ju/Me34j\njmv9uKbsqi9YVs68iq6yw4e1ZoNA/AXjAGr+z8oA4sCd+VT+OhLT40+0QzJ6\n+NGRob02p26yd2P7Bslw1fBLvDmP4hOXRHzaRYWzwc6562YiLHUVdFsy6QnO\nErySgTqgCeRgT4CQqLb6uopJ4/1vohYWS5DHZWuYSDpZzJ3bV69OJfS7b+TA\nfnFsefuZWqw5l1ihQCo5qdAhOCpQnJdOhp5lX4neTDOa5g17bOGXi2+A+Yw7\nitmZq1IMzWW0rltNsibM/Djev2+kOqfbf+Xmkiv6hmHcpRNxxFqXzA77+Gji\n5So37dnQupRexEIvRR5XGzkllinVqHKvupMv0VxSD3t8ccqWWg2nSsJKOk1E\nb8npaQCnUKDj8lKLEa4Q+HCOroU6a/ci0KZigWcbry9XkfkEyyFFfueUfIab\nLv5c\r\n=s0rR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2885de69eab36903fec52b85e7001eb561624eff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.78305b6d5.0","@material/base":"14.0.0-canary.78305b6d5.0","@material/theme":"14.0.0-canary.78305b6d5.0","@material/ripple":"14.0.0-canary.78305b6d5.0","@material/typography":"14.0.0-canary.78305b6d5.0","@material/feature-targeting":"14.0.0-canary.78305b6d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.78305b6d5.0_1637783438388_0.09042897210394307","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/form-field","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.43d08ba77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a41973fe19bdac156ee8065493c368347fd2dc16","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.43d08ba77.0.tgz","fileCount":33,"integrity":"sha512-wccBriNblQhQscviWOblpK+EqpEiPwqcbRysISMO81EYmG4TvbtdpjSVTrFXgc9CqVylB22f5euapPof8ahMCw==","signatures":[{"sig":"MEQCIEfrkMmstR6+28pev5ax403rnlAzBk0+0koxxdNDxd4OAiAApe2m8Qp9RoVpr69qmHnrOQrLDNScKto7GN1WRnbYyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqwDCRA9TVsSAnZWagAAtm0P/j4R1iWwpPtLHy+14Kb1\nK1AiKQCO4sgKNMA5RNB+EE+4sk1KiL/5mm/PgwdOQ5V8hmCXnOUHRQdUy53S\n30hs+eQPI6k9OENdsJ0iCMD/UfqbzxV8tQTEcbEMAOB/bZn/ap7g3DHa8qnb\nYX9ksg0dHnfNMlmw98nPWRdYlDikA1b1EpOe/WRJQnuOnqLNPbrKZR7jkcst\n5yc0/ohUXIV8ufDYp+CK2Xfw3uG+9Vd0Imhmve823Ks6UR8phkhAzOc5/Spz\nsUhQOpz2LJoszaTOH//C8z4iqUYTjgaY2COGXvHWGgrDqRTSAakl0YVOcIb4\nr31lh4it9rLcw2egO8IMyNzSJZivGBZbRmReAfiUgmGCeunV2NMVDt1oI8QB\nCOIhyQvG8zJPaepzVOvekLAXIQ0MxLHr4C4DhYG5so7YkWdbVUM6PAVABeLz\n6wxHBZUrYbfh6FU7Strn6sAWEnXLRDFr45gtB3KEABTdSS+iUNLypG83qxWS\ngadKlGw4TzarK/UdEjkg7NkPqoc3W/EXb4ZCzf9ERVx5MVE27176MYss2ujq\nprmUxSNI/5UVHJCL00FpBDAlUeyAgqvxpnMzSfCgG3iTIaW3eALimDJqoAxu\nMsb9K2n3IRwiptDLh8N63EfsFheS75z/QvoO+pCMaRQTUO2YrxzLDUXXJNmR\nODWN\r\n=aHKI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d1929fe60ad2c7ba249562f1c1702898df8f04d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.43d08ba77.0","@material/base":"14.0.0-canary.43d08ba77.0","@material/theme":"14.0.0-canary.43d08ba77.0","@material/ripple":"14.0.0-canary.43d08ba77.0","@material/typography":"14.0.0-canary.43d08ba77.0","@material/feature-targeting":"14.0.0-canary.43d08ba77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.43d08ba77.0_1638312962856_0.40727602919732675","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/form-field","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.17a072535.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ca59e119ee380b491d1b65824fb9fdb4f74ea9f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.17a072535.0.tgz","fileCount":33,"integrity":"sha512-bw33DEbAqEpSwk/Kbd0McVt/xEsEmlsudR7u6k5v3FIRVCYrqCL6ylzCnmlFnjMw75+1oFhzXv3QfvF7lFGrJQ==","signatures":[{"sig":"MEQCIDY99uUkNup26J2Q6OIrU6yw9HaODiIsiMYwdjWOZzCYAiBHkEhV2tMepelzu9ZHOt71yWffVSu3/1BkI86JC8szpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQrbCRA9TVsSAnZWagAAiH8P/3t2yoWpZ/UwxPNWrQrN\n2rI0sQrXbrfmmgSeSCTXfW+yOfrdT5lIY9pgCNWOY/YH/9ZL83yjMjCaggEf\n5FBSd2v32fD6DAQUyMh3h80YCPuYdr5PyF4wiSxyR6UzDsAIik23U1Cfklj0\np8GPqAxe8P0LpOLoF++jbPn6omnJc7A28QsJ/2WOD8QnZcKOGrW8QUs69M8U\nVPNbWudsunorHRid+766jWClYLaRn5BoDKYHzkovarv5QPcH0fPbW/Pgj4lw\nkACHz66TZyzohFnK6VflurmPDLEjMCW48hZh3LLKX8iAoqsI8oajSkFZ721W\n3m5ZjrXtTqGBkgZM5dik7tfod7UI1u0cPpUzBFIKJt+ZuL/jvbL/7ImTsTzx\nGtsS2DdHND4gmAhykTiViT3o0kjvSZec4iMjwlTxhaUP8iNi7WlD54F7ucDz\n54wW8HCddfJStuObsxMgnFqzJu03uvYB28o3qsdQRguNgPpiZzseEiW/5Olq\nZxP4xZ6NFkhkz3bNFVEQlQVSL00g47Pz6HyEUj9NYzGopRAFF6d+hKNVnULv\nAecoon4lzkXFDCVoar7+XUz8XzNam8VexNd52SD5xMKh78jI5S6Aw3S+ztbS\n4sVRRyXxSyqCnktZvWQfkzIpI4vLI2dh+H4A7n3hkiLqvNq6YTMlBspnss5f\nNz//\r\n=Dj18\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"317cda93b55159038a12575fec5c35e9ff5460a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.17a072535.0","@material/base":"14.0.0-canary.17a072535.0","@material/theme":"14.0.0-canary.17a072535.0","@material/ripple":"14.0.0-canary.17a072535.0","@material/typography":"14.0.0-canary.17a072535.0","@material/feature-targeting":"14.0.0-canary.17a072535.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.17a072535.0_1638468315217_0.1987187469147842","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/form-field","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.5d809696c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f11720dadc60f5ced04a177109890933ba3f0025","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.5d809696c.0.tgz","fileCount":33,"integrity":"sha512-Y49wE3lQFcND5ODzRHRMWqtfhHDj74ONSWAN5VvtSsqZCXeN8tarCQfi1qklwg6GR4CvUEFxwPCDgdjL1Gd2mQ==","signatures":[{"sig":"MEUCIDFQP5pLkAdpNh6e9IVnfh1h9doP+8nNojkYHWms9UqhAiEA914cGnoEFUFwXPT0FViL0SgCAfzg3niL2l56VZvd/o4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO74CRA9TVsSAnZWagAAatEP/0ZAM+WnFLyNOZyzi/9u\n9k3GxqA8bLSqzWY6pIiYNdMLk9BNHGVLUOhbpdizY/mnNKNe8XEHcgGRUNVH\n04nAhthFMpkE+rM7ae2DmuudTOIpWetPkDQ2XE43dJon93j5QPVoqzryBoRc\nSwDqxoOHYzDzyOAVQJERowzTrdWNYo2pDyVkmMEH7ywniHqi/aROBGdjLcy0\n5VA2AvNHV9x6UAFqrDT/A70WQDKNhkx8LraE95TeuBIWg0OMRIErbH3qPfMe\ndaA9Nbz5h36IDgIi07XTAAmW1AF+YBYwRu9w3stlSFBEH5Z9+iac7Q6zqjw9\n+uJWp5OpZaWWcvSEjFFDWnn/d6x7Er5PCpyH0BU+lqS+evjBZayAtQA+642b\nJWUUY8SEOOl2lYxOhNi/89OevVy1E85VgobLIxWGpNkoHxRaZzGijvaboXVc\n4pNT67E77cDmiR/NDKn+l5yyYLzYMcVkPRAwSj/O9s3d4M6J36OAf7nFbhoQ\nB9goBxBy/OClcElhGolRwdpt/DoNcqiw0wnt99JVL1Xj5jKhLPGu2PXlyjun\nwdn2/iH4TmA2CIQ3S/Ve8Pew9AjFlp6ojHdxyKZOSwlo2pkGCMXpc8Bal/T/\nkae3gUchochjsl32jKp5FzzONHL5KBvyPzFFgva93mTkwPwuPbgb0FPYpL5Y\nmFdk\r\n=8mhR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"955aa3e4252f722f096ceef387b285a197760b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.5d809696c.0","@material/base":"14.0.0-canary.5d809696c.0","@material/theme":"14.0.0-canary.5d809696c.0","@material/ripple":"14.0.0-canary.5d809696c.0","@material/typography":"14.0.0-canary.5d809696c.0","@material/feature-targeting":"14.0.0-canary.5d809696c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.5d809696c.0_1638985463726_0.94729313155883","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/form-field","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.b6510c8c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afa14e679ee4f47808c2627d0a210522bb3a1e65","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.b6510c8c1.0.tgz","fileCount":33,"integrity":"sha512-x9bC/NtR5WvbsrFD8rV6q9psU52caReLiEigwQWjjGVzLQpYT4vmu8Aj9viIJMYkFD9JTEEPByauYqnh8Pks2A==","signatures":[{"sig":"MEYCIQCoVLow+Ukk4QvU919SgTkeLIBKWHBrQs/hdjUzuwXSkgIhAMDrRr7e5QzLHJ/VaCDtb61yM+FbBA3GidsFv2d1cK8w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPQjCRA9TVsSAnZWagAAcmUP/jcLu0x3ZSK+oWmq5ZiD\nD9nmxQ5LmvTRkUHMCKbpICUDtNj1QYWwooy2VsKzZuZ355MWqLybuJ7Nv/c8\nQX4iZAYusTPwPnR5GV7Z7qVePT3BczDCxxII9xz26mLPTNAAdS3B+HnE2ZFE\nuusJuqLjtkiKsFSkf81K3fmz20uZ2Ff+9w/Yr7J6DLdwshyLdni6Se66RO8C\nbjhRlv/grxudKaaOHsMTohOoc13YDC8jq/+8kVh6WbANEYH8M/nXfVMtMi38\ncROBbCXaLilsYXs6mlWYDA5rycVj0CMbLHZ/0swyzPHaX4DWqw3IMkN+rbdf\ndlxy/Q2rRJoL7oLVGEFAWEYIKMIhtGBH04yrOvLf2BZrvB/r7BxQE33EizdP\nPHw4YQCjOelnzIDdOgwqd29zNgrAZwbsRdJ7PAaZIyQM/JrCAHTvoEeHICUF\n7nv9MjEVdjEj3tQt1Bq5PGAr39iCBM0ZesP7vJUOF96EONV0yCM/u4zu51LW\n6XqcycO/YklBHDZMCoV9DLbrb4oBWItQtz2lkbgxGU1PKpGWwh2SDgOMI9G5\nWqmA+Jt3f7No4oGkdPUJYpLfFiqcC/mGxSnWF7a5/alq5YalkCK43Q5Pn9Nf\ndhzzKM3yQQD4v6somdtIJsoBrKabc2iO9qrffBI/81asXwKydoDU9v7vq7iB\n9YIN\r\n=EAn+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7b9b6695d55be857206c67de94ea9741aa48bb38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b6510c8c1.0","@material/base":"14.0.0-canary.b6510c8c1.0","@material/theme":"14.0.0-canary.b6510c8c1.0","@material/ripple":"14.0.0-canary.b6510c8c1.0","@material/typography":"14.0.0-canary.b6510c8c1.0","@material/feature-targeting":"14.0.0-canary.b6510c8c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.b6510c8c1.0_1638986786808_0.5653672640343896","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/form-field","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.f460e23da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3acb19dfe1abf8dd94ed546c6c69ff58a4f066a8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.f460e23da.0.tgz","fileCount":33,"integrity":"sha512-jrHuLkJc8TEP96oDkA7qI7kcqWvnECSoJuufr9zqn4pKhvDhlt2YD4GKXFYzgXcm1J1H9WZ8fIlXFxXdFfawGw==","signatures":[{"sig":"MEUCIQCXIuhHHQV5GhoyfAwg0M+Y9t6Jirmak6iuUGYC0mUWLgIgLUVh4/Tg7BSgGLj6eqaxgA0oJgqtPX7mgg/1+vxW3FQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3FhCRA9TVsSAnZWagAAQ28QAKQn3asuyYVWlt3aD++o\n2T0e5HMfndCWW/Ivvu4lUuVUKyXsiiUL48sEhGsOTxPKeyOc6CMi2xcpu5m8\nRP721I4clfsQBMix3y29ocG9B+1FtBVeGstaw2+Bh9ZE144GpmzmaRo1N1mF\nMfsmKiEz7ojR2zIHlkW/ZDoycrYpB9TnDN3OQFM2g9GS6YuWPhDd8vR2H/mf\ncgI/sGYjwHxvMYKKW9PILS4R9JDru5FSMWUx75SGXkM3zDpeA72O1gwWV5Cq\nAjuZzvsaG9TWlMFsM7kswpC6J788XFdP6VejcYIX48EThPamVq8ExB8i35cW\nm2/gl8xfeBon/sTshFXcJr8yYBs+/d8Ajp9TH60FB8rbVvOydqFMh55Otl7R\nZK7yWYN34xCLJoLHnQsgiMtkFdzJMZZaBo74DTyDQrZKMTzGSITeAh8fsLPE\nT3JLJZ42hHuqfPe9wQtYdBM6VYtD+ldssDXk3hwX5ilLVGBElHzciBWM6eZ+\nDcSfK9kg6tqucsrsggRSaTMBO+iJsE5gm8eJZxxrDVj4YTdBL8KnHSqRNA9F\nrwrAQ3lZlTyE902pdw5kItIwwBPk/qt5phrmiCZShAjR5p/KSLv7xbC3W+jI\n8PYC4Em97A1+rM/hyyWpGeUVHCYahsF2wtq59zCVT6qxK5aZnwDOaZHasnaP\ne5NO\r\n=K9si\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6d994090cf732fc4f1fb93f91d64e265cada1b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.f460e23da.0","@material/base":"14.0.0-canary.f460e23da.0","@material/theme":"14.0.0-canary.f460e23da.0","@material/ripple":"14.0.0-canary.f460e23da.0","@material/typography":"14.0.0-canary.f460e23da.0","@material/feature-targeting":"14.0.0-canary.f460e23da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.f460e23da.0_1639149921380_0.37403096391558144","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/form-field","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.7d8ea4624.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8fdf1439ed8d73594bcff5d1fd2892554532956","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.7d8ea4624.0.tgz","fileCount":33,"integrity":"sha512-avR6Kz4dDmEFLYv4YnZTLWVzutjUvIcmVQNZU3eF41fdVPJkEh0ESgux/hGUSjkky3eWIACBdwvTpkf6L9cI+w==","signatures":[{"sig":"MEQCIFwgjF5kFRGjqYUHM+YYEUfJL5GNa4LvTea8eqbXRrDVAiAnjzT71SnSLnLYTHgvPljQQggwGlJ5WtJbdTW78ek3sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6qYCRA9TVsSAnZWagAA9vAP/11iB5vpAC0e/9GwwNQJ\nyScj1u0JNVi4zWHi4ryjhgJTCfao6Bf+KgxMbowKFjo6DSp2ik0Ny+hsesTu\nox/rbhcD4TpJutaIp2qy5Fm1oliKQ9neVstzBt/uzMkbMZYccXQEx6sXtmhG\nLBXiLnt/Gpxpg6NfaTXGyzv6uytVP+MHhvMSQDKpMy72ZGK7Hf+mbZf3oIyg\nQtdvF3t+RxMyLmjoSc1cXYkkxcZ+6T/q/wlJjxIShQelUAaauzRSqtlWtvS4\nkqpywLR+HU2fTk+6fjFm+tKuegErMbod5WZ+sO2wclCYyWwgTKTkNMhIL8Ud\nPbh4efgT5vnNKNy7R46VSA/vfykhsOX+pplJhdWZA9c4PvnJC41s3BMfmRzN\n0AeHmlF/7NtL3nitPOqm18FjJMoRQ60h2GFgKkwomV5NA7nV1Wm3+ryd+KuR\nuLHl9A50iRiysekLZTEY0EgQhlTvLOVnowO9gRzjshWm5/IC0Fqsn/FvXhDh\nYSuuhhJPJWZQW70ZsZDQ7pAVThKRmCt8w4tO9Au2JifJ/0Onfpmhz4Wd17tL\nmyhDZbMFZ1APUQQIrq1ShXRGnmuxY4mV4YYIAS9xy7N/9RSKwRLmWggXv/l1\nx9lcg7l6LjrKNNHnQ53k1Y8PftX5AM/YPRew/USBmcPsR5lQ8SiOmQzQGIBW\nSA6m\r\n=5cdo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c5733baaefa11aaca3bd6f32fb2ac29c20894738","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.7d8ea4624.0","@material/base":"14.0.0-canary.7d8ea4624.0","@material/theme":"14.0.0-canary.7d8ea4624.0","@material/ripple":"14.0.0-canary.7d8ea4624.0","@material/typography":"14.0.0-canary.7d8ea4624.0","@material/feature-targeting":"14.0.0-canary.7d8ea4624.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.7d8ea4624.0_1639164568074_0.4816252399656564","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/form-field","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.8fffcb5dd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60fb14ecb1416686ae160e16e170bb9b80b44452","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":33,"integrity":"sha512-ltPMu3inuekw15W+6qrGpAz7iNbBnCKyvJPwUgP8pFbpfJefuTfqIJESZWYGlzs+k/Lm8xghPpYtSJmDn5FLJg==","signatures":[{"sig":"MEQCIHJ387jCUNosPV7Lnwf+ivtXEw3Vb7Jz8PJ6RbbS0472AiA5OlXBhiGLnR5CIJBGtWTlfjMLoknbQVlGE6czMtIV5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFvoCRA9TVsSAnZWagAADu0P/AhHdOso+nDmToqsIvVs\nnACUJgPRd6Tt5RDy9IqHf99PmE63gPXafsLm6x3C9MkPIlYv4YeKYTfMVum6\nctQbKeVvxDPwOcurryJUSFv03FBLiRugs3AExCJAWdvIClYeKvsEJEi7R8yD\nbfjx04Dy/Ll+sFQ/XJmOGRzJqVVDCRccdGXLhBj36s1yBKuvGh5t1qdHWINv\n1d3njSwwhbYiCRfqWBvFILm6ObEvewvTzqAEYKw6Og0QT/++YM4OEul9wOIv\npY0QusR4scvO+EPpn6+FMwcmjG1kYT3z/JS/4tkB/XjDuhwoUr5VcyrxivDW\n9IVHAuKsbXCK665VCmu0AjvBtwba80AII0xqOpRaVBRnE6KsKngHcQ08KOqA\nf+wIKRpppNvzvpLsYWh9bKUqUxA02drUi8CEfC2gi0xkCJtGiA8QP7dtmjlv\nLnjZ74EQsDqsGXJhJw4oTuu8koCTrR4rJozrvqvVChLsG7j+2xYTc/gc8VQC\nUaEuvVy98PR82bVW3D1+UpYDkj1L8BtzbONXUyaFLu9Xx5gYP4tkoh4toGgc\n772LVPKsPwD2Ff2QkQQx4yewEvqS0LWyH2QXAUVkyuagYGO0zPoZjqQf6r73\nW+Uj09KAMxcNA8Os2MB32cic7DnPrAwTT4xiOIMicS7S5HBwVWOUSroC8dKG\ngvvC\r\n=jVcT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ed22e4daefd7bb5e95668ab484a3a4a65793437f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8fffcb5dd.0","@material/base":"14.0.0-canary.8fffcb5dd.0","@material/theme":"14.0.0-canary.8fffcb5dd.0","@material/ripple":"14.0.0-canary.8fffcb5dd.0","@material/typography":"14.0.0-canary.8fffcb5dd.0","@material/feature-targeting":"14.0.0-canary.8fffcb5dd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.8fffcb5dd.0_1639472103855_0.2091112576007479","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/form-field","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.21e1cb9be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a02008788e7595cd3533fe1648c1b4e8512f8143","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.21e1cb9be.0.tgz","fileCount":33,"integrity":"sha512-Bt6X56D/w9VxbjBdCjKZEsM0TG/KhtGQIxLp5TRdZzJ7v47p2gjgACuO9Stu/ozQVZeWCR4P7mOGJ83lRvRqzw==","signatures":[{"sig":"MEYCIQC1bW+z6Dr8MOgPefoJLTa3fVE849BH7DnDxpwB/rX+dgIhAPVlRiJjqTBgW0cZLOMeY2UDkux0HCjb2m3+OMPLtzCd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPMFCRA9TVsSAnZWagAAuLkP/A0+CCq1M4720AxHwplA\ni5eMw2iW7StfPuGUuHJa/c1l+uqAgYUCxknqm5skGj+aqHXGdrr6PTZjFIW1\nVJluBppq1Pcu0oMB8TLSfv9uys65n4O+JzNb3UGvFt1oDwboHw/W880jgsX+\n4qk86+1R8sGNEGjNFFVNum/gdNSImzxP/KavJpZRsjCMfWN4zo3RSOQljMp+\nG3Mb0vv/RoEkJ4yKBQTnsDTb8XA+M7HPFf3PdpJlDSCiQU0xQMHZqeOTBqDJ\nouK0SjL00qtxF0K/m+/z+qxA5LMF6KuCgvn1lFifxrTByK7dpoxuSjKmMSms\n4+2YrzLuAaWJtPSZi69akjWFvHB5DEsONUHQVSZu7JGnTBjXAwZy5mLdY6f1\nhO7e+E8eoOR+nZYyCcGXFgIvzG4uR+gRjqAwV2+c21dpWXxZIIkDk5iWGMNa\nDLkV5s0YxystAnzDrs4Xw5N4g5r9/xacCBXC7WVsSehefn+OPpaMkgvjncRU\np+peN72L7Ve6HpHamfKyOh/NA7PaUVlkKwmkmSqGQmos1nbgNt+ZBBSQT9W/\nppNyftUT5XbcapXCNU1AYmnHdXdclXz4tVfkN+SAuJVwj7umMS8gL/WNBsFj\nNJkRX7H12+v9AItvqIczEVJKsiQFIaq4ifY8+qKp121hCbDFZApp3BqJ+UgC\n/02M\r\n=kmj2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"091bafb203d13305d394af0cb6817b1bf05c64af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.21e1cb9be.0","@material/base":"14.0.0-canary.21e1cb9be.0","@material/theme":"14.0.0-canary.21e1cb9be.0","@material/ripple":"14.0.0-canary.21e1cb9be.0","@material/typography":"14.0.0-canary.21e1cb9be.0","@material/feature-targeting":"14.0.0-canary.21e1cb9be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.21e1cb9be.0_1639510788974_0.3429966957153905","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/form-field","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.ba78e8724.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b903bf8b55503645b49eacd9bb529c08c0b8003","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.ba78e8724.0.tgz","fileCount":33,"integrity":"sha512-+KOD/mr83hkBknRFn4bBAtpFOeiAsRwBjsjnRE0OHtKtV0+V8IOMfXpv+/m+Ilcb6QSFKSNyU0dVMYd3DCGwPQ==","signatures":[{"sig":"MEUCIQDZiEjr7GZZp/jXklZ6yVPBflw6wmtpdHNbguxCya1bkwIgBmDLjhMq1YNM/aWxyyc1/54cDPwbRAztdvJ4H8/cEMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumhpCRA9TVsSAnZWagAA3yYP/j+Wzs6Qzt8l2WZtTsjF\nQHidveQJcCFDOVFYMRXV9nWUaAOsZk7y/3P+EO1LVJ6XQYoUSkTOJ3Co7T1R\nHMykiSmT9cB0DfoAdlmfk6I/0K8haPxRHiDQ4xFiLanaaVUQAwcpH+mb88dp\niv9RgFqSX1oC+Io9eeWsvyTbORpuimCjEymCKY9r255J98cP9baJ8CU7WKc7\njsP5UTXJj48tWlM1RBjHaGVgMGnRIGWQOAtr8ZdSWg1qnbCyTTiJq+bQDkmL\nKs5dPvDGLLBpk0FuFSX3JvHG+zSq22TBbtKuJGHiquX6lpmX/LhB6IDvkIon\nQEz8+YLM8cfyPSlkBMUH4oBqeKarp/xFxFXgflDvuHDG9vlbivViaVFIVazx\n7YVLsHYuecS0bXdUaKM3Llzk1mxw4+SzX+OhZKzFociA8vJG5zGLWob2E8qh\nXwGVS9wdeUzaYiPmhQBhSntRj1J0pRYVDTY76yln0ZreXxLGcko84m/hconi\nEkHB15PKJ3O6p1thi3wbZiiGK1NcW+AxXoxIjtTVBjQhcZbILQUBEko74zcp\n0XOYVdR9SYnRt+llVqbNEn4rvdLnYc+Rgqulg6wX0z01MA7La4K6VFuiTEFM\nD9Gi5xEiLrucFl3JfCNVW2E+kzScawlvZoYX/tcNvhh/a3YRNxHT9n1GrOHv\nh8VH\r\n=U54P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"396b66ccff73478ac662f95bc36087e71ae8d980","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ba78e8724.0","@material/base":"14.0.0-canary.ba78e8724.0","@material/theme":"14.0.0-canary.ba78e8724.0","@material/ripple":"14.0.0-canary.ba78e8724.0","@material/typography":"14.0.0-canary.ba78e8724.0","@material/feature-targeting":"14.0.0-canary.ba78e8724.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.ba78e8724.0_1639606377715_0.24938024423707694","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/form-field","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.e3e073c00.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd7e0933c0a397f32f57c59520b5a72968036574","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.e3e073c00.0.tgz","fileCount":33,"integrity":"sha512-QTLHPJz8QZLoSNPTbuvOa6aigOHZ5xjv5kvxWvN9ZG9h55oGBTQ7KyNG8VCYgw4dr77qxtD73Fu8k6tJTikZEA==","signatures":[{"sig":"MEUCIExyPvVBQfcteBpCz4/Yitax/oocrpcbKFULVuIgZO3MAiEAumoZJkSc0hUJ6fN2QFV2DkLKCp9JxwDUop3MaP9Lgvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPEWCRA9TVsSAnZWagAAPP8P/RI34HPNEWG0MnMxZw6z\n+GNeu7/2BVDahd7f7mtN1+Nn0n98LDZm6sODySLd1ALnnm+uy7c5vQjmltlX\n/Z1zaTdXuE7i1f0dENBbNFHDvCy12MN41MSIHBmYYKqTrSGEQdxGAMlhS2mm\nxlGTtmcry61IUOrnoxxmQisYmG0qe2cTJFk2+5g1VsDIGALUTXHV54QIDcN6\n9t+qdDFiXGLoy1PCklw+w270MQUcL6NS6jd+Xdp30IqcStGfAq64z+OokElg\nQmQsW4d+6xprPu9SQF7zW1kOF93xMk9Bgl2KUIhyFz9ysxW1P1kirwnA5zk9\nm3kuKszcg7WlVAVxvQxATZu5xdg1EkSxvFEMm5QdHaDuTa8FiUrMDrQbGcbK\nNyDHOQH9EXl05BA6goPSyVc/KsgHXa681Mb7baFtVX7Ox2uP0bXYAYwP/Tdo\nBI0GKA2hCRaFJrEFY2m87vMunuQ42Qu7hRzZL2U6O1WjxXXuyo3LR0FQOZKS\nkeqM7kEQCGhzlkIHf8HPAvUPgaFTJj1dhsHBxwMRK3VogBFN+1Mrpg9OKKRX\nCxt0CkHVyjJb5lVO1fVxaP+3g0v1/RDkZeFSRB79mJhvNFj35ZjueblvmNRR\nfx0j6Y75EuwrINW6LzwseJQZsGrKEePR/lLi+aCRcO+aYqWWzan47y+o6+aO\nQmEu\r\n=zncb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6ed0d4833cc10e9b5406989bcd66b072aaa259d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e3e073c00.0","@material/base":"14.0.0-canary.e3e073c00.0","@material/theme":"14.0.0-canary.e3e073c00.0","@material/ripple":"14.0.0-canary.e3e073c00.0","@material/typography":"14.0.0-canary.e3e073c00.0","@material/feature-targeting":"14.0.0-canary.e3e073c00.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.e3e073c00.0_1640034582256_0.6171039069948485","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/form-field","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.3366a71d7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3412e8033365e2f66bcc49b0b2aeac077d8f8a39","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.3366a71d7.0.tgz","fileCount":33,"integrity":"sha512-wMTUQwJ/vgqYT7p/gfyZeMqDdAP3fhWl1da8vKDohhCZLm0Lv4fzSw+cjHdhx7LPXYRcVpMGkpovdrTRvskx7Q==","signatures":[{"sig":"MEUCIANjf0r5wu+eccngWFCdFndKApHoN5e8skEecNe5/kIcAiEAwskFH3THJ8u6R++xbc6e5YFvT2T/eqole0KCCYhSn1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxrpCRA9TVsSAnZWagAAiP0P/3724hHSpIZwee8qMIEy\n+6UnYGxhxb2La09NE39RqYzI24P0yT1c2bCAYrJMXaTvhY9dMACqYuPIGUhd\nZ6in6bD9HraS6Yxgw9Yanabt0bHBN4B+t0Q9Ad3v9Buq3fDNLS50tCRaw1Zg\nBgvWchxIf4wDIq8y7eBL6zJNmZBZF0535zxn/PTcg6ErqzQw22TBKBJZTUzg\ncwO2QdadIPegdL2zatIMK23QbkYGodv5F9yApX46zIBdJGBiq9sYaOHJlzh5\nI4QKZMHZ8xmF+LT5Iu5F8ggQa63uicWcK6ZAMZlSwxXHmBxvQnLILFxugaQY\nyyW7qGTnYzvPg0Oe4LjsW0oXqM5nhgdrpV+7TkHHWU/XOnL5vkMiMopRaak2\nWSdDpwQmaMT8kDS6fs+qWfut+5hX+C1jARnwlQjSd53Fiq1wxsbykaub3Rtt\n8cSFUgL+i0KBHhVyqVkEzMAgywzcvh6zu3svlZ9PePgln0ckqxyaWVSq/oJI\n/MUtxncVelUndKSrgt3RRlpFZn1Y9TXHUI/6sfo9P2XY97T5rwDkDeVLOhW3\n8hgnyRYAbbAnszj3YVsiccQ99hoHonUI21G3sVurXXxZaxuetTeDUoKkEKVl\nkP9g6UZGn0bKOSD+gHPOrFQ2Jzet3wPQ1N5Kexq0LbkAhBju94jJeGtVO3AS\nOOWY\r\n=i+Vi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"36f8040c2829cecee06f5c8f52e08e9cabc9004c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3366a71d7.0","@material/base":"14.0.0-canary.3366a71d7.0","@material/theme":"14.0.0-canary.3366a71d7.0","@material/ripple":"14.0.0-canary.3366a71d7.0","@material/typography":"14.0.0-canary.3366a71d7.0","@material/feature-targeting":"14.0.0-canary.3366a71d7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.3366a71d7.0_1640176361174_0.5633281433295527","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/form-field","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.c047f7c19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0a468246efa1f7cbdbf7bd7230ac9f8c26ee887","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.c047f7c19.0.tgz","fileCount":33,"integrity":"sha512-lbBpXpYpQrm1RUjbpBzbVs3VOabJ6WKkI1nz4ViJh9WD3pogU4E8pVVad1ufTwH65rYBrAr53g1ln1qjTKhGSA==","signatures":[{"sig":"MEUCIHFLb5Jodf0zJj6iCJ2B742HqeLAtrD5Xg+QDbyR/0V2AiEAjaMfp9whQbMnHGyHCVfRoZ/4BGlN9p+YU7+pYPwT5BM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1cs+CRA9TVsSAnZWagAArJcP/idw/6t3Kqq589vANH1p\ngrHu4Rv5nSe3FpkeP6QL30vo55BnZIMkaPgQ3G8NMAHEJhEeNuPAYmxyhMb2\nOKAtEhQv8wCV4XbJfTGiW1DCNAh5dOvVSe0kiPsn+mpMKOyhfLpApQ/I4olR\nwFk6Sm6WKQnTK+oR1v9BMxLl3y35PBfljWkyhpWmTKuQoZN1Ap036Oxx7Cvf\nCeVHLELcWx/n+xQH13VRpkQtjWfFygA7q+nH4NJVGBM4s1W18yc2Ia+589h5\nDLsMi3OK1XEKCjmc42lEd6UKT+9Q+XfYO7fFi5aIxG6dX03r6n9CDtXb93mo\nM90t+i1c2oIDP88eNUsDbrsRBtpo/mFQmkJaFGtnb9q/JRhkXCcSNugvWnzX\nl2ds9cnrNsIhztWrloDCD+S+x6ZvlaDewmZXMCXjBJY2V2F36rOP0CSZtt+Z\ncoFZGf1Ptq8WXqULf0KVtqB4m28rvdYM80GTmokaExC4TE2cbqJRHNT6vQY0\ntbR25msCOGsHr8LTSV1V8VIMI1FW0GxbCzt3w5oL3g9XRz82mfCwDJh0b20D\nDcY2Pr4XS839VGlByM5OxsOjcjBx+UD1mVwWY2O4n1DpvwPA3qp1WPRuyC7V\nYzVpRcXcj4Us5rflzZVAgozAmw6dIDqRfG185kmy0ebpvsQfhnQpnQ2oDc88\nPBhe\r\n=pTCG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f89c0e152ba1bb64d7b262b279d38cf5d93dd788","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c047f7c19.0","@material/base":"14.0.0-canary.c047f7c19.0","@material/theme":"14.0.0-canary.c047f7c19.0","@material/ripple":"14.0.0-canary.c047f7c19.0","@material/typography":"14.0.0-canary.c047f7c19.0","@material/feature-targeting":"14.0.0-canary.c047f7c19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.c047f7c19.0_1641401150229_0.8297483057746888","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/form-field","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.05db65ec0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"520ee6e8789cf30a99e078192c5a19be861b5e0e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.05db65ec0.0.tgz","fileCount":33,"integrity":"sha512-EZ5IWaFBUbkEUMgM6c+eRikRXol+HEIl7DOVk6b2kM8kBpkVymZaIGzhk3MpmU1bh79bRnHty1wSQYR6qjMEoA==","signatures":[{"sig":"MEQCIESU8tvKlywPzyv/dkfN0nVb8e2SptsFgOdKX+NVwvkUAiAX3/OonVLd8Py9LQo30qlq6gJ2RRnyJAET8m7P2pPRSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yNmCRA9TVsSAnZWagAABs0P/0hhwvqtmQJPHEO/SlAQ\nEwS0OqcsonX3+KkVltYQoN4cO1nfjAQc77QTQMJiCcWzmhDxNgtAawpgASL5\ns/NkWxjMuViKX+PAXVQybd5wS29xuuB4GkHHtWPS8lF4a58ABx0+QHVFYjim\nsrg11z2R6l24ulMtWSbeyFE3aB0vZSOQLFxsYOLEqDW0U1GlxxVJ832ImgO3\nKYMzs5Vp16reXx1RihDuBoVyQLPp+Mwc4xVOChigFEWYhkJxSAM90C4IMkrr\nZQDvHp4DypjleoH7rOOmps1DEOc+re165yI9Fa8Hv4BqCEbxFCJ9nsK/bvrP\nQ7zf18oy/eJKqECNJ2TaL60ZDm44pJAFFp3MLCHTZ3URkvbTo9YhIUK9RHAN\nwOxrhXcOS1ikl6wDGoTHvBlfLi1f1ID6LfvAGGPabgxxP8jaou3shNzQSXOq\n+NzEUDHMZ4lzdn36ll/CPzYrSOHz3nobLOZnAZ8QtTmXYIlWtqZoWP2/QCAj\n+TJhxbMEhMyfvIIkxPfXR5nzGkiIxh+/HkZSRRvuL4EJrG7Q4eV1woTFno6y\nCZbOTMmNqMLRPngag/Ak23G/SsAWsn6N1tIqlH1BaLarMS0+W03kXPUYjpJI\no23HmWF7sqID/6pQe9rnH2vCAz6reG4ZsXkyspT0HHBKPJQz5XvSBSkERwyU\ngj7Y\r\n=CYln\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4ee3c4fadb795ccabc127e2a968744c5bed23d38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.05db65ec0.0","@material/base":"14.0.0-canary.05db65ec0.0","@material/theme":"14.0.0-canary.05db65ec0.0","@material/ripple":"14.0.0-canary.05db65ec0.0","@material/typography":"14.0.0-canary.05db65ec0.0","@material/feature-targeting":"14.0.0-canary.05db65ec0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.05db65ec0.0_1641489253967_0.7116173036301108","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/form-field","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.6ca8b8f85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5c41df40288d6870159786d1983b5d413fd8ef4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":33,"integrity":"sha512-w597CaxyFqHGDt94yAV/qDgJxtbCr85/b0XoKAwA43N86AGg4Lye0HsRPUwHKNNquXqTJ4D2g3uLvtFmW0cGPQ==","signatures":[{"sig":"MEYCIQCtG04U21OO4BjyFN6WCuw1cRu5MU4YGNqr1NybzfhOOAIhAN5n026vp93N63LX0KgCxSLKqHwJHAb18DaNyZniaA7t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GPXCRA9TVsSAnZWagAAe+YP/j6aXzIUhB+SqmUe0kbz\nZ6rxrAzgjR9SUL4Aqmu2AdvH3BkY9SX4E+9ZYJNP+Oo9sNayqK00NDBPPElD\nMchfY/qtCsLrGc0OMyid/CkgNC5EPHTnW9qOQupAXBI7fXyBgoCpLrfuxmsK\nMmlDqBEMrMb0yRHSFdRo7/drGaGqXTj4/Rn4W/CIi5aMfd35R/HAg7pUhNrh\nPyyhXDNIKMCNXMIAK3O4O6lxBg0y66ha8m1r3wM2YX5WKDpd7w9f9XA8pQNK\nK/ZVAhhXT/Lss+CRO5PgfkgyedGRFrDWuUeWlymVgCTxnqEBTmNih5RM3Yot\ndBKikxWC07VeJ/rZgkMmm/wS0B7zby1I2Wu9k9LGenlvYdMiudpMnxcu7ViL\nZGd0XRpRkHgqER8VlU2GGENZP2udAEeUMqYohKqwbR89OVOyafHdjxurlotL\n54ccySCjDHE3lT/jnzSvqlnkVBjSaCKSSEfTvEqj8FO5a10rLTNjWKMek5dY\nKTcnIoZ83Q6hxVcOWkkiHKK2ekJKNb7VBVrSEUoHEZShY0dWqrmmMORQZPCq\nSDup3L3iC20GCXmP6iM7qCO25ckKLLRUmkCrXhp10QG/v5i51bfMrPOpq6zC\nIAAbM2gAaeDXB1ZtN64+kjzJonWDyZxPNqH9ABi4JkcamKOxgQ4aC01xFIWt\nzH1E\r\n=3EGH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b3237bcea052016fff824f201904a358e2cbeeaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.6ca8b8f85.0","@material/base":"14.0.0-canary.6ca8b8f85.0","@material/theme":"14.0.0-canary.6ca8b8f85.0","@material/ripple":"14.0.0-canary.6ca8b8f85.0","@material/typography":"14.0.0-canary.6ca8b8f85.0","@material/feature-targeting":"14.0.0-canary.6ca8b8f85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.6ca8b8f85.0_1641571287179_0.04736453051195921","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/form-field","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.173ee7a7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"912cf20709a40f1232dbd183681e73ec492b80a0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.173ee7a7a.0.tgz","fileCount":33,"integrity":"sha512-fqEh601pAGciljNOpxrJQts+cD/LS+DGbzq+rURwIu+weRUnys+Si6avIc0CeubOclf6lZw7gA9vOHumjgF8OA==","signatures":[{"sig":"MEQCIC3aZWZhMWTYPBIvSo0J18DltmdsCWDIg7dgvflv0QzEAiAVPOK2YQulN3rffS+y2Sawu2UeumlxcwqXGh+lqmTJww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GS1CRA9TVsSAnZWagAAASoP/2piayaEKzTh+Gj7GBFo\ndiH6cDAYW8+pHugGdziTCKNFH4aXSRWX+2+rdnJSjVp6cpkZDMe9Wwg3W/vL\ndz5ymakaQdCleAUL6hhS+mpGvLkKJbGgsBtxmaIpsStOUZiZDXZDv1+8Gdmt\n7dnDrG5a+U5cg7VGA4UGYmPdxT4o27N481y+9qoRyQXq/Gr/13W2OCPlWFPj\nos0k8jRJU/FG8ioZ4llpUAAlyiT/n3tQxsBbUkwMT5Bti1P5s9JF1PtVcGM0\nnQfXJklspHz9HpMgthywF4mrc2wp9cVsqkhBA32V91P/s7+kUDGt666HWWGg\nHEK24uGmf21OHqBcnb0JhvL+95jmqA5gzh7bL38DA6f2bjR+3RQIy8zax0LR\nwgTYsL+PMEtqesnc+rShyqWdAivQ4yVvraSmRt0pUeo+As3TsBoHJg1Hx+CO\nITwiCSzcBhe2CGKfFwKeGRb9VplsBvrw84kriUPoiHszVLwyTFNp+tzx3HCX\nE0ukhWtNfgt1Hzjf/SZLL/uaGShzlamIYfvzcaCBA47IlL2somsjmXt9Nv0W\ncKqWCB/SVb5YLTEvcBwb/VveTklUJMUtv5Js1zHxKrVIdT1ogwBnQvjTDdzM\n0GInrDbgvCE149KW1tlMMADfh4SxWMXWewJpuFfvh/tdqvq48dePza3DCX0m\nNfaI\r\n=t1ft\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f034f9d63d29784b9608c7c25ea586070efbd27a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.173ee7a7a.0","@material/base":"14.0.0-canary.173ee7a7a.0","@material/theme":"14.0.0-canary.173ee7a7a.0","@material/ripple":"14.0.0-canary.173ee7a7a.0","@material/typography":"14.0.0-canary.173ee7a7a.0","@material/feature-targeting":"14.0.0-canary.173ee7a7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.173ee7a7a.0_1641833653728_0.3705691352470788","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/form-field","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.b704e4dfc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f54e5adbafed2e0cb53d977acf344d02cd05940","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.b704e4dfc.0.tgz","fileCount":33,"integrity":"sha512-ZT58ppXmvjGZvO6waWbyEajr2jnnNzBW1fp3HvnOfKIV5oaYxQxYp7hsnD2gg8uZ025NNY1qaJhUksKycQDztg==","signatures":[{"sig":"MEYCIQDGfpR2+61qu52+m/hS8NeD5gh8YZJw0YzDuzPs4cn0wwIhAJCG/cDrC12Jx6QtKMFOjwVADo3/10VZqLXQy8j5btVa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3HveCRA9TVsSAnZWagAAgwoP/jlsUCVDtaENLBHI4Zy3\nOqamoIXA+tTAm5k13gp85bCrqctZhvNm3vBWnfQnwGpK2+qaxaWM64VKSsym\n+qab4QUwzrXy4IdwSIuNsuCE6H3AgPLU5vjRWaA/ztNpEZ6P8vi4YkpbNtPM\nnJDvMEtJIr1DiClk3rUQP3SQj9jJ00gT1BnlGAcjftY4wVB9j9mZ176dv+z+\n+bUWres/MvBXXa59xo8HWOKXOrep/izXtrpz/bN3JKAhAT7xo3Xnxb5AeqTf\nFWT4btP2M2lsGC66JsUtRwxfa0/mnsfKvlfHZUQ3b7ZOE7VRPIO1F2NZbfKE\n6vdck7DsSUKSWlO9Oe9Bmhw9mEHZA06hhG8kBZnI8C9k7JKqepzTwqLCRux+\nsIx3HrQkrbaeQaaMVa+Zp0Li9Njb1mycQUdbVSGHjoV0hdfim3mxGUWP8kUR\n69fQPD6N52pkG4wXvS02NGncKKT0la6zhwmsxc5gyVCIEDL3UBISJ6ZhhzLR\nPtrkgFnIonihV//4GixD961/9LlqBTJb0DNJAfn4rhguT1ZdsLI8QhpwBXgF\nkYfrDs2LCGwPskDACDfXfnStAqSimXs5kWjiai3lntkd36eaYGYeyxSOMvo1\nSUtA5LOP2aVRB7im+t5mH5r9BfMWzi4w/PsKLJ48w8rslG761khBo5IS/0BK\n+fh+\r\n=K/xp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7aa8626c10b7e0fe9826c55e7f08c4ab0aa493bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b704e4dfc.0","@material/base":"14.0.0-canary.b704e4dfc.0","@material/theme":"14.0.0-canary.b704e4dfc.0","@material/ripple":"14.0.0-canary.b704e4dfc.0","@material/typography":"14.0.0-canary.b704e4dfc.0","@material/feature-targeting":"14.0.0-canary.b704e4dfc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.b704e4dfc.0_1641839582545_0.7937656857262891","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/form-field","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.c14e977ee.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5febd65bb08559d1f28b5b958f10c137e5bc23b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.c14e977ee.0.tgz","fileCount":33,"integrity":"sha512-ZU2FJ2gf7Ay66SUNOu8fS+B7VrEaXOrYEQkG4kxIc55fQBhiS/Kbtxkfp/oC3k1yHH++Nbo6RRZtyjpWrA1lEA==","signatures":[{"sig":"MEYCIQCELKOhETJQO4FTeIcnrZVaDYDlrpETkER/otV9Z96IcAIhAPmAT4naOGmT5yB2WXL1Ub9ti+4sGJFtb47d/RcM8/2t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3acQCRA9TVsSAnZWagAAlrQQAKSG9VHtEgwGcZuu01TM\nBPJQ3Ym8zFFj609/bPbhIBRCYhAptXQcjm+N98G7xx2CLXiVlKJ9aQCu0rCY\n/yTq2Z2r26cZgCVO6YE9RupMr9S5K3UvZEgQLIPQTdgT52kCr2vLPADo91XJ\nf42/RAhPwwHAzvUnUYF0X+2bCBrecCZjqTxWfKbwxL+czfP0jSAaYqeMyVru\nA6pmEglc7Osi3WoX8ZrACUe9+vXJ3CpjtX5moWOtS1SCXtuWa1uXGVxQkZDi\nRPaMAumikK3fxnCT/Z3W9O6OaYf1tJgMw9CvVF7VGij/XFZtm+Z5GJZ8f4+H\npVFh6OoPv359TuTDlphq9UoXGjJJSknJa3HT6Lvofp1H92ibAtZRNWtWNKCE\nkr1DtEYC9EBMTZbe7Y3KplpWNlAeHoK37Hub7y1/FQTQI3sbS2/JZUl64wJG\nKNYhgt8QqMBw3fMCrKJOu6GQphisiBb21jcDps6NRrhNfi7yNzeTl74lK+Ke\n2XNXFvgI6ZYuDPAGD5FT4rodDIcUnf0PJCurSFSvzv063ZFMR632DCF2Fm0d\n22AKfc8sDtSuuJLdqTE1FlGhu4iXnOcIlzrblABbD7fWvO36Q1rUNxZWh2YA\nyCRkIJ60EBNeR1zqnAvMrEAjJz/leH+rOINsJUkva+2111ovmTt+YWV0cjhJ\nzZQQ\r\n=ctlA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9f7e1b7371c604a5d4692bdbe25aecc578fb16f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.c14e977ee.0","@material/base":"14.0.0-canary.c14e977ee.0","@material/theme":"14.0.0-canary.c14e977ee.0","@material/ripple":"14.0.0-canary.c14e977ee.0","@material/typography":"14.0.0-canary.c14e977ee.0","@material/feature-targeting":"14.0.0-canary.c14e977ee.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.c14e977ee.0_1641916176439_0.11857125667137947","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/form-field","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.b094eaa4e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12421339f02590e32025eb80d58d0b890ca27a2a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.b094eaa4e.0.tgz","fileCount":33,"integrity":"sha512-1TmV1Acf1bC14PRAxbbqxPiEJMfOSUXbOVPeToZS1XJVyooXlEg2GXZWtacRbOblSbeQiw6aBddI8u3bJZUBiA==","signatures":[{"sig":"MEQCIDHRXfkdsMAE8YMJehz1p55qjAspwAU7jv6sHwDlDuJXAiBK5tQqLKePFGQqgHJ1cdmZhnFBqCv0zJXg2M9qS47m0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cQMCRA9TVsSAnZWagAAPwoQAKPkMLpswW7X/rS/7Fgq\nLU1Sj9pIYyB9EPSREOrvsf/lwtKjvgce0JnBaFHglqMcYc+q2nOfhJaVcP3s\nXL2rYj/jJyQxyLNoQtkSoy9G/ZUCNJtQwF+g/3QCwLLkfd9iuiWCbW7/5UjO\nXtZoYS16lJsfpR7uPTdIrOi8XGKfJkGq0t+DsZ7NTwQRkgoh6lvC+VlaxCRk\nnsgBRFA0TAdVOBpMrY8D1xZrTwcuHKICDTvANF6AUf2TyVJxmhclhELNxyO3\n1ohP9qpW6QelFCZtf8PkgQYemVlnprn3ZsIcHyCq+G2xQxL7fxSdsI4ws1aB\nSOVqwJ5mn2MTXvASRjkOLU01lIaE5xLkQRocPYHMJFvn0VIYLqB0Ym805xqF\nSndNBB6fmwUJjuaQQrc7Zy4OR/EfdUj8hPNQ0Kwxr+AtBFSTPXsI2QVN1pPs\nuxpW6mWUCxhgRrwmXyHvRxLrSNfGa5liEirLWiG4dbMieYy4zOVGbJDoBuL5\nmIb3pgopt9Jxf5aJXB2SNbFiLKjqc54771t3S4Oh9xe0eSJnXXGcYTez6etI\nQSz2Y81AGeAfjEh9OlJ90ZTTSYDKgXME64PhI3UvMC2Z1uRFLKFunPcYIGfs\nRvqS4gsE5Zt39YPH3/gmeKx4XNV+n5urs3X/lUbnDv/d+V/srK6wSLBQg41P\nYTil\r\n=21DC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6b11b48b933746de14be90d79974d10e1fd48289","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.b094eaa4e.0","@material/base":"14.0.0-canary.b094eaa4e.0","@material/theme":"14.0.0-canary.b094eaa4e.0","@material/ripple":"14.0.0-canary.b094eaa4e.0","@material/typography":"14.0.0-canary.b094eaa4e.0","@material/feature-targeting":"14.0.0-canary.b094eaa4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.b094eaa4e.0_1642185740019_0.12462630589485268","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/form-field","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.390220e42.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"399916d30ae8c979d392ee31cd8022394f11265d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.390220e42.0.tgz","fileCount":33,"integrity":"sha512-krT7c7AGUTqIx4B1idQiRGluZpYlAQXR4Y8ffG+bgUS7hUwOtaSi/5u9DPm2TrVSuAp8o6SoYXFB5y5dQQwnhg==","signatures":[{"sig":"MEUCIH297X7F4iypeXdOEOsvYe6ZHrTMZEjiX3PARYlHVeHBAiEA9SyYiDzD11UWOBGIL/9fUVqp/fqjH49iumsY3rv/+iQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z1TCRA9TVsSAnZWagAAsq0P/Rqfq1Y5AqZRTtsuV/03\n/1g9qUH3hG5rU9s0Eqgi8HNOlZxsbasI4p/5l5Kor+xsXVwP8DdSlvEKbPaH\nmB9uAjn4LWoC87jHJD9FLKbyIvC+czAF6sUvQivy38jPoYx51ovuunWVMvs+\nYYAs+VhBTe7Z4hM0u1+VjsZmU+9V5nHHifUzhIql0G2CTC7F+YkhqRGBITCK\nh4n6TwDG1T0VOIixCPAagLuc9MLgW0l+9x3LGdGXascvgAKH4556dTQYEChH\nTNN6eVWcoZbrPrDzTvzMYY82gphvmKyJx5EnfMEYyWsm56FVHxldQkY2f6CH\n6kIBLS8MEvOw3nUdQtJ+HVnMzQ935b5Rzwq/n0UQLS/4RzfyzTzn9ljGz4y7\nObU4VxaA1oAPkeu8S75VydZt2jbFWA/NmEuaeGMdpBFK2uUF9DgO4o5fSBzU\nW0I2C5Y5UPvU0tqCT4nQOzI4eypj74DHsbu+LwPhj8TMibk/9u+7/dXu1/vC\nO8ChnVIJLvbD2niuqBsB1kV6yZvGG7mh5P0dqi9XhC4BI8jRh61HrZdF0lMC\n2m0F2djvKKFeJdCaXEd1nunD3y516vNWWjR3KsCJzZbqT41583Wk4sxnQfrt\nmADRu+5+DNMM7sUltNK4vh1x4mCuy8JH+aQFUqsCmC8UXqIQU6ybp33dXUHR\ncM6B\r\n=Qx+0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dd9f4e499bf257838f40df3957ee3c321500fe37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.390220e42.0","@material/base":"14.0.0-canary.390220e42.0","@material/theme":"14.0.0-canary.390220e42.0","@material/ripple":"14.0.0-canary.390220e42.0","@material/typography":"14.0.0-canary.390220e42.0","@material/feature-targeting":"14.0.0-canary.390220e42.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.390220e42.0_1642437971337_0.2980572519985547","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/form-field","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.4b5391f8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ef759bc6c5460f5805cb5caeb75ea0bcad40386","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.4b5391f8b.0.tgz","fileCount":33,"integrity":"sha512-qK5eYq+//pzhobsmCwrmcNcnIAGwK4N8x6PORnV51zPmFMoIJyk3NWZSrrJ/rLCNCvfd3m7AlViUp6+5qOWMqw==","signatures":[{"sig":"MEQCIA8wbboEUYliPBLAv2jmRlZo+GJOJrWn8jJ+kvDBepjTAiBv2TxX8h+/U4dHUQmii6ywIu58pn+Kd7h2wL1QLweFnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KROCRA9TVsSAnZWagAAXhsP+wd57/AV6nVY+e+p1iql\nxgQrPV0zhmn/+BVCIh2vhtUDZJsSpJSkIKUcc/9HBENRBsLb3olFW1cmOjrm\ng7ppvHCLGEJwJ90HE4aQc/0tLO90wJyEmlKuwQ19CO1QXSrDpLwEM9MqfPd4\n8kYiFxfh2sIWKs0Ax0Ii0hBiRJ6gPsKHeUr9jhxv/YFjiyZwPkTmykBYONBV\nWLSH0rAjCCt5DihkTrBwDHkk6adhE/0mFyYlgvlp1ckgdVXRH9ngyfbzV+Tp\nFutgHgc5tn2u7iIim9L5BZERdP6mxPdOcUaaFezipzf3X28YD60J6WcJEKYj\nYP58roB+mdKKINTwZkB68diu/wULBuN5+ro9CEVEh2YCcog9tsVIbSF60OGH\noQlxVSgF32ByPAXRlbPndpfdKrFzyKs5AwXlFXcz2d6r06iAqPA8uNeU8u/o\nrrQP+S5rRtLOCBAQ3OsaAOrGQSdgFDB9JY9w+m0jiCiNPaO6/oEJHrLohRXr\nvT9q1ORQTityfBDhCaIlNTWpSLIDSpK68m6V90zKbkh8NspmuROCbHZAULZh\nojZDTJIAENhM4tcJ5sUKrXaMwdhZjur0WAiwWXCR/MH5kbupbfdHDzbpiQEW\nhoCaqOCRQlBRfywdVS9UEnQYbYqnxjRQZ62rNr1Azk5ViqSNT1DvjB4r+i6+\n7Ojy\r\n=qr7+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"09410b4524a4005be30dd18c47d4214d6eeffca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4b5391f8b.0","@material/base":"14.0.0-canary.4b5391f8b.0","@material/theme":"14.0.0-canary.4b5391f8b.0","@material/ripple":"14.0.0-canary.4b5391f8b.0","@material/typography":"14.0.0-canary.4b5391f8b.0","@material/feature-targeting":"14.0.0-canary.4b5391f8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.4b5391f8b.0_1642636366437_0.9967921993122681","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/form-field","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.cef6bc623.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"858dc5099f6925a66c9b6b515129fceb1f74cb74","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.cef6bc623.0.tgz","fileCount":33,"integrity":"sha512-Qc5+JC9ucRGqS3mHPTdqP2AHPcrkVlMldDJRUK4QXqfNylPQGr++w/YdwMOXmxju9Ml/elCShgjRkbkUIgaxew==","signatures":[{"sig":"MEUCIQDAvO+wTv17TNzX5Vwewsd55uAemHmF/Nu9OuVfckXJpgIgBHzDdXAmKhttJrOelQvjP0PZnVAbfxT5L1iVqrkRNT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KoZCRA9TVsSAnZWagAA9WUQAIgjIdEwC0IJGDCd1yVO\n1kOPI00aWIbH1BQGnQV5lATKQ2ruaoVMbPLGunVH2zDbthPuEYBA/NyXA7XV\nNnDuj2IqCDOe9CKl0c2kEuw5oZSkBXzkvc09Yz2OC1hek9Xl+yas2n4tSnFL\nVMh+hlwWnrBsgAjg+aUzg5IbpWnC2MBbd51cTG4kmxy0f69GGwef8s6ZEBLj\nNgiKRWU6kO3KwPBOi2fu/KK94uP3ASuAoYmmoGkO76fNBdoyHw/90huUMpRj\nkX1MDaJSiDRvLucL5UVgEKAqGo9F3klq3HEnHB/QieFulNnuvwgSCVo3QV/d\ndZsTlifiNNeD5uHW+p/E4xfZathMHzUMzetaXF54Zl69dYM5pKi9Asel1MgJ\nuBrTieY5hdLFCVZxeeyOmB12HUqXOxfXNNXhmp4tSJvTP0HLj6iBpMVj7kWY\nzfcGaoWfyf1D/89GDG5AZ9zG08JjGVFWu3TFv5oo/07k0mQN8ehXHk5kO6lW\nbrJ/1FBCicZbCk6ZoQD0GshfOY8dVNwPndyWYH8xNI8mSQDgR+Aduau+kvJ/\nvSG51qwyZE+5oDSPW91Nqhevvbm7pja/NEnh8Were3Wyk7ibok4BsXksDKH2\nOcIkmVCbdCGbfPVBumMGDpx3eTEezk+r+vQD7p1hnkMsezBr61thlN6dyeTK\njEdx\r\n=7FuR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6bfb214d1f6768cd968026313c7de32009b2da1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cef6bc623.0","@material/base":"14.0.0-canary.cef6bc623.0","@material/theme":"14.0.0-canary.cef6bc623.0","@material/ripple":"14.0.0-canary.cef6bc623.0","@material/typography":"14.0.0-canary.cef6bc623.0","@material/feature-targeting":"14.0.0-canary.cef6bc623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.cef6bc623.0_1642637849782_0.4663073356710159","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/form-field","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.0379179c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56d6fe81e8d56fc68a80e3d57f63e01726ebfed0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.0379179c4.0.tgz","fileCount":33,"integrity":"sha512-9E7rsCGcFI1L+4QC/OwOJ24xtCT0vGRfo67v3J25GdX2jmp06MvCEIK466K9MKHuaybwUQ3bqSSbIddxWYGr5A==","signatures":[{"sig":"MEUCIHivvaLjJ7suQEpS6NsmN206N3TwViPsZka47STu7dTjAiEA+bxm5dWNzsUqfGRMlRXNXUm+dXlDcwk0FtD1PU9Z7W4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6a/gCRA9TVsSAnZWagAAN0EQAJ7yAdmCm4l3RwUfIGwe\n0VeBQwPpPgLD8IAJBvRlIQWg+jAlHMyyPCMRn0cxbLtFjHz8YIUfd7Ln+Lsr\n23d5hI8jpN/zE2Tp+KMWzgrexqlZ/y+MBlQo4wQ4W6XaHo4v0+BQCPVKLNQX\ngDmbB2DLZE+biut/43fJb7scSOf0hVB9UyJBSZniB7qAytDL41phABMACtHR\nAzLHBxkDuPpFiWLCClLGbL+Es2fZAbhcHqR5+B78aybGif/JwY99T68yYEoj\nijxJoeCAnG2ysZuiNb+uJHCXYfA9qD/z1MLfTtgxGwYMxxJUpPg+kYVE8I5r\nsEwGIKe+F0PE16YGW1QQKUcdQznupq7DyOcw8MMAWcKof/sIuqesvq+r0+a6\nMSK4tjdolvX31dly4/KZ7ezW8ljHZMWyqgN3aItyljw4hQp54HwgH//QFbmI\nlWDgyD1e/fYQNb+0v2ZFDBSjw9J6QNF2VEWjs2jvV/FoX7yOH6MORtt/f1yT\nr87Whamg3s4PbbrNGoJVPB8Ny80wZBfynBEB5zhgVihtwmpIa8rs82TWs5dV\ngDl5u0YbxIqsdi4lWBVV37stFa3Kmyr5XFARhlomX7APMSwY6XiSoi1mty93\nWsOviXoo0CaL9ZmGba5NyjGhr0WqOkpv1uQ/yTPpbVeyVdk1b6lLdbwVxEVC\nkKqN\r\n=mMfb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fd62b4e352900f807c8308b282906b51227baeac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.0379179c4.0","@material/base":"14.0.0-canary.0379179c4.0","@material/theme":"14.0.0-canary.0379179c4.0","@material/ripple":"14.0.0-canary.0379179c4.0","@material/typography":"14.0.0-canary.0379179c4.0","@material/feature-targeting":"14.0.0-canary.0379179c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.0379179c4.0_1642704864017_0.4326114244880044","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/form-field","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.e62f3dabf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8f7df69e69e88a48498feacc3372d5e05741720","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.e62f3dabf.0.tgz","fileCount":33,"integrity":"sha512-WGO/Gltdj87CJ2RtYCovnlvKmxob8ZtXWOPuYiuO1X+c29ji+63fFCTPu2Hu+wy3DPvsW4QvgVj7mA8za0TsHg==","signatures":[{"sig":"MEUCIQD2MUk1ZIUX0kYIJx+8sq+Uz2VxUuQ3GVvx94YpROYc/AIgFXbHlKRhbb11qH1PpgMSbNcE1wVRLnusAJAi7GxMtS8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zu6CRA9TVsSAnZWagAAiP0P/jBaAI7CE0Bc3ovZbxWd\nOau05J0SUuNXWbZA3o5c0vSehXcliMsyhZeSJFBZE72EdPj+FzdZ/cCYmz9x\nfFbV2HrxfhnR5fMCF59dQSml8Dj/sCFnBNKMZQPxSglXyX49vo0eszQ937Pv\nB6AJQpKeOMRsIfYCWJEyGkMiMGyHNxttBi0lNAn2bWMYGQ+ljY2RMvvwg2jj\nctJrb5NEX1e9ZCtLmoZP20g/DonimeQkDWAvP8BNigfhdj/mQW5xty2xzKH3\nZoafUh196rDkqUQBvb/RkHDtaQtwfZpoRdshxSIUzWg0VuUlpw0thu1Go+l7\n6i9HoUMTZL652Ho5gSQjGA/epxXbV4usc4ViQCyaYXqBbrOQYTp/f8dsYq5b\nUhmRSu1DBBW6HSRRzUMc+XhUSj/zT1za1qDgio+LExODC6XaCSwRKnoDY9JQ\nEwgX/X3/btQKF5PlnuvxhNqnidlV0JI3v3jRJqozn00teB5Bc5fWy5BVoqrN\ndRohjaL9FoLH3BW0m59ADzVN/KYLev8iV/WMmuwSz6GGIk19qw2yOskjBq6w\nfGIUcuMD2PVMjnJpV4Ai/ArPMMaAc9E1ycG2+um97aYk+gOZgsqy0DluJRtc\nY+2NpipgykHOY5bVbzyL//zex2vLxRMF+WUngSFJ5ugbeg3HdJGNmBnTrNYe\nrPdx\r\n=jbIH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7f7d12458af5eaac6bd913db605b5afc3753906d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e62f3dabf.0","@material/base":"14.0.0-canary.e62f3dabf.0","@material/theme":"14.0.0-canary.e62f3dabf.0","@material/ripple":"14.0.0-canary.e62f3dabf.0","@material/typography":"14.0.0-canary.e62f3dabf.0","@material/feature-targeting":"14.0.0-canary.e62f3dabf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.e62f3dabf.0_1642806202147_0.8334425785220976","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/form-field","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.3e20c1de8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70e9e0d6a7ed3e5c3b604b8deade59e227f4963e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.3e20c1de8.0.tgz","fileCount":33,"integrity":"sha512-eSC0RgnLVzi6bfQRY7IPScWpUs0ug9p05a4wWGGZvY2mAjK5dgRs0PleaKbyp4fGWVSOgNEzI7aa6nJwCesuMA==","signatures":[{"sig":"MEYCIQC0qwnoAqfdjdMU8qGYu8+6eauCWelAFz7dSArcU0WJBwIhAOq7bGKLXyBMKEoQKXk2JF8w6ryiK/TXD24rX9sbiuUE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8BfqCRA9TVsSAnZWagAArGMQAKSfzu0x1Rg5kDH9nqA4\nEFlAU03HLc9xt4HD6mYv/JY0QLbDV5cEaoGb9kWVdWr2n1cp8w7uXUzQA2rO\nJwXf6x6iAs0snK7V/O40UfiX7knE/s5+Z4vBorkpPZtdueFe+OZOyWDGMHEF\nSFYZ9M+BOWK1cuSgbSJuw84j0wR1Hpcxc/9E9N04nw1Zk/ABHIuxnCsJ2pOb\nRs7BPJDO9Uc1gfRDAD2k/aBexPzhQGD7gLK+ECS8JAgQmR31b9q6L8XrQD8R\nOfRTCSvkrOyEjDexnYXr5X/t1kxJkyYDimrSZM8pvEPE1JGMKxlmmE4aF//X\neFsjI6aezqVPC4wSB9ToJaaxdTU6yEIDK+/alYDv8Pgeim2cKVJx6ghC2vgL\n3JobVbmMzaYQIwhh6WuRLo9SBYumU9Z7azbz2iu5E0ZhJIJaUtMznbBHY1NK\noqqYvl97W6i95b5KZ+sMKIkEo6zS5K+0uSFzy3fLLpEZw4sE+BsTGw4wFBRF\nJvNsPCkAXrhJMbRsOxSh5cKEIBAyQC7k3/ZFGhUNk+kqpu9xk2iUbj8XIl4/\nJdW6y+Tvk0g06rs4t9g0LQH8tTCV1Vh7qbyNdwXUIpz0/1gI6RRAT/Eybbah\nzWYpXOIykLXXal2YwMdBioPKUucLvocCU43/v1A2e4fRVeDk2wN+PSetws+5\nZU3x\r\n=yr4d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"29fe61f3aef5a85c7a462638b6c2b809a3be57c3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3e20c1de8.0","@material/base":"14.0.0-canary.3e20c1de8.0","@material/theme":"14.0.0-canary.3e20c1de8.0","@material/ripple":"14.0.0-canary.3e20c1de8.0","@material/typography":"14.0.0-canary.3e20c1de8.0","@material/feature-targeting":"14.0.0-canary.3e20c1de8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.3e20c1de8.0_1643124714309_0.5435124573465251","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/form-field","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.9f9d928b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97a3e533b52e103c46190b0e3a431aad0b1c4e38","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.9f9d928b2.0.tgz","fileCount":33,"integrity":"sha512-pmtWLCq6KC+RSZBveq/XXDyyGKsCKwS99lHIMiVQKJ/aH/qVGbVYUOCiuSCXUqgVmlj0s8bcPFrk68SPV8Tckw==","signatures":[{"sig":"MEUCIFN7BwfgmmxgkMcUuOTRghGwfE+RGYdI4Km4f1GGdSiRAiEAyJ752jqdWu/qmTM/SVJQBopx6ufHwwqlwX+bOL6nF5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uC4CRA9TVsSAnZWagAAGiEP/Arimf/CVxDloZ9mziG5\noiQSMm/vf7s7b7CwfnQJ1wQGeeY1jJv2vaYbaAR3jE0ebPfCT6cPGRNXOQO7\nUt9O+4Gb+X4cCGCjWVUV+N/8BkVyk1TjfSVUvIUWZT9GqvtAnC+aXaEotpDS\nRR/raRzcpn6ohMZFz4iiiu1XFZps4maMog6opEZevfwd5zg8456LgqSCRUTW\nXYg9DdM/5/uMYqcF51yYda/9JYWgQxy8o14WqDC3EXEGAP8xCwJGnBkOcNKk\n9HEVYs+gCHE4CIGQq+Bdrfkhfa24qX2WgoqyLAlK03VMy2uSbY0dg5IB1d0W\nQ529mR6tV+RpClyGLYAL9b0yEe4JJlIj0mxHFstJldGyfgu9jlpvVD38GJ3B\nxq+3h+8hEp3AsWPQ8MtKy81To4ly1jiLzVIRiGq4WSIm4VBBR+uNlh7oEtSC\ngkeZg23tq95+KrV4FkyiCYaNN31I5iRYg68owriua40CmTGES4UDovsGauKw\nuzsxTeNzxAZBOFXLnyIig1p2FgGauk6qkVM+WZGMQoG/0Wce7RhQDCr578yd\nu9YOuPkH+vKcWVp2AUMsIrrZZxWQQcdt+m4tyCucGHzauV5iosnS/oCnC5Fs\nshqODOeTq91jiVQvASc0HThqR9hA9YL/6sFO6b/ayyMHCin0bXzZLARTE2Ug\nah57\r\n=nTvb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2983c7f2f01e1912809d6004e47ff0c7c27de38b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9f9d928b2.0","@material/base":"14.0.0-canary.9f9d928b2.0","@material/theme":"14.0.0-canary.9f9d928b2.0","@material/ripple":"14.0.0-canary.9f9d928b2.0","@material/typography":"14.0.0-canary.9f9d928b2.0","@material/feature-targeting":"14.0.0-canary.9f9d928b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.9f9d928b2.0_1643307192477_0.5771487511162119","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/form-field","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.a2bcb065c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ccc2f6a2e60b6603aafbd060b6b10e652f32335b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.a2bcb065c.0.tgz","fileCount":33,"integrity":"sha512-O4NVLuf5+AvpLp34BZDUMU+E/Joe0cP38qNlnZDsa9CMNaHlor1FKc0XHqYhBOYQXVKXtDS+2Ggy4KYJT4xWng==","signatures":[{"sig":"MEUCIQD/Tjrdmi+s6XCfaZdEH0KFvFfnOetmD86mVbPpo5KjgAIgPG78Y8hHk7raY3etH5Y8mL+fV0KfRa5GEKkySecIC8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EXgCRA9TVsSAnZWagAA6vkP/jlFx9whfXF41wl3hrMt\n8EW8GmGMfJft9aZUzjonSbD9stsfGjQuBPy69VsD59pbm0EFtwnfCEw4TAYY\nwojwWcw7mbkwXheH5tz/L2RYN4v7YU9OhC8sqVi8RgPgVkxv0WL/bvhY8zm3\nfJEKDDZsJJa4JL0uX/KX2Yx5AuKyGgFUPiIDz0qcG4ZnF2ryMAPoRKpzNZ5B\n+GES5IxR+taul8MuSipsP3toy3TYe+R+UXFWZ4wB1CCp+Z1G0XW15fkSkG7c\nWhA3s+9rjvb6pqWe+KQFSfHj4pKyUlhz6C2AtJ7r9MSj+mZSs5LGOUV3rhNc\naeQB3riqVdaUasnA3Pzvh2C+0oqgn/VU2LxITUbRqBTCGu7TKbtaERBUPIPn\nEPKNWn9UsXLEczg1EEygZSgy4bJ6auGPqu4GaCrLDg3RjMd29IT9rOmM7iZ6\nuZKubuLNCBy2RwQ+VvW7U7xzNhDfZkAVqZ2MtFM04pAw7uTaR4I1ZNBtia3m\nrmjXVDxx5Ah/0wYQ2qOsNBwcZ3WVBrTY4RxfmSBcMQSRF8OpcaxFiK5pBpBg\ngwJFRfpU1tvqcxNWLF4u4caAQ14zq+AVWpTx5bA0FsalAOExUnLj3J75zd5q\njhN0ecAjorm7LAmNs2UVFoOueuQJECLA4NKSiQh+KyP9uNxo66bliggZD9kn\nhzJM\r\n=oMRk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7f175ca37545bf0bacc2b94f7a18a2a3fbd5eec5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.a2bcb065c.0","@material/base":"14.0.0-canary.a2bcb065c.0","@material/theme":"14.0.0-canary.a2bcb065c.0","@material/ripple":"14.0.0-canary.a2bcb065c.0","@material/typography":"14.0.0-canary.a2bcb065c.0","@material/feature-targeting":"14.0.0-canary.a2bcb065c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.a2bcb065c.0_1643398624825_0.07926409172841287","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/form-field","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.4e66fb2e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aad74ae0e6cbc09ef9b537c4a3836feb9295f1d6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":33,"integrity":"sha512-LHqeBTQ7DP3iqdFgtojtSSfBYia+ZM1Yhmwmswy2MpFwtnIsPmkOLrrn8vE1anG6zsUc9Gg1voVQUkaoQ4qAXQ==","signatures":[{"sig":"MEQCIFhUB28gjBeK2DDdSqRohsDKWAv6HnZLrtpyWu6FfNHAAiBxDCLJOozli6EqJUlV58yEijfNh36x/dFIXXGgdQHxSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EbmCRA9TVsSAnZWagAADVYP/0spr2dXRirQ3KHyGy0v\nhOpHZwJZGQ8GgXQ9KCmpBHgLO0Yqi0mTP9t3cB7BhJeXgAQTT/fqjcamHhPa\n3bbSU7buLwbq6+B5d7SSA6vS0uEsfA++Rd38sbdmMekvtDrnV4sIsY22cLz+\n21qgsIQGRzjj5pNjKymfEMh2EIMZhZKdnP2+66JpMJpxbkoTeEbTPBOBfZ+X\ncg6FyNIwmLxM9a+4ZI2yB+nZuX7t7zG0kFVhfVzK6L4gW8/fDUIQMu0qyTPD\nNwB6AkiGCP2oONeLkL/zpm51S49TFJPw4rhYKogwRqhUhJ87JR498kecoIxV\nAK+36N3n7P2UtAgykmX72gEiuT31uAN7LpXeBC2P4LnW1XsICE/A4lNcFarw\nTvAItE2LZKpRFfzN3Eekm4nSwSY8/L5PHNGsIS2GPGF3VDghKrVylUk4Yyb6\nkoUdp8Oqw9Mq3D27MjpJ3GpsxBfFdmqPdRn7mKutd9ZTLWh18vT7QYH5HX5+\ngHYRkMxpxRGDznx8bd2UKmZj3vk/+XL5YcP8yeN4eY0OGOUxUpatIbra0Oyo\nhNPPRxCkAG6xJeykISAMkS09mDBQjZRcfx1/lenUGpZCiwZ8HZGzl8gUaKoa\naRLDC4dG9wWWz0pFBXLeRhd44mlyCaWMXfKFXoRdNHCXmva/K3Rj0xS9KEtN\nc4+Q\r\n=AOwB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"edee6a64c210815507bd8460fea3df2591cf0d65","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4e66fb2e1.0","@material/base":"14.0.0-canary.4e66fb2e1.0","@material/theme":"14.0.0-canary.4e66fb2e1.0","@material/ripple":"14.0.0-canary.4e66fb2e1.0","@material/typography":"14.0.0-canary.4e66fb2e1.0","@material/feature-targeting":"14.0.0-canary.4e66fb2e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.4e66fb2e1.0_1643398886084_0.17434056770226802","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/form-field","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.9736ddce9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4255dc9723c5f1e5bb49ebe1e6efcd85c5cc410a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.9736ddce9.0.tgz","fileCount":33,"integrity":"sha512-s3blVtvcOvN1dNVT6PT/45o3pPMC0AINXKQ0dL+3c8kbpF2UtzTYIx4P7aLKnJuq12Jmw8LxmuMVT4Tv9N4THQ==","signatures":[{"sig":"MEQCIE0AcJOTBPhRIkcPC8b0OzTVZrZovhFssnPGq7cSnTe6AiAlYN0eMqMuvFxKf1tttQc86I51JcaXlDL3JAXPdbAuYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q3CCRA9TVsSAnZWagAAFG4P/A3xBrlr844ZpLZfJTu0\ngqI5TJ+Wtozdw1cIt5cbCSp4bslLMfcPAkLI6TqDMbZNtywtEIA4Zk89BbBp\ntZAIoScXpiVJqMpRPpjAFVd26ljWfjSliQNt0+8UhLMl0/K/0SnLMUJPbVbs\nEinmyaNsIk8GdBz/1Lg0Qhe2eCy0U+fPColM7qM5bK1PSX06nSwoitV/434K\nFFlXG1aJ/h/l0R1avCZWhhhHpjaY1xRT58uiUgy6Yhkv9ZEPcE0rhc4Eug61\nvUZ8xx/VQKNBqXigVX3PHuxnKNvoG9PxKTY93jJqLI3LjhQfZQD8PqvSakC+\n0UJIJO8vtDtgmiybjtCXnvvDruQlVpCbxbd3RPtdvtddf3DlTrcHxvxeuJpr\nj1rxZGzg09FmpTUGkUYUYle/lrkB0kn30LDfXEu3V85hN2nhaln8I1NJBFl6\npK8DTpA/l/7PhtTfyfHTk55kCegs1ElcRLu5th4mFnOfb106g5177gQXrM3C\nE2gqkcFHXm5IQFK4XXPn1ZEjF6m4XRlcuuYT7U7GGRw18wmRjD4iLoEZFbyL\nxccShz+5Sf4q9kSkcrJQrScdHZenQijnMs++OD7fjb/e+VRMkdjNCOcNDlPM\noMjn4VIVWNNJskbyIYK8tkhrjCPiwf9tTXw7ALkXtKWA7cQOxDrDKhewHQjL\nJ2IF\r\n=YNMd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d76de36ce796a981bf5e48388104bdb581d17529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.9736ddce9.0","@material/base":"14.0.0-canary.9736ddce9.0","@material/theme":"14.0.0-canary.9736ddce9.0","@material/ripple":"14.0.0-canary.9736ddce9.0","@material/typography":"14.0.0-canary.9736ddce9.0","@material/feature-targeting":"14.0.0-canary.9736ddce9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.9736ddce9.0_1643449794446_0.48203411729976375","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/form-field","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.cc4ed13cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59e823e7d271a1b0680ba639bbb298f43a549dfa","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":33,"integrity":"sha512-dbqL2PUHUTx7ExUQGEs0Q/FqD/wmTOlG6ekvbk5fBvxlzHZTp0WipeXKlscufxwlBXukstZLHVj1VUjN/a7mFA==","signatures":[{"sig":"MEYCIQCzhx3EhULM2FoTpIqrWSWO7mePrtb1TvQ2x7f6jwpxIQIhAI7hqDAWK1DSv+uK8XoVQ/90BbXEXv3OUEFg9SNSogIO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W70CRA9TVsSAnZWagAAwI8P/0c4twlM5Q5cSdZrGFC6\nYx2jD67GuyrLzjT0P8e2qYNEIlxDyHHE5SSugLjzVNmEyrXo7d7KYGh9t9R2\nmciJH5MhxQI9+fEbS0a1oUX5kVQQrDwvJIejBIdFp7WXeZHTf30rgiiz5bv/\n1eS5EO/BqHnG9GiV0ne7sBcFPu0S5j+7kOHAlZStKH9SU1XlxFwd0XjfepTd\npxnANvUMrroKBazgzBg3smWFJI4xxIo5D+Twv8qx6kkXdEM+4qvHwZVbfV0y\n3BemzALqf/gJEmcF42UnO32tAqPpgZ+Xba9h9Gp+rznRvybX+BAD6JZhdrgW\n9X1t7ftVxR4swqc186UHom8E4/4wApgTlpBnx0+on86UJ4bqGuI9UtAy9yBB\nNfLfOtVOwPa/qNHaAjtjFuWr8KEf/gcyhvDTzbCRK4DUvN5cSFv3bDCPZI02\nPAe+ED0ZhbLN8GDiaxhZvtjmE5SzBtPKfO8Y5VZyUpXvBnHgma6MYopnHW+O\nwy9fxp451hxblWVWGb6AHg2Eze2l+qKah5LDL/Exf4pLEawOnX6UgIVPEE0M\nEhgvW5zDjQv/lSE0lxumW4umRhyBxDc/THw7FJ41aFz0CqITex8Z5uS9okUR\nlsvg3llB3jNBBgTWsSsdZjsvAleqgNGT5VjWXQnm1XAFy9WPdyJ03HKG6eol\nNG1O\r\n=aYSJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"15c769412cb0230363c372a7d45bc6bc10eff8e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cc4ed13cc.0","@material/base":"14.0.0-canary.cc4ed13cc.0","@material/theme":"14.0.0-canary.cc4ed13cc.0","@material/ripple":"14.0.0-canary.cc4ed13cc.0","@material/typography":"14.0.0-canary.cc4ed13cc.0","@material/feature-targeting":"14.0.0-canary.cc4ed13cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.cc4ed13cc.0_1643998964084_0.5047668562076495","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/form-field","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.dcba26fe1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da2c62104ffdd203977a58657a5e87ad18203a70","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.dcba26fe1.0.tgz","fileCount":33,"integrity":"sha512-4YLrHOMtuUvvyhd7HM6Y9BV8l0K2+dQfGRpuxvHxMG+Wo1B675f/2+XeHDskC+fKh+KZ9uZa7dsmvLlzZF3CwA==","signatures":[{"sig":"MEUCIDdtwcc26PIaf9Hroe91TV51ioTj5JRQFmZLwB8TOuvPAiEA/Eck96cplq8sNVI+2rh6GHZnuO9Dht4xz+GmpbcRH1U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aE4CRA9TVsSAnZWagAAprAQAJ8p3bcoc8Aji4BrnFEl\nVR/ox+pBjYbboAq8fAK+ovw9VW2iQPsoBsnPLwUwLubPv1eWaKwSLb0UD0lM\nuwU6A1SBIr1X+eSmONKOgZlgkiVZGX8JD+zduArHek/iNuyGsEjRV/AkY2qR\nPCfGFDcPrPgQAXaqBflY/tIFUNqfJuxHHpVYsvKm6bJ1Le3HiqHeisGzrJKX\n6IaUf8ZJjpD6Bf0D5RFc+rs6JfU8Bx6EsTys/aaAHRS8N19W7pz6DRcc5HO1\nSKJHT07ODBaiPR9ooNWBRQwtjZy0xmbGu6SdmdZ2AXbi1vXHBCIqi/Jt64wo\nJBh9z4kQMc69s9xp2K0NYwrSHh7PB7nbbBa7MZv0OYYbsBN3Vrrvg0kvcpfd\nz6FRAfd5NYifE0Wr494concpJX4g6vz4PcmJXMDtHbuHzOUiUJQmAmJcZYFu\nXjgnlMt1rbmVWDYUt5NC1ahagtBBMb5H8c1+GVvn2bILsYJqNn//UfepImhj\nKYTKWT/HIy2NM5C3RfiWD1I9srHCZv8oXpSir0B1LSBqDugKpk8JuG/qPBg+\npgjhjYeFi0yLBEugK/OPTlPJnIQn4qSK+En3ZHhqqoh48QhYA8cWadS7irhB\nTuuOYlld1yrj9h4/QgR5dSglUkmSFlX8Qs+fqG4/Bqf5unuwlVRu5IJmn3Hu\niSxg\r\n=eDpW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ced7dd56d5d3b017288f0575d6e773c03f01d0ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.dcba26fe1.0","@material/base":"14.0.0-canary.dcba26fe1.0","@material/theme":"14.0.0-canary.dcba26fe1.0","@material/ripple":"14.0.0-canary.dcba26fe1.0","@material/typography":"14.0.0-canary.dcba26fe1.0","@material/feature-targeting":"14.0.0-canary.dcba26fe1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.dcba26fe1.0_1644011832198_0.891757591586064","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/form-field","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.ec54d9046.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebbac18a7e65f55b8ea86fb1fab17cc41df9c5f4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.ec54d9046.0.tgz","fileCount":33,"integrity":"sha512-99y45cjgVOS5bt+RFzXlbJxnhMT4O0thvjtaDbPs0bbmf2IEnQkYlAv/6nojlgG2hYtfjNcoKw/i5KeE8hSnzA==","signatures":[{"sig":"MEUCIQDnRWtrZeFW5MAJfUjL5Qrm0XafbCewkhZLawH7PpUangIgTJkAFhLVKKWwETT73wTYhe1N7jzRDCMhJoq5DCMwRWY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT7eCRA9TVsSAnZWagAAuWUP/iefhNR/FIejBPAO8/cX\nEiYtlc/+cxDQkrb7x/QbPR0I4yWXH1CuXjNSBm3ceg/fTXTn34PKdD312fKt\ni4+9rhA0R+7vl8d/VmrP6KUjaDzLYBGL/C2JL0lyC9S6BC61LJtsxqeA7REC\nGDnXK/1fzcWNd0kivXOVyLqjKVlUTN9vVTWrkDUOqRJMjlbWAHInUoXObewN\n5k2Bo7FwGd9rRsyYSqif4V2CLvb+hNxLkd8BM66wCbLBJq0vh2DrGY/u6TnS\nsqF+XwjWvYXMQEYd5Fh6duLpcZ1sO73H/85ZaETgiNqJdkbTRHkigp9MR/SK\nb2nVoSODzXDr/jd/GqzqwwIT3bnrxw+1zzQ9sCAm0/+M/ACcvJWZQ5zQlBVC\nACLKyvOzLiPzNmxT9UBwmVMABXDX6NhfM2FbWShC2T7Z2cgB6AJMynJOdnmE\nRLVu3JuQjmUkwdQ8M8i1eajRWZnDw6R9ZYZSAmhyRVg99MlKebqTr5+yYUR4\n6wrYiqeRaCFdax+aFT4fA087avQ0njP/69Lq1s2Fh59V+TzEr9noT+N7CBQ5\nRlEcQu+I1F13TYBR8uswhh+NSNoME+se5MAAu91dWbtqC9bzjHNQKFHU6pjT\n1vci8obQeYOVFSRtpaX1sd3vVNHRMQk7fNf757pDf0ENz/sXRDTuBSH/aDKu\nDIuP\r\n=d/Yh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"68f6bb151595e8790d7092842d6c137ef93ed770","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ec54d9046.0","@material/base":"14.0.0-canary.ec54d9046.0","@material/theme":"14.0.0-canary.ec54d9046.0","@material/ripple":"14.0.0-canary.ec54d9046.0","@material/typography":"14.0.0-canary.ec54d9046.0","@material/feature-targeting":"14.0.0-canary.ec54d9046.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.ec54d9046.0_1644248797963_0.8842010624798369","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/form-field","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.ea9b5b463.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"533bd97217419e211622d313fb9c18d9a3a74641","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.ea9b5b463.0.tgz","fileCount":33,"integrity":"sha512-1/Q3w4DIPamHKoWeIHlWNp4+wmJrCmtaD51/1xLqDfCGifmJUh12YIcLS3fmqF5+IaP8Yy293SDIftd/4o3vew==","signatures":[{"sig":"MEYCIQDOjgJukgrGdi8f+bKnx3LqJf1fmhktqsYnSz5HZIb5hwIhAID3cGDGUndyeb7Anu5n10AZFNMa/7if9N+WjadlJ6Zr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA/+mCRA9TVsSAnZWagAA8SkP/3eW+HUi3G2z6n4MaE/i\nkhOkGQbyclAznwv4+Pbj0al0orTTsLQGWkTfUaOUnT2/qVPtrM6o1EbVnHWV\ni0SuFPOLkrhG69RBhOQ+ZzA6l3Xvos9LPq0cqpo9PxlvLk22XOXry4QYG5ak\neGmJz3af1lVY2Gj4Zr0TbUIaMLuwp/Cq6VbACHBUOgT6kjUYnac0o4axJ2u8\n1FR3tpudzIdfpiJ9+MAlvvhirNtWL0thRvDG1feIS+V4mq4LuWJPP/pSFfWt\neM8pUqEdPLu1+kyTv0sMVf/P29U/UZuEqPSKRrRm14kaw9abC7mG1sDgNv5C\nl2SD6K6KZTPq9c85xOgSJm3ACCgz4a8ZypXCA3u0S24N7xf0lipuqOMpxNY+\nXYZDBvVE/rwEZmou+Zd2GPBzdtEIqevh7TVjIDskrUlPCOCIQjl1NEKKBmiU\nYLqTLOepztCNgYDbHx5/vFKy9Ndhceo1IZeBM9mEZ2xK7JEN5xka0wmKQLUZ\nJ7hxmIYqVciK4ZQ9ib446V5dAOQGknSsdd4jZPqV1x+yAphzsszH5WyBTzwr\n6bma698lW6bOF+5+05xFgcqWZWtUNM0D69mpmudLtuEP0p7dEusOoEjyBlpD\nMzomn7Ga7+d9ZS/5t5j5+E49sIHJXoKMoibNv3C8XModZAWcE2KC7/j6gppH\nXcGA\r\n=FQK9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ee827dceb9fd1c47516461b8ddc28b66702f2c04","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ea9b5b463.0","@material/base":"14.0.0-canary.ea9b5b463.0","@material/theme":"14.0.0-canary.ea9b5b463.0","@material/ripple":"14.0.0-canary.ea9b5b463.0","@material/typography":"14.0.0-canary.ea9b5b463.0","@material/feature-targeting":"14.0.0-canary.ea9b5b463.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.ea9b5b463.0_1644429222603_0.6152354619969664","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/form-field","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.96ea061c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a633b6b0a08b34b3cb82e074c2abec4ec3fe2b9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.96ea061c1.0.tgz","fileCount":33,"integrity":"sha512-HmTLJlWEruktcXh77eRj41K2Fncpkjbtr8gNdO0Ntl/EvaB8zPtqnuLn+Ehli+j6rkmSzK1hHbFG3anMUVbYQw==","signatures":[{"sig":"MEQCIByTq3YFH2J36YKFfSiTgA6rcjHKn8YjrljAERw2/+gAAiBPjnSVnGkr07SZlvAMYKr6/kTtH83IA07zrkRqtEsFLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA8PCRA9TVsSAnZWagAASbYQAJGZAFnhivXTR+zY4gaf\ntHmkGb+Et937m40+yznGiQWpzn8/iX+3gnSB+8sucj4M4ZMYCn4kofolz2OQ\nZkW4mczhKKBukxUb1ivP44nwr2HKKEa3B1LKfJV04N9bpB9bDXpW/QS34gNT\nENzqI/NRR0LOK/LW4I9iPtRnFNMxFm3YrfSXSdiHB5CFkJbwUba6QVrNF+GQ\nt5QOZRxflVnzpgIIcHvEOVpBkjjhm3Q9dD3P+hUvE4IjTbf/sknY5gOQ7Kfu\naUYoQ5HrCqbxxo62TeeH56W1dJ8Nk50+bR6hwkq2rM8NSGMWAThXuDcna/Ja\nvEtCrLnfm40RwovTdLJc0XWt7aqSNl6ZFnoGgo7j6utCJATFuYGyptC4AM+U\nOGUo6Or1Whsrbvsr35NfGG20GphWuY7JLfcdHXDyfTtp9GT5inLqBe8o+Aw2\n1CRjGijc3q5HLVVxqOODLTR+Vnhxp15r5/OrltLKillyYWYWRwCI4GhlaUXJ\n3QJp6Lclo3WmPDTeHnI+yIYdDx8CdoF3UUhGQ71A0H38kfWudl4JKRNrtMzC\n3vvwBUb6T9ylAFbL0TQ5raj71/aR+mGSncIaOMLAXLPCdoVAb5ki8fGpzo9v\nyBz4FdIJRAeB+wYeHy+OvoVlSyMme0SaoBG1ijSKZj/dpBPZWSqMP8NXpAtc\nDLse\r\n=kPvf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b1a410c21f8ac6405b364e437b5af7eec06a2020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.96ea061c1.0","@material/base":"14.0.0-canary.96ea061c1.0","@material/theme":"14.0.0-canary.96ea061c1.0","@material/ripple":"14.0.0-canary.96ea061c1.0","@material/typography":"14.0.0-canary.96ea061c1.0","@material/feature-targeting":"14.0.0-canary.96ea061c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.96ea061c1.0_1644433167287_0.5269344693306695","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/form-field","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.e00181e59.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"056f2d52c4f5b15a306578c1104a18baf11731a4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.e00181e59.0.tgz","fileCount":33,"integrity":"sha512-uAZsBXnQdnv/bcmCZPb3nCW+QgDM0KsE1K+d6uN4X220IBDsw3ygVDD2PB1Jrv6qSczzerj5KfKbTan9qgmHEA==","signatures":[{"sig":"MEYCIQCQDcvkInqfBrtJG2sMcqfJzxf/QzrEpJQqeNdWTKBTagIhAJ2zCvLWkx7MEKMIJD72/jJtj126P7fnmIpaPfkknC+G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXBHCRA9TVsSAnZWagAAG18P/jGlVd0s9qHyBXIjyIRS\n4ZZ3qXX1ypj46WxrFKnjB+rNgkANni/FIPg3dhypgOU3O57o4WqjCl1KvEv5\nJ5FRsHtpEK2Wm8f96l4XJJ4cy3bMFdfV3JcfIfogjDQkDz0DsiWTCCxCVSrJ\nrLEuXZzM7nTAa4xbiFi9QLms2bhayoyjoIjaBgQ5XwpsLUaarPfYNomM7DoJ\n7YkL5Y1JRf2Q1WOB4dJeY3QiG4GDG2XbuBxnBrwXjMPhJtM8xH7lADHIFbwQ\ndgDXOLUj7pBuF8vDBw33A7O1tNHXgjHLT0iByS5tzXgfppWgtfoRGoEtplW6\ngAHNYYXcj9D3Go5Voj9nUVqRwf9UjrkgmBIt5WstKNYej3KNFVEjVOo90Q/y\nG3fsv4nDe2No2XqdTjuJ2Dre2zoC4vxIY/cfaOtvp6l+hJCAK40j+O/6svkd\nEUIfpgInKlFxjNzFMvpWZ1W/0kTgiN1D6/SQuQPzS6rj+6IznAoWY0vHZ/2a\nSrEyHyHCyPhx9cf++TToTcbq8gHiQIWRnPTB9XRZanG6qM9YQtnK29WLrRU4\n0QZz0vTPI9bp3adjsfSTiKwmggXHMfoZUIDS1vOj2a3X2n0bo04OK1X8pLXJ\nhU9tJpEgELx9nqHR6aDJVENltcBigkgmVMCxAHMt99YolF+ndUmAimk0x0L5\n59ih\r\n=fx+r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7e9ce072e9ec1ce5820d347b59d99209542a2bfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e00181e59.0","@material/base":"14.0.0-canary.e00181e59.0","@material/theme":"14.0.0-canary.e00181e59.0","@material/ripple":"14.0.0-canary.e00181e59.0","@material/typography":"14.0.0-canary.e00181e59.0","@material/feature-targeting":"14.0.0-canary.e00181e59.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.e00181e59.0_1644523591650_0.9045578779900325","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/form-field","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.037285f9b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"858a63aaaca13f64b64853ee861f2afc562417b6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.037285f9b.0.tgz","fileCount":33,"integrity":"sha512-w+RfDuJS5GUxI7tnobHP0fvnNlX2XWua4lYSGR5b+24b7Q1QV47nxq+/pCe4nxaacyi7BFmk+WP8xr3WxZbtMA==","signatures":[{"sig":"MEUCIFzepUbOV0GoyVmaEWSLkvQce/ndAp00yr6D6bQTALd2AiEA4olG6mCspfDr3qOc/HVS6iXnCK88NsL4sk1eAsnMJ5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqsJCRA9TVsSAnZWagAAITkP/33YBNxkyX0XWMEvPg66\ng8FNNrQOpxrTAXP4leg0HPmMc+ApyGSfQ7TbGxTklQJW3roriNpT1c70pVUD\nrLdm9ezpuxDif8q36JUWUuOJao+dkV+HocEqa2lX5OBHfzVgDTmyK+6LlG7y\n5L8N7iRveE1rtpjJIMvfmupToxyKzck+Hr9OuHKb1cOvShTmMBQ+eNMjE0xh\nAu7NYxXsYTYYMC4EjFief5oV+PJoH01AaaanWWpgfbFdMjWXA4J0iuQ8bP3k\nF65NQEGFTt6X3e0Zj7jYMDWlVeG3EAzKtlo0gH9Y3n4M47PMLkwA6aa01PJB\nWhdD7wF3fZtTjvB0BWPVSyhg6bOfE0UvhhxHXdm1FvnmTwZu2Z9HeM7FNSzK\n7L7sjz7odUcw5BJuuelQn3cL72UFiBmz1aNmM5ju1rpHsr8l3I05BXmfNsog\n0CrQ15ZQbouZ2ExoSNLWLNQxXM/F/f536NeYDeLl/Th4g9z2X+XGMB4sS7/6\nBIxZfezYPfdo8hJKJac0UuxONxQj2XfcInLxYEj3vZN+gKR5e7xs54z0l/x+\nra58aSUxebca7m0fqqfk/7bGy5u81Mr8CeXGlp0AJYHZgYWs3jIRpKHVdiBG\noS8WYSDeu7hm9f9wuir8vNm1HqK/uQGHpr92DmfN0RcdcvaRP80u47+l3+eS\n1nHq\r\n=UtRm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a9bca201560da3f96e435e6e070baee148bcabe2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.037285f9b.0","@material/base":"14.0.0-canary.037285f9b.0","@material/theme":"14.0.0-canary.037285f9b.0","@material/ripple":"14.0.0-canary.037285f9b.0","@material/typography":"14.0.0-canary.037285f9b.0","@material/feature-targeting":"14.0.0-canary.037285f9b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.037285f9b.0_1644604169501_0.23872162507755657","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/form-field","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.1aaa68dda.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0670352bfd0d11fd2c635bd9a238799aad3cdd34","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.1aaa68dda.0.tgz","fileCount":33,"integrity":"sha512-jotSkifdbOKXc2xm0ab8NCAY5ak9kCrpb/1NT+cNjuUViwOu/hz4UwFKiMOefPSRExVV+WeJNut+ePfkVlT9ww==","signatures":[{"sig":"MEYCIQCRiDlKbZ8Ui10xT70VcsP5f/2KdlRgXSyPG5QpWyO/DAIhAOvwFeQp8hUIi8fMSNgIV+8Pow37nTAo2tPJDyEA7po/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVUsCRA9TVsSAnZWagAA61AP/0OvWvn6Lb06FjvTvTUM\nZswUnZ70JIgF0pn/8mAbC38GTyctkyFIIgT3PP+rJJ5OQrOzJal1pz42oFAs\nv3y5hVc/JO5TdCZF4Fe65THI1D8nUrtbLKXNjjjUXbcZ9Be0qdywvnRnPaNZ\nXCRo5JDj1ZKLpcFTlj4MKDBnjVy691Re2z4Sfc+THgJjN0am7EX7+tMGEOMx\n0QPu5jRJWvO1lB14aJyPSEESe13sQfdVFTQCBCEJk9kCeSZfVF0+ZuCa5FbW\nHc/aOY+/j0X6xJTPJzp0tKRg58gAXCV/R3dZkmaW+bOGKeoWFa0DKWlUzwRx\ng5fiKiRDkQbqcx14RMqgfyvxLhIfvUDrxRcAZQ10BMWT70E+drv56baIDlGm\nc0HZRsmdGAqlhBKY5CHDonct0GnLEjf5d+9yKC69juJZ3Bz3TMAvjpVzFF62\n2fPU1plw/yKyjfwAFiNLMATZktXUVlV24yz/cTaYlt/1zONrUNlJYdi1ZwyP\n2n9+JQzV55BY2qHYLqIaqmu5cyo88dKyzxk8BNPgEV0olgZMaVpYxjGZWHZ2\nr82uiHFTydadx3oQzHPBK2gH1lZcOUayZcsscSGTOCeZxUj9S5Gskg2zJZ+u\n3+gYRLZtjaLc4fYuZ6WbI9PXleuzTj80laV7PUfMp0hLz8Kq7hy/+O7yIXAs\nYtrG\r\n=2l2j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"49eaedc3ce6f1f8db6a6929143c077e8f65694f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.1aaa68dda.0","@material/base":"14.0.0-canary.1aaa68dda.0","@material/theme":"14.0.0-canary.1aaa68dda.0","@material/ripple":"14.0.0-canary.1aaa68dda.0","@material/typography":"14.0.0-canary.1aaa68dda.0","@material/feature-targeting":"14.0.0-canary.1aaa68dda.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.1aaa68dda.0_1645040939938_0.03580480391915808","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/form-field","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.ab4aba1af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c626f1cb8e431d66d38ee3e47ac6da66d91debf","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.ab4aba1af.0.tgz","fileCount":33,"integrity":"sha512-WdaqYLrQsInC8jYgLzAjjLzTusR1KhXLEsim3uGYdE/Xmvc4XTXQdMNdIFNo1iGLwd1fZ8WKRG3gniebOilHXw==","signatures":[{"sig":"MEUCIQChLUW4vHCZTV23RjDJt7sqmyYU69xtCTCeVGYCVd4J2QIgWIvPWWAk6SJ2TAR9f0D6v40DEqDZvpq3Ia+YtAh86b4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpDyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNzw//UgBLW5KmOsZ8YvXJIAocaqcsei8RhD3oH0SeB5eP2TmbNccD\r\ntwCHpgeBqCpkswXpi+allcJbCEhA40nCBK0IlD4FBN18Ql10bnisOoYjc7Lj\r\nhHUKZRqa9VC3jA1mTrxNBkQLk1lIXIbpEnGrmD6pUmB13bW4OaxZm4owcLFS\r\nFF/k9MFlXj266fal58TA53VsEqa591Esng9uNkKPT9gDM8RTceEYkCpfs7Ey\r\nlT1gsUWzUNUx2irLGUNR0HVMW3/YVIsTQBRb0sa1yapz/dryylejSPng88L/\r\nF/DSKerCKh+R1JcDZcVYP2xcpqWmFhgspy883zzmFK2Ekhbsy0cAiT5nIWVt\r\n7vat4RQWagthzDv1JFwngIZhl4BC881uMlUDkcZ/5IQGXH1qMwRW14Ci5ndx\r\nWZljiDBVGptsEjS/T1tT6OiY+gp5X0uYA5EsNv5F4f/YgV7ywTaJEZ0hxKSS\r\nVAITE09npmG/lvSam4C8uQ9yLWy5dmBLpDgzIPQbQiqqWRD6Fmc+j8KjtkD3\r\neZp2eoN5kxGqjBoIN+M/eut1MBuNvHrT7G4TeMADkmsTklPDzGdAQiqRFsh4\r\no86pOo0uagR6dd9Hcw82NZiRwmBrDTeFbZVnAfcWywpm9x41uRv5kCroQvtb\r\nx/7KtVAJQd53wbj7H5BLOZJuZRZrqNau9xg=\r\n=i/jw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"89aa095a35d4a006012f1de893cf181c5725f676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ab4aba1af.0","@material/base":"14.0.0-canary.ab4aba1af.0","@material/theme":"14.0.0-canary.ab4aba1af.0","@material/ripple":"14.0.0-canary.ab4aba1af.0","@material/typography":"14.0.0-canary.ab4aba1af.0","@material/feature-targeting":"14.0.0-canary.ab4aba1af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.ab4aba1af.0_1645121778590_0.9548487143158766","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/form-field","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.e58552c6e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d47cf2d2595ab10443e06bbb3bb17a7265346fc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.e58552c6e.0.tgz","fileCount":33,"integrity":"sha512-+Umjg6q5RzS0uiNTN0wy4Bjy1jQPlfP5JlMDMa2eDPd5rMyGqj9imy/bSlrGGbr8QynCA61gmaxb52iABTpyfA==","signatures":[{"sig":"MEUCIQC1KU/4GUTNGRFF6gz0JsBiD5C9c+8r4wGG9NRSHP4lzQIgE7rvDOl2qVwz0ROrgtrSHxCuKntl23m9DdGAj0NBcnE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9+VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+XA/6AyNdnyi9z5zuQme+GmScBf5QTIHzyOAE7b88nUTmZCNmO4Pu\r\nI8mFYRNFoo69BTuKEarITlKJOsh3KACg93hz7KukkpHq9y4sK8UwhPOTk9uS\r\n39iPqxtAg7451RCNoXtgoUQtV3NHG1SbQ+t19pyrme8NpZjPBNFOVlaDZZ00\r\nQN+2BY/M63HRogrM36HeKCWL2Regh+oNrEoRy8Ga7IEDDk4PJWVwziW1t0BE\r\nGK9T3cZhW/RmDv15Wf/WlkEckM5oTPX1KgHF3WmA2ZuhdYsmm2ccIewSsuQm\r\n9uvd1M5e0sEsSjaBv7pLJ3A4eUQwAgDtRPPNhi6vKuwJ1m2MHaC9S0Q9CqxG\r\nraX4LHqUEBt4PuKvbZ3Dd8vcGjCPVq5fnjTMsPR85gK4+oF7LppuIvbb25kr\r\nJJjr3BOs02U2V3ttjs0tY3f05e2WIKXnukXDjEYhvniO+xCfQa70fnSu7dX6\r\nH2QwCxvlsx8/yzAXghmpEQE5vVY1PGrq7kFSSS2WgwZR+54HPQ218Y0dj/3/\r\ncdM1fpZ97IPp1H/o1FwUpux9qsv8Ak1mK4DkQaWhXyrn8ea9LtgdVObiXWLe\r\ncjxhevE83H0vwS0yYSlUbTh9ppN06yBjVGYqAwJrPjA+aWuiOnecmWOyK/cv\r\niWmAGrgCiGqclXU6Qrm4xdjg8kxXSH0/uiU=\r\n=jPyD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6d5c1a026de93c3896f05529594e5b025f79a060","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e58552c6e.0","@material/base":"14.0.0-canary.e58552c6e.0","@material/theme":"14.0.0-canary.e58552c6e.0","@material/ripple":"14.0.0-canary.e58552c6e.0","@material/typography":"14.0.0-canary.e58552c6e.0","@material/feature-targeting":"14.0.0-canary.e58552c6e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.e58552c6e.0_1645207445480_0.18597576850957598","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/form-field","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.868793776.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df05aac5f25bccd41f03ad7e0946bbb81953bc95","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.868793776.0.tgz","fileCount":33,"integrity":"sha512-WzaWSA1+LBPbjP2Phl8gePPRDn/BGsoh07PD8yS5yhM19LWnmt8HZ6rc7g5LJ8lWgPuEX4hj0jH2bOuIxlPpng==","signatures":[{"sig":"MEQCIG67qi397jMYhsKiJweT4TnRbcocAFxvpUJylQXb3UvpAiBEx6DMwHtrxIbeWMyzqPobuv/TOPJ+DaAk82dGJ+aB/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTr3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJTg//bAoruzR1qUEs61nXx+exRmkUEkskPY9lnbYYesHgWAVkbTH7\r\nicaDhYdZgFb7+MEaYnWQ+2Yuj1rUZyWqNM1FUpbv5HzldxrJMKWyEffZJSz7\r\njdrq6LxMGL6H1MC+U3F5R9ZtZcAemxGNu55w2R5Yt4MlaQb7SlMqywN6VqQ8\r\nQCVNV/eoHlJ1EruUiS6A5/aF037arspAFsN0j/EBERJCtCUg+WRXfOnaDKge\r\nOJ+GHcl1qoLhj5ZfvUurCh2Gj7oZ3Hm8bxY32K38wdKUi5/Z3ZT4hkUvaL5O\r\nN95lC9k0dYKwjz01GZV6iIg47YEyKv9zgi08n5TI0Lm8NNnb9Nh//44/cHGP\r\neF5h3K7PSWmHnhy7SFkC4XbFHCpJ170uqvM8NAXP3/SPMNzAlxDdwu9UEgVB\r\nef3nuelQWbXyGCgZ3/5Zv6p0rmPA+KRXWGSkVddmWA1M5AXBL1k6izBDjCLs\r\n97PRklzPJJmYhx8qG18pOl2L8m2VurBFznDHsPU1yHF/JeIqqZE1OCdvApTS\r\nU5Y/W+LlY/EJ3OC5oc9Fd60jqmIKhXGqEzbd7oJFH/Qu66X3p0mfLoKdQ3H3\r\nb1Zs1ttrARt1V5Wjvv3tBfqjT8AwDQpxJSn2cE4zhUGRuchzM1zqRviXvZXN\r\njiuxwDZJUeqCwEKFzlv3pgnI2/sPX20PXjQ=\r\n=bUFp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"78272b55e375cfc80b8f288ad4bcd4bba3d8493c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.868793776.0","@material/base":"14.0.0-canary.868793776.0","@material/theme":"14.0.0-canary.868793776.0","@material/ripple":"14.0.0-canary.868793776.0","@material/typography":"14.0.0-canary.868793776.0","@material/feature-targeting":"14.0.0-canary.868793776.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.868793776.0_1645558519600_0.49864776470176997","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/form-field","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.fdc37a445.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d28662c9ad3baa02c328d6d768a79eee3c259c69","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.fdc37a445.0.tgz","fileCount":33,"integrity":"sha512-J1xtRm8aVZYKlLUbBlKp+53wS+GDfnaTFlgEZtME/PL7hFhZklsxrUD4XSR2h6/XaWaTAmo3+WN4KcbnZ/r69w==","signatures":[{"sig":"MEYCIQD29KfvJD958Xk4C4vurhKRatoA8qZXSJ00aL7KuKc9IQIhAPhhkSqEEE4y+KDKjS0BR9rU+JnLwoaoNAoNg3AWkCPq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRhwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvfRAAidgzf8a2N0BFsO8bpgumFY4fPacHKi10eteokflV1uak0zx8\r\nLOecus2x7V/U+i+uDEM2Gr2t6TwEXMFrc3/aqh7n/1EdeltIgsbfz87nIjVH\r\n5Y3abvzERAvNFyEAiwugVfaljw5DQfJnEWxn5bTczLU+fI1bV3SSU2PjJe1+\r\notf2ttmr8tIWQGnHHyy2+pk+byCk5ylT7wDciBEDMJyDijeDCWwudiC5Xgc3\r\nM27nF/x2W/jAG8DUC+LvfUFHP920MOIYC6oLcIC51BYXymGaq2+KIwolgoXo\r\nC9tdoWRrYUngyjSYo/tangUTtzblvdvqOdboftWNjyFoK9hao5QxRfeeMTV/\r\nutOY/wAjRCmTUe3s9LvCD8AN01xHkeL6qNADc+w+5cQkuUmcQLfteC97n6DU\r\nkn4B9ZnyWYInf+ee2IG5Hc0vIqNhx3qRwYj9Dt35JW31HQoVbl4JXWDyohCO\r\n413zktNHE6VfGRaTT+Oqt6Bub6jr4Z4VeBhJV7ea/cPdwAbHjNvhS8aV/c4s\r\n/oiSlnxnKq49dobpiA/MeNZXuw2OG5ffdv9X8qhi8tQ46ttjSx6Rc2CTwWY8\r\npkpiGfg5agZzN65rHvGQGhEOp38cjqlYN1VRcmvTWrgodNqv5E+aYTkRr/kS\r\nlXEbbZAo+OAHt+ImPu1KKwkWvbt54Pf1v88=\r\n=hm86\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5a8fd2fd927d036e44b0b22f48d858fb848e504d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.fdc37a445.0","@material/base":"14.0.0-canary.fdc37a445.0","@material/theme":"14.0.0-canary.fdc37a445.0","@material/ripple":"14.0.0-canary.fdc37a445.0","@material/typography":"14.0.0-canary.fdc37a445.0","@material/feature-targeting":"14.0.0-canary.fdc37a445.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.fdc37a445.0_1646073968146_0.6990843112335419","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/form-field","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.43c7d87dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba786b5f819a37ea79dce4fabbdc2acc48d62c52","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.43c7d87dc.0.tgz","fileCount":33,"integrity":"sha512-W8eIhPA8yhpkB7v/rFEqZyBQZL/u56nkmpr5eJTEU6hJR2yssFqi71XudwFhv35bgQAuz3JvpkKHKJvVV6LTVw==","signatures":[{"sig":"MEYCIQCEdBDy+WqjbOQrQrPKg7ylAnqXbZaEU9Eehz4R/Q88GAIhAKiyEl6BAdM5FDSg7gThDu+h5ZMn4dRUjHoWvh81zB2G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjyzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7IRAAlAdkS6BI/Zo7+mu3uS6g9EtzD9OWD/+qZoaSzQ1oiZsIUvqO\r\nTncqRG30OwAbn2wxAzhGDnq8HRDGjd3YHHre/zJUqaihLUBpGuKP9LVSVmvt\r\np7pmEOms42JkCIVvRcGBNNXAfGkcALbEx/S2RGOO+DVy16gsgnTmgkUEfnVV\r\nKB6hoSyA1VWxI8FUUP2D1NDyXSiRSAtYdBOhCx3cPtiz3ELn7KgT2lCaByxG\r\najcpB4HHELCj7PPhHxDH7Fuq3bmr/74PYKajlp5tI5JSsiThIIrzBaT9lbPZ\r\nDxGNWGhNBsf/NhyPolVPd5WagV/rg/rhNrq8+mAYplmHnA2uMUCnioWMZeHV\r\nTqH8xM8yc3tI2AfxqqVzdgPxKYXiyN4DXIyVMuD6AvZkYsvXsI2zNOoFOVH/\r\nIuvFCG/KgiKEb0lRXiM9Fg24rwLKzd6KFZn2jRQAeK21Kc3jRDisidJVd5e1\r\n+sUxq8cKGLTZt/7Dp8IUjG12O7hyRAmmEs0zXfiEpS2DVcd4nR0UYMA6N51/\r\nxfhmnNSKz+odEFpb0ZokNObjnAk1o3z6/NW+IVIXmrQ7s+V6qPKN8hnpxQdQ\r\nYWRmj3t6aGjLDlja8sabMgCzb+Xxt35PpKEWDHdHqq1D550kHXemxgOgCchP\r\n+d4riVrFxCs3o4dx4dpDmRhVNKyMFkEqj5U=\r\n=e4Su\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c03dfa84e200bc6d570c73762d7ce507d0659e76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.43c7d87dc.0","@material/base":"14.0.0-canary.43c7d87dc.0","@material/theme":"14.0.0-canary.43c7d87dc.0","@material/ripple":"14.0.0-canary.43c7d87dc.0","@material/typography":"14.0.0-canary.43c7d87dc.0","@material/feature-targeting":"14.0.0-canary.43c7d87dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.43c7d87dc.0_1646148787619_0.0012779363112984665","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/form-field","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.23043acd0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6525510586dbed560e088a56648423b6c17afa5c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.23043acd0.0.tgz","fileCount":33,"integrity":"sha512-38wITMPXGm+V3s877wsh8C49eZAX1RZPzGuwA070gN4z4cYFsX+E/71RpNPLLUU66pV/pR/4UfTEDThW118l4A==","signatures":[{"sig":"MEYCIQChmcaSSN+bnk5jpbm8krQLMUcxe/wGSjIguYMo3f/PAwIhAMbZG4XUCpS2G7c8TT/emZZe+pcuCNL3HFxlGclSCfd5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9MsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpW1w/9FBFmf/wITwWKYt/gTDTF6opfZ7jPiY6gG0C/aKpsAaZtEUPg\r\no8bRoXjxRzQJpTJlQUG2zIj74W4plV84dAh759AQYb7BslZr6z3VGKXtx8JM\r\nk6HAuNEw2XTEYpgeMDM1cLNcd3xR3v+hL1SH/y3BwkbPKAQcQhwScepRaw+W\r\n7hEjGq9Wpz/v/7vQY7U/E7FVGfG1DfshUZ9vCTQDJgKXpiIfEVUsOefmw4Yy\r\nnZkX0CF0sGSTanvkt1cWUroKDxub9p3mnOpQj0ligwrgBjSSKNwFoiwynxXH\r\nBmAOB5LKjWCFQhXPVGKT8+U0AQPST3sbMKejYhpsPO2sLPrKFQfgr3yo0nYH\r\nU9yBVJMYCroSvHO/ZKOnbvoEOC7hqqL/rH24HX8Tm9ekEGOv/F5zn9Dvmh+Q\r\nHz6MsJtFtHY+wVUeeGODbknJNpY1RCOUxYgzHqD5UNG6gUbDnaVjuIEkR8oD\r\ngzaCDg8TDNfpKmK63b/9kegZfWFXrglm8PCnc/aLzd5eSnUvL8uJD0O/zshc\r\njoDzvjyIJUwcaV5sxk9yv2Rkj9qfWGMT7+jKrS71a3ipo9lL7Jk6rbzsJRfW\r\nYbwZcvByGxw4/+ghKOS9MoOzgf70MelqARg1zdkAOpcetS7WyfTtUCpKRF86\r\nwiphbAJsXFAmt67c3WHX64DWfVVrrB0ly7g=\r\n=Mdmy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b1cfc3908c111a04a69dbaa90966642093f79e86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.23043acd0.0","@material/base":"14.0.0-canary.23043acd0.0","@material/theme":"14.0.0-canary.23043acd0.0","@material/ripple":"14.0.0-canary.23043acd0.0","@material/typography":"14.0.0-canary.23043acd0.0","@material/feature-targeting":"14.0.0-canary.23043acd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.23043acd0.0_1646252844513_0.1960367707522641","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/form-field","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.6505e61c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4967d924a45c6ee2d134a8b93fe420549dc865dc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.6505e61c5.0.tgz","fileCount":33,"integrity":"sha512-w9f4vPzDJ2vKW+1MbgHsbTrLfyTzt/IAZaKzASj9ulRpKqUnQkW0OBO5UbA8CZz7qoMg/B0/6gx/Uk6D0Jtcnw==","signatures":[{"sig":"MEYCIQCY1vodUipAmPTSJq346+4FpvwdSUUhiAmWMh8ykJ8tRQIhAN3eEBRaSSWDDFA9DURy9JOL82MBY7GcDrO4UyAzci/D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":188091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR5bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcCA/8DXJuSU5hsFGIN/ezQ06MsPhT8if0hs/oYQeemu39lpGCNv4C\r\noaH1S7ab+H+POC7Wmvq6Si7UKCdgRrEE3vlopfWiOUtf6bxn20wqiy3fXPED\r\nNb1WgQn2M0rZWK9BMSOQET3CSqRt4+e1EKOP7txWmsxfSPFqKmD6u1elwgal\r\nzoUfV31TLUJ1tkRrCO8YYw5wpCgC678JQxtwd+zloXIO4OpoYt2bUjDVUxHy\r\nBAd0Wzisbac29t7NKW86SXnBzz3Bl/ZRRiJl+1AWUuoPeh+CufsSB4I7LprA\r\nVLZeqOZyWVLDmTYzV8HWGjJZonZ+ViLuHL4XWIlZmbKl55vIFI5en4B3uJP7\r\nfLVIacXytVANnATVXeDUTzOI8bgnwQ8ZQnQF2RvvHRP8HLWkAw59A//3Ou7m\r\nFs/pUAKHfvqR+Pj6ZUMYyDZJjG/WteE6BlEdF20cTxUGlSrkCmabLUmtVNAd\r\nR9qWPEtwRnCJDebmPsnrZh9ocaRlOSWBfTPy/ejT+M7nPXOnhB6WH2pUWrgw\r\nqcBhYFgCQxgY0CNtZGfSQAObxeanT+84GaqsR3wV/I0dzg4Qd6dJ13aTYBTu\r\n9gjCjg3qtqjDhsdOnt7q8Cz4rb9bwO9O0taWAE2k4Y61YjyEPxi9JppKJST0\r\nWcQDoNj3XGE4dvKQ0zKHoEWtqxccfE1powk=\r\n=5kvx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c9070f0099aa35dc2460994d2d83a8330b996c5c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.6505e61c5.0","@material/base":"14.0.0-canary.6505e61c5.0","@material/theme":"14.0.0-canary.6505e61c5.0","@material/ripple":"14.0.0-canary.6505e61c5.0","@material/typography":"14.0.0-canary.6505e61c5.0","@material/feature-targeting":"14.0.0-canary.6505e61c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.6505e61c5.0_1646337626980_0.11241760335397166","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/form-field","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.16c166154.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef30d32709bbd23c1051ee298be9f0a194a406c4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.16c166154.0.tgz","fileCount":33,"integrity":"sha512-+fInldOK0fdX5GB8oWP9/6X8L2mepGsyAb23pHbTLeEFj3SRvUTC4gSpPHhq2tsYe+/b602/SQZ70kFhzY2JJQ==","signatures":[{"sig":"MEUCIEctZ98beF3VseG2Zhfdr2wOC4gY/dnujdlbK2MLvalbAiEA+QhMCjNXh8Kvj6u5Kt7BKTFkwgydvPA9byYpOUXwbMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+UsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFLRAAnil6PS/T9oxNWkWXWkz3X2l8+A6TLV84XGc6ERYe2taDTmAq\r\nZqAiUESKzIQ7Scm3yr/xjSJy4mXcDraPbbbbKFmxVzIubfbbHPwB7HD3yct/\r\nlkhRO8HAKuXD6e3AtxUJYnT+RwZaQfpQkTtEFG7r2o+/2s9XSmbo05s9Rsm7\r\nuMgRYiVm/U0h/2reaDwmpMOpV3nyzeHhptZCSBr/Sto32EiAABOtJ4mJj549\r\nxpewAofkhjJGgt7eAIAjhMQP0rkTu9n174+1eSK6oFcfnkj7QwqpZwbejvOS\r\ndVAkH2A3eDdwOLz+w0qYhb/7jPPVrn8S6i6UIEojur2ioO4O35tHccfvPvpB\r\ndzCwyEKGyCnszGeD1qY+ix5VBCcZsd11vcVbtpP8KfTPT5D/LGRJOx10lwvf\r\nlFdOEeIRsTNZPpzYjK55yc2fVg7Ms4A4lrQ3Vr7fOQVPBh/oDjUuW3q3kHA5\r\nlKT5BOzFYOGlDFthv8v0YIffpQSx8u6AkyMR7ppcxrari+5/vZn7DnrFgRRN\r\n2XeOg8EleJV8nWhXvUgmuII1BCBthgH0Ndj6Hvg2Ux3laKC/e/0seKvh3kF8\r\nBNwNhcLnCXk/1drPBqGuEPw5Xgaj67d+Gkr4gvvOHFV3Z16Cz2pFWJxUls/k\r\n26lfJ+mNA0RtpfAg5AGrMyjhFJS/YGBNZH0=\r\n=lvWr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dd1bb8b4a67220dc0120ba2dbdac900e51002949","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.16c166154.0","@material/base":"14.0.0-canary.16c166154.0","@material/theme":"14.0.0-canary.16c166154.0","@material/ripple":"14.0.0-canary.16c166154.0","@material/typography":"14.0.0-canary.16c166154.0","@material/feature-targeting":"14.0.0-canary.16c166154.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.16c166154.0_1646781740375_0.8284869554852456","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/form-field","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.bdf1d3771.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9c8d283183ce1f37ff052c884324b899c721859","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.bdf1d3771.0.tgz","fileCount":33,"integrity":"sha512-OD/97t2pJdK0gLJvqcIMUWVc1X6rlJhZb2bjeCuLFxVzbMMI4k56TAzCadmOhmNYmQFF6ZrxpCbnp2LJel5hSw==","signatures":[{"sig":"MEYCIQDSaxBL17BOssULlCsiYz5AcY4+6R9KDfCTcLkSdAAy1wIhAKrYJVgt/bCMtCraJs4Th5ZoQCyIRi0GsQh0lwq8l65M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1EOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrN9Q//S/TQvgYL/Dg6KMPJQPZsNgEV59MsnW/KlF5ZwD3nMzc+Jgef\r\nQhpGoAEnfDQmGdMKQTSEb3k1L17MEL8PKSdthPmpTvZ8SvRhC2kEXJ6B+rPa\r\nsJebNuKlP4qXC7QkR29Ur/cUhSNhZjJxHnzF8PXJa1Vg1L3ucR5zD5K+1NIp\r\n1W1tyoqr2uLkoBlSCrNOqYN3iLzwDLS+jk+aA97Xwoec44QSH/NOdXBZ2Sgk\r\nQkeKNNDzYfgjHwKrkX+HsSAnmiNZu4iyvRcn11o/djTrtnw1UXY9NzUFtvKY\r\n4WSuu9n9SjherSd8J1pxZonfTQCgO7tFm08EvNHrjQ4ABDSNeMhfnhP55NCn\r\nhMiC++40B/br6+GILs1+mf2fjg7eQ0MZoA2+CZhohI6wTYrElX99Ixes6Brb\r\naqGyRxmmfXlzhqnTwmodb+JbjhK12JZ2rKdr7DirsoHkBrQoCMV5tci/+O1j\r\n+hcBgY7LlN1W5wsqxsdYMptVwYBZbCdd/CoaOp52foX1H03ANl5uAy7VUrb/\r\nsp2eMRtrqJriAnQt2tDYTJiGKgVxxm+I660XTZMFCDrcP+RKanm7o7v1asIu\r\ndGApDlf1IUHtomUXHHtxhHz10hVp8jGIKlvfiB3+04SYFKerBhikBQSSIJzG\r\nSXuTMD3K+u3iWLEqyJx7HITrYOz7fM8l2V4=\r\n=n3lJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bf598649c7389f49207c410e58144f75a67cc4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.bdf1d3771.0","@material/base":"14.0.0-canary.bdf1d3771.0","@material/theme":"14.0.0-canary.bdf1d3771.0","@material/ripple":"14.0.0-canary.bdf1d3771.0","@material/typography":"14.0.0-canary.bdf1d3771.0","@material/feature-targeting":"14.0.0-canary.bdf1d3771.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.bdf1d3771.0_1647268110778_0.6583277647426664","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/form-field","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.cf4292778.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"889f9c0f1e408e39d2fcd2b3db3a554f188af656","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.cf4292778.0.tgz","fileCount":33,"integrity":"sha512-hCE98CXGNlUCJzkChq+R67JUdS4VNoXvwxIGYNXt+2IPqp/qDa1uBDTdl03Un5V56oGBg04uY1cT40iJ9XM7Qw==","signatures":[{"sig":"MEYCIQDHmu3jiutkzi1HkRWckfShU/OOnRCfV3nUgAI4TZ5OmgIhAK8Mh5str12zwWpWaCPXmP8c/8Sx+pxoTOvP+GlJHZcw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL93vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTCg//cdPSMqTvUf8JYU8MNO95pXaIaR7WlNOylxw4ntpdUGNolgIc\r\nFLXKcT9eGzHGWjkliztOYbOXw060MixYs4XkKe0A3yOmni5YoifY5/3JfM9d\r\nSNXTDkHlRWSdeN8/CjiDFkTKSTW7J9NfHIN4TJnyf+bssDzOOSnhS0zDxvHN\r\ntrRwCkO8AplLyBTrfHf4tt8umAWp59orTbtI/D/y7nT0YnQrn+V5z/1hPEbd\r\nQuQW8kW/Fmg6Ey/To58iO5xAl/RFofczTRSOxEULRBkj8Xsk/FO6TvZzcGSt\r\nqpRhePu5JuNUCJ62ZFS+Zg3wgDffTRr253LQhym8tReF4q0/tnqVbjA1sYgz\r\nxv2MHuvlBIA1ulKy4FBDVUn0Yefut4k33RQdEHMS8AoDeySyTlcoJdmHtX86\r\nUVE7UiBYqmhDnPPj3eJ5X33DCF86rpyBF34PMUOOMlgMQv+yO7CO+eFOvkUR\r\nbESzzKlizbaJATNw5tJ1QElu+/RH0EOLKfkX3Y9g0pGGngJVBcs8BUrY3iMN\r\nSO2NAOVeOTWR3TtNJCORFfb9lf3ITArsBcCFg8FnXduQ1MA0gOTjXlfio0gl\r\nsgi9l1Rh9PA6ETLA9J9SZcdDgK6axGmR7zzAKzrHepC7/h65PX3LHI0J7aLx\r\nP01cSMOgQpV+ph7h3CvvFf3s0ao062zLCfY=\r\n=2k+u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"85b1d5db9650586ff51d999fc12531d07489d13b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cf4292778.0","@material/base":"14.0.0-canary.cf4292778.0","@material/theme":"14.0.0-canary.cf4292778.0","@material/ripple":"14.0.0-canary.cf4292778.0","@material/typography":"14.0.0-canary.cf4292778.0","@material/feature-targeting":"14.0.0-canary.cf4292778.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.cf4292778.0_1647304174780_0.9500564258240813","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/form-field","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.bbd43e0e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"509cc0c00278906f384aad38e3bf63973d9e5ec4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":33,"integrity":"sha512-GNjCZQBv+z49em32fvNiSXOGvXjzLcwx2cxqqvVkohxm8hVTuz21gssHtpE9uQNzr4Xe+tTv/Lv1xcyuBPipoA==","signatures":[{"sig":"MEUCIDL3wzACgH1uxTEJfLa/IvC/A6U+os7+J9VYKKMp5RgfAiEAjFf9YGqh1Zu8kH7EL1F83lOVEV8gAzfEqsbyu12VSTE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk16ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWahAAggRPpmMUq/B7/DZw3Zywqo9U8q6zsvG+qCo+hw3Xg2qYT0Bb\r\nP7lj3ycgSRBOUKa3Rg5Vb7C2pdajCiKZSkxRL5CXEDYln6y92KGFK1pEVSF7\r\nDZUHuPwsmDKf7rl8e+NLqyAVZvJ80+8rRzyKktS8brO/6jVxcFFhRlIfXnsb\r\n+MuVGzfxhAAr5FK2IMWeubQTuUz7DuR0oAIIF1ebwVh7yMgQEUTobxe0qGkU\r\nA1KHcudVSuzxBo2DM/lkg+OVvM3kzVTNWNxqNbyrRxs1+qAqu5DW8juRBIpv\r\n8z5zb+G79Kh0K8qnS2NyKm7stsJb4l96ISDzR7j4eY5bhwRirNL7K4NvQhPG\r\nD4uF0Az774sds6N/pu50UXzjiZn+lWsBqXRmWYsfcPLfRqH1DWRPm/u2n9mh\r\nLh5ZheQpeiietkhHYTFKCcJ/HnAPbyJO1KoK/7olhsgqMN5eaDENibclXmqo\r\nKnCDrmfaZ3b1/2657ZJpmh1lyu0+2+k9n/TMV14vCTtv6BVrELt3hZRNeZGG\r\n3+Ut0JpP/N71SA3MhsauMtPYw/lXwgyui3EZNBFD3uZ6rMdR2bOJfG0RFehL\r\nPAAsMzIot83+SD5MLF9VnZmGA2DsfZqjBLu+xRq/sINk0IeQzy0aIW/jeiW0\r\nBT3MgWqYjq6sHs0EA4TyaV2HCi1CR4VBXiw=\r\n=tNf+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bd60ebc6c6267688058726d6f98421b0e815336d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.bbd43e0e0.0","@material/base":"14.0.0-canary.bbd43e0e0.0","@material/theme":"14.0.0-canary.bbd43e0e0.0","@material/ripple":"14.0.0-canary.bbd43e0e0.0","@material/typography":"14.0.0-canary.bbd43e0e0.0","@material/feature-targeting":"14.0.0-canary.bbd43e0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.bbd43e0e0.0_1647463802686_0.9222586606560901","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/form-field","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.1b6afad86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3608d5805af7101d85298b6540b4ce607fbf13cb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.1b6afad86.0.tgz","fileCount":33,"integrity":"sha512-t+Dw2W4s5Oucc+MmoIjoiY3nNdXRuPbDCaUuIXPZijP6VxD9F8CTHxAafD8iDvcdkPR3EeW7HAwds3wz4Nh9sg==","signatures":[{"sig":"MEUCIEemidvzvl7xl5+dIKrNCrKFrK2EqZ3qyaZV5wKlaeKzAiEA6uy1FVtjA7dCqwjrA+w5b14o2DvhmN9N/mMBqZ4wgIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlCmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCvw/8DLmV157Dg5VrhN53X3ggCV5Mqw/vwnApTqyzghagxE+IPAvu\r\ncnjmCWcEcb1Liy63/wF2QBYEYNCxlMEhL/QaG+DfS+eTfZ5pK3Ybv84PjYX4\r\nz/AxRIdTEJcDych8PuPS5bt/44EUQakM6NP4iuyZg9GGwzRczd8kJjrczYIE\r\nFfhZdnjhTCNOfqRhNrVjgl05N5KGJA7GABXIvRg6miJcW7dpUd0ENG4si53V\r\nP0QwpRxujn1OBI2y0X7Beid5pQoL2bg6jQ3SgVn379JDZTkDwc52kr2vz3Ls\r\n4bvRO9v0SJggvM5NNEvyLXhBnEcEeatGtvsQ39kCMQAV1iqhYkkwuI7Pe9Eh\r\njE6eTVuXjYJSmqkgIW8HkfwreeokBOQUAYu7DmduIwHs4APZvN/0071JPnEz\r\niCMmzEpWxSS1hsH1P0rH0MV8zniTts/FO2yU4qdcFyI4jyFNfoRXH/kLJsAB\r\ngqDjBfQrCNhJJzMaWdVLOoY7XtoHjZsrc2iBjgeCkonqyZI6BgFf1RDS43GN\r\ns+dubtJNps/DWYfn9WaVcu7+61pmZVqbiK9tHgXEYlEd/gwkovDVQz6kZPA7\r\n4EixR44T1cHUAlA/otEi6Jp/+WaYVMKoP/z2ckLAOU9RQE8xcLsUlkZbxg66\r\n0j2tGj1SebeefvnAkzWMHOFtRG8iVaJhod4=\r\n=TRfp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5e32cc72145fa47fd2155c83c81cfa7ba5e27db8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.1b6afad86.0","@material/base":"14.0.0-canary.1b6afad86.0","@material/theme":"14.0.0-canary.1b6afad86.0","@material/ripple":"14.0.0-canary.1b6afad86.0","@material/typography":"14.0.0-canary.1b6afad86.0","@material/feature-targeting":"14.0.0-canary.1b6afad86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.1b6afad86.0_1647464613993_0.7250259767825049","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/form-field","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.bdf9d4af9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8523c7600d8fd737436c844e3e5bb01715cc1cb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":33,"integrity":"sha512-xhrxF6oMP8gir2HzRnv0FwKUtDodMar6ngIgCyhXWqkzmdePXT6JRoC9eTrWLUYIyBaWS+vnh6iawy0TFgiPMQ==","signatures":[{"sig":"MEUCIG4boJPNRNZa4DeRR8In2p6xHyvZJTc886Oe3o2KqMzmAiEAwNEp9OG7gBOiSX4YZE/NLdfYjDShyZ1fBsPNj4p0r6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlP+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzQg/+PbldiRnEtmMOi4XYAfUQKJY6mCUfssmLGyaVGS3gF1zbON9Q\r\nOeYBX+B70awhmQ0n9EsHuMlO7sZFeglvvErLp7dme6FXJJDat9GWNJZFIONn\r\nxZ5GEJs0eI8mpRQOy8a4TEswSPoy0h5KlcGgeDurGkrQ38sI3otEbxP6WCkk\r\naKdonyRVYYMaZVqSnTUGKrrHmlKYySIU/iw3oVfwd2RT++LtWFvUqPf0ftYc\r\ns5bSM4hifHq9eWjOGsvXieHIrggQZamK+ubH/MajLcyX2z/4/G4LDPE1Prwk\r\neWZxpCjj2M47ZMti5v49+OOt8GUPdBqf6Omd22IPTf6BsNxGMI+srjh4W5pT\r\n4N2nsKLzFkZ6cikPKo0Z6Ia/4l2l/T+xUojhjaj5wCT/5P0J7lw76FJDXwxZ\r\nNKxDwhF1eEjLSTJ/mX8L6KcsJorNsehXLe4L4WYbA3boeqELuYQVEAQjihyK\r\nHf1aRbR3pceziP4Pz5Vy8p5iY8KPairkPtSpJk8A65z7cJ9UU9UFbVQbKyiX\r\npOccabpDaArEhCwX0UJH5JtUUwMr8lN9IXqfEoE3fZiwprcbBfOZi+sHHEUj\r\nfAtumx7nsvrCyhg9zMIwoSKqQl7GFlud80e9sSG6e+pppjvloA/7pcckpHc8\r\neYNtaeubTijZcCDpY1zzKI9P9GDV58dsqkU=\r\n=+XXG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"413f4cd271111f1b118401821eb4bb38e7fcbad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.bdf9d4af9.0","@material/base":"14.0.0-canary.bdf9d4af9.0","@material/theme":"14.0.0-canary.bdf9d4af9.0","@material/ripple":"14.0.0-canary.bdf9d4af9.0","@material/typography":"14.0.0-canary.bdf9d4af9.0","@material/feature-targeting":"14.0.0-canary.bdf9d4af9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.bdf9d4af9.0_1647465470126_0.589619247358486","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/form-field","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.32b391398.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3d19285e77c0afb78d8364368dc1f1cb7ff3a17","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.32b391398.0.tgz","fileCount":33,"integrity":"sha512-EIUVadUuVvLQ0LA6R0uIFJMaf7KzipQynJ/wwY+R92GndH+GVqWIIxsSTb1mgdK30C9WAWQYEjSFQaKFln4LmA==","signatures":[{"sig":"MEUCIHUSBR+oZ99G91M/3xxcC3+KNeh0b5h7L63JGm/e8pgbAiEAzyi8v+ll5LjW5xTWkNrsLJFJeNs8OQGN++Gh+y1R6bM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3buACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpN7g/9GVOKiJ+zejdgqETdARljk3T3ZkavS1dTkhbLHVdJcMl8hTUB\r\nsHXCxzmzjMxgjMhh8ZR5gzqZtv/9qFAFsPYIo/1u4M2/8Dkh5Ymf6HVfSOYL\r\nPpdAG91XokoNBkTi4gnsXNuCxRTYvKH58XJ+rGUY5k5QPv6jPE333ZZ5s47U\r\nJkQEyGRhcAX431gKEAKI/w8MCQ8hzCXVatF8lldjBXFuSXuT1ORBB1y59LSF\r\nr6LzARbegqMxARaxjKU8zLvHrDZgF5EuynGEF35E0yWgdM0dFYQmcghTHB4a\r\nV+hMD32iC3Yq/OuXvpd0Bq7ZSbi2BG0205NblzOzJzsCbENl/o4bKJpQYJOy\r\nMERM3UlDoyG6hKEoqt/HizZo2+9sfDA46luhsJgvueM5mMaPILeF0OT7Erhr\r\n0EOrXMbgWPeEy114Z2IEtzfIhbdw310VElBx7v2tck08KLk/pA07wxowjuzM\r\nbpIrSe+8AaNjxJOaJ2scXcuGUQ+2UKT0VBfNVlUE/nsMh+IYSr8F2FWOIoxi\r\ncIt2KVy4NN3/F1TbLR41dr7GnjxNmUdNedIYUm8hlnHCsm9SZxPTsUu1egJo\r\nIzsAk1OYDaoK43iWJ10z+TLEBWoGCKvpocspeokXdFOgHzNR7Buxu0hCHclo\r\nTzXpRSO8MLD2UXTtLDgCBWoHm3D5eYhNI98=\r\n=tRpd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8a457bda7a5cedbfaee9da752ba2dbc093b45ac6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.32b391398.0","@material/base":"14.0.0-canary.32b391398.0","@material/theme":"14.0.0-canary.32b391398.0","@material/ripple":"14.0.0-canary.32b391398.0","@material/typography":"14.0.0-canary.32b391398.0","@material/feature-targeting":"14.0.0-canary.32b391398.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.32b391398.0_1647539950087_0.4819848382593741","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/form-field","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.ae8a6a3a3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f64a00f672f1c7c19bd3db41dbd66519fc355ed","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":33,"integrity":"sha512-ckTbwdqcsxochkCGgUhgrvfQD2+tH8RN01pYeGFSNsJTKBoFaKqRjTxl8Mr80HXRP9HGeefaGcvdtIAsZeNXfA==","signatures":[{"sig":"MEUCIQDKBV4UMgLXkJqyBko0dS7lo4pwhzctZdw+R2+ysnrojQIgSZ6xUmxPn85gR3EVuhOTqikke4FJa0o39PrtE+xEp8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLWwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVBxAAl76Nhm7PNYghczARgmAe8rlKY6U/7uCAJtxM1olGS3NtasL1\r\nYJr+KYzE3XLVbjN8fXCDxhQ4yl/zV2gcvJ4Wz3Si6Pn86A9Cs5iyr6FZM4Ho\r\nHuvCJvpgHUUs/wJP/OrwsckaPGy72tp5PtHNAKpNzRKzjSPOFAi5r0E09uky\r\nxA/iugjSPHNYMjnuhaRTUq/2zgmkCTl28F90eFr4cOke4YLr0+qnCUje2GHS\r\nJ+7CBdGaUb8EkqWLOx83fb+xM4nEKGB1q3fzmfULbuiqfdS7uT10dxn0FObi\r\n1st2YBuOH8Bf9FtB7Ddbt9bI4UYwWYs20G0diQtSSXiTau+DcmfUe2YvQQME\r\nrjCahuokZsHlluMWehNPyU+GCmfpvTVTJ4WtR9jZvm+ypWebk+rBzWlCkMlx\r\nm4JS2nMYLdXT6bLXjKRG/awE0CQpSwf9NhMG7eiQkunkgsQzI7PUhyP++C/+\r\nzkEQ0aG7dEZZDXZikmXx2TN8k+gR1TnEa/YtSlY85S2FTx96+p5lfCwOHoA+\r\n6O4rGULHYhv4ABeqCH6l/1yTG4kSkCXzilKPPzVw9bHdegC+lKBRWjkzzJC3\r\n2oCK4Ot3x15FpIitgjlGJuU6siH5xWdZTUNIcHdZkZm1MJc2pSrPMxYx7AfF\r\nCevbKDYL/eo82jE7YRit8jI2fFvZJj/oQpg=\r\n=StWK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"783283a1304f941e05b3ef25b9a589158368c595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.ae8a6a3a3.0","@material/base":"14.0.0-canary.ae8a6a3a3.0","@material/theme":"14.0.0-canary.ae8a6a3a3.0","@material/ripple":"14.0.0-canary.ae8a6a3a3.0","@material/typography":"14.0.0-canary.ae8a6a3a3.0","@material/feature-targeting":"14.0.0-canary.ae8a6a3a3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.ae8a6a3a3.0_1647621552538_0.2237715554276316","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/form-field","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.cbd9358a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e51d4379aec020a3b015a00da8ed226f5b680eac","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.cbd9358a6.0.tgz","fileCount":33,"integrity":"sha512-qH2w6jit1UAlYbokbeyINafdB1K1UvUn7bVB7L4j6QbbJrbSu7joWxwruaqvU/7vs0tTUxPLVyFqvc1Ght2KHQ==","signatures":[{"sig":"MEQCIEuQ862hyZlKqmHQl9OViyl7gaOrxkMSuDiVITIt6MnuAiA/dDO2XqVBGUEdluqXhhlt+y6B/3uOuPmQcZ67B9VFWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ0OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLMRAAib2KuoqLGbIoO1DWgO8MyDRwocEX94F9dBK03zsg7DA63+gU\r\ndtW3IY/hKLllofsETe8sF44FVE08MATu/y3gXA2QODyC4BCceBXkCG3X8yNe\r\n9mR1+PjLkECSU0LaEF9Wr3MbzrDgXWVcnAeCiEmVYE8p22On8Kr79ltI8wMu\r\nXyLhC18gmod7Lh/obTFmSoyL+4Q52Jr+GRRVC/1JaMUGrWsvoUpV1uZA/k8x\r\nu4rxFEXQTuWW0i/JTR1/gnAVMpDRUnfTznqvVEl7233uf0q473m8VOnwM2i4\r\n2w6KlkF5LNGZ8pfNk+kFGlEAxj6kx4D78uT5IGXGx2Ijev0cFGeNrAVd9S3V\r\nFwqCwEKF9DkxckXBauvGSmU2OZAt6axTsOLWYStXboXZIKNXdsZpzkw9MUjU\r\nZn1/sQ1b40jQctkyJD3KZM0Xxi1AqBQqg+NtfxPUJ03PUrSVEwPbUmr0j07u\r\ns43lfJdKC2ohg3qk/4X51rTkuiSq3Q55RNzrRPdE/7UkOSMHxlsoVLeZnQu9\r\nQn+LV7jpvMoW3wbU3kG01iVPYnd5ieeRbi8NWV2Z3+LIrxuiGAOOQIj8Ib+f\r\nCD+Vgml/hxT0QUXImUxCrMRryhCUjtacRmrrccFhmSoOOkss9ivMlV7WDRsk\r\nlA6lZs+cc2eC7nePXl8ciJ9LqCp2ppa2WoQ=\r\n=QFq9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a4296a048e6aa0c1ab8e8d2cc6cb8321c24dab9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.cbd9358a6.0","@material/base":"14.0.0-canary.cbd9358a6.0","@material/theme":"14.0.0-canary.cbd9358a6.0","@material/ripple":"14.0.0-canary.cbd9358a6.0","@material/typography":"14.0.0-canary.cbd9358a6.0","@material/feature-targeting":"14.0.0-canary.cbd9358a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.cbd9358a6.0_1647643918322_0.430826205477832","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/form-field","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.dcfe49c98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ce9e35e7505ae0159c63cc3064bdc2dd5b1d233","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.dcfe49c98.0.tgz","fileCount":33,"integrity":"sha512-z54NUiDfgTyFwLHOisCVWZsSaZt9fcxRnZeZKouhA5KOsGyCWOU64iWKupstaNatuhV0Fqb5gTKwTq1Yx4NbUg==","signatures":[{"sig":"MEYCIQCfRK6Z4lAvLqdA4XZeEzNd8rY1n9+uhb8N370IBhC/RAIhAJbk4uC7K+LzXOcsWo3xaL73mHvWDkT6EhVJHsBEICbA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMdyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4bg//QcX3I9wrhM32O4795I+R1bFbXJHsxoLpEENnn8K5TlohvP1g\r\nXvakHAJ81t24LJIlpqKkQGFlEJExKkN/mwn3fleZ08ugymm1wEIImuNWF/ak\r\na6JAePij3xduKUBqgH8sbg7mPQFZikN8nWy3J+rJpVNmRd7j+HHwArf+a+rB\r\n5lkT6dwxmh3PhyAq3NFiU4i2Z/fT74y+hM9fgBzfwiwbKQUXqtbWa5zwpTiA\r\nFSFVmXQHO1aYZYB4kh4kWwC28McW+P+0LbY2X1Mit0HwK2Lm/QyOhW163OWD\r\nl6pSczbsu5i5mDAkod7Z1O7EPxGRjqxykwfa8fpasHiWWTVwQeYF1AzmjvZd\r\ns8t0IKYPapLw86hsqKaZxJFxtFhMEhVC6DXjN6ojNNDe9OntlId1hZ1hNP7y\r\nl3fCyAXqjWmKlxdqA1WTAB6fl+CyOY4d9GhYHri6WMPATIP3jzOiEsyyjXwC\r\njqYbb65ryWKRAGIgyjjR1/wlyumyHaiBx6Gh3Mh0RfY57Bp9+QNSz0DwGI2d\r\nIcVQlQBrV9cADZvQW0Iu6vufa0bsUS/ackpMi86iztUjJGeehVCp0/sL1u9W\r\nQ7oBxpUMEMcvVgWIeQyxse4eSdaGoKzhwm11w2IBBoXvaOaOj3E/jO8PXMoS\r\njqxET6Z+nmCRJSerMotp+U4paubAMjIQ6HU=\r\n=4fnM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5b68455eaf6aaf2f571eb64a1d8a5edaba58d37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.dcfe49c98.0","@material/base":"14.0.0-canary.dcfe49c98.0","@material/theme":"14.0.0-canary.dcfe49c98.0","@material/ripple":"14.0.0-canary.dcfe49c98.0","@material/typography":"14.0.0-canary.dcfe49c98.0","@material/feature-targeting":"14.0.0-canary.dcfe49c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.dcfe49c98.0_1647888241839_0.8327411258616377","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/form-field","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.f31a833fa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab013f2e39151102f48c53b17abeac63953c0494","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.f31a833fa.0.tgz","fileCount":33,"integrity":"sha512-6abcBnwnTpB5sWuxK1M6UKLvwPbnKT+v3W6ptn/dJKm510o0JWSZlwuVV0se+F2UN7zDt12ApBAdQ9x1uwvpcg==","signatures":[{"sig":"MEUCIGAF02aSQWOk91OVdLiaz+IX4flAfLUBA+RLxjotoeqJAiEAqRwcFN0zvR902CAm9lI57+gdX5usAud/uj0HjdeHuaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm7iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrv8xAAmG2NFZ6k9HN3xQm/zFJlrrQBhIBlOoXuCQIL+rPvhq8x3x8i\r\nJZrBhycB2KtNdBfWC0NxVEuEywn4WLMiBBbwp1vhVlz4untMY0dGUZShDGAq\r\nab0rshQB0vUbGi7BB3N4i6CPYpdb089s6uMW3WcKUECLwaJxcK8Ej7+NM2mR\r\nXIfHF4HANX6Ub03SyT11u83JsY+p6xkK9hd9b+kR29wnJzvukkF5YR3Ceugk\r\nh3olGb0zqdk7OTW3u+wZwTh7nTFM+TVmHpLs0XIlYeXLl3CpSDAvz3F8T/Wi\r\n0HbJkMGPl4vjOXclJMOdGaqd8pqh/1tvdzqtM32Id5SE0YLMWcTKTtPWE+Iq\r\ny2/5w+esG8HOAnJ4+63pYFrVJdI0Jj6u5KXRxr2v8aCqGUNMAIMDyK5a8p2y\r\nav6cG18SJcsuQsA5zGwuWE3P6TdhReZL1XdHMLXMKlMT+X/iraoJF4Ad32/E\r\nhvHvBJvoc2kWPaMuT1/4aJJicAJ4vBvISHhZFRksT/jyc8/IvpLSPohBzyVJ\r\njfCBjsmtJ0CowIpP29jEtqW882FYy8FBZlfLMSlTrOIqzeQXbG0FgL3b3OXS\r\nc0gcZUf78O9VWtuHsON68SVaiOEIypDIAZga5fauSwTI9StTp0T2KucRxSV0\r\nvzSU2qYMbXvC1oqThTEcmN6WlmbL9HG1LNU=\r\n=M9z4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"28572f217366c634964a133bbf0ee0b8e88b8126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.f31a833fa.0","@material/base":"14.0.0-canary.f31a833fa.0","@material/theme":"14.0.0-canary.f31a833fa.0","@material/ripple":"14.0.0-canary.f31a833fa.0","@material/typography":"14.0.0-canary.f31a833fa.0","@material/feature-targeting":"14.0.0-canary.f31a833fa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.f31a833fa.0_1647996642097_0.36775982548856656","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/form-field","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.4b92e210a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08efd4fa11430d195250234587bb704c0fba0585","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.4b92e210a.0.tgz","fileCount":33,"integrity":"sha512-BIQSy3GwqjJVB0MOMj9eaGAAlogIWoTqrQAVtD9k9X1Y2ng3E0Saje56eTpAPoXKE/Debume1HTR3NvjvCOCVg==","signatures":[{"sig":"MEQCICElzuWZM6mh+Z6en80D35/P8vtcz12w0gKCLJqslOxtAiBhIbyiE3V/i0vkOpyUtm/m4L1K+KAoBZ4HX4wTINIPqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNIYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLHg//TChs3FgpI7Us8xtdwMz0S5IJHvabX8zEWPbFTZx2Ro/WsPEF\r\nJJm97uGB6D5yl1pTxNKClNcs+jE8mU0ouiviD3qUMj8XQEbxQIdeV5bYRVfa\r\nah4r+HK1KhVrmody7KFawGQLcU9139MDEzU0i/qpc74AAhe4iGWyduQOTzHw\r\n5tjUtGlZvTUu+Dzuv0BUSqoUm3muL92ruFJ6GOaIPawFEPN9NbdHyLgtlRo/\r\nVyHQyYh5ZZoKRC1gprPZk9JmMc7H9OHpXHP4/XFGFV+qVGCzPHebdXS+EhuL\r\n8bIRh0yypt/bqqJpGrZ3stKt0N8m+lte+bjCVZhdcAQwY3yy7RFQb8cDOQgD\r\nd/eIzClwEtoOWPlpImwZ50mEn6+I/2qSnoW6azrTUTW52tUondBsTG0k9SLC\r\n/f+249A/XCU1ncQ2PPuWJfaBM1ioi1qwwV7H45NN/jtPrOs8LclLXlTqG2Qc\r\nh+uR0pp6d4p6I5dNPhOomKWy//q4OsUDYL1IUFqZJ9aejpRey5taCEYyG9n3\r\nZMy9JO8q/Jgxt3dpRQEmC4aDcXRZ4Se3/XuUr3M4BUhFi7uh85H9jOOMT+Rl\r\n5dYB6B+IV1wnxwOSpc8jAWpqwuoB81M5kqbfxCD/MHxYFGaiuMRKd7gSmjIp\r\nv/YKOuh4cFX3pET6ofdv4bp93rAELy4q+Ag=\r\n=fNXT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e9fc48f242a1815183c2b4c74ea1f8bb9967004b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4b92e210a.0","@material/base":"14.0.0-canary.4b92e210a.0","@material/theme":"14.0.0-canary.4b92e210a.0","@material/ripple":"14.0.0-canary.4b92e210a.0","@material/typography":"14.0.0-canary.4b92e210a.0","@material/feature-targeting":"14.0.0-canary.4b92e210a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.4b92e210a.0_1648153112169_0.7735627174767747","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/form-field","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.a657abb61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55e7bca6a48ee04d9d4d3dfd33b535e273e99f09","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.a657abb61.0.tgz","fileCount":33,"integrity":"sha512-KjaiZZlH73CH3dbtE9HiWbX5OJcEf+24oLfiGjMGi+V7qi1KqFfnngBtVdzWzIeH0h/Dk1Cwp55nbeuk33L9Iw==","signatures":[{"sig":"MEUCIF+S0c9PcFWztZIY4y7Kc+b21gT9dvcpxaQeD0mF0zcCAiEA4YmyhD1eag7IMLGQ0frSG+ds7QjLRTCwjwm35PRQoVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNcbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQog/+KaEPQ6f6yGbAKwnm6tFYybaLrmAhnWQR9uBW1IUzUH324F6U\r\n2C5ExJEKUAHWnNsb9msryha6OIT8csyY35dytja+LQjd68p/Ovpub300SpIa\r\nw7J7tGz5hyLhxRhePTllQFxagr9setUdYBz3IUnoXpr9ACo3J3DxJpSLLD6Y\r\nr+/SvatApiTbQ9pvm7IV/sgY/Zsv16G+nlh2OhVNdg8FJfXu7neP5ExRJ2Sr\r\ntPnJbt94udpwjzACsh/4F/qmmIyrqk3LxwTWdyvzi1j9KBBQ3hz8hZFFD9jI\r\nvp7GNEbBO3orZgjao4rfmWSLgZO3fS6hlQDj7jP7A0Ib1cu27HtKRO7Ug742\r\nilQhZ0lrs7wnu2IfKIH3VGIop8Cal96xt7hBqgc6MZuXsoOJXUn6OncjOGTy\r\nI9yllJq80a90uREJxDDot+EqOSKSS5XtawDz63zb6HbbVkoRxy6G7VurkuSw\r\ny6wI7NqK1e40AEmBFQL67FaiDM1a2/UsJJb/j6I/8CHqKkLkrag8fcQ3iAys\r\nNa+fEzQpqirwFukBf0xmgZMfZrz7w1iZqOqmD/jpPanvotIxrbX7utrT1LNU\r\nKMgRyetBOrVIKkGfCD+tW7G19L7Sdz6cSH4ZZ5Lh1Ayc0E4QQ36w97AOYoib\r\n1V0er8nvPVzC/tMIaVOMb8xwQZeKv0VuP8g=\r\n=/4mm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b17ff714094456afc14ac1ac896e38f85e300743","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.a657abb61.0","@material/base":"14.0.0-canary.a657abb61.0","@material/theme":"14.0.0-canary.a657abb61.0","@material/ripple":"14.0.0-canary.a657abb61.0","@material/typography":"14.0.0-canary.a657abb61.0","@material/feature-targeting":"14.0.0-canary.a657abb61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.a657abb61.0_1648154394904_0.31845137755274444","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/form-field","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.443f63f50.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2178f7b6d7b662cc2e89a7acc4e274e14c3e406d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.443f63f50.0.tgz","fileCount":33,"integrity":"sha512-8dKUEV4nYwkXwf3H6CayRkzjSWCiNRCN2hysHHDdULYtBoUfZaG56AWCWmOVDTlPg6uPkUL7V8OFGXwuLqG0fg==","signatures":[{"sig":"MEYCIQDq03tbSgWzAy0DhcyzbX32YzN6ws+Be2BmyOufjuxgNQIhAJV0lYqp12vSOO5ixA0+VcRzryJuxDNHTg0uyHlSrbxk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkqBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbGBAAigO+cmSLxeI4umfXZl8vNwRBQh7bI+mlsKikrClDCSjF27TF\r\ngc23+0+Mm2l2WD12yF1JrmkMV4bQNGl8ypqETbXR9lrJhkRIBhkSfOOj9d9b\r\nAqhf53oschLpH2sgiHxGk+O77BybKtPMMF7hb7TOG68WYFPYkTHhWnZN1VFr\r\nqFv54gMr7/2VbHkOxJFw+XfQ6ciqm6g0gTehoPoC79lHcaLWOiFmSXj2fm2n\r\nqBK0tHx1hiXhYrlxWYLlOFzh7cAJCHTV84ujOxO0V4vx83KsVNP5gjZcp/Cz\r\n/PMy/dw7dNZFTqPYtoVLvLQt4C6RhiJi85lQOEfUw32r8viNLSs6OanVhc0Y\r\nl4D3bsPJzRyQWvZfHVDNPvlyPau4MldZHvVyqIGvruKmEeTJheR+UFwakfFF\r\n7Zfw27x6FikdRlIHtUxs5Dd2b17zTcUOeXODcuFcc2x3TibCfUE1yvcx9yLd\r\nojGdoCZ4FW6P2NVAHel6prZ6cTXUIMWbbcSxs9Mm+jbDA9ugrH91haRl9RU5\r\n7jQOP6CgI1qNRsZ+0A/swxIA64Kv6eZUMi2sQ66xpyjGoelqTVKentRtbRzL\r\nbhBtduZ15mXf4o0HMzscZnFmne6URPy8nUUUglwKsuYJxwiinIHf6J4tC0CN\r\n5vNl1lM1pf4y8UBNKoBDu6PlxgF8IMEPua0=\r\n=bHpz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0a9e4a4d027bc972dd036582cbc94abd30d3cd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.443f63f50.0","@material/base":"14.0.0-canary.443f63f50.0","@material/theme":"14.0.0-canary.443f63f50.0","@material/ripple":"14.0.0-canary.443f63f50.0","@material/typography":"14.0.0-canary.443f63f50.0","@material/feature-targeting":"14.0.0-canary.443f63f50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.443f63f50.0_1648249473021_0.15091330768019007","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/form-field","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.eb382f318.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f9ed81b1e588ca4ca175b7546cc4c66421943b3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.eb382f318.0.tgz","fileCount":33,"integrity":"sha512-fQO3aEamh7taY2bV4Dbz2Tha1VioYu4wUIXplHxo/30qvWUF50VEzpOGA7ubVFsfWtsB7zvuk/LsVC6766kIww==","signatures":[{"sig":"MEQCIAo7fBEcILkkdx5+SxvIokua551cPNQkCNke/grqaobvAiBVh3yydEvSU9mprWq7UFp4lHOBRe0LgYZIRtdQ36XKCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0M9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaMRAAi3e6JIzxGcw88h+6OlZv/wXUGmJi6jDO1csZoxf3AKZNK6lx\r\npAvxw9VxPmgcjamloqXb9XJR9fcT4qsK5brV8gzp2SFQ83N05odc1riNXOJi\r\nlKXb5KgOnEqmD5QCJCK46e+I+6hCWIg2deloFMvTQQe+MH6o1qCQZD/R0QLl\r\nm0ES3zph5XWvkKLv9HagI+37K6RJaamGyEaav4QLHGr0ObVlfSkbLJzPhpWk\r\nrt4CSRLL7HcfHSG5MNULeMWIBcTwZSqxTbhfUA8RFJUdObErjqNwE4FDphdk\r\nVoybAOUZTVq57aWjS6qk6tagTxX5Sw95phP+d+enVZO0LI/TC7TQTsAwmlAY\r\nyNclPyvzjT+rxQqSOSTvr8k4rHAmj3RpSJOEni4aPzoFIpzLUp1jwyDTMMmJ\r\nSZ7hthVurXEdu4srSnTvm3WuILWPMSq1in+2Ur2Ug48XIB7uRRDPSm1mVSwc\r\nhe6oH8CdcsDDWy7YZLYF4JCRXUZVqm/SCSwRPUQFJf7R6fQZ+vlyxt7o0nKK\r\nDn72L0k/Wk2/cJkX66JUCcZHrRJuoDe+taknALlMv2sKyydVLIqiKxVJFpEN\r\nSQa4b6Vz37dFkAFlo/BM9GIqJaw8Lv6xPz8Y5Tj1gNL7Oeu5gE3PZeR6zQmF\r\nzKIMX+vQZtGgxl7YGbB/ZxwA4X52R1W4mEU=\r\n=W8FB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9aaa59e82abd1f56fdb3d963213242fe4f989c89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.eb382f318.0","@material/base":"14.0.0-canary.eb382f318.0","@material/theme":"14.0.0-canary.eb382f318.0","@material/ripple":"14.0.0-canary.eb382f318.0","@material/typography":"14.0.0-canary.eb382f318.0","@material/feature-targeting":"14.0.0-canary.eb382f318.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.eb382f318.0_1648575293213_0.02073217670334704","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/form-field","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.344d52823.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b660eea3924bacb8b0edfc420f46a697bfa67a1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.344d52823.0.tgz","fileCount":33,"integrity":"sha512-2SaOtU4J2dR2wq8FpN6DayKP/JDsSGxqLvggWVWb20DXl2RCPi5sNBJlgiEWWiBYyK4XZoWqjm2FAiYfjJBgvg==","signatures":[{"sig":"MEUCIQC2gBKu11Cgz+aUaAdYZBGzNMtalujzn253Mt9lRsKwFwIgZAYp4Ee2fT0Bq0U0964EEsLyTJ1e9gtfKvWAuLc+SYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1NCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmol2xAAmSjd0yrpWE4gX5mdKT0TVfK7fw9yjfuJhO8YwdhDoBxC1x3K\r\nBACAkiu9Wj6r76TFgeB6XWy3eUSoyeH0QkG7oO5/UGKUpKx4pqO15bw6KjZh\r\nJ/S9G7Ed02EAMDkWwIqKGouB6sjonsjsgW8XL/69N7SC6N4yE5zIr2AVWs+E\r\neZcEkRr/PRlIkOksuV1v4terY6u3MFBr/rQCQykdan6erdkXfNKvJtCooX9J\r\ndGfRdiiBDexRcY9O1b1tTDC+3dMmWg7aZFJzabajycQRa0ecR1Yz/njLaXn5\r\nWT6rsva5/0tnsVTHvjxemZVdtJr1jdmNhW4TV7u4ddtL9k1dGFuqPFfOMHSL\r\nPKUFhsvZTgvjNcSdYi+e00pLp/22jsNuNRX/+6fsf9c6KexLEyTiI6G449Gm\r\nAF9MrQI1Q0BL3Sa0ILNJRQ5g4TxX6wZv+ahxpwMCc46m4oqeJ1a8OqYyE2jd\r\ntZw52holI9vuk9RFFZHdaTPe3LiMmUNCGuKJ5CMyJiLNdTXTvD8gFbQoNlHf\r\n4uJlyYsj0wI9ll0hOnEGOf4gbWwo20itQJGtIujlUxZQJ+ENWXICKGdylnuM\r\nUq2nOyKzjWO4yBh100AVjNLbpBuDGGjmXsMfdhwtAewR0lRSMyiFC/qJ4WF2\r\nvwzPvciqRwFZiIk1DnBRzjwWHjk3m02/+X0=\r\n=ZFFa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1d0b3e3b77ca281daab88499a03131363e8ce97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.344d52823.0","@material/base":"14.0.0-canary.344d52823.0","@material/theme":"14.0.0-canary.344d52823.0","@material/ripple":"14.0.0-canary.344d52823.0","@material/typography":"14.0.0-canary.344d52823.0","@material/feature-targeting":"14.0.0-canary.344d52823.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.344d52823.0_1648579394151_0.9724490499987908","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/form-field","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.4e372fb49.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3122eb5fe67d89ac04bd6da2bd855d74ec60e32","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.4e372fb49.0.tgz","fileCount":33,"integrity":"sha512-O7iaEt6LRBS8xzX8eVD0AxDIh3K+ypnA8Cl9xJbJYDiGmkAtxp0GnECmrJpzW7z6xqSv6CoprG8BhEtkIP3tkA==","signatures":[{"sig":"MEYCIQCMEB6B2vj/5kS8GXkN9t87EgI+DSZtP55g2okRXqmwtQIhAJuMChOkvYl/6UBD/OilfnnXUnQAAFUBtijhmAF0fPZx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0p1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0HA//bvy6seVv1PFfKLa3rL2WKLa+NJ6tyYgIoPCGtL8bY4vnalcz\r\nC2tV+GGrlJ7HmLdakmG5iZuuISIyu59PPR881aN1eHKIbSHbzzFYTWfKTYD/\r\n299e/glECSl55/Hj7b2Iy51PhlzIAohGv0BfPcnrjZdsvfkEe8Cehvt6WFIK\r\ncb70XObd5aB0t8aGJR6DshtrEBQ3wLpi+QeeFvk6JI7FdvnqaJAZaQbJxRUW\r\nsJMnKfrlyiPOkbMknRhLisG8/JaTp85uYHyTJdjU6tg7LJZKlCw1aVB4RHay\r\nPA2YofL2zH8D6gY97B/CWza7O5vgGDSUSItd92Y57vaawTv2+Vsf8rZpkkTI\r\nCZR0u1PAzQ1OkFo7aT6J+OqIWNXxu9LRzF0ACOzugW+uRHKaSKc9J/cYp03y\r\nyCC31nKeof9HRCYNfRpr6w6Q3DNKpx5yWS6Y1Sm7YAPMlDjYiLyr4/Qa37Zb\r\nuesVFfYpist5O+Ay3clt57q+29mQJx0+kMdANZhO4wO2S1X2qUjiBVrzFQuD\r\nN5/Tx1wQaGIGzfVRr687VgMqNdIVf3qG5fDtm6TsQ6qw0ZtbX4QMcJ9SNh+I\r\n5QhZ1Bx1Gyn7tihioxxGSfiZTyqsEe1Ux1DBoQBY/wv//m/+g0NDK2kTqnr8\r\nb3MivKUNYug6LmyFi+Un6rhMyrWV8oZ4I1A=\r\n=u50G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"013d3cd7cc6d83c59581f40ea832529343f43047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.4e372fb49.0","@material/base":"14.0.0-canary.4e372fb49.0","@material/theme":"14.0.0-canary.4e372fb49.0","@material/ripple":"14.0.0-canary.4e372fb49.0","@material/typography":"14.0.0-canary.4e372fb49.0","@material/feature-targeting":"14.0.0-canary.4e372fb49.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.4e372fb49.0_1649363573564_0.33577876018359176","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/form-field","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.3e30054fb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11b618ecfb4dd7db6382df6b4a28fa32ba8a3071","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.3e30054fb.0.tgz","fileCount":33,"integrity":"sha512-QlO9KwvZ9tVCq0u/WHTscrFQTAIR2clt1lKfXpngkGhZll6BWb7h62Tbb4gC3EIuTEf5RuE0pWCIgmg4PB5c8w==","signatures":[{"sig":"MEYCIQD1HT4HTrfl+rpjz3Vthormy+BOGSB+8D0p/tFXBBb+wwIhAI1g054a6leyFzZ4SryxZn33029+NUdJBYwXBR/3uWFe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0szACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLXQ/9Hl87Uwt5w7poq9iuPFjetoevwzTph2U62KhFnxkb+i8ufwQB\r\nxyPcPxjYOXmbY7ZUafzMit0SAAIE0qj1LOJNsIuFA00EnAwTacWH/8P6vOuz\r\n83IlWzThGYYiOWq/aNsoQ5aaygozi14IdSrqR4rYVu/DUAoghojhkey+yYI2\r\n4Bcq9lj8y1Aa0naIysSEJzCmmhKqpylQVusQ55JMBE+7NWgatZFIgH01s29g\r\nTn/kC8eCziPN76MEcqJ1Rn4i+zYIJ885DJjcv0Lzw55mvv/ofbV4/y8lM/8e\r\ngG/kCpXFuLaez42HOI71P28bxcKm5NNvb5M+sGHuAxIsIGAjuj32ufgU8EAz\r\n7kdJJUk3YQvhwuK9bDUcgc9X3lK6ZM2U9bYVFbkLskwG/1pdnFBQOGa3jsP0\r\nFJZrHwaFxg/TjxbZ7Z1Ax48ycljS//d8hjXw8DoKBI9SHgqOTBmYGTlaUIgy\r\n36KVkBpfiymWRHMNbClOife3ztFhXsatg4mrmy1q+qoMSVAkyWurk7h3YGy1\r\nzGPwY0hna+adUk7tMotiAeksMlzxkwR8nQHseWzKWD1ppfVuv2vwfFqVBnLx\r\n2kzD717Fe5PdlqBab0Ju65+flAxlYmJ84GW7e2KPzNZOrllSnBiz150yhASj\r\nm4zOTrX8Q8AyAIq4g+qhsVkk/yhdzKneMhk=\r\n=EpMK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"04d79139861b90bf3488ab3f74e4bc33e6af1c8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3e30054fb.0","@material/base":"14.0.0-canary.3e30054fb.0","@material/theme":"14.0.0-canary.3e30054fb.0","@material/ripple":"14.0.0-canary.3e30054fb.0","@material/typography":"14.0.0-canary.3e30054fb.0","@material/feature-targeting":"14.0.0-canary.3e30054fb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.3e30054fb.0_1649888051483_0.7794901916808816","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/form-field","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.8c4da223a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e2e5dc0314cdac202080867db38c45f3de3797b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.8c4da223a.0.tgz","fileCount":33,"integrity":"sha512-V9TsDxvb8WrdYHsiyVhNcMVCxh7srhKtn6k+VuF/sWDa1ca4yQQkZzMCFcv1cZU9YhB9EKCBy2Nc1kU0eqFQ4Q==","signatures":[{"sig":"MEUCIEjYYAtm1e9NEeKNdiUtQOXzOrE+GpCxVAv8ZsFpXZgsAiEA/SfNG9whQg+soYnXyFyM0hNQxkFLEoocHq834p1Iwww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtQZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwpBAAlEXhj4OXVBBdqTf6Xtbg7sAgfCLs4DDaSisUSz7oeB/Rkp83\r\nGYAxv/evbHZ4muc+SXpYyw/iM5GaWXmeJdmoxFLLyvkEld8IFzG+yIWmFS4H\r\nbKg0hikYQ+RLHDg5LAK9zXkGbO1GwW0wSL3sBTvN+t7hEqrlrtbJb1P7tdtr\r\nWgvfNmSeI0R0N+vBbNy4W71Cnjrpgw/OVpbp6MdULlYL8oI5z4rWwR8hLAH2\r\nvjF5XoxBMj3nG5+jUsE16/2cNVEbZK9b4I7KOAY+nqq5apOruhbieCCEa35x\r\nsRHfojVzSl4wARbkZTFOFFHrf4onnV7nNNO5Oah99u5+Zd3kMabcDV8r+zBP\r\nAp1BL2cKyUy5w07/CxaKICpcTB8Cef+xcdOa/Q4PAKuZ10qkCVrrXM2NTw4J\r\nKUYIDSZefALU4ifcwHisiRa4NONNWqw0CQyX7a4kA/LDviMAL/vy3OMUpLQ1\r\nYntdhTzcjrG4oj2Fi4fdedOvpa+W/k4B+0B4AEnKYxDT8zSeH0mQ4Kne3NQ6\r\nmcye1ZmwlmCX2sEUtFmbhy6T780hC5K/vxLPRIHgLpi9zQWLn0PFKTVqfoXl\r\nob4Zgk24CrAEdWsL9zWp/jVnM7x8aXcMpubzry0eFScWPf6njeIearmq5W4i\r\n10hvrc2HNqXLxXaUEIfxNlx5gDbeyi68NWw=\r\n=NACd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a5f798a752de150dd0a004bdfc90979ab4185d1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.8c4da223a.0","@material/base":"14.0.0-canary.8c4da223a.0","@material/theme":"14.0.0-canary.8c4da223a.0","@material/ripple":"14.0.0-canary.8c4da223a.0","@material/typography":"14.0.0-canary.8c4da223a.0","@material/feature-targeting":"14.0.0-canary.8c4da223a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.8c4da223a.0_1650381849263_0.9400133818923546","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/form-field","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.7de8965cc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37ec8036360836208aa7f4a3c4d739f77dffa592","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.7de8965cc.0.tgz","fileCount":33,"integrity":"sha512-heWvbktFGnQi8pINd4Rusrg2muGbzeZoHX0aIXy3Wm4H4XxZZwRfhvsvANfhDuWJXr5O44Ig2RjwD5qcQheFjw==","signatures":[{"sig":"MEYCIQCCu0U39iXwVJ9hp4ecOisKoYVte1KsAycG+QfCfJLC/gIhAJf4nDQFTPHavjSdUbqQAD54bcWJfTlrJJOUXDjndspK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxo6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSVw/8DR+8nXJeqws/QnSaOpq7T4lH9KMpNKdUEUVEAOQWSfYfHtGQ\r\nNuigomPPv3d0KjjgejvqZJHd6kFdTJ2qdSaB6CwGwRNj9xcbC76OuIZfhwdN\r\nUuQqno8TK/H8Lndvlbtc7AV0DfwvK21leCrK1kN0PFG3uZT79LudsV1WpoJD\r\nTK4W4Lt1g9bMXZNIFHDJMLsJwWWCX7jgUSUUyBaHDMizP5vuBjC+89rE923b\r\nvxDZLiI+x1nAclVHIIJxweXR3PeGC22pgE0rThqiFwK+9Q8ANGWe++UkUpBX\r\nEqa49Nru6JJeBmWa+ql+kxalLHO6XieaL16VERgUe42Tyw8xvPhWp4EjF/v1\r\n7e9YzyC/p4Hur9gpY7EcmLj/mH3PBP+vixhnMwmntm0Js4HsABdLGYJud74B\r\nVd2IshsG+ufJSx+dxbuz04myt8FD1xbOaWcghsuDcefDvdWsypFl3hcYVxfA\r\nVC+PKQ/JAqJeqMOpkoEJXu3OZjVu9FfRzVAXKOiGdn2jlA4BudPG/wIUQ3FB\r\nLW17uhgZq5x/3Pso1g/uBmoRWtfVLhtuesW5BAWyXIGxhh/Iym2kVkv7hIzm\r\nXkTOcd74lvWYy9tnNgKoG2FZovIEFpXj7Is5FYD23Vzdrceh2W2mwNRma+IS\r\nezGCKzwuaQz1KtDnwrUqSm3zNE6qNVn4hVA=\r\n=froq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"538ae755c197f0d9a1fd3a2cab5000c498987584","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.7de8965cc.0","@material/base":"14.0.0-canary.7de8965cc.0","@material/theme":"14.0.0-canary.7de8965cc.0","@material/ripple":"14.0.0-canary.7de8965cc.0","@material/typography":"14.0.0-canary.7de8965cc.0","@material/feature-targeting":"14.0.0-canary.7de8965cc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.7de8965cc.0_1650399802144_0.6836419291558409","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/form-field","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.641ed0851.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a96a3156922d6377ae85aceffd9aa0e42c95770","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.641ed0851.0.tgz","fileCount":33,"integrity":"sha512-cNeARBLt7549i31RQdylYeAZoCRirDdfZE61hsK8IdMeNRWGjZcGK6B6S++JgTIvGe4QsYkZqqG2EDkbP8jI5g==","signatures":[{"sig":"MEYCIQCAn/ZD7swAFhZvs9HgReXJxNhnUQNJlmC172i6nAGXUQIhANTaJNpEkJdLcpBtBW9nk6x2LtDM3brBJYfrphzenYdq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC9SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHjQ//WR3jT0ebcCMPPwSVELJ9aanhP01X5zkMEAFGT//MIyL6kzNK\r\nvLNnF0m2+hn/ZxP+LmGWtaHLRvMKG/Wiucez0hrLiuNKZN3gaxBrcGIBEX9v\r\nEyAZ1q2/qoXN9uY6aAb/Lm8kZ47tBgJUmtRyE/nNngOIaLGuYSWaCiPDfgWr\r\nFTF8FJRIeEgDF8J1f/6ICEKK09xeSHdzzmpv32XZwcv0PusZwPOUhRxiO3Bh\r\nXfOChTMKMNHjBxQbWJ45Vy2KsHeajo9S+qEQNO/qc4PxCXjqjN9w5cEHqOU4\r\nh0DAt5EZ7GMDgH9k48/CcDiSJ1P+dq6xUG+vZD6r8wHGVCZ1x6u/Adr6sLHI\r\nPLxELk59BxZRzOwA/9mKJYvij/OEyn1RLG7pejE3eIA0QYz71v2CPkYrS3s7\r\nOoKN73fhxPcgRmDSHmz4rKuHihR6nzcn0JlpkrTRM1+GlehJJjP1aUCHNqY6\r\nwcgEKcxNXNvlqg9KSSj/l3F1cuQV81XGLt2+XwHr/1n0pb6BBkf923nCr+qV\r\nezXCHQbnqYSXAU1DiQ/PUx1kNh7tCUv3u7QtBJT6AHB3x86OG6vICqaFArq6\r\nivxfcquQBHEshlj0f+FWYAuDsZIQYAJvcz8tbcKeHpMcOSy9OiozbSJkus49\r\nFTJD8+Xa3cc/VAJEywJqEWWO9d+EfAZaJOQ=\r\n=fZb9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b45ef0f6764b2048f5027d4990cd48d6bdce11ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.641ed0851.0","@material/base":"14.0.0-canary.641ed0851.0","@material/theme":"14.0.0-canary.641ed0851.0","@material/ripple":"14.0.0-canary.641ed0851.0","@material/typography":"14.0.0-canary.641ed0851.0","@material/feature-targeting":"14.0.0-canary.641ed0851.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.641ed0851.0_1650470737944_0.6068025235584313","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/form-field","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.e88f83024.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05f20edfc2a29c70a07e67ace5b7df395d178635","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.e88f83024.0.tgz","fileCount":33,"integrity":"sha512-iJBfFhjTRq482dv5Wp6B/qaoemdwzdHxnxzyOwCv/crc2UX5xouNAcoXIpchfQQh6hdVyPFytAe+NBDuKiOC2w==","signatures":[{"sig":"MEUCIQCC29Z+VvL1LJp7x2ABwNvwRtDtSU8KnIDpKL/GdnQPQAIgYhV/NMjakt0cDRwSL+QeXcXfS9JyKU2XbDPR/dnvbq8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEc6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrylQ//eTykBJnAto/d8dySoC+d5P81UK8LGk8O3ZZAGB8+LLsYAGlQ\r\n0abgUj/Tl9gmuNKJNRCrnQEyoMwVrHG85XiY3q36Ka9Ds8J6z9B4Iru5aWPS\r\nzV0D7JBiqVFItevpX10ylesLCqao1F3lteDXWTMWDa7zy2JpI3KB0Ry53Ayt\r\nKVJYC3sIeTZr5vCep5iCx0XsrIA8me7Hi2wJswPpeEee46HmIsN1hYdW4xz0\r\n3I+8Ew/8OWeZQY/fKXr/2ym9Dfs2MPGDZuLRa4MPiQY10P8YnF3CRKZthg21\r\n4N7cs2OyXPFWKt4OQ44EJfRUfBdpg79pBi2pttsWAXu+xSz4S+0YCR5PNi4O\r\nvyq680rNw7Ek70aqmYiLO23GlIaievWmBEM2giAPJ44fKnP/I27Fhc6gL+1Q\r\n0sKuV9qZseI5LjQJ3cjJnRSf3JrjNw1+ApXVnPIj2IHWlBaVJepdFhQIoIpW\r\nJ18gsJXtIQuO8g855db0xFzE5+8bWNlGb7krl28Xy4cs4wALnfTBc34h4+nm\r\nVnT4qHsPLK9LhuDS+eMTx5hGjQBuP1BdgDnGugqPiMvxnIXBCRQYfeBWOkuF\r\nhJo2EaktHi0NMrMRqra01w7iOKqOe4B+utwM2MVkUhTOKOSJPABaQMg38dUp\r\nyAH1wT3JHXcvCQBPB0B/SM8lLT7R1BUieKM=\r\n=U7BI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e9fdf51ad2ddd3dba754b98348bc356126b5640e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.e88f83024.0","@material/base":"14.0.0-canary.e88f83024.0","@material/theme":"14.0.0-canary.e88f83024.0","@material/ripple":"14.0.0-canary.e88f83024.0","@material/typography":"14.0.0-canary.e88f83024.0","@material/feature-targeting":"14.0.0-canary.e88f83024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.e88f83024.0_1650476858298_0.66172231278501","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/form-field","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.7321d6254.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d8f29d5fc83d882a2bbea57a406da0c8ba94ad7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.7321d6254.0.tgz","fileCount":33,"integrity":"sha512-bbnY596Qq0wpiwMl2ikRDKfLy1WbolyDN6WQ+Kj1s3xHMDCwESzXzfYG3ZL2irqW48x+SNovTGt27aJQXOElsg==","signatures":[{"sig":"MEYCIQCrV0CqnlFDwmhm7IuBwHbXRjckUeiBHn2zNu4Po6dytgIhAIpVkacqivx/8Pol8DZX3ctSEkkHwSUvmyTRelG5qEaT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGjgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyVA//WQma6cWIBTlI+jHSGXk0AB/BMyb/7VRBNkyIuzJoT33dh8+1\r\n41tTpXKY37n2YZwDFa4my6CIsfmsn+X8XFf7N72mxUUH1K15bJBGb+LbGD+N\r\n1sOOyZrk0fEmf0yl5+gWATGJy3Irld0AffUfV7KHHZSabhZXIYGMnJ1zXTmt\r\nvmko9a6HF8KMxTIoBfV+ZcorYX4LubtD+vHvokY4+acBq9YWWkQp+s9jsHqJ\r\n/gQl/Bjpmd3PbRfV1jAbI5ogkL8K91CAruSvOfJ8g1Y3f/CLu43dX+uaa/Pi\r\nln2rgvM3GTaRRfWZEiafanHORZGVC8WSFmJEK0qMdqEOirxOudb5LiJTWQvi\r\n3h7orwFYH2j20jtD9nfOk91rJSo66JBoIVArwlExtSt6eZLa1aBsJp8PDqL/\r\nm4z3hFBH784ZQK1f6dm9CNryMYOZyg2m3uFxB8Uefy8jwtAjVDfVFbosJ6WL\r\nncCqW8qeWBMfp0hOds1bJyvMENnUbJbykYG4xiIQo0JHfOh2nBBSVwg8Gdzo\r\nHsQeDTEls10+Jdtd2RLiMIULlYlSjk40NjqoCjWBirho1roCTepC5YwXxz9h\r\nckewK0MGoxTv60mVLGJ2769OVSZyfj+cHjTpc6ohwvSs4QJzyRvpwGMr9dlW\r\nZaVJxu7hTpPnhMBA2irVQMCFNy9vNhXJl/I=\r\n=TfxJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"981be270463043c4b45845cdc3efce353eb53b30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.7321d6254.0","@material/base":"14.0.0-canary.7321d6254.0","@material/theme":"14.0.0-canary.7321d6254.0","@material/ripple":"14.0.0-canary.7321d6254.0","@material/typography":"14.0.0-canary.7321d6254.0","@material/feature-targeting":"14.0.0-canary.7321d6254.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.7321d6254.0_1650485472678_0.456654160137572","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/form-field","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.3ab956515.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17cc4daa6c1176ad49e44af2100b7acf3bf19058","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.3ab956515.0.tgz","fileCount":33,"integrity":"sha512-bv8Obos2xPVbC6DfTx0QFHdOY9Aac6rlD9KcG73fzPaT3xVj/NNbw5NMHZz1px5XeRkbry2uWh9JxE8D+2FGaA==","signatures":[{"sig":"MEYCIQCPpiW550gtz945VZkx6jPqVn4CoHr+ExGPJt3C6oZ5LAIhAPkHOg5Rf6+B0RgR2LvVo3Z7d9wq5QP4oBRKTeBx9GdB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrfeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUQhAAowP9pKbQlbyfOOToTAWI5LesbbjKEbwtv8QR6n8bqYznsTSS\r\ne2Vg2JXqHy/QnI/odcSpZ7UWL2DkPQvHXAp/IwB91Vw+7xW3pVPOpz4cvUPz\r\nThbw3by+VAkoVOBMgu8Gefo+X0+MFvIKq7V+nTffdKX6/ZK7LDxy2Zh2y+Nt\r\ng1snwnZhwaDNyXr4GBL8Jj39XIRjRKwAhAQqpQnnVRNTd2KZ3AxdcaQvIhlH\r\n9NW+VQFRkApujXqXxirLD1gAo6N1K9FfPpB0Ht5GYxV3xk/BjrU6TT8hpQLx\r\nHCTKViVjdakIKqjjYLh5GtvUGSMk6SwLgKD1FhaRnNBV1ZXPmhvaqXs5VPfm\r\nDnVELkco7PkzUpe8g/KnP5xvP6NGjcHJp2i9Qwz7Z8OTyhp7qHuj3gBdD2G6\r\nCR1kZPYxiMg5UounOe4A5IKK4NzK2xW7TMYkJB9/ouc9IeKsH6Rp6sgDObxY\r\nCn87XmK36ZdhInfIE38fWquJQgxay36LWp4ptoy6HaSSesdH/PfLrUXYH6sr\r\njxo5GaNjQ9S1IBvADBtn0bNC5YM+GZgkyypJ8EFYYhMCctWFYH+kGv9ZKKy5\r\n2ysq2LfctP4UNRLxOsZXlqExOaFzcYuT+ycZOxl1z2039JXzpkdPpHo4ATn4\r\nCnRnJygKgPxXh8wztW+nDsq9o7w7nizk81U=\r\n=BEdI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a09484c5e8d50e8b042d5367972a9111e0432c38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.3ab956515.0","@material/base":"14.0.0-canary.3ab956515.0","@material/theme":"14.0.0-canary.3ab956515.0","@material/ripple":"14.0.0-canary.3ab956515.0","@material/typography":"14.0.0-canary.3ab956515.0","@material/feature-targeting":"14.0.0-canary.3ab956515.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.3ab956515.0_1650898910464_0.649920617727495","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/form-field","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0-canary.53b3cad2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5775adc459ddbb0de9ff564faf7a5dc403b9bbc7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0-canary.53b3cad2f.0.tgz","fileCount":33,"integrity":"sha512-h9jFm9f5WeMHJWGpQsZ9sPrERLGcDQdW8uvbHAHZ/zN35Mqj43s8+alXROiibx+m1oHLvf2Z01pPWtFSXLYzxA==","signatures":[{"sig":"MEUCIQCoDymsNclF9TRlrx5x2I3XaPNXVpfAjNQkNO0SA40aAQIgO2V3nrirM5vrKJ6J5V13ckUIU36NByUvORnzZ455V3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTrgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbnhAAmRD7O2MrTdESH4T9SPRxcaQZOOD/ebLbJfqJowRLBO2p9ruM\r\n4s4fbeUha3c3HlvzTOdtN3FId16qRh5/KRlWr6yozaUpsp7KY2lS6di6u7QQ\r\npU2KnV5psiba9+tErzVWr1Dk/OS9UIFSThjlPCoRLCVbrpnCUc+GEl6ZAuot\r\nIdyGgl7bofL4l4RXjCmpRVnaoLMeu3LgXNxv+Fhs0MZKnwB81GDsAs9ViTWn\r\nuNyONX5qA/6OAEurSctaNyAYCNFf3ev+T3lw28CrMSfVH7/Kkf67nc16/it8\r\nLOUSNoZn3k6x/AwdKHUT+wbU7yfZ7byM+EhVBR/SmzAt80v5++yweq69/HUy\r\ne9Efq2/suSG41bRfbUO6PJ3udB3dAsv/GPPnU20W96WE1arw2ZpjVe6J3y0A\r\noH76EwWdGNTyht3MDfnJLryKxareoFrsctZX6tp6d5x3c9ZQw1ru23TLFk2t\r\nQJXwbfFDVfwuYgfdbhAE/7Gs6NbnR3mTF8q47vsfezrbzaa5ey3zlzrJDsoO\r\n+Iy1PWYHwUIJ8D/ozazP87O5iTk9vRVjR+o4fCjJ7bWeVhH22ID7YFsI4pru\r\nmZuc7eLmSXCufSHu8fpJO6EW9SqlYp7cCW7SweurU+7MU1Swf7Q2DyHjwwJq\r\np8PzdvDl7T+UoXpB8x57oROOp+kLCs+yxP8=\r\n=jhGE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ebeda2e23436103241b0e82afd57b60f74599133","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"14.0.0-canary.53b3cad2f.0","@material/base":"14.0.0-canary.53b3cad2f.0","@material/theme":"14.0.0-canary.53b3cad2f.0","@material/ripple":"14.0.0-canary.53b3cad2f.0","@material/typography":"14.0.0-canary.53b3cad2f.0","@material/feature-targeting":"14.0.0-canary.53b3cad2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0-canary.53b3cad2f.0_1651063519960_0.08654507442225112","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/form-field","version":"14.0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@14.0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1d773f0d8d25cc7c59201ff62d2c11e5cfb7122","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-14.0.0.tgz","fileCount":32,"integrity":"sha512-k1GNBj6Sp8A7Xsn5lTMp5DkUkg60HX7YkQIRyFz1qCDCKJRWh/ou7Z45GMMgKmG3aF6LfjIavc7SjyCl8e5yVg==","signatures":[{"sig":"MEUCIQClucy1EeW2I75S27nhR26O+mRZE5lj2ddkURqChRhUEAIgA4xlIyjI1d2QuW+njIv9i817q7oOGnW5thsb8pyUzIk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":186904,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiascXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgoQ/8DV6EacSothclm6dCaqi/p6kv42UAmZR1owK1wpDRRwcymSwY\r\nF0n65+w5gKus5cH46zWidpVbJy6f+6NYAW8oxTQDBwwK2tnA5AlUes1bgVCi\r\n2JTjJgf1Cc/3jIIE9iWtks4hNgbZ2egMMNM7qVyjP1+gHhCRm6tfW1wEPZiT\r\nx7zuWmAqprovo5PYrpqAAU67wvBqqi648ObSbmjT4t7ing+CnmrJbQWIJjNf\r\n3ThwV4RY6teC7/aEYRjT0MM+jSEDjCz+c9HlYGJpsq7RtyMX+6LA4RAQYaEL\r\n2Ss2YwWYfouwlnm3/BqXmamQiuLFFM3H2cfAEL6oFp2klaWjiTHjzxx79y6c\r\n3Ys6XzZIq/IGyrlMmWSVjGY6kss8Xk4YVaL61szbiBXIuepyYDFmzp5u1eZI\r\nokgM7FBUIR0s61GDCxhhi5AvvsVl9/9Xe4phCOq5k+g3JP661/dJMVBC2TEz\r\nJhPJxGZp3i7p5eUeu0B/6ARIxhhgoE0BKej3VNof2REyZo47zJFoalYRbumQ\r\nhbv04lxAPMVqjNP2zMgHPrKRSByskZYQaUPZhwBFvGmNJ06bVq4WDiX2aQV3\r\n9ipKAgOipx9cU/VeyhtlxVilfw0o4MrxU0HQCW+gzc1CiKByw/ZZBuMIy9l4\r\nqAuUGTLPoZnXPbDeSBZ0vdo68VjDKDZqipk=\r\n=fsk0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","gitHead":"432c815e58d61a257742836f816cf95e271e6ea1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"^14.0.0","@material/base":"^14.0.0","@material/theme":"^14.0.0","@material/ripple":"^14.0.0","@material/typography":"^14.0.0","@material/feature-targeting":"^14.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/form-field_14.0.0_1651164951482_0.8453782243176937","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/form-field","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.432c815e5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"532a29b151256f0dca90c1087486c3037c612b57","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.432c815e5.0.tgz","fileCount":33,"integrity":"sha512-aUIjjLLLNp8yPfyLD6nlLurCAYtweatSyNuL7IHmTfbYdt4+cmqIdcYwdMhe+6f2nHUw7qNp6zpBTkqy6+mHnw==","signatures":[{"sig":"MEYCIQCq7E0jVSUZC7EZxgjZGnTEwPFl87F0J2aesOnBxeytegIhALvJnbeu/9WLz4yCLrNZ3aZmIpGFFjP1AxFP1JxgHpxL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasdZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMPw//XLPlFkayuSQKjFq/bs27jeYhmb65QKDigdqzm1hB12BgKFAW\r\n+burbiHa5tK23a6aWWtaFTeTsEj1v618b5E4CqPr3s4W9FQ2mbuo5acSWV+d\r\nrBHOk0SrNS6T9o9dUKDt1l97egSioF2DwfltHiGBkWyDtG7jHpEI1YbyZgD/\r\nu6PoZ5ZCVLVaWiOkyHnYpJwSR8sVaTGfhJUsQoFbG0nMztwaj+yFTVXFV6qt\r\nLZVxKWEFFy5/r2I1hWqcJw8hgHjAh0j5dBa89Qg/GXk3zqZnW9ZyScdqEbwt\r\nlEcnA+XW3rN59TVbyw2j4YUyF/N05GyZcwdiLRc+9e69Tmnu4q/Hz18R7Txq\r\niHwKu9U6anWMo5dNezMxAAE8Bkj+52+ZuBqKb+R2nBBPnNnCsLgRj/4rjuZi\r\njMoo2E2xbcR8MokPXprfKm5BVaNdtVNXyYYvVvJLR//ut1Hx0d2oM3IJ4nki\r\npdewP4yKltDaiTHz39WKrUgnOCGQ5Fo44dWBcCn1a/9v/R6SccB6bdGTJvC7\r\nOrieaFTdYV3/7Ca7n4JM9If3hPBbMCc1WPCDZjaAFQV1xNht3AUEWLW2Q2B8\r\nUPchHaff+jsZtJ8s3dgEPEIeNIMEIEPGHD4MWsZ6cQnaL6lmJDdYm9aMa67S\r\nnfPO3h0NPPeTrTcO3HlWyaC32bO6UO+Zu4M=\r\n=5yCy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"df8af7a4f190284cd9f3bb1756b2f443509424df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.432c815e5.0","@material/base":"15.0.0-canary.432c815e5.0","@material/theme":"15.0.0-canary.432c815e5.0","@material/ripple":"15.0.0-canary.432c815e5.0","@material/typography":"15.0.0-canary.432c815e5.0","@material/feature-targeting":"15.0.0-canary.432c815e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.432c815e5.0_1651165017184_0.7067639796384109","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/form-field","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a0f01f669.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7c09deafaae08b36896f9fc5ec731aaa4d1d1b0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a0f01f669.0.tgz","fileCount":33,"integrity":"sha512-TuHY3SxFGKyzA6SjFNNZmYhmXEC1qLQ6YE65bWToWNfd6THT2Dzx+iEkUjade5aqBdXxMRu7m8eFY6odpiOT4w==","signatures":[{"sig":"MEYCIQCtTUrwv4JflJRY3T3RkIpnGHSwc8csHdUqPsjraLu47gIhALtmw6g0CuSUYyoA8LhyUxxHDOCVMrCsAkuNpYK6IwB8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYGtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHbw/5AUZysQT0LkYis5bNZP5VhjlJLkBwk6SZLQc11jpRU6HCpuOQ\r\neUXtlngxwpk9aJLYsOeI1mnBoaQazHnN3sUcrMP6c42BlT3N08hYAZasfQ2H\r\ndkcYc6LIIfKm20tXTvmOZHuyJE1h0cR5u2tq5c3K+5EfmzEqa1KSv5NzImBu\r\ncRWAJ0lf5S1cqU5bp8nrWHaUxXfzNdACGLiV8hfA+sm4VI8ZSiEeC4DqDwFx\r\nNk89ENpXWkgGJw+niwrhR5GdiOIxL/p15ADxOAEt7BqHjYND/GXAnQcQ/biu\r\nT4wGEoHtH6KxQlWPiKp6a1ob1D2sU0FvSvOfV0X8Y5bD8swnM+/RuOrpHvfU\r\neeifLwFzit095nJYY6olzvF8XBn7QEdHZ/al0371rzcf5Gmwb1g41J2Xa74T\r\nqTMgxuSPI4nsgum19mUuN/jbZSPA0Y+PVA3+VpBN0nxMNs2vzyRtHYfbHgQj\r\nQzraT/jh02YY8MzXe3i9+OdxfCLp2o2ltwBq4Zpy2NuakTRuAhYdjsYwlbRQ\r\n2btxburQrSgMS8KvjaaTie1rEAigofrv60YIIQY0/BAgiQD9henDbDlIX8kF\r\n32aj31bxwzwSdqVU9jJJqgUwUMGBNZHc2jh/L0qehnUNYOWzcpDfxJg9jhTi\r\nevEkfy8vq/XNxqTJvO0/5lSBEmsc5mhp2kc=\r\n=SOdB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"51daa70df3212a8d73c545c86ed1c57273d41688","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a0f01f669.0","@material/base":"15.0.0-canary.a0f01f669.0","@material/theme":"15.0.0-canary.a0f01f669.0","@material/ripple":"15.0.0-canary.a0f01f669.0","@material/typography":"15.0.0-canary.a0f01f669.0","@material/feature-targeting":"15.0.0-canary.a0f01f669.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a0f01f669.0_1651868076783_0.12630487037669624","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/form-field","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.276cb39a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"061c4cbc8d2c2795e193fbbecd9dc155a9d656ca","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.276cb39a4.0.tgz","fileCount":33,"integrity":"sha512-TUu08EjDaYwRmWg62i6ylEyUr3IwFsTmuI2QIkFvoOIXaFJ7gT7z/WrxcD2BBYUiesSUUJLH0OekW3ulfP2qqg==","signatures":[{"sig":"MEYCIQDwPpwrsEO1mKheW4RVczy64catLTxVap+g4S595X4VogIhAJtreCW3dvI9LXWUFFqwNDRSekhqkHcrGmrMrt2wos2U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZOvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqPRAApCWKz/LSSkq1YtldiGYf7+eSJbOMYgrQlcDru9VwX8R84/m4\r\nLF/JLO8t1HIwivHeq08tfjpNV/KN+T33DtFJxwm5gr9FLqdl6Ogy3uNlbBe3\r\npguJJ+T269uUy+sfbEISUA1CG08qXbWjLFMv8oXra60SDzaAt3dx/iltu2dS\r\ng2Nk0dAWN/AsXrfdecp552AryjYcgnDTG57A7ZmnJHs7AGGdmuLAzdIBg64H\r\nsR8hwpSV0eiBpyxSDXRiw9ci2hdNbSh+jaWn8CHVz9n5fjeqsOEVSpoCZaH/\r\nC8ln9ixg0XH4invo09dp8aTR+X4za/dvkdo8vCpTTaCMDNV8cUtVxaEhGNEU\r\nt2pIKK9MLmp/IOT2LSM7GdQEFutf8W9rB9rMpMJwUk3hJhO9ns6buu14ofFJ\r\nkmEokeRJ8h7Gs1kk5zaYKOxi3PklM/8QZnXv38VFCLKF/jm2LUJPk8kUABhm\r\ngKBrO1prL5KnAWoHr43+9e9QMMp6hojbtG5V0RDDbRb+B+toL1Zr8kYEqoLO\r\n8ypf9Aq3+xKlsiUFcMHDaRBMvRxrL341acIYiic4JSxAW16fKAslNYORgB1W\r\nAflS23wQtn7C9qmPJuHYe5BUtUyokFE/CQl3yFfYXNGcWSWYfmN7BiHmzbtz\r\nU6JY+0gheAh2Ur+dQ3v8V96uZFSsK8IOkpg=\r\n=doyZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c57cd64760098925aff1fbf0bc2a73d32dd2bed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.276cb39a4.0","@material/base":"15.0.0-canary.276cb39a4.0","@material/theme":"15.0.0-canary.276cb39a4.0","@material/ripple":"15.0.0-canary.276cb39a4.0","@material/typography":"15.0.0-canary.276cb39a4.0","@material/feature-targeting":"15.0.0-canary.276cb39a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.276cb39a4.0_1651872687445_0.4417451076246952","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/form-field","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.4fe98ed70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3ff2c156115fac9047aecb9b4926308753b6b8c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.4fe98ed70.0.tgz","fileCount":33,"integrity":"sha512-GaBnc6HzB5XbJ6cZVbIj2FY+26yBpC5+2NGM1h6NyoV9WsWsUYdBzt600tn8FhcXGiPcTw3sUNA4rKCUoQfQjA==","signatures":[{"sig":"MEQCIGQkudBeFPnBdnWJKmX9nR3lmqV3qC1zbUgTAFOWdWGuAiA+/PSgnSO1IO/TD5r6GfcpWBnvbTCeUjXTQEmfVw0rkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZlwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqF1g//Vg6hwKP118E9qyybZ0JhKXX5kFjhTLLrmPRWN7yUUWODSpVD\r\nkFrV8Ff7HjwVbzmku4MlzOvSFmTtZRunvCtyxPXmCBCb/3vCAbmLdsdWN+az\r\nmAamlhwa1k20fXEf3L+7ThROlkI0pskqVTKR7wa4KQdaUGQI2kfyxV817Iku\r\nVvfn6ipwyY6WuJq7yApLhtfEImISARUWvJ5f2apdQXnNERxbQEbSLYXV56+D\r\nm9U4qP5JQw9In0pCUHGpRNarKGsbAOBZ+A3RZfLcZKgjArsGtrcaDSyslvo3\r\nA0zdxlEXnrKrJaJ9LQvfxtKWc7ykbGhxHzObNxdrFeJIPAYCSEdvUIFt3oiK\r\nK03aWeZcMdO1NXEsSIsTquWOn+9vOIqLxJza+k65qQOfDtyL5hkQ/11a/enc\r\n6ym42hLbmFGvFeu63bmkLmHnLoOtlxsf5Ps7wIM797v0ak6JgkG4vW76UkCU\r\nRUtIZ4T40kCtwjG8lHZacVsK4kP3huzSQWj29MllEvaNiyYXoys8vgnH/eBw\r\ncmJD9WhylvOaoVZJuHi/mhriDkQVnH/+2CiattLmVvj+Qh2YxTBjK5pRyJ8D\r\n9aDdqwLoYIRKSIHKvoUbqwHvncVTyafC6WHe6ohSXsPHCm21cRVxSJdBSbuD\r\noHSS98hsPxqsoceO2AMyBTVw+knnBfaTkz8=\r\n=Tlxu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"353fde061dd090ede4416fc2477bc050587d6367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4fe98ed70.0","@material/base":"15.0.0-canary.4fe98ed70.0","@material/theme":"15.0.0-canary.4fe98ed70.0","@material/ripple":"15.0.0-canary.4fe98ed70.0","@material/typography":"15.0.0-canary.4fe98ed70.0","@material/feature-targeting":"15.0.0-canary.4fe98ed70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.4fe98ed70.0_1651874159953_0.5167661626765001","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/form-field","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.58b130a3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e64fbda8944d2914fc46a3d3cf69a9fc4a47ecaa","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.58b130a3d.0.tgz","fileCount":33,"integrity":"sha512-m3ZgBjVSfBZx/ZMNh+3m47l/IoOoobkmry1dtcYkQHvUwDkHnMcNYuPRmK0JBAJ5yX8iiS/9cgX2EU0diMXVsQ==","signatures":[{"sig":"MEUCIFt0pD125ZQ2h+kkutTEycK5d9QYzv9HgPgmETuNHzBaAiEAmk00FmtG0f8xivPMq9hJnoXGS6WiTsZxMtdyo1Ue3y4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZn7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonQQ//TBLHVqA/PHkmhLJ6ESL9zAjoJH2Wo4eIsGmOZ02KUyCaf73U\r\n/MtzW1HAYQWKKeb8gktuShCIEP4gRB4BW2oCi2a4VjJamb7z8RrN1v2R7hAE\r\n/jRUIlEMUwcEgbg5qkMDu5Y2D6q994v811QbaufQliZsHqr28rqVriREXT61\r\nX7ZLXLhZELAMwnodgrtUEU8AerPQ29xGm0S+z7amVAkuShdi+Wm74Cv/92cl\r\n6zvyf0ck5ZsHb8rvBXU6ri5713etTi+0tNJjQ3N+njBMqKZNHWE8qdyAoMJc\r\nrspgXxVS+8i2pSWaZWZdYTabCOX8+xs4dO3ABgxVxU1F1rYUY2bijshc9OPb\r\ngTzT7Q+BOyxWBLZ3k+cNIJTNT10eaf8h1MAxTbYbNVN07jQX3VfWJohRvmRF\r\nDqRJQMk91JhNoKqICN0pQYDGsS5kIaPuvuTHCEYtXxsUGQrJDgEHw+X7f5ui\r\nT1ewaEaLM8q8NKu6pU01Y7nxU5aV78Cw0VZAd7c+60nACc0YtdBPqal5B0SQ\r\nLv5oTLEMl0DpfHFWhc8bpIVEc9aV20soG64lHjcS9uuaQEKV0ZeEuZOIRZ6g\r\nOiMv82jWVpoeoyZwkxIJitVkewXhV9+/AR7i78ZpN2JF46lTwJtnntNrYleF\r\nIau0+a4SEaRM1rTAKeB1Svp9SBfcdGUyvZQ=\r\n=gytP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"58c8ada7946689a0a59acd63cbd49b6c987c9853","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.58b130a3d.0","@material/base":"15.0.0-canary.58b130a3d.0","@material/theme":"15.0.0-canary.58b130a3d.0","@material/ripple":"15.0.0-canary.58b130a3d.0","@material/typography":"15.0.0-canary.58b130a3d.0","@material/feature-targeting":"15.0.0-canary.58b130a3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.58b130a3d.0_1651874299758_0.8811875414867101","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/form-field","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.ae278a2fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47544372f3316830debbc69103cbb3be400484a0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.ae278a2fe.0.tgz","fileCount":33,"integrity":"sha512-M0ss6q0RZSbOWf09ga20aDMt3XlKP1hgrNdh57E658D0ZQuDnipCKSqNsAPbdf2o3DeLyazwTEkp5J9zX0l4EQ==","signatures":[{"sig":"MEUCIAJ0nFEFuj6N+c8UEeW5bMi7TlzUm4oOxAdzKyph0LwiAiEA9jS8KaNDx+app1BS0oLNsFwKpesQ9xUMpgo6u14S3LE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTJMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoh5g//ZTi4qTPur1xqUQ13XUSninUvTqj3hJPA3Gv0oxwPl5nVn0/O\r\n11Vvax8z/RpLaIO5/lO73WsU4lSgxDgIbw0GneB8vgRM68597XyKY6iN4LGv\r\n+bCVNdrygWljnT/a022NXuLrMMjoDpBwXii3A3EnUFyIs4pOTSp4lmCijoj3\r\nEGdVt6HBXdKX+aBtEz8Uvod22zXms5jPK+DsN1TrXktS35rrFWWxzqfc8P/y\r\nJJZ15bUmd3bTWD84Q9+n8ZfYAsqViRrPCGtR3MRYG/hxLRi/3KJ2G15+OB5D\r\nhFUoP/y6saXfaLfo/W5lQ/6GHxE8dBbKtmMW3oADH1RjdJderTE08Gdqw+YF\r\nIbj10phNV7FrJUNdi7sk8u9LEa37/G6/fIxDwjMZFMMTTIQ6gF5YOlme87es\r\nlD1FgbnB5saEAKbkWYFO1lHGQGAGX3CR2zlZomPuPeGCeQWq1HMjvkRhdSj+\r\nQimYa2FzI/w5e01cvvtivNLmnn1XSAv3L8VLPHhwGlWmhiBOhVYFiF/rDJTq\r\nl2i+rsAWaFNyi0iSub7q3BhgKYx4+dUF7boQORiVlmzCPhtXp0m93JbOL3Re\r\n5REJui3RCFlbu8aENOzBbStajRnOwS3+EEhya9Hq0neRHtIvg/rbgmrAdAJw\r\nuyrzLwKlREe+p9+wkrVeWa5meZdGyiNHrd0=\r\n=yjux\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bfd08e232a3a514dd5a38dcd77d17df365502ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ae278a2fe.0","@material/base":"15.0.0-canary.ae278a2fe.0","@material/theme":"15.0.0-canary.ae278a2fe.0","@material/ripple":"15.0.0-canary.ae278a2fe.0","@material/typography":"15.0.0-canary.ae278a2fe.0","@material/feature-targeting":"15.0.0-canary.ae278a2fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.ae278a2fe.0_1652109900719_0.8337849998044153","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/form-field","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.bebf5bfdf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"436a9cfbc7b61de69ef4ba8172ae5d1b104163fa","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":33,"integrity":"sha512-pJOA3mfpoIhNDdkBMQDHkh94gt6UN5yPzbglA4r/rkePPzGUYjqjuP5g/SYepH4xdlkkwT1VRI9n5J84T2m6RQ==","signatures":[{"sig":"MEUCIQCmb6DuPgycXUvnwOAXAEeFE3wE7yVF+uqRyhfgWcTKwQIgbUA7W0xwyvz2PIEBlo+YpoieRmfEmEieUNxGhHQ3oWY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyIRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlvA//Uby38CTqdAd3LYeMVHSEREOQhXDrnKcK9XQX6gaaORzD5MBB\r\novnwG2qOm14SgBWylr+Ucxagv+GVb9Rvf8CYBCdlEpxYU3mLtQzxX/3s8qKS\r\nKSUSSypnQyhEB2QSb2zPIFHEz0XQP3BlcbmJFJ2gDrYy8B7rnbZR47wFeb9U\r\nwraRJLSsqWYiIp/ivuOQ12sXRicBl0bJ4NCdmbJOLfwcYyxvxg9YFGyxJ3bF\r\nif9nfe/9sRLPcveTj3EI+7SZVkS42RdgY5mepWySmwgohpNSTa7CLqCiYIqy\r\nYQ+SDNe9fq2ouxwuRlhj3qnwsFZE32ocRNwGOsH4IORO5PCI1tAYnf3Y+YJy\r\nHSl17DPTzt1JKzTgnRV+nMAGjkSruubR5GKdPrXHEMlTm/garlnINSxkCq7J\r\nLAwPDYe2TQn82VjflhPfoyIplh0NkvOvyTdy+vidgWR+rzjH9WT4lMuDyc9w\r\nJPkMkUfZ3DyeYlAA498s+F9ChuiQoi0XZkniNFOeFndnRuMPMz5OZs+6PNgG\r\nDTyxaol7vytbu034rBL6Wi2Xy5xcUtcbmGSONJcWZ77M8bzqWJWCWHZQLJs4\r\nPwNAplnhBxtRKD9BlNCTXqHBwXtnns64T9+nLaG/2v05kCHAeyVZjL4meLbz\r\nUIs/69J21jGovtHJcYzCz4jry/6qKsiuVbs=\r\n=rHR3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"61d3971a411616375c31cb3fb763fafc120c9570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bebf5bfdf.0","@material/base":"15.0.0-canary.bebf5bfdf.0","@material/theme":"15.0.0-canary.bebf5bfdf.0","@material/ripple":"15.0.0-canary.bebf5bfdf.0","@material/typography":"15.0.0-canary.bebf5bfdf.0","@material/feature-targeting":"15.0.0-canary.bebf5bfdf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.bebf5bfdf.0_1652236817581_0.7760476901846447","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/form-field","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.e6072cd6a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3849e14f0680cd266b9a274d6d06bb37aa55adc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.e6072cd6a.0.tgz","fileCount":33,"integrity":"sha512-eyA6VhtKltYJ+4nkBix0RtiZH68fdmqSofWY2NBc9gRuwtYWW4ercsrJt7aEfVm64jUCIyGRw9KAgcAXzWmdCQ==","signatures":[{"sig":"MEUCIAH54ueE8oScjoCm7rJ0Ne5cR/1B54TzCqQYGeEyfW8QAiEAyGapIoRlL23wtpKuYHbaLLgAbsWEbMVZdjOqDP+GfZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBoSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYHBAAi0bd/yX7P89LS9JEioaGN1zvciYYiujorCnUCzw9hlFI0PrB\r\nIdrdCCAch++VKt+Abhs1HeqPL3/2DQSe4693z4EfaOqeqPiLFojFntLAQR3C\r\nL6Q33atUJFFacR+oxfSiu9cpefUDPR0d420nsfu6GiCYVJZ6IP1EYXf2M869\r\nJqIzCpotqBRAz8LN7+UQOHxZ6GYD3TeTZiitVomYs4Sp79H0RDRJkZzwdBQl\r\nWgbyMZ3/x8D/+VyORIAmDYw/6OgLwXWTnFoHGaZKyP/HIJXGz6XXTfTkfyOb\r\nlwH7lr80oZLg3A0Jh9IUJ7TNU8tWDyyraiJrP/wVlC329G72zMq6zLpAZY+c\r\nSX51bpKe8sRZzdAWdyO0raVh5VQ/aieLdzUwchm68rczXBgsSxy00TkmXg1Q\r\nLdlnsKZOF4smy0oAmYs1nSydaFffj7qrgyLkj+A1oh/vxRexRBGWXyWpa74h\r\nhunNVn/hoGdy1N+YaTeG+PiCswYBF5nvt3JxBF1qjLqC0quInLNLw9Odj0wK\r\nIqVANqY7GyC3P1sPB3fmQji9p50gFW0Pd0PvMMpXD5FRaWqQQ+VD4u/QWbMB\r\nACwwfVRtgWv5qMWrYJIJJjhLCDG9cK0wN9ttdMyVsgXoxIB4d10q8JyrkUHe\r\nIuO8s/NGlDwYHZKOHqaSrCUOvcsBgG12EOg=\r\n=It5y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ef2da678e66576709be19aed16a880b00e73a039","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e6072cd6a.0","@material/base":"15.0.0-canary.e6072cd6a.0","@material/theme":"15.0.0-canary.e6072cd6a.0","@material/ripple":"15.0.0-canary.e6072cd6a.0","@material/typography":"15.0.0-canary.e6072cd6a.0","@material/feature-targeting":"15.0.0-canary.e6072cd6a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.e6072cd6a.0_1652300305888_0.5772458061844958","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/form-field","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.5b40eb988.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ab9c98a74970b712caccf6dcf33b05668f405fb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.5b40eb988.0.tgz","fileCount":33,"integrity":"sha512-1vBs0Wo1hemHr2i0Z9mLFnqfE8hm9PfrDExGo1NFcfZHQpvLtVYNmpyALo67yA+z5QUaZGQr03/TTOq4VXf29Q==","signatures":[{"sig":"MEQCIDMuEV9vQOsxyIUxfhZlFnUH16987uQD+hkR336my8cwAiAHkAZbbmU2dvNDRoijkxMK35EyOWSGSEWyHd677BfpsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHR8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKBg/+Lxxuyr4jUl2ZhFyOtc8V3ekSCHIX79FoqNkBNnXFsqDJAcVc\r\nH+4Yh09blEnbfGqM3RJq4A8DtEP74bi5EWU8XzW89ryPNByuSAxEGQTsSqIC\r\npDE+C5bXw2fZ9p6USevRlTtJ3kpKhHaDygKJVLeLrX2PjM7y9SgVTUUkoq5p\r\n3kCnQwrBwRbusReHKDKNiRYZYSXHMvvr9btfK1Na0c5+jFmL4IikP0CYl+VP\r\n64JdXRkcxjOYtRlY9BPWi2NuuYaTb+5btKmYkAslkUWuizoaxQKy0c3JwxHD\r\nS0OH76jMzlG/4zBj1/LOMY+DpsKTST0VCDO/63ShEIone0pVldxdzfLORe4f\r\nl+WTsVkTHu0Ev2nCWpKqSeA81KO4cP3xceaT8CeGn+fqYNovFAd+dpKkV3Uv\r\nvligX77VFlP2rUexQ/aKDcD59snQt5lJ8CgrEf+xXgSOeAZ9plD72cYpH8F4\r\nLIF25otTUSFW1JD2Q51/bap8kIQBVBL6yanEd2JI25+wPzW3ehD/vt2sdXQK\r\nKR6mxx5PUGqK4nDY2ISBF7TmGIAbqyB1cgqNiGXqBL0B/3Kcheku5gunCbTh\r\nOAUhdi1QFuHu5V1yrd8PrKwcqS4wPcgLRD05b2NzVi078UKpiPOB5n9AB9XL\r\nHDhlQGgnlJkKGQ56C2OlJYnYbd7ohot2xPM=\r\n=HjIl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c30f2a613c97ecb48fd3f9ad7b0677e51a156449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5b40eb988.0","@material/base":"15.0.0-canary.5b40eb988.0","@material/theme":"15.0.0-canary.5b40eb988.0","@material/ripple":"15.0.0-canary.5b40eb988.0","@material/typography":"15.0.0-canary.5b40eb988.0","@material/feature-targeting":"15.0.0-canary.5b40eb988.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.5b40eb988.0_1652323452191_0.24394309306995443","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/form-field","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.6a61d62f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8efa7698d1a88caa3353daa5a0d7c31cf3cf9f58","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.6a61d62f6.0.tgz","fileCount":33,"integrity":"sha512-AavkkqngvcHJZO2Qdtp/gP6wSOv1vshOoB3nBqwAii2/ydkpmW1K4DLu4TJTikASVC63WNY8/KLqnHDV5n93UQ==","signatures":[{"sig":"MEYCIQC3EM3DsSn1OalT/n9JfDqJQgqU+O6PIRLBKue8cN9K0AIhANzCYagcqhvDiGVTTfT1Q2YiAN+4wsq47PCDNce742En","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW2IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonXA//ZKqQHDCfpcfM++pc8NwGSVFQYsc9+WnPLof3VWOaGD96SePc\r\nBrV0QeuxsjoqPFzlfJiC85V7LThLN5JbSmAv01rJgbMsFagIX+66KdFzKuD+\r\nRRqKT3sZcksUu0H+sMqE0geY/pg14ePDcjIKnY4xb3GYoh4tqT2OlI0FKReN\r\n7F/LG8PBE+EQpWiroVUeL2EU88Zji5vXFiHLbJvN6RpfVzhq0xRamzUHuTtj\r\n0HrNJa0XOHc1MoSf5PQFl2B6IbxQG0NUDHZATjLmniGlGzEGFTXYNP8PFsA9\r\npi2/VGxQNF2QVd0EY4P2EDDAd0N1OmuQMfjerVbvcFyJJVpgUnEDyPjTIVwh\r\nilSaRhJtunm0E8gQLkKqAUVmQZpv7MmVmGoJVhrUvVBVML7haBuSas5WZt8V\r\njo09TDw+4sb4xrazdS43yiUDLiCNPNC/RIyxXkDqZpEMOexIFSSRowmQ2nyL\r\nn3+Sk/vufIpEfPNwCH55G1p90jBM2ZCHZedy8J4WkcjrRpgXJ3FHZ1UCUwLL\r\njhUSO9G5xrkzownl+EoNjwVbXu7mQX+XIG37y7gs67/tjiAz1YM92XXYE7DT\r\nO0kJIfTwXF4X0/Pt0RTOstG5iTMav7TQAFvisFlVl1su3pER7PFIJPD9QiaA\r\nWT4odrsQXTBKrAd5c03m+8zcbKCE5iNfDE8=\r\n=86cj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1d46f0951ee9f725b870919613271f00fcb1b521","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6a61d62f6.0","@material/base":"15.0.0-canary.6a61d62f6.0","@material/theme":"15.0.0-canary.6a61d62f6.0","@material/ripple":"15.0.0-canary.6a61d62f6.0","@material/typography":"15.0.0-canary.6a61d62f6.0","@material/feature-targeting":"15.0.0-canary.6a61d62f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.6a61d62f6.0_1652387208570_0.36187024938751056","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/form-field","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.05930a453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25cfc433aa1a58e21747b0401800636ae2e92969","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.05930a453.0.tgz","fileCount":33,"integrity":"sha512-wCttw0KfhGrSO+b2dUFfoJNyAFjdZiyoAMlKB637gAJ2hcEEVFaSpNzvuVGrj1siDBv4BiLdLCGMWVWuuqh3WQ==","signatures":[{"sig":"MEUCIElU/1P2SqXp1+U+y+VAcRXBMN/GX2J8+oVD0y+I0km5AiEAjiZQNpd9Y2Eq5OvbrOf8Ci5a/Wfd8QbzHJ2g+FLa1/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqe9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQ7g/9HVd26G/BEd2ly9vEFFpJa9VR48r8L1LyPKgNRCPeXL85rFtN\r\neZaDe1twJdDlQcxakZueCOH4M1w/tk9tHEn5lDJuq0fZkpOh/JbhROVg010P\r\nIGY9PIwzW95Is/nbm6vrSMhgzMDOetzGT75q92O8yxrF8mWXHBYkaQ4vGtzF\r\nfkTOn6jed7l9AFMMQbfR5MSoEBCi+iKOVO+SKnip+DqrFDeIPeMWoLP/k2q4\r\nbYSDE5ADFpGj5GWcEszDzDlHqTtQW3UK4r8ws9JFo6MJexs96tZ13F0LpBtO\r\nVQz5rhAUnc3xbSl/rtGIXNAXxAPjdKfngXZuL5VF05u4vUQXJrdKK0WNGOV2\r\nGc2EgpGew2+ajMcW1lcF/0R3rRVZFrrLbYpzOR9rCAmS0TgS2ELE+vJNpWoW\r\nvpNsh8mHSMcwubccmTwAc25cyVgTK/1Pu3ZKmfwTYzXENJWdo/WlRg8Qve1j\r\nbORm3uHq361i6cBw9JSfVYaYgApxGjfB6kipDVXj7BdCXj/UPshHSO30iTp1\r\nwGBzzEPJv5ySNLU8p3w53I82yLcM37Kz1fq/cwrzM/jujVdH8AMANwQteUNm\r\nU0Cp0GL5AJIYxhFXQ6bhDNgw89z0b6HL/ZqRN5gSVKtPUSAGDyJ6CVTWLahU\r\n8/WoqJaE2PRmltnItsZclWEB80zbaWFg2b8=\r\n=4ghv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e6dfc2d0553321fbe47e71fb414cfc1152b0ef8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.05930a453.0","@material/base":"15.0.0-canary.05930a453.0","@material/theme":"15.0.0-canary.05930a453.0","@material/ripple":"15.0.0-canary.05930a453.0","@material/typography":"15.0.0-canary.05930a453.0","@material/feature-targeting":"15.0.0-canary.05930a453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.05930a453.0_1652467644913_0.5534900209723332","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/form-field","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.c0a11ef0d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"131da6920583fa235ee1429e53190d02494d26c4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":33,"integrity":"sha512-kWnZ0kjUpTKh4KoH5wIsspLQxzi2i5WiPsKis4pGiNRaSJ7q6sC9mxxHsKf/2gg+c3SEO2mnlTloDmMrDpAEnw==","signatures":[{"sig":"MEUCIQCS4m5vDTD/Mvf+8LIc5a3bOoZX+26nwRJnmgQQWvFeQAIgEVQ73OVoXwfsy0gvQ5MjwIOMhmAaUPhZbPdRstlCNDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWycACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrroBAAgw3+YRlXS77UsxW2yJypaoz58gSybch17Oe346GmNRPmRxuc\r\ntMRvp1XoNbILvzTXj+5w4KoJVmQq31Y5mUT/lKLaInAKkZbST+dAP4x2B1tu\r\nZa5LPek1FhMW04VooF21jskFV86pk+tV/BJ0bd5e6eL/JaE+8oIBZ2vaoKvd\r\n/K7w3Mmd+hBMtZ+b8JIJeiHecS/r7WV3hsupoiu3G7l/afaY7lsPZ6SxItKf\r\n9Ht74UDXIdi0InFHPqNSJn/DSImzFGQL8OKmVEp8hxkLKANka4p9HBMvm40p\r\nIJ4KRKwdkteoR9yyTEnwb3XL3UYENvr3YjnEs5J6BT+8A3OFpavkhEzoTMEt\r\nttUQ9HXpunmm+cVfnVGu7JK7VON5NehCC1+Unz27QyEZBAB0f7TbfyKgUgqe\r\nVM450WjpS08KjdnKgFNYnnXTdQs2Sy1UV9Dow0XTCDryhGNupp2cTXt0X2Sn\r\n8xf9ugZ9eq8SC1qjO4kftc+ERZXbLvfBg5N6K1mJC5GpPok8/h1fx1tSSzPJ\r\n/acCXgTFEDo5O9IgRq6YL4LLfManNwzbJJRKyZst4Cr1C8ggFf2cEVui3Ahy\r\nt0h0RKe7PjW3gsqNpFZ2+is/gjqaKdHKZckfe5IbcyVJKd9W8RoaEYZEPRqS\r\nkJko/9XnfU1W9zd99Kq3dYlM9zcOsZz1kN8=\r\n=TLrV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a97df68c1dadba0530f5fcda79fb8bc3082d963a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c0a11ef0d.0","@material/base":"15.0.0-canary.c0a11ef0d.0","@material/theme":"15.0.0-canary.c0a11ef0d.0","@material/ripple":"15.0.0-canary.c0a11ef0d.0","@material/typography":"15.0.0-canary.c0a11ef0d.0","@material/feature-targeting":"15.0.0-canary.c0a11ef0d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.c0a11ef0d.0_1652911260746_0.8078149171907814","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/form-field","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.2f9b268c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1c9a66772d09093a3d3880edf6cf064832135f3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.2f9b268c0.0.tgz","fileCount":33,"integrity":"sha512-cmOqfgH/mC3NkkSkVetOT9lKfWbeChWqjMG42RVB+Mvi3BDpQG1KaJ9i5nqF1kp0xovPjS8ELF0zSv8TnpxjRg==","signatures":[{"sig":"MEQCIEV+ZRj95q4lPViFZQGlOValhCEx7/toTBOgGMmHVzrTAiAMsaKUNVRxAcc2ILr7Tog+3THE+K7EOdan/daU826rZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+zXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmlRAAmEkdaOSwN2vRlkEobEU6Jn7XlPWQArc9FUgKmq5DSxhtlkKq\r\nz3wEaiS6ol04tAwnpm0p4yyTPZoIEA7aAtpqUGhJxsNv70SneEGjePC6V9f9\r\nl/cAtX1td7n1KQK+vhGzIsObo5DIV4kC6mWYUtOs8IF2/H/8d9+Fimma1KB2\r\ncHQanQYEVWte0R6WNNJWrsQe1pKqQjVMs5HN6gBkgb0+Wm67GXtbc3Tz3lEt\r\nPBRL/tE3atyVDkvcfzimNiSw7jUfANi4v82IOMfT8ZbDA/MTgvL5MHO/iPTh\r\niDq1Fi7C6pPqmwQzZnkq22CUa8LUVXbP2Q8H0Xli1f0aeLRsWe8J3loV8ICF\r\nVdkNxPFZBTugQ0fM407FPHgmwrUpPkdiCrvrvfAA/8YgSeahFNrOconKcn08\r\nB8Kr9h3l/LbuVCPnaHyZlQJylzWa4ZzBZnGUZdXSvD/j4oLttkZXIXUoDumE\r\nIBtM7EpoDHkCiAv2o/SyOiyiJQAuSzwqDjcTrhcaDZfGbNpXw1K0SVyIRoLC\r\nbNFRydsCV7GTCua4yE0i7KCbz4SVPjPGfOudWVU8tp/JTPbWAVWH3kfvs9PL\r\npCCETgfN307cFB/yih7ZeBdnOCUYtdPuf7T5CbXL+bokaJvik1qHRU+d0Zwv\r\nmrMhR+1lI8mTAwu8vVVT2RWjmn07QHpV8ns=\r\n=tjfY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"29832a4f010df39515e01d98656d2e77ac1e47e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2f9b268c0.0","@material/base":"15.0.0-canary.2f9b268c0.0","@material/theme":"15.0.0-canary.2f9b268c0.0","@material/ripple":"15.0.0-canary.2f9b268c0.0","@material/typography":"15.0.0-canary.2f9b268c0.0","@material/feature-targeting":"15.0.0-canary.2f9b268c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.2f9b268c0.0_1653075159016_0.8128525067277208","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/form-field","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.7741345b8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4f7b56a5667d5530cff53d2b560549452f4574f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.7741345b8.0.tgz","fileCount":33,"integrity":"sha512-T91izcZsmlSxk/MYs8lyqj1vMbWA7xalCokKhy/WeYNOoDjnuZC352BDyukSPnraBOpPDsBZi4lI3H8wri2pYg==","signatures":[{"sig":"MEQCICQZvxX4A/WARf3sDiTv3nkw5yms22iuRfCOqrhRJ+bmAiB2srBYrAryYJvpn32fJx3AMPYqKM9ONYKY/kijaA3HOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/PkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqq3g/7B5BKOUTaw+8nfOEaa+CHmKEcXcyHz1jfRotpt9S6RRX8B5PH\r\nOs8sI9PRU+eHuJ/HtZMcTw+zOhTwa4ASWo/HtwHFqaL4F0f7NmqyHmBtYZm0\r\n4zEycyZ8uICu+/Rv05zu0+oRgG9GphSxGyyQVFZRNsLhUQPoNuevDWDGjY4c\r\nL7BBUTQyeeekd/Vy3e3AH91lNE1t152sCdwJ2/4xG8Cht+u5KaUMO7hZjPvP\r\nJjQZwfupEnv5Gj9PWPZgc/Not+68btmJHx9Fou1cv8dHnmnc0CSiEFAsStYE\r\nHPov1cqAfuXBgOHUcPR7yEgGgVEaXA7v1aP4m1YsLXp/FPvDLFM8pHz4QE1q\r\n1oNH0673Lr6KtbHYBL4oIXwfLa8SyY76mZ8QVbo/K9+hgIfbhinPxTjSJ6n3\r\nnMiAKL7IDFY/mMMaZDAWGOfMpbH4/x/Jj6t/brYahvi+GInxi0ZOedtlk+P+\r\nd7ZniiNg0zJsCmFITU5Y4ns3JxYTtOSlPp+bAetp9FcPn8O2eMeCX1bMC9r5\r\nVByBBbqbvWhQoDX0n1zydHOJTEO+rtxEc+AAHoPVhj1b810uA89aULDq9aHn\r\nGRjTQfwe+vArZRvXRSGsnmTVZCzKupNAjGLk4422+AeMzNTXIvBqI8q0KA74\r\nUauSeClvo1GqDRaRYZygaHksIcobsjtGU2k=\r\n=+3th\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2e61e5e8196d28c1bd4d1c7a12c242276c1d8ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7741345b8.0","@material/base":"15.0.0-canary.7741345b8.0","@material/theme":"15.0.0-canary.7741345b8.0","@material/ripple":"15.0.0-canary.7741345b8.0","@material/typography":"15.0.0-canary.7741345b8.0","@material/feature-targeting":"15.0.0-canary.7741345b8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.7741345b8.0_1653076964282_0.2691298221622829","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/form-field","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.f807e793f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c936709d0ac14980dafc99af34739a2c86a422c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.f807e793f.0.tgz","fileCount":33,"integrity":"sha512-XjFSux7flk27BdiV5QHUB/wi7ny7I6zud+d/0SRdcNrdVczdmMsCoqbwG1dWzV1hdGSgJmIE8rtBIPwuZO9KlA==","signatures":[{"sig":"MEUCIC5WU8CuzVWM8aBM0oPJgA2nxSD/W/xKFCtK5ZLi7wQEAiEApU5CTRXW/SxDzu5LIDUWlQHkzfLBw0WbXGpgF/8F3aE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBSIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpd0A/+MIs4+2Dd6vyniCb6/TQ24KMJ6FwgmaNb/YIS7AO3SR6G8BYs\r\nEKTq4Hqa3IZQttjrHfco9T9k4YcFduZCsA/ZTvgyycW7R1XmgjOXUCyvVo1W\r\ncHCRQGm7ypgMrH8PR3NjnUZT+dZKxIcCZEcTmgRrVJrsy0XM09wpvZsZVguj\r\nDBJ/C/XetDwxkei960peSh+wkz3+ca62XMkG0bJM/34/edzQaZMFgw6EGoqK\r\ni2fExUtwIkUaKO9ufh9EE6RcKxKhE0g0igoFKy1yRDFv1mXDMjy+phdoE3IT\r\nKsx8Gl/VPsCjYLh33Lfr659ldRAzK3M4skuhq5PaSQtFhyVraKMn4cYIRNO2\r\n3u1R1vhvjZQ6QYWIX4hY8OrhiY4LZMP2zyV2w4+dOh9wja/1wxVdVzfoiiTl\r\nRxGqkrVldo6Il7LlosZJw6dv43TXfLtHblWVGq1Dbq/R+py9MvDCy23BujVH\r\n623uHSfD52BunO+W3N/6wM5yYEEIIzioeOWJDzGIUALaDVJbFRaEl/EVe3YM\r\nhAF0MsEiHme28QJIa6l98Ewn+QDvAeMxHeYmuUBrgcXeWuVg2NgScQ0b2sJs\r\n6alGj4eHdzOiJcIfpKUcibx4Hdw2lx1tTYiCIFXFktrUYDPRzp2acnB72Wk8\r\n3QGPCZSdMErnKY6U8rYAOhUbOjs1OAL/VBQ=\r\n=UyeG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b4ac5ff59e90b4770de9f689d9b09381fe2cacd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f807e793f.0","@material/base":"15.0.0-canary.f807e793f.0","@material/theme":"15.0.0-canary.f807e793f.0","@material/ripple":"15.0.0-canary.f807e793f.0","@material/typography":"15.0.0-canary.f807e793f.0","@material/feature-targeting":"15.0.0-canary.f807e793f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.f807e793f.0_1653085320110_0.8826326626426222","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/form-field","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.9f53d4a8a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e9be8fac222f75ad71ee387de63b95a2caceb04","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":33,"integrity":"sha512-k9PdMVMZXJAJNuWAAhbNqJYqG8jHuyY9AsD5DkNAV5GKShAzXRE2Y6VJW3/RuLQZoxKT1eoNPBxj6Zn3B9TaCA==","signatures":[{"sig":"MEQCIBZWCNq5c5W3vyA3kTYR7w+eoUCTjgL9c9t/J1yCvuu6AiBz/30A2Xne4nsOjATo4gvJ3yFX5rC5UTyXWMN9KhgDag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6DkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyMA//bsdJZUL9bs352i2y+eT94NdCNq0Z4SPGLFtkuR1KPN0wWGc5\r\nL/OS8/cpv7K/G3O386ziVwv+lXJ+QKwucsVk8M7o31fBBPp2h7D+ms6l2goW\r\no6gCPaBCTE/7/61lKueLYN7ahGFq7SwQQ4yorB5weXMV0MD7WNUIXbr0wKsG\r\nUiwNnF/iVT9B4UFV8bU0T4v66pk+LqGuvbS9FvUoj9y4Iee4g2M7GhdRymDE\r\n8b45PyyzkDx+FD3qRgX6EtnWlnp+kIIdRV4iU82CIk71xBbVNOb8+vK9+n+r\r\nTO3xCpisAgLtOU2+ruAG0QhPaixo5tUwJbjfO9jef6L8Ovq0jZYRIDJAD6jW\r\n3yoQOYr0l/kYAYuFabpEsG3tsf+wVQVrP5x9V4Q2yZxTUXoGfRpx42vqNrjt\r\ncmR2xzGaQjJiLpDFzx0bJdmx/2vW9YOeXo8gquS6uBiAvyGqsKn6ffgxGa4h\r\n/4SISsqF+KtkVzIRUsUl45NDdIuCHKaWQdtARqt1usDT5h1F+S/qeCX5HiXg\r\nwUAAitZwcceAKywL6bydlPdGYnCtySwUX5uijH0mU6fpBiWqKbqNEdnZlIVD\r\n6FX8wCApqGcfR2Hsx9a4sUtNXScNV+fF13Ukbla6MOZCFcV+9PPOLuiOwxfQ\r\nkTDQzZVdb2wldvYcJ88p0tgGS+BNJFAeN0k=\r\n=vXdL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5db1bd7747bde68bc956d054f2e939e62c78df6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9f53d4a8a.0","@material/base":"15.0.0-canary.9f53d4a8a.0","@material/theme":"15.0.0-canary.9f53d4a8a.0","@material/ripple":"15.0.0-canary.9f53d4a8a.0","@material/typography":"15.0.0-canary.9f53d4a8a.0","@material/feature-targeting":"15.0.0-canary.9f53d4a8a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.9f53d4a8a.0_1653317860571_0.8063450580450111","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/form-field","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.77cf00e37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b71b96bceeaf8b1227b23e5d624f3c5c3ef157a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.77cf00e37.0.tgz","fileCount":33,"integrity":"sha512-J9FT4eD//jTVd5NtxYsMX1Kt1s9UTGdL8rbKDitxTXj7K1Sf+PwzrjOrS9xtoLI0M2fk/ybpkWVGzTmZ/vAZ5g==","signatures":[{"sig":"MEYCIQCgf2rRZsaxjuEaahnsxjAaA+cbNLNUzo8Ox6sUAOOekAIhANdZudR73q9GVbOl0WH7VxF/hAaY4ahQDIrI1HifFpgS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillLoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJEhAAnE7HoTyROSSmXHEgnXVcnkhyTFAiNRSH2rR6//HgcMQK1hBZ\r\n+OoEYUeXE3hPu5s1hbCGaxTxirwocHHDIjyF3H2Z+L2/6bEePSTPSqY2SU9A\r\n4qPTgetVgL7bhImvcRzn+XXvjDX7SN6e3nEF8SGpyR8fMiDea/DsAQ+OYPIP\r\nqTZG+2mC74hQXhRInH+amJVRhfbGTmXF2n1EXjB0Lm2nKIn2MpIItI7BrFX8\r\neVBWnaKTpq9+LbNT6hFTjN6TLcDIOF/7s0vSPs4kl2FJ1uU4eM2hQYE8u3yM\r\nhDpM20OOGQX/44svSN1y0iLIqX8wUcixfeYyMyypiItVAefLAvTxd21qfFJs\r\nMhjlBZiuKUtrvnGmUEg7ZQD4iD1jF0HHglYRAuzETMfoh0CLKkq8kLHqq/HK\r\nVRiQoh7toMgdsg1RqfzwbjsxiuCkQknyTPx5srDefZ/bSACRkFJ3CQ94ND5/\r\nWd18OSt5Z6CSqKW8lhVlElPtNBZLwL1ZGCbkjK384vycmu8CDZQAMUF4WCgS\r\n77/em436SAoF6oRNhOtrBbi6UJDiDgGBryDt4MEa0/TIUW3jHXxoVJZWIrla\r\nYJr8AlJTNXz2SZ9Gu76wNS51VyVBwAhSbiuTBGWLCjfTNPUf0wTg0ix4+xHl\r\naH0vA46BIZ/7DQlaQZqHMFw4A34HUOjNBgQ=\r\n=RF89\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1a68e64a5e78b8bdc529142c18c028aaf1b15b9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.77cf00e37.0","@material/base":"15.0.0-canary.77cf00e37.0","@material/theme":"15.0.0-canary.77cf00e37.0","@material/ripple":"15.0.0-canary.77cf00e37.0","@material/typography":"15.0.0-canary.77cf00e37.0","@material/feature-targeting":"15.0.0-canary.77cf00e37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.77cf00e37.0_1654018792738_0.06908287217284226","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/form-field","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.3c7b844c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e169401228a5c93a6b2bb039d838c4babdc953c6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.3c7b844c2.0.tgz","fileCount":33,"integrity":"sha512-iHgwwuzSY7StLMvDbgumDayYbmk77Cg8Xn6qPIvdS1rHb617Kv2EJbFzNHUuA59GpHqgx8bbF+y9zQimwglgqQ==","signatures":[{"sig":"MEQCIAuX77K6m7nosPyIqx7+CskkzlH0efS0Z18QHNCgGq6GAiBeo2DyBFxh5DKHXKgw3IVPoRMYk955ETlk/afaNCnzdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin89HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpqxg/9EE8i6gawEfkhKGNdCjTZLOZQrq9ak56GD2Fa7cP5XG/0t5Ce\r\nJ26RoUY7p7kSzT3pCWH8p4wQcq+vqoYPWe1kxz/PZCLasiLdWEE5xFXCfZy0\r\naruvm5JKSrORCdS/SAaxXDLWBPhnMbShJuTYjc0cEQW0Ndtt+azIdk2hx5FM\r\njPcgAkUz/oALZWdpBndkCrNozHg7XQy6SDlOHy/WbVPrMmLuAmWpKJuJGiuI\r\ngLAK5g2EZRHVadVRxY8HIX0Tt0eS2xK9a9AJWpVbG/1q7iaLKgt3ncyH5JDc\r\nPbrPIklL4+aAtMymfha+mpUFxnFXLds+aCBXh1Z1Np11w+c0WTJLPGDnvGOv\r\n+MLFwGZur4pVYuDDU759hE4VNZsJQhmHRG+G/76OQLQq8haHJUwbEkIo4Utj\r\nA4cGw0jiocU1W1gT5YQD5bZxKl3annhlCuaS0ijFbDitBfamM63pcP7xFqYq\r\nuYnEMc3d6VUv+G+waUc4WV/U5sPQUY+XHHVv/IOKsawfV8aVCoPPVFq8rTWm\r\nRwDUO8qcapVGAQJ9CrpY7fi3pwm587VCadnzVECVGXPU/PY5JMhQ7l/z8t68\r\nVRb4RuzDb+Ki7cRsnC3RG+Kcjya21V9lNPxJL284LJ3FspsRyqf+wx4+JtnI\r\n8SyLJZU3HqY70t5cjrPJ0ZmfJ/oUrK5owUM=\r\n=PMwg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e9422b2e6573001fae4c8aeb7cc75741000e0034","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3c7b844c2.0","@material/base":"15.0.0-canary.3c7b844c2.0","@material/theme":"15.0.0-canary.3c7b844c2.0","@material/ripple":"15.0.0-canary.3c7b844c2.0","@material/typography":"15.0.0-canary.3c7b844c2.0","@material/feature-targeting":"15.0.0-canary.3c7b844c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.3c7b844c2.0_1654640455134_0.6529521284708317","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/form-field","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.df47894db.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe4149fe7ae3912ca2b16fd7d79eeff0e3e87829","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.df47894db.0.tgz","fileCount":33,"integrity":"sha512-XY6pjXoLN14Y9iizSxmro6DgURLs7mAZxy0qowQe5UjEPEPxuTdAXxb9vFgR642HS2ttqzUcNmaehdI8kjt7xA==","signatures":[{"sig":"MEQCIBa20NBYVBnhhrjrJEWYErGHGn09K1efOHTz73iUHKY5AiA/bRAU1BN19M0BNaagnArw/LUWiQLJqg2hukBv77pVEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip28VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBlQ/+LRKsDKh3lL0/53stHI5oFDF7Kkn68OQWwgERPrRAHVHBXoN3\r\nOJyaQtsjqw89lPt10nZLSyS585/v6QlJke7B567L34mjBVhDt0rXdrZO1+Ww\r\nWTyWBz/kkO308yJZ+fZ7Q76n4zENe18E+DUQPA/TjgSKAwc6w9Tc2Ksvf9Ld\r\nHBqtTcvcYvFzs3FY+ec6Oxa6trdQcwbWBfuWOo6J0PT6EYXEl5fAizt/mUtk\r\nfEw0c18obPrQDGFa0GGOrGsBcHbk+y9nBuXCQS4XDHAU6l25JgpYpzltbGsU\r\n0q3KNT/72CZJ06B8ficLemSiY3oJGJ/urD8+wpgtlRhHhxWGE5sdfKLbKyFH\r\n06pyHtJtAUFOG+IsYq13gW/S6ghyyR0XpoHfIFsKTPL6S6YrFTUNkcDsqnHA\r\n1EpLz530O/BO4tbZRndgmj12sAu4GTQPhGjluJqJIKhMp+gKltn5JDj1+Xut\r\n5Kvd5VmV32CGhp+0Yy8HR2iAbLnLj7Aprm8x4C8r29f3pAxllo9lgN7YJCAH\r\n2UuM9bkYnloyNd1sxTZGuemK7ALNIeYdBGrDk3gvVfQUAdrN71RrgasKyAvN\r\n+6VGjQsm/OUUoLA0Z3ppLcTXt3Chs6MXl0nlUNvLZkqA5Q/KH4L5twgnLNfZ\r\npVgouvSfSbtxf9OyGh5P1q1J5RAET9lNnyQ=\r\n=egoe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"42be62e51a7c150444c5b32b2d2acee03d09e6f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.df47894db.0","@material/base":"15.0.0-canary.df47894db.0","@material/theme":"15.0.0-canary.df47894db.0","@material/ripple":"15.0.0-canary.df47894db.0","@material/typography":"15.0.0-canary.df47894db.0","@material/feature-targeting":"15.0.0-canary.df47894db.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.df47894db.0_1655140117074_0.6947310814452181","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/form-field","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b18a873dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5de8de7a23b0db557e0d87ded7b3286cb58bc3d8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b18a873dc.0.tgz","fileCount":33,"integrity":"sha512-cePCx4YXqfpyGYBbXrvkmso1uXNbo87aAMpS2639fde+CJgpyBwyezdmKtyFkgMdCjFWQLT84dCG492CSb+ENw==","signatures":[{"sig":"MEQCIAN7gdkQHCsOc69byhcfXpMiqDGkyOHKnvMksaM7Wzz+AiAOuFDMM68s1M0ViwVslA5Sikup+5CMRTn8BJjCB2WUKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCreACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZTRAAg5dsj2dzxYaRRE8zeAylm6Fh6O430fgyudsC5LkOc0mLBfBr\r\nhcbfd3R6cAgGeAxCFp97T/dpLIH+9xY/I2LebfWkTivaiExvrjHJ1VBiBAg3\r\nSp38SIrdtpT3DnTIMEyEr25cy5uMXd/08odI9NkvdIxU1QlV4FBIIXTweeBm\r\nX+ALeJdQTsFFTZx+3FD9jN9wcRoRibqANe6XrAmHhLarxdxBzo0nvcW3pcBn\r\n7pULzi68ATiHfm16D3X891bSgTPel316Ur+G0uq9joqiUHqK7ItSZzY5sE5e\r\nKP+4P/yUeXcNM3p8Djb+e/enNZEOeMgj6LvbnSc/Bt1xRBIEpeIWvWUDqBaz\r\nF5yo+LtjhW+VKo4cEC8LzVIwPSg6VJseBDc9rv4jp8F+lOK0Gzsu/dA0YzVd\r\nzcb5agpT84gpFd3XhApkDpZK0YZ8Lug3z93R+vbNSoY5E7YfeGyLApIDcN2R\r\nNsLyyp9wFXmSAtc3bFBvdkg8EUH9XDChJLhovpDbaZVtB1Y05Cn8an0QFeT1\r\nnwneHcd0wXUqR+pVCqO8oo/uVqArVxVkJ4vHlMKeVl5cZQJevasaL9oz+zCB\r\npoHkShjL3UQoAq9WeVG7waddNK1mXefdW1NYF3+mFcj87ZkhaTmkWcnl+KR+\r\nQW61EVXPr2pXheGRSlil/w+2zTlWRqiR+nE=\r\n=7hRt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b35dadfc99a3788643d8762f8afda3f2d6e76d5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b18a873dc.0","@material/base":"15.0.0-canary.b18a873dc.0","@material/theme":"15.0.0-canary.b18a873dc.0","@material/ripple":"15.0.0-canary.b18a873dc.0","@material/typography":"15.0.0-canary.b18a873dc.0","@material/feature-targeting":"15.0.0-canary.b18a873dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b18a873dc.0_1655188190744_0.6120265269188185","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/form-field","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.ba9c29637.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc6af4cfdb786a74b8bcd56d149e1b450a65fff3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.ba9c29637.0.tgz","fileCount":33,"integrity":"sha512-kCJCSDDygoTTBb6L5UqKmEXN2+A5TqNPe1eN6ZVNhE9uSk/M3U5OlpBGXWEbFme2w4YDLI3eyC5OOwvyYoJ8JQ==","signatures":[{"sig":"MEUCID8fv6wZOQlwa3Ib/7qM53fcNXGS2uzhNZTu1Tw0jegOAiEAzV92RBLa/mkwkVIjPWcKJGthkcgLSzoS5TvrX9CvOuI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNoYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqh/hAAh2nCawlNtviXNPmOGnXuCOJHmgbFwPtDs6jBoaZpp7PVfBP9\r\noUgMB7nNE/jAICiW3Lm23bGOAF54hBZsRa2rqTYqroNRj0Rcdtlgd5LPWPac\r\nX3z8ykPfjoEk9SFkNMfaVrLLb2rcDXnAf6OvZYWsICs0rD7T9okjzieP/11u\r\ni36hGTbDq42BuMhlT1PF8tIx4E/dy/Mq5BoHqz5JrFDbcaB65WPwDhbgjBlz\r\nPfHmYWYCrwbuUMZ+FUcsiWCbtRF7UcauC3YGL1GdCnryQY/fTc157nX1gszT\r\nqlf9uPE4OZQqFDR4XVSl7GNwvUulM/7YBzJlWSVRgBa2h86tYIheoJb9jk4W\r\nzRje2rW9d/iaGV7fxVLIVj95EQzpnzB0N4gW9qBzAWZBG46a+QrWBOch2hND\r\nyuOz9y2fbcOYG67pEYiXJxy4azXp8DWgJihQ7ZC1UYgeUmTMJm8VTUp7nB22\r\nQuVHfFhfFYl3dtGRZ/nZkff5yJaOoZSMMxK2XR3jcSfYwCKMcUjz27Eqi+Fh\r\nFvATGVdJiw3nEuNoWTb+w0+MoEO1ag81JlDjsFgbePd+y1aOZoA1K8PZSiGz\r\nGAioFATgKuCUe47bl50ssni8p0amWFMfsMjiHmSbx0aWoII+OCm8Z4X0NG3A\r\nUCoTUU1hnaVY9NyHu7z6QYS9K8n2+G14k+A=\r\n=3lin\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2bf89a291dc4aecd82cf7a6432d198374cfea69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ba9c29637.0","@material/base":"15.0.0-canary.ba9c29637.0","@material/theme":"15.0.0-canary.ba9c29637.0","@material/ripple":"15.0.0-canary.ba9c29637.0","@material/typography":"15.0.0-canary.ba9c29637.0","@material/feature-targeting":"15.0.0-canary.ba9c29637.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.ba9c29637.0_1655233048585_0.7369723366030609","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/form-field","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.9bfd12f01.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5c027389c37bfaef08f5b328a0283b1a7d7c779","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.9bfd12f01.0.tgz","fileCount":33,"integrity":"sha512-gUm6GLA/8XDOW/mffjILpMj9069fv2uO8HHgf7c8F3QNgwG+3tA1CdBBQY4+FCQVAZgHqA4r3RUU5ZZJvHy2Yg==","signatures":[{"sig":"MEUCIE//3yiWtO9qWcQjkqMeJfd/CPowaFFm9fU0vgezP+RsAiEAgDmjbIssTNooISx8ubxG/Wuhbjk2yeV+fAUy9GnWcH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2v9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqKw/+Jfu+qlVyHwLrvzZFReRzqTXyRidFyPdJmZsp6MbuVbVbLuSZ\r\nYqMqrZmooasHHhruCMRC6gsTBXmOvrtfZK49ZsHzces4IMXKuOrvv3TTO4vx\r\n1mgxSTLrN4WQibWf5fi0lFwtS3OngnLD9R0GQMJrT7nGmzPT4lANydm6sHOg\r\ngaxrtljyktnLw8m0E79WyOHp+s7XyTVWyy1tAGPZNJVqcrnGb1K1SOOXkWu7\r\nQJgEsSvkyxZ7eoV2xXg0aBPv2Wij2HnHsRS4/6IuHEYia/F6Vhis1EPSoi06\r\napr+pCpkLsrzZS9KO5gthLByetoZmm1ZvLtT+wksBe+AQih8n0ESw6fRDlkl\r\nTOlEqlzYbxWyNa2XOIkF/aT9L9Jgj3VlYBBwX/OXO9bQt0T+1zU1Uc9T10qz\r\nska6cPqBh0IgHxB4zFlujmdb9mG2NMN3B9YdExbICP9cIj5jWfdgP0vIl2DU\r\nYHwLj0/0hhRMpZuAliGVlPXO9J+O2dXhMJaqy+SXr5OHTR+3CcZmaf/xt5ki\r\nwF8RBpWwANxeV70TfnKiHoc/5AO3td2RMvbJA2VK+4ICARprI9WGBauxl2P9\r\npNtJBaup19NuXcZJ4RHSxbUfH52e6hJIbpSA3WvoRsTUstUJwUUER2PxwjqW\r\nsPTDz4ifC+0Mu5LtesgHtpNB5WHStzVu/Tc=\r\n=ua54\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ba7b0d01530df70f39142820ab69babfc9cf5b8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9bfd12f01.0","@material/base":"15.0.0-canary.9bfd12f01.0","@material/theme":"15.0.0-canary.9bfd12f01.0","@material/ripple":"15.0.0-canary.9bfd12f01.0","@material/typography":"15.0.0-canary.9bfd12f01.0","@material/feature-targeting":"15.0.0-canary.9bfd12f01.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.9bfd12f01.0_1655925756911_0.8389658717304818","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/form-field","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.764de225d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef115658e911146090bc02d584164e73672257e1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.764de225d.0.tgz","fileCount":33,"integrity":"sha512-VmDQBRK6j/o6ffjfupEN1WAI4jiAAcYDm6SiaK+XMTiEgmtKI0i/q1R6Z++uEPeiumf8iAZHdCs2n6h2Xe59vg==","signatures":[{"sig":"MEUCIGeLD8BHAtAyz9u3dEjYzwgnksUzkG4UuTzJ8H1ZYgOoAiEA2yHuMHp60W/GjCuuPNmdu6HzqZhU3zHMPDLboDLMcJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH1dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrv8g/9G/5Kp0vYlnzfSjn83ruXWbG+mORzGuzdlaHTpBdK3lzL2Bi6\r\nMN5zLmLkizD+UW5J3Po8uXKsk46sweKFfARHDSxzA6AkpfTkfYnyWKc5aGMC\r\n8F09xlRK8hXShslwmfk5NDdVwgANNKXFdNBn9LRfAgKmidetZgTN8pt0XdDQ\r\nWVY6rXyP8fmm0USElySar1btiuvJze8KPQUzq5TUPiq3OA9f+ridq6Y/5K8i\r\nxc9TWTSO2ZnurFuO0PhINtyhEi96d28oe3NpwWpQGv5uW7JSUBqQzk1oYC8Q\r\njtpFCqfZDxHlUkRsnjQAN/rjw+qJDY1sdhBu1fBWkgcqHEJxm6gb8McubVmx\r\nyhLYAXw2ssRxCejLNdNdRZ3RAAtWm9WfMDvhIRy4VNT1swqsuTb11hkFnnbc\r\nqStwfc25yoIaEDGW7AQl5lZE+BYxpSgY7RY1ipzEyh3YQgQBsVw6W3J5M/yZ\r\n51L6xdXDNWHoGDdS7l/3CirQMC6RvlBUTN7NHgD9R815I7DnenOqVXTmnFTA\r\nokXw3YLk79ZaOv482TVZ6xaC7UjM+mbcq0GeGB0LdXjujzWTTV3dayDjEC14\r\nMM+2tYZseorpOlUjHWV2xfMYH5Iz/7wYO0+DkIxwmUoN+hd/C/+1CDdxPMTg\r\nJP0JwCqiSdJSe/maqBiKXaVnnoKs8E0gBlY=\r\n=UiRB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"25c0f0a7c9d8dcedfb35f64d0851fc4fb86b8534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.764de225d.0","@material/base":"15.0.0-canary.764de225d.0","@material/theme":"15.0.0-canary.764de225d.0","@material/ripple":"15.0.0-canary.764de225d.0","@material/typography":"15.0.0-canary.764de225d.0","@material/feature-targeting":"15.0.0-canary.764de225d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.764de225d.0_1656520028460_0.3432524353710005","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/form-field","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.31e517cea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3360a126e45aff0c311fa94ad3632f995f3825f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.31e517cea.0.tgz","fileCount":33,"integrity":"sha512-E7VB1bzx5bPSp3rMXdgvgnWYPA6jfoVqknKJakVODoq58YD0FasyGba9QDFuRDlWQJ0EMkTY4h46fYLS+0y/6A==","signatures":[{"sig":"MEUCIERpgmR+639UsBd82b6wWbX64/ia0ka8qjulw0MTNpT5AiEA/jwNNSE+ris51sKUpLlzhOw5m7aLcXvASvhisMcs35M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivzzMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnJA//YlfnR/IgPHTLFPw6bspKK1EadR9w4evedWP5KtrNpD/7ZQYU\r\nBTbbxxzOkW0vZeL4AQptBfYO9fuOVI3q94aI7Nf68oz87XHAcbcJFT/VDwG9\r\nRZlSJrhCc7BG55ZKORdUU31d8VQU71BC9XJ++Oc1YyIWXCPA7CrIuWWjXfXw\r\nesHr0ck512o2a4pfcN/Ytkqz00I8vauLOrbWlyp7XMVAIYC+FMUNxG46Byjv\r\nno18dYR/XKw3KCg+2H+3AIlnFFlCzaodKqcqWHFsgb5ROjkFaNIGD+n+ngFk\r\neIZLuvP/0FsRf66ExPXzgCN8++kMGNp1P+36A0TrabXaxHAHqJwCqBekio8B\r\nANCqD5DeZsHvt9oxgCc9qbZCbK+SrQJtoWfRIzFszeU9e9PRfBYl4f7czELL\r\nge9YYYJPFpuKEWi1yd0nCxG/sk3Rwz5hM1279dSoyiRtkPrqE56QvgiXVIL1\r\n7MZr51QdYNoMN0wcgFrQXMVMGfrMoXdk8GinGTu3BMVn1M84Mn8/HHP0OGZQ\r\nVVewkZVW29xQq0LR1nB1OnVxr4MPBiTVQfnsF9wy2XfewR/+ll5MdIWPNIeA\r\n1tdbaCEF9O5KlHutUVMbqk/FUXj2dZlMTrdBm3dTPJ5pGE2JsbETCbFvXLl+\r\nDzFqRahI6SKw+UAP34WGNxbPOUzuyAzjpbg=\r\n=vFH7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8af6d916fdf79ba9e33a883ad56f539f3decd5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.31e517cea.0","@material/base":"15.0.0-canary.31e517cea.0","@material/theme":"15.0.0-canary.31e517cea.0","@material/ripple":"15.0.0-canary.31e517cea.0","@material/typography":"15.0.0-canary.31e517cea.0","@material/feature-targeting":"15.0.0-canary.31e517cea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.31e517cea.0_1656700108283_0.9234494627275465","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/form-field","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.9ea4e8e9c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6ff7037cd47db2ea2220f59d2cd7496662846a9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":33,"integrity":"sha512-So9rr/Qhsmt/ow8zz2Gu4MMSH+hHAPyFyoGiS3D7Ow1BSKUO2QS+37V7QBJ+rz1IPSjPSgaXoTDndj75PmmlZA==","signatures":[{"sig":"MEUCIQClZAnVlMeCg+Jdw1A7TC77nZd9Nky1gzY2WZUN16FUZgIgZwMnXyTyWyMYTTVfmatfbfEgKSwHk2k0+Y3s0Uyb2ig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3tIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9nQ/+JhIbFzqnLzRXDTZwgGi7RFjXK+V4nvfO8zJGnnUvEZIk+RRL\r\njTUyaOlEWP5XFI/VMAM6Pc02dUWNfvho0QNS6raP3gm1PHCSdqNbkZ7YRSB1\r\n3rVPBnnS4uoV0mIwBdlF5uSUKG7Ip/tehuoy3jI7d9QWrzrnhZyUGeVaBzxO\r\n86rqlzmZ4B4xB0xj5Ew9KbT4VqcnBNW4A2Im9ng+528hvXvmx3xHZyQrvlPZ\r\njMxCrFYg5r0FC3OUNqZUOCtklhzuYEQmwPkhpYvyRkQEieSTyyOtEdAFwGgq\r\n7HQWCqFlDGsSnpBmnBtrt0LEcWQGceapYbcbHoE6mmhfvAKVs2KeT59oIyQZ\r\nPJQ3Mzus0P02bCeAWhdRt9UmwIWP4ch1f25UF1DNZypishkjgIIRfMIZ5A/p\r\nKElmLilSusVOewX4ZU0izmR8Ov7taAIDO9cbgxjp41pOWm35AR0XKIJ5UCPi\r\n6XaTQag3tTNrGyMCxAiMflsZ5yiwdm9x7AgJzLdoJdyIUB6ITw6E3ELd1Zmh\r\nBtOSAi4rR5NEehLpNNPyq+BRRs36rWI00i04EhRqxCzJdLbZaWxbf+wHajPD\r\na8Jeb7hTgCfHBS6LsOw7VUmdLybfuqy0EVOsRe8a6+htezNq7OyABDa4SfYp\r\nfly8NQixmaKXq/8Y8+JCcyDcGgBRtZAXCz4=\r\n=lwnD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7a2b791f6f1e376a53ceef81767514ec18174558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9ea4e8e9c.0","@material/base":"15.0.0-canary.9ea4e8e9c.0","@material/theme":"15.0.0-canary.9ea4e8e9c.0","@material/ripple":"15.0.0-canary.9ea4e8e9c.0","@material/typography":"15.0.0-canary.9ea4e8e9c.0","@material/feature-targeting":"15.0.0-canary.9ea4e8e9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.9ea4e8e9c.0_1656716104386_0.9777175348942442","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/form-field","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.cd5bafabb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dba1cf75f5f65a54890911803e807a7261ce9ba8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.cd5bafabb.0.tgz","fileCount":33,"integrity":"sha512-qk9osULgmpEJiqYGk9JQ4vVXFoRq+GXfaguR3Dm963ApyJAaWo4ZCEycrg4K6RG1cvnk/JbqBLZCUnmpPGDmuQ==","signatures":[{"sig":"MEQCIA4RJwFziTRghwdYrA1mz4zuwD65rkP0eVhsEFPihiyCAiB7tSxPdzPXnWuR6dUNg4mp9GZCD6V6mj7JlYD9kYpQUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcxVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzPQ/+MG3my6kEle+NjAsGf4h2vGVstYU4gnqKBl6zAmqmY+W/R0N/\r\n4gssfJHIfdgFV1zEd+kcXaNrkWuD2uv9TyYDwMGCzLD0xxVeIBJS2XF52bSx\r\nhjVZNYGFX0mUjZXYghG5dtKeI3tvyIUOePIW8N7peYe+mO+M5oB9u7Cgn2PI\r\naKoyiWILRopzEjP11eGQjDe6qSkufOBAzFcPFGl+kIezhGhbPcTDMVt0wlLK\r\noorVnyKdaWGAnwtbgsbtxcrpWcktRZf9S7cheEopPut/CsOvLei4Ar3HZBH9\r\nfbO3EmPmZXwyHtAW4kVYgyYIEhvR0+egYh8p4mkkLJxR02tE1lTLebt7lv8i\r\nVNL71Sl9vsfCHyby4nyQq1OXRYgDYUJPZvrDkeiNq5attHFWN2XPTHD8ifmV\r\nWvNdD84w61ZtWcJNQpumhz4ElE6MzmfPPvnwi5YW4mx8Jo3r/IXC8WIsDDPn\r\nWrVpxcu/aiW7yXUFgCqkAbhk28bj6JvujD/aDOC8SGGq4w8rGnDo9rRXF3u5\r\nHtNAIR09/w4/eiMC4qyGMuM27vysze9w2gUxLbo6c55N9brTfaH59kwAteIO\r\n+odH4O1r+WIDMzxfpiWCoHiEGbyLB4mECAdZYbC27K5v5GTvushC1yz9FnCF\r\nsFi5/e4T0Xy508/wBH1LZHjWmrkxedbo+4s=\r\n=uWaZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fceb62aaa361c04ae0a30158d529c7e6896b6f9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cd5bafabb.0","@material/base":"15.0.0-canary.cd5bafabb.0","@material/theme":"15.0.0-canary.cd5bafabb.0","@material/ripple":"15.0.0-canary.cd5bafabb.0","@material/typography":"15.0.0-canary.cd5bafabb.0","@material/feature-targeting":"15.0.0-canary.cd5bafabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.cd5bafabb.0_1657130068884_0.696042407516074","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/form-field","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a02fe49d3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2d410d2d7cc45a3fca7598920906760f4fc5343","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a02fe49d3.0.tgz","fileCount":33,"integrity":"sha512-vdyK1wxiCFbsZOfBORjwUdK+ptiIBqOTZhfDPwyZh1dc1VzkIfXDe9pffDZyyJl9pWdqm25CRl6oB0Hj/o7cHg==","signatures":[{"sig":"MEUCIQCB4+XqXZird7iu6FD6fidGbrvnktFw81g0aO3aDjBV/QIgbprjciOw4VXL04IW+ObLnikVNy+le/RlYl4P81N/xTM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdmdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvvA/9HR0TdWrfMLhZs5PKhpW721HpqqvFlaVvs9z+I4am8uxNyEK2\r\nxPRbuidhaDMbaAP7iWTznh8fypxPUaTBvEJJ7XX9flHrSwdbu8hgliWzU2Cf\r\nMiZe+6SMlMJhZrX20/9w05ItoKdussBhohD4gxM6vqzveQC3VQBRzXToomD2\r\nTspb3Lqs9xqKxr9HdWkFbLwWlGlGwkRYcyEUjrnCpyCGKibngnh8KlwQ67sy\r\n+2Om/m3rvc9k3ud54qTbZBv5HMogCJsWGbc/xtH4HlLx56afrsHiMqPfs2LV\r\nugxU0kYpR9LktSIwbTwHk4QGmEOk/Tyc59rK8n+0ni4WXfBfCJOHs9jZY22G\r\nvbG+vIbt9ufh4WMkWOc7NrHAwqt9r3GoNklq6VdikeAh18kXOfxIO0iKV1Bc\r\nozfp0FxJq127B5GT2PLRPLtZpUjrANfPO/rCpZ+0zZxhWXe6FaVvf1OCwzit\r\nb1roaPYBQ1th2iatRBM5Ewb8fHpmwrAjiC9AvNIyVKelY/d5HDICyG8mEKCY\r\nx5SIXu3pFKB0IstHCckLTs7R/t5IiLOeUuZja9Jhxxh2a78FJvcqK1uKeux5\r\nH7h+DZo3jLav+wjh7/XUceh1jkxpmbMBILZ0gVNn3kmjSh+1kCElHagCZigc\r\nErtxYibDdjdeMFjhBOSxSDZbhA8csn/GrBk=\r\n=p2f/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8304e794f430681d03b9d2d3193e635a072f2d8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a02fe49d3.0","@material/base":"15.0.0-canary.a02fe49d3.0","@material/theme":"15.0.0-canary.a02fe49d3.0","@material/ripple":"15.0.0-canary.a02fe49d3.0","@material/typography":"15.0.0-canary.a02fe49d3.0","@material/feature-targeting":"15.0.0-canary.a02fe49d3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a02fe49d3.0_1657133469507_0.0702840943205656","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/form-field","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.826a3d8be.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"185351d3ae1f8cbce71f4a38621524f774fb7153","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.826a3d8be.0.tgz","fileCount":33,"integrity":"sha512-8qzc0zu6tAngOnpdNuWpXb8hqb3zyhi6LGCJSFQMhhk17Tgfv0ALMO1Eg5oRTxEfhZIwgsXGagda0hrLixjr2Q==","signatures":[{"sig":"MEUCIARTUhw05HMiBa1FbRKhSo9oDVMfz4w8Qn7ORGExJUXOAiEA4iNpRDz6Ml6gm5jQoS1dByEqQP+sFemJF+1WJgPgjBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeL7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpnlg//fnozTrriGbpxjvgedH6qy4tNcqeRX3/M2N05/FDacuwsj8xw\r\nDmWpy6mectnb9rtxGF9SadP7nWLHBDRFKmfrWFmukrFSy8iFIw8OjG0MW5kG\r\nZzmPMrTuDwbAB+T5CLUuSwDg1Hp/m/T58EPepWCy3oNT6uIKi9VTo5q9n/hx\r\nJ0a5B/S+dOg4AlFCjlhzWbuJaC75iaVLVivD7e3N0crQSKc/3GkigHEMXQic\r\ndu6WY5vUarSYZOVeVJkfO7P0x6hrprDfaIKgI/qPFrtCoCQtThCwV6WzGHTJ\r\njVAUlLkKmlgL9cYXborKt1SyUmTtMxul+bxiEtA3efnuCDL6bhDHylZnIFuk\r\nfZirMRXfdllCHpOgFsVGXGxKtJE3m3RE99xQyhURAQG2ow3p9PvSdwQRZ2/5\r\nMKEzXovnCgPWizacAzvwY2VegSjmyCYi+JA0GZMBi0/PKJiQsSOk6unCrlkL\r\nm+bbp7hWy15/UXJeJZ+tynF5lFvEK+HX2XBzaboqNOwT1lhkqx0xJrFRw+oP\r\nAR61RjYV4J9q8neuxawBNzjOSWHG9MmFEVHhHV9r04QsABqScwDkNLP//94A\r\nJu+nw1uJnq9c9e8FIv8ccAGN1/cPRgZ+ZCJJeq7p08+KdHccYhlRZVFjsxw4\r\nZ0TQ5GEQGtP2vEVhVWrSXHDkG0ZFMnQwTmc=\r\n=1NNB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f54c723431e97d10fc1886f271ed251cb10209ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.826a3d8be.0","@material/base":"15.0.0-canary.826a3d8be.0","@material/theme":"15.0.0-canary.826a3d8be.0","@material/ripple":"15.0.0-canary.826a3d8be.0","@material/typography":"15.0.0-canary.826a3d8be.0","@material/feature-targeting":"15.0.0-canary.826a3d8be.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.826a3d8be.0_1657135867267_0.009765587966349187","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/form-field","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.ef276aa93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf42fbcf98ca1c20d454778b34c4b6de81ee8179","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.ef276aa93.0.tgz","fileCount":33,"integrity":"sha512-eCx3hObwmCZg9tbYJPFSxbzFAn28UeAraflDbjV9BU6jbCodyydMWTcuxTqY5HHX71BhGw/6xHPDYMjWtKENKg==","signatures":[{"sig":"MEYCIQCnEOlJcK98dLLnpJ0ItWs1JGsg7LVPRmn+mN+oX7WmKQIhAOj2PQwHA2f7qntMP1YoQeOTyMqLKQv/O5Ec/mfON0v6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxG0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrp0A/+J7V5UlTYt8bA3C6adz45dSZcd8ZVcKYXF7BtwYWP6pWiQO3H\r\nTlRI5/UV6N0M8eumyRDjvb3OVOhjWVHMv7Bu1sufXaovhGvRSeSR/P3FJ9G0\r\nPm1Drb41HPTe8JbTBMxx4Jn42EngKO9opeOFP9271AKWoi6x3WvHCwpL4G85\r\nUR83yiFxbQsIjP9ky/Bgzx74dRMKEj4QbUVfJqdIlyB6plx6fajan5kEG8kq\r\n4oqtjv7ML3GyOtOj3MBC1pYxTZ5M6Y33sdiaQXOZIJn1nYRxJOTLjiM7KcUu\r\nShblYszvU6FfjXbvnet4avUyhOT51M2CFeKXspPLshLDcEZG18EBbMV6mMUp\r\nUu3KUkGbR9cbwUbn79URMhpENGtJ41hS6rmq5zx+QIV68rhk6hD9g4hJxYtM\r\nssCjTUCYksfQZ/r1Wg4X0zXXMFREmOcfOSYjKhzyWP49WAlxydZdYZ0eeGQO\r\nE4sjE1l7NLgsobm4ef3Mk8inRd5HFNCQrX5GBY3arxIFxPx19b/l6xM3lhQr\r\nc1dy66HYVwzxl+EXQutWFDbiQ8AEt3t1B3/GjIvsKKLGcWiBh0BbChaFmC+z\r\nVpkUNoa88jPAKpwJwSOQvQLIXHEG4yJv6MGFpDbZHRbB0wIiA8iVamMUDa0Q\r\nky8USgRO/G+npzWMzqOdHgz/SQGw1YVga0Y=\r\n=8jSq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"502fb9536e29ea5887a9fac4aaf0c9dc2c732e61","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ef276aa93.0","@material/base":"15.0.0-canary.ef276aa93.0","@material/theme":"15.0.0-canary.ef276aa93.0","@material/ripple":"15.0.0-canary.ef276aa93.0","@material/typography":"15.0.0-canary.ef276aa93.0","@material/feature-targeting":"15.0.0-canary.ef276aa93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.ef276aa93.0_1657213363882_0.12135203596367483","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/form-field","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.59cf61d6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ab84783d99b27bdba223832bf3d150865beabda","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.59cf61d6b.0.tgz","fileCount":33,"integrity":"sha512-krkTK7cZwe4U7iOAezhSR6bx4TMKkN+cSNDc8TGJEyosVhGLhmRoxbgEANm2rwXMUMbmlWp1lZsAnFZsAKrKwA==","signatures":[{"sig":"MEUCIDUR8oDV8kgLK9d2MXxv5+pUwGtB8aQe1As9L1ASkOPYAiEA/jm7Y51klkM3QfeofJaj7uXhixrDg7aq8soT4YsD77Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxhxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+bg//QBt+GIFiBFQ04Lcr3oeubS7NqleAnoL71/1r+Tm66HZoMaAi\r\ntv5KKo8V+axa3hlBO4UfK6DwJGVMZsUTumOD2ARIt52SzJS8Z/uZf3BY7xcl\r\n7/Nc2jhqsff3UBfRNJIbKPHExxBBmHxpkpBOYPBl0xIQfuPfJsMbfYpPBXO2\r\nKz53i4jShETt96FA4HAjPFDC4R9ubHX0i46eO4Mwdez7chTJu7YnckPLNFNj\r\nng295vA8BgbgVr8CFl/Pb2Ho7hGJWshMGbe5zpnH+BS+mCx3CWZxioh20Wn6\r\nps6P1fGwvdI4S0y44rfOgZzkytGty1pUHs1Dr4ksz3QFNx2GjC6lqjjAquie\r\nzmC85k847shOj6fW09x0KMpJtK0B7EmDr9W8OG8XDkeY/jMd2T0Fvm6szzRK\r\niaMMh4b7dGGQOPZRxdd7/kP8JkvLfoKu7LN44zEGbnY/CKYxo/VDvKgstRD1\r\nbetpG5vnY/dQORHB46CvhL71O0xGaHY61oQnFJhOs/CNmQ3aWoebXymE/UmK\r\ngT+lLhwSBHLCwJp5oBiWf6Af4XY7ZuZ6UzSq6KLZxMcx205uWPGc9RcQoduc\r\nTNs20Qs0CyM1ikvC0R6QHeTjSPMtS/wc7ix2ZknxEwvD3aEc+4zQ+EBj4jvM\r\nCI9X0jWK+qcStY7ypH1HU5GzbDvrYN9b5Ms=\r\n=MrSh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2f27bf33b194929683b4faa9f388325b07b408b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.59cf61d6b.0","@material/base":"15.0.0-canary.59cf61d6b.0","@material/theme":"15.0.0-canary.59cf61d6b.0","@material/ripple":"15.0.0-canary.59cf61d6b.0","@material/typography":"15.0.0-canary.59cf61d6b.0","@material/feature-targeting":"15.0.0-canary.59cf61d6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.59cf61d6b.0_1657215089464_0.5183818394438326","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/form-field","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.8647092f7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"492aefa6220dccf9a5f07e8a32b073a3ce51de7d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.8647092f7.0.tgz","fileCount":33,"integrity":"sha512-GY0dre14Tuz+PZPLviCRUMoxE1aFmXDa/9RqLTOgRcV/JbwfggM2JHJdnuIxE48NPFm4fIKsPL2GiP+/ohHRjA==","signatures":[{"sig":"MEUCIFZuDRvq8Nu7HLA3P7mzaZtZG0MvrChNoHwXw4bIVzqTAiEApD6GnkycK5VfKJQEr26+4brCxoUAmsjxahkvDogg3a8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0RTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmps4w/+Nq9otx7y16AfKYUBRI1uQUDMc2iwVvd4T0cyFnqmoRRCnt+Y\r\nkjxF7tqPrjhEdtWru8mzccnJ1N47L6UqX3hGm3LjxEDVzPGRldGBqvGjfNuI\r\nmKxrFkVAWzcj4xBfKgA+NpZNaRlChgPbCf1qOCdqL+BnpFhbk6kPuoOwlZwh\r\nCChrQCdu2d7D8nsLqDnqCv0bl6ge8dbVipEc6035mb0koGWfSEn8G5Tt98nk\r\neNM0HdniB3r6zc+gwuIHQg/9cGeftLqKsBv4rXPeSmZ+uA72t/VxxwPV+eoA\r\nf7npOJNINvWoy1WY61RBWTfEe20y05nY2cxZHkxyZKpYuq/8n+jv3i/6ndzN\r\nuqT/F/dMaAbW0VIqsMRVTAxB7Y3EE/qYXNGLgEH6XjbCcQdY1P/FeZCcKK0j\r\nvBPT1euSz25yQ2rvewamTCx+qz4IYRYSbQBo2FPRWmwze/R1HLOSqdDOr/KE\r\nppL10XUz0MDSuEIwyaLFujvfXUeIbGE6mJDz6bSdnv/j5f/jx9E4dZpi4i/S\r\n8LZGYAjEUfkItbLE/NUA8nseOQbgpT2qeEgJfBwcZc2oEDcgwQGiyPZ8IK5Z\r\n0FyLysK6dE25fAmdxzMvNtSAw9327QnG1a1JB86k1rrICaJMDNPSIMqJZ3Ln\r\ngpYkTholIH+ZH8fWGk/mnX2TEPl51cBts50=\r\n=cIRO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1edf72197ddaf5b6318f71205888f8ae695e9b29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8647092f7.0","@material/base":"15.0.0-canary.8647092f7.0","@material/theme":"15.0.0-canary.8647092f7.0","@material/ripple":"15.0.0-canary.8647092f7.0","@material/typography":"15.0.0-canary.8647092f7.0","@material/feature-targeting":"15.0.0-canary.8647092f7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.8647092f7.0_1657226322934_0.7137972157254595","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/form-field","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.02ecd4d85.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf47162519ad80967107a781579c8f082e8c5c86","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.02ecd4d85.0.tgz","fileCount":33,"integrity":"sha512-mzy9g+WuaSUI+psLlh/0fNuC3zMSQjjU5F16ygOjelxi0yyjLz1nfkQrSeXHSEG+OQw2esvQoqvb/cLiR3Qx1A==","signatures":[{"sig":"MEUCIBydTgiStn33G88y/m7WUcovSiSF2L5BjOTzI02Q+kY5AiEAlTwSl/d9hpzbUSmshyKlV1oZdyCmZo6s9qVdBPs7i5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFI5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrElw/8CrT30XcuPVRgdsAa7Smh4mkdIu+F8QIxNuss8jjr/aBShHRd\r\nQO8g1/o4US6MRG1lG3/4/afNisnPG+Lgg5sCTgyGLy9K1cSNYwHmlhkPIFdL\r\nwzZ2iWZptDe7JuivWdhuU+5Vaf6+S5R9WxX8cVTMb8gOgdhPPQVZW69/zh3z\r\nWWWvWfUBxzvAiI8eEMyRrSUcV3btLtPZefTFBj/XSTI5FMAHTpzTdwZ32QRT\r\nTStLB1EUfvb/or6BNBp24pmalnMHU1sliNHrBJM3Sc/iEOQiJ3lRFpEppZL/\r\nqyuYCScCEPNLoo2FLdAFqJ/QBVM8O/LL5FlZVJsWjF+qKBws/oVaC42aZnDo\r\nMtLQQomstxPcgq5P7FTAqn0M0FPXciy+jLA3+Bg3TzjdJPK1gzDvDuAcUTjg\r\nC6Jch2A15NUlRZkVB0a8DWADyxA1XUaxYVAm6H983x5G/N7059axwMcBNnOQ\r\naMBQEszqTlZ7QAjQ1qHmOm4ZR+OJi1ogy6xFqYsMlbeGDKxMpQGfgqX90mrv\r\n1S3idbngpUYLWAucKrurF4dnGf0St5mLpH8rb9qOja+rew5RugTKAkysKvhj\r\n4NK/P56oOCFT2uslBQhRyfeMgMsXOXm5DQncmXtghDHTVgC8QQM/Tilj1IJI\r\nxivcBYvHhB9cvA1jfCNNvbW2dhlJDSOUR0M=\r\n=2KOZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e9bd9b1837b6df66731c0fc9da61877874518d2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.02ecd4d85.0","@material/base":"15.0.0-canary.02ecd4d85.0","@material/theme":"15.0.0-canary.02ecd4d85.0","@material/ripple":"15.0.0-canary.02ecd4d85.0","@material/typography":"15.0.0-canary.02ecd4d85.0","@material/feature-targeting":"15.0.0-canary.02ecd4d85.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.02ecd4d85.0_1657557560815_0.9102797182284921","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/form-field","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.63d3a146e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb5427bd90b6586ff26530116f8d2820099cbfac","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.63d3a146e.0.tgz","fileCount":33,"integrity":"sha512-lkAloJ1vbylirN3cSEy5GgBeoqxfJ1fgSdTklLufhlTGz7T82Cn5zp7za/seY94i8gApi14bB4R489UJWSBFyA==","signatures":[{"sig":"MEUCICuryKcVcU8A4imwMk/w+EvN1gpRZ8tcpZ89b33JC1EOAiEAq+y0Q+Rtfs0O0rydEGGUUTsjvDbOwISKs9+evpghiV8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizVzwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+jQ/+I3D78qhHLkg58Mq2iFJrzF4s7le4LnptmtGaZ5I2339JJxsM\r\ney69tNDAuDWJdZc29TQ85ub6dUpiryJsk2SrOrFVeNFxhvCHYWR7PlbX01eS\r\nDpU00/2getqGv+ZnoQ4r+PBVDBVewAjMY+PcUa37CAV4A+xRxkZ2lxXkHfxY\r\n0UbVzD66gfnuBxSfGZrCY1vf6d0T4KBmHd0KWDNNPoJa6OkeFUv5dS4zMMb2\r\nwh+YK9MrDmG5rgIZsi5vel+6fP7+YI6XDsBaZPaeAxKwFFUqf/71XZNc042X\r\niOR1xndpRkF0QrQhubY0qz7k6MPCAVmn4e86NMrVjs/RZ02oWe7D6G9RaAW3\r\n9qBrlOzEHSOqQRBYoCj9Vx4kMnywyKB1IUYp7iRzK1lDHFGRGOFg5bJ4MC1D\r\nVYBbz9VCgIVubJs9o3AdwRrEHO4Xhj9b4lGY5l/mb+vahOUkJUVDPjJQluuD\r\nrombIbSIVuZIWGckqGtZxAb2sk+c0FfqZgN6zsFrDIdvG1whlo/UXx1ciQcK\r\ngKAQhkRRhJDOe7scRjgPfV3Rk+UX/M080/YzFtg0AgvAXSg9NhpRryrckgm0\r\nzlRbVYpDzAOCU6o+ezcVOsMAS7ATs5BWSIO2b2xwmoi8Gx/501UzoFfluSRi\r\no6ZvqjSpyJonkfQfciGV/bjZ29jHsq/a/Ng=\r\n=WP5X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"593f32d351d8703bd0422f65b3651e55f97fd31d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.63d3a146e.0","@material/base":"15.0.0-canary.63d3a146e.0","@material/theme":"15.0.0-canary.63d3a146e.0","@material/ripple":"15.0.0-canary.63d3a146e.0","@material/typography":"15.0.0-canary.63d3a146e.0","@material/feature-targeting":"15.0.0-canary.63d3a146e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.63d3a146e.0_1657625839983_0.438961681395297","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/form-field","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.88db01990.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"833dd3bd6a2ef61ff1593f9a0846ac3b93017520","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.88db01990.0.tgz","fileCount":33,"integrity":"sha512-MQlq7FVY92T+DwPMIPrud3ldNskWr87ACE+20YQgcbFO5+opwEqihLReO0dZtUIwUZvxaxJIm7h58XgF7f2s1Q==","signatures":[{"sig":"MEQCIGCZ7GrCzmHF+B3tCgWQaSVHE2d8aLPRbvNq4gx3WlajAiBOMFS7fdad4mu1hYuf73zLcTvkPTeSTcL9dq2W+PacfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV2YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrESg//cDdgxfuhjtKA6oximKnK7kZMtUYMoz1i3338YSO6FmcNT6kt\r\n9bQUHEPf0Q4kpEheX45Tq8LAx4wLGhklTWNHrhoi0sX+5cib6zFJia4shMD5\r\nguxzcUbmUhgSDVFk0OsObbmFHtBlynkjnKqgK5XfS2Fyz8uJSIn2iJTfThXL\r\napO8FdHv7Xfe5ugpR+P9wLirtMscQIZ71XZkZXOrTa645FXcoFvthJKY767b\r\nNjJl2uxhMM5nIYclBxhKDYyhZ0pHYn59jSH5vNDOwLzvEz9kd9sf6TcG4bGA\r\niKf957P8+Pu9ly8qDVobpbrXmCkI404dq63hoFJ/BJDRQ1ktDU3Rk8kUue/5\r\nOAEQ7HH7Q3laudhZg7N4QDQpdoOIIjueT9mP7E337VQcsAY/lTRawuuG1wcg\r\nXO57i/XqMgseyDKmNt0hqF6pTCIs6ny9mJDHUlmitg8Vr1KD7XIV4jsXCV6t\r\nzYQlO1nB/wsgxOlT/+pH6XByyF+tNY/D/ZnIAdZHfVQNECUAIif9tf68yfuy\r\n7qh/aa0zPelBdK6JONaNwnambbjOeoHaxUY99B8EFJB5Y/ats4NNu2MlGNHJ\r\n0+xyinPcP5kS/++jZlr4OxuTFSwVhi2HmY10LNNZYS40PTDjHoelKhMADkDe\r\nXVD2sB53OogMglK5fVbS8Xwnc7XID/cxcJA=\r\n=E7YS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a2570f15e2572775da6e1894e5310c107a703ea4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.88db01990.0","@material/base":"15.0.0-canary.88db01990.0","@material/theme":"15.0.0-canary.88db01990.0","@material/ripple":"15.0.0-canary.88db01990.0","@material/typography":"15.0.0-canary.88db01990.0","@material/feature-targeting":"15.0.0-canary.88db01990.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.88db01990.0_1657626007966_0.7114277755989127","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/form-field","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.6432d8fd7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15107f870e236f1dbbc7708a6fd76a062bede473","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.6432d8fd7.0.tgz","fileCount":33,"integrity":"sha512-saRXLn25TfScxzcWtf8h/f3YmrlrmPgeAR4a3YUr9K6fiOb5A8vRhC/D67B/ovaoQspujQpm1H0RSkh3z4p7PQ==","signatures":[{"sig":"MEUCIF8fLVG5vH8qlRX97lu1AIazfFtMcqQE62G4dHaaT0vJAiEAn474WK1LkOm+uPlCoCIXI37TnjDjHOA2qGvlRZ/F3gw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8W+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+Qg/+OnI/HhLBTjiZlhp9ttcHQz0VFNjOhaYy74eHmyO7b9SxwskG\r\nnPXqw7HFk+59FeC5KnntY7veAz4d8zXdGQrl76iqAIUmNHjs0WX+XFi/ujQ8\r\nc6KZhFEhokphpbbKNH9/p+Uh2100ITqYhkIvwziFfo3XFDFCKiD+dheJkRKn\r\n44bO2jjHwNySwNK5VFTsDhwHQP7Ls7NPjL7YLaUDfXgNrrGodq+vVKsSNRgy\r\nQ03IUNdmT0i5OS/hJahm44paRRrDriBGSb21jb6cQzQm8nhfHHIrs4gbf4Dv\r\nuQGlMYKJJjz6vHDtJcwX5P2qf1wd4sZjC2l1wpntxAQqQuZ2BrC1jMICqcph\r\n6PJqsXQquOxbnoL2Fr7Tsn01bY+YjCniOUSvVmO2LO4Qzp1IMLi9s8rYAw4r\r\nBELLBztCxn4PPu02E1S0LTHMRMuR4orJpRcaToxdFboWvvBuXP6vekxEomyC\r\nq3F7yzjhtyP2ykYlgY9TV/aS/MIRCSLANZYd35eKTDJddnhlZ3S0qRSrgqhL\r\n0VNXj8MMFYFSc4NhyMtEBYHQRUWwQGU0/1sASjJbAuQgAeHbpDhHru5BKoV4\r\n6zmujwYL0HJ6ofp887r0lEM3IAnTXOiZsdLfdAOtbwkPjYyLUcqxrT0iHVBO\r\nPzwpDsc5amyqtgQaP0XTcxKb/mYb/ffEYDU=\r\n=8owF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"307aa53d6ea873bb978456b538f97f9922496798","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6432d8fd7.0","@material/base":"15.0.0-canary.6432d8fd7.0","@material/theme":"15.0.0-canary.6432d8fd7.0","@material/ripple":"15.0.0-canary.6432d8fd7.0","@material/typography":"15.0.0-canary.6432d8fd7.0","@material/feature-targeting":"15.0.0-canary.6432d8fd7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.6432d8fd7.0_1657783741911_0.048390379049216836","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/form-field","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.085f9b25c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6360fafe754eb98212c3a0c82b9df70c5de6bbc3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.085f9b25c.0.tgz","fileCount":33,"integrity":"sha512-ySGnNsYGSOgl+rsY1HjlB017LPfuapBjXdUkBTqlukfpEx6Z1yoNObbqks+n6ImXaJprjSd+4bHgbllQ1IzAyw==","signatures":[{"sig":"MEQCIHK4wxnPzSARpuWvhSHnGuwQ+IwEW5dz8eySSIV7G3D+AiAxjmX2LyL5aKSvNxsh7TUtaOCU790uAoIaU57XQIpcUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EW2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq41w//fNZ5sIOLLivlhFlzHZA8QR9uJrDWXfiaEaZ+yekl71bxqj0f\r\nig8vxsDTk7BLymnjm6M13PNnRWaJj0TRxqKlBjuFHQENNnQbMXQyaGUcmc3g\r\n/K6TSwnOUaxh6L1cmJYmzy3/+Py4FCJbIYXHwL1f3cWFCvkLQv0hD06GJaLH\r\nl6MynxCyJdDWVbVmxKS7Dwlizloy05cxmnoRnZ/TwEF6tRIhzddDI+gneO97\r\n3D3sPoJTugY5ptAFRtaYMfOCYBT1mar1cvfxZ8WjkEv9+p54AjM/xvuuQmO8\r\nkqPZarCQRB+npuQGjKz/Q5Dzbvcz30qs+flVBlpoeHakaAXCKl3ealB6YSrb\r\njYfVVhyP026vxjFeEAX0VSMHu38DB3qRvmhYgRixmUGx8gHqk5YkDVayskcY\r\nxC43Zt2llaGxEvQigX7IviALEQRtbI+2R//iguGdZB1VrOBK770yu7eb8a7U\r\nhDYK0kAKyOxR3xMftfL05OG//gwHkEk71EBoUsVdvndtgi1VweKkd2fWm+9i\r\nmeWCaIc4x2Y+gdPT9Ga+XpT1l7wmKv+MxNkoK78BDV6aLjzDVzsFJkeEAeaS\r\nLCbJSs+UlKUvc/VH04I1p0GjggtywziMP+UpjVF1G8Bh63c+MVTQrovR0Rlg\r\nXQPd+p7hGVc/IomNtPL0fNn8VI3mJGds9gY=\r\n=LpzS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"766a8d5f5fc7e4e022835f16c6ecdab8d2ccf071","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.085f9b25c.0","@material/base":"15.0.0-canary.085f9b25c.0","@material/theme":"15.0.0-canary.085f9b25c.0","@material/ripple":"15.0.0-canary.085f9b25c.0","@material/typography":"15.0.0-canary.085f9b25c.0","@material/feature-targeting":"15.0.0-canary.085f9b25c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.085f9b25c.0_1657816502597_0.21997419822152664","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/form-field","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.39f9424b3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d64d25f519265ce709e1885083c77c2ff2d0b3f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.39f9424b3.0.tgz","fileCount":33,"integrity":"sha512-uCC5tmvatsdy+jcWytT/GxzUcQJ7y2KSJlSjSBiNbOry/Z2m2RAJ8vhwCHQGdx5ossass5ARcLlcYYIGtohGmg==","signatures":[{"sig":"MEUCIB9us2kED8QZbEVCksVyNcIuqgYCpodrD/14fc47T+hCAiEAnTnAT70953Pap4822b/MDU2oERWDX7GUL8jZOqcb2YY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EzRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCChAAnCO/Uviqihf4REmUepIKZMMQqPGnKaGHMS7Hxlw9T3jWiF5S\r\nArVT4Dx9jBr15q/LKywWuAaPa0zFo1+MgE1+CbRN7kv9JdkNpVx5bR1hstXU\r\nG0FuIC7z5dFnbYKx2+uXza/HKE8Bfdgx9PF+xyNfvfveeITlwNpKVbU1QZrp\r\nKNZRvNFcJBhh240pmoljoyygrVnPOhP1yanFIlg2/S2/b+oEFU527kptaYi6\r\nM7IXFkwsnCJq+m38ufUdQK08BZmnxuCVyp8SWLbHPIoFtGpXjLS6tYU6G+e7\r\nNUjsE6D21rAJzhznAZi/Gc8uSGRDnjgjNvB0BjYZXFq7d8KGcN7Mb11g/in6\r\nNASlvdflF01tNAz5TeFyFadDMFOs5956NmxIbPUY/78VlQAx41xON/dEAwxz\r\nOctDmXXltzSyR1hBaN//MxmXpexGKXWmyXFm5m9tISr5sjk18yp+XB2oVvRA\r\n9i2tXV6u/ZToDUNLbN0GlHGuOb5KQJl990D3bmMrbgjetVfR2nKPoZqdW50p\r\n1s0fdQOdog5hcRjkH2YFusDcCPmhfbRnLst1+hWFLLGSbKZI8XKTdCKoWPvP\r\nFd7XuYOY6uhP4XMCdOxTrDevxA5Tf+3C4+DeFKsxs1hyB+leIDVz7cKRHQ0w\r\nMufBeECT7wXxpxqHK3bsmOm/94cSfnXqW6o=\r\n=PK0o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"62e726843fd90c6139d8ade27db8da6ded6e1d77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.39f9424b3.0","@material/base":"15.0.0-canary.39f9424b3.0","@material/theme":"15.0.0-canary.39f9424b3.0","@material/ripple":"15.0.0-canary.39f9424b3.0","@material/typography":"15.0.0-canary.39f9424b3.0","@material/feature-targeting":"15.0.0-canary.39f9424b3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.39f9424b3.0_1657818321355_0.6000975155904549","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/form-field","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.ae9fce587.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c308ed07c9051d175408b41c7c4a942f31f1b94","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.ae9fce587.0.tgz","fileCount":33,"integrity":"sha512-67w30DvPfPdg51KbQF7+vPCST+ehNgayPhhMy0B7JZpoe1+Nk2eEfxWPpwrCbIbrxirKv0R5du3O6hZLM5np/A==","signatures":[{"sig":"MEUCIHboOgMk2NaYSLjKC9IToARqONrQ+5dbNGDdCz8q9IVbAiEAwjjGtja5e7fJZyr4Pu27e5Hga8dBSk6mCJTGbbffBhQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FuPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaDw/9HEYz9YufwaqbUkO74SscsDKVs6GZ8bBu6YCfDHGvrWEoBmY6\r\ngdANR2+/848aLXLDQ6rH6KmDNSS101t+BkSH+zlE2rOcUcGnHWl0DIt4b2gF\r\nUAL/WmP1+P9ga6f9Fimg3cXlBBqKV2/lkRb1dOzk52CxTl9/zKV5z4BMDwBc\r\nO9JkcgGkOXvKJsdk3rRBjHvSsf4NDpFMdq2Fh6+PVeV5YPKz76CbpcqdmZuP\r\nl+/pT83Ite2Bad0UM2ysDoJ3qjFI/lbfx0f3UteZqAmMsrocaZevVGUbvxVJ\r\nvwRTzx9MJMJE7qOAu1M8NOUOp70s91YHcvEUJHPNON0Y46uXb8KldBYQN953\r\n19U8rQwhJHenKhTtf4WhQVkIw2aY6jOqNrn0vok+4DUCR+BleRvGQjDcjMj/\r\noj8L4ETjZ95kI4zhUZbeNfzaI5kSYRG3XqV70d6LP+1L18uOTXs4Bkq8Hbsq\r\nLtMDcLjsGnGOveLm933+058fLSVvGrF5DCe4NbXS7vMYSOA16CSZeewWb0ph\r\nGQ8+90m37dhSiLtUF8LtrBpqIqrJr2+wHVAypMUbsS+u2egif4+OLnA2xB60\r\nhCd8bK/TgpaNT91dAgk9oo64S/LOz4ywCtAT9oo7SLZvu7+fohIbiLM1TA6E\r\nHmB8ZrpOGTKrPp9nOqnUq0fweF62R3X0muw=\r\n=nqHb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2d55d2ded8f3ebf66d72baffd67452a8de349b3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ae9fce587.0","@material/base":"15.0.0-canary.ae9fce587.0","@material/theme":"15.0.0-canary.ae9fce587.0","@material/ripple":"15.0.0-canary.ae9fce587.0","@material/typography":"15.0.0-canary.ae9fce587.0","@material/feature-targeting":"15.0.0-canary.ae9fce587.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.ae9fce587.0_1657822095751_0.8407602720696044","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/form-field","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.1ebddc343.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0ad660b4893ba39e236272ed29e58d5d373567b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.1ebddc343.0.tgz","fileCount":33,"integrity":"sha512-B4aoKtqSSsbHyOT1UFDoba2lcCi+dc97xQpIIXbcIYt2QfHnj0z/APASIgacKlPIPGfYbhQUbBh/aoa+ws3l5g==","signatures":[{"sig":"MEUCIHU/Z+wdRwNv+4RnxL6a7gHh4x5Ylxoj9N2v33DMUhxmAiEAxgdgJ1Ux1VaDHc+yLmGEoqcYxD6y6WEQTMrhopWTIpE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0SoZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqucg//fciVzsLSJb/eOpURp65wqD23ehNrEsuEJh0jx2pKH4px5sOF\r\ngxruK0q0dPNttPbk9CeM1FdBp5u1ZLibW4lQUDf/Ex8NTkFZfLyACJAfAiFz\r\nqh9x5TsXe04qgOjWrJu2eK/FikGJ2WMlm0MkGEPhOnfXPBuGtrYvJoeaF7M7\r\n1I1aIXsXWQaQRk9qkJTNeNKQPTKhkWkYjElZPLcRPzAJNxdA2lAkfr/C6pRo\r\nXkqWtM0zuIRjt2ewMqusJMtava9u4D/FSgnUfHJ1kkY8JZP3z+21M5j7/XJq\r\nVzZgjVZzff8Dl75Pqlzo9x9HFyB5x6Et0E8o2Q1LAX0T3ybRfXI0XTU/DEg7\r\nn5HmcUULuqGms0MNe9XdYVatb3Gu0qU50cEmcPkM5BVtugwoIx+I5q9zUDAf\r\nBvtJpYRQvq5FU38XdGwGjjgFwGEqA43rMbc8UimY3qkBipOvpQvex6AomI1Q\r\nC2jr+Nbpik1Pfk/B7EGe7WxwspFyMqvvrSoaGVdME9TxZ2rxf1cNXWXPDOAF\r\nccVLdinzAflECMIJ1+ckvdVCWTx+BeKaqkzqenIzEk55/MFZ7SuaE2y8trCe\r\nD+RFG2jQNTdPoCI1NJHOfaw5yajShf4cBDfQm3pahI8BP8sBQi8/M33OgEgv\r\nvvsmqQ3WBfDIAfyMuV0hGGXpALsslsyM0y0=\r\n=DdkG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2ec31cdb5e8e1a849368a3f352b213919bec43df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1ebddc343.0","@material/base":"15.0.0-canary.1ebddc343.0","@material/theme":"15.0.0-canary.1ebddc343.0","@material/ripple":"15.0.0-canary.1ebddc343.0","@material/typography":"15.0.0-canary.1ebddc343.0","@material/feature-targeting":"15.0.0-canary.1ebddc343.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.1ebddc343.0_1657874969021_0.5297936212538956","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/form-field","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.c5018840c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5be5dc6e7249d2396fb2e8615ac1f74202bba8f2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.c5018840c.0.tgz","fileCount":33,"integrity":"sha512-ytNdNcfqZRRJCojLLjQy/N0cot/6k9dKBWnHxeVPNUdnNOwLuYngS6dL5V3GFwa6K+kRGhesozlQ844AqgAQ7Q==","signatures":[{"sig":"MEQCICTBBouRPAd/tdp22ByFdgWk37VF2+x0+EofDu6VCAtnAiAvN68w9jpj5zaV/G/F6/Lk8KTGjFhmhEgmVHaMuVmCeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1Ss2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9CQ/+JAB2bh+dN2QWVP7RdDt5/SYvw0UNxg79Pb2etxKRHb41erg7\r\nlz6A9MrLNBuejr0ZjlC9YsUFSBMwA46vr8OthQH6QEZOAuet5fDVTAdGdh9N\r\nrcqy36E/0NxtgZ2HzeuPHMJ1M82mvUBTCKXxtJUjWB3o1lyajNmsVSdY5/ZA\r\n4umcr2vE9fc0QzyPeOqODDg/wWDWQtXlH0WWTFMHx3vOcQvas+ewRvIaej4D\r\nNDlRHhtPI6SPX4StmIO/IprswwTPDqyediYMsXZHrXb/QYbCb7qXL9qZK5mK\r\nsXVk243pc6dWCQgE22cnQGBVpYN7Kuxtuv30ng+5IadXyqeULfl0ZJq7xJri\r\nYoV0qqfunTN4XN5OLzEk4ubJKoioU6Hpg5jG7GCAqhFlaJ5pe4r8iUhMmprh\r\n8+evZuULTW8L7Q9w4dehF4QvkHnrh7LosHkTg15SVFJsnh4jE0YQq7tLKgYG\r\ns9hNuqpwk7ieVO+tz59ROviCsFOK7eC7EXL4+5v1WldvgB43YIpNtRB0HX0f\r\nhCVNqwsLJ96UZZ4S1km5e14BdR4sDyYesBsj18H0bAyc3f29U0N8kZ+3AE7K\r\niPnseVpveWXdVbqt0UlZtr8gCRmZMkAlysuWg2BzXhtw1QWpXmbPFqvavXm3\r\n1S0YaMIDqhqk8xKmTxtENAuThof00pwomeU=\r\n=vntu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c86de383c50b7d72b8c5cf908c5fdf3e6efa94c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c5018840c.0","@material/base":"15.0.0-canary.c5018840c.0","@material/theme":"15.0.0-canary.c5018840c.0","@material/ripple":"15.0.0-canary.c5018840c.0","@material/typography":"15.0.0-canary.c5018840c.0","@material/feature-targeting":"15.0.0-canary.c5018840c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.c5018840c.0_1658137397825_0.9335299772057035","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/form-field","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.551b40d18.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdd71937821e5579815a54c1e914b9b40e220219","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.551b40d18.0.tgz","fileCount":33,"integrity":"sha512-ZO+vJfWBwV6DBDXF9THpSB8Qr5V5imsBF88jXDtWAcE8tQwyVuyTlPdDrIcSUx/chVAyG5gbKGmNIVyN8fW8fA==","signatures":[{"sig":"MEUCIGdjBU2yWmP/khVy+aV4IOcVJsv1x2hA14+sI7xY1GK8AiEA6z9Qhh3qkT9X6OOrNJDL8LBjQiD47XPP2J2r4ygC1hg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S9lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8Kg//ULZaEKXDXZOqmgZ2H0RI/a15B3dyJUiNReCZuujM5RrbRbaJ\r\n9cxKwLiANOWcPQyWIAe03ENnJ90qVrAaZ9B2AxF/TuniXUml1pTINAlYm/w6\r\nAcm/K+TTbWiQ7LoFngUEndS6xPLEi3rVyc/aFFe1JwKPhTzOAvyYBNoDHUPW\r\ndSJWcpkIv+Sn39zQILcUkI1njkBEq8DY0SuxxFhereqyz8/GS9PvF6NKR3we\r\nFEpUQCXcCVTK0anX4mnRj9kp8OLxYz5rNa2scYarWLrkKUh9j55ST7v8rG/w\r\nvDn1Lbop70et6EhbRIlk+xwyakDyWObsfvggjQsaGgAcOdnUyDVi8aqKi1uZ\r\n/5y/+Q8ICASesTdSK4XDHWBbg4rfIJu5IR663qXKgcN9smVtpd6QX4qfr9WL\r\nMBtVLBjVyMxQQwXQWng3ZzPC5v38JOVOzb6KjOmJTKYeNCb/DJATxJkwG7g8\r\n0Cecb+PJ5lbTOtnxQTwWXKJbat6PKqc5Wpme36BuWCaII8M5mOH+SWjEzM6B\r\nDoxRA0GWdnPrYBDl11lM1Fy+fSjoCnL4xazmQi5tRWFvF4UUKoj6RZO1qvFA\r\n4nMmnJMIDx1JMt2GCwamwc9yj7ZdC1lLZcwH5+IHIuI/Ysrd6vAmOHr3vfnJ\r\naNWLwFGIVn7OLlDG7UmarRrYAY8ZoyADitU=\r\n=oWSK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3e9aa3499438031c9229cf2a18a1a3672620853c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.551b40d18.0","@material/base":"15.0.0-canary.551b40d18.0","@material/theme":"15.0.0-canary.551b40d18.0","@material/ripple":"15.0.0-canary.551b40d18.0","@material/typography":"15.0.0-canary.551b40d18.0","@material/feature-targeting":"15.0.0-canary.551b40d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.551b40d18.0_1658138469558_0.513910717577144","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/form-field","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.cf9f12371.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"882e4495f85b887f4388c7875282fe904cb6add8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.cf9f12371.0.tgz","fileCount":33,"integrity":"sha512-XCZe89rS+noKyhjNWgJn8Ng1G1ekyjplFT3NTdzcI9Qw85Cf+/TIEUrjseVf4I5O1kK9y5buce7EfPKJEMfOgg==","signatures":[{"sig":"MEUCIQDFqYnxdGqiO7aM88XObJ3oL+ocTwfLgEl4pnoQoLFuCAIgFpEb/Z4TCoEhigY8Hcg33PwZuQDj/BBB6yDjeLPrHRw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TBYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoABg//RlJp99llDPDQk5bLT6791JCYK9DSbkJZge592/Km2fjwZq8G\r\n5lnWkE+C65jeNDvy4lGFWPnaIgYI8ywHQzfpqBcMTzgNlKtdOdAW+4MF/vpF\r\n3xKQrdG5VFFkrlpv2eXDdr8JPYctlGOb8s9yh1anYTbumugDaXs+Ms3r1NDV\r\nlEsd3Cssg62J8GbJ/OhYXYCGht5E7QFOQr0TDgEZD6a+swel77GQEoIydqoG\r\nTJv3mB85cCF/v6NHHij/iLMCE5SOjmX3W+LXIEt9d1TiADzbtHIpsrV32PIO\r\nMHvRBPPP/0z8Y2r3k+R/u+aVevrx/fT+3XGd7kf8eQaQoGKpREf55Q1Ho/7b\r\nukrt1ZXI47Ao/SdZqcc58Sq1HYWAR5eGFt21c2Bg/IxEjRuI74+lmzxVhaYc\r\n69HbvAipaKpSVKESA/Esaq13jWnXfaZDk0HvYmKSn/VMMnU3hhdJoWshD4KN\r\nn27hzqKivjL/0geng+SV+rsqYH1ySFljw7G3kz1v7j0JM91+YQKuqrgjdwAU\r\nE6zrBdCX/FoppFdfIjs6QPzhb4QlG2lcga++2sVnm/jXN7kDInh76+U7IYFk\r\n04qT/EvLfbdxUjV4HKoTeGanVALFgwrUaiPawDYol29lOlnAKsUNO6Kgt7+n\r\nu/UGVBAx8ujgKLT6ln+mRKtdSeYVUJA4NEo=\r\n=6ThO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1817e344a80081e042f37248beeeb96228402878","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cf9f12371.0","@material/base":"15.0.0-canary.cf9f12371.0","@material/theme":"15.0.0-canary.cf9f12371.0","@material/ripple":"15.0.0-canary.cf9f12371.0","@material/typography":"15.0.0-canary.cf9f12371.0","@material/feature-targeting":"15.0.0-canary.cf9f12371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.cf9f12371.0_1658138711963_0.5190554914471928","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/form-field","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.2797ff8b6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f639780e93a2c7a22876a82a2809d20679fcd6e7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.2797ff8b6.0.tgz","fileCount":33,"integrity":"sha512-wUoFVOF+DCwbDxEqv+dwjFFU7acDB09snpGzbi81L+mSAyaL05ltO3B7v9vG0JLOkaO4+iMMU0W8LvgIzbDObg==","signatures":[{"sig":"MEUCIQC0MZx1MAmTyx7+Z/L9/ZTIKClEcPKN8S2CL1m7kd4oMgIgZ2ZhmJpHbDxarHoCm6ciJ9Nx+WFxBSkcgK3mdWzeiMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fmwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOcQ//adI/XZCAZg7WneGVwO+ZubFMXitIn8xYZCRRi6ij0HTqAk+d\r\nfkLdp39G/zlWbAmlvJ/PyvJ0f0QtmsGiBXBe081r70hg/gbN3ALkwVqiZ2Aj\r\nfquw7RrPfV757yiF6M6L9/7x/F8o6nzVogC2gqcw2dWTj4YCTEud5qMzd1aO\r\nq38b/Dk8Cmf5dDHFS2/W1NXn/vdtQvxYyqgEsbqQJoee5MJAED6sAYyDE0mJ\r\ng3TSsmktiLjJmJFTt7SvvSYaah9KLBlVH25Y2zNuPrfCYtYTRVv6vSTsXveV\r\naPEeulTWQ9o/wG1fchhhjqaWLdcoHc+E4VaX8eZG3kzYDRcmS6d0a5K+NpWp\r\n9s/DZ6rFWbv9s7AbiLH4m80jfzhetGQ2f6pk4pt/GK0Jf9eK9HYNed6wk3ga\r\nkB45dYI1YrMdLiLrqmZOfF/UH0ELQsntbCz7oykae5xPtqqk8Wa8PT50llHy\r\nxxyaDGOETX+fjbpGAPCElLEHTLG+9RkbY55XKmw1cpg+wjPa5sF3LuwaIagz\r\nDV+A4NOKeH0QtDpA9QUpFUkX05Z4wZCrI26Sy6/Pi0cHPWoGNe2A1Fmu66Q5\r\nsYEwPwU3tTK39WVNOnzhOWWUqQrTTTJKwh3Hvs4fL/NBCYeNKp3Hyf+UhyN1\r\nkPfVJZf6VVh83UKuSIPdrgx8hrz2RoWQroY=\r\n=5kN7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2c89951e5e0cfca0b1dc61a4f30259b33cee139b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2797ff8b6.0","@material/base":"15.0.0-canary.2797ff8b6.0","@material/theme":"15.0.0-canary.2797ff8b6.0","@material/ripple":"15.0.0-canary.2797ff8b6.0","@material/typography":"15.0.0-canary.2797ff8b6.0","@material/feature-targeting":"15.0.0-canary.2797ff8b6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.2797ff8b6.0_1658190256327_0.026148805100305594","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/form-field","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.110fafa17.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a576c9b49c25b83beef6a2411eca3e5edd5bc3e1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.110fafa17.0.tgz","fileCount":33,"integrity":"sha512-AZPtdPWQ3gVS7DmVN1iVEukewAUKKbryk0rMxe6doWdRRNioJMKOCsOWmTvCaA8rKmcdC3OKa1HJSqiE7ohoRA==","signatures":[{"sig":"MEQCIDygGmPe14nVRYRQh3g3Zw925bQaMqtTZu6VLk8NV68MAiBpqibm4lVVOZ5h7eV7KS/lxnPsaeL4qmoffaM7+e5rzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17LpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqJA//RXNuLbdUIFPaJ1CPBrLBQIB8PmRuuWVGcSeaeEDobupWDziH\r\n1I52PYMZMQpgOzjzc58lbHgHbdmlEi8pmvfOLzoWresHSTW3VyGhmgX5MTq8\r\nDvNh2vNPuYgysXdqgen+tDp0QRd0miD7zMP3m9OH0twyb5evZ3hKAu/hb5eP\r\n5m73vRByxG1H2ElHO+vo+DeEsOEFK9ikPik/wqOqIzXrGRthUGVcyQ6/KjYn\r\nNWSss/WbvVpBIZrjQ0RUypIX7lY4P7xFKYq52lzGMflW3Bs2iMnJB8mXYoQn\r\nILjsYlpE2KbIkC6OnccsomHv7WrxHIbwx7VsSt1Cm52xBw8GE4Nk1E0vYnIy\r\nxGvCwX0lVlAcCnPHg4U1ilutdcCKiRaYIevfAkIAhn7SzEQHnZ/TwcH0Kci8\r\nseY0GtHo4nCDDG12Qtmju/+1ZYPoXCIKQHWJXKYF38klbz/sbYpU5Py/YqEj\r\nDNQrGygBX2S611sBT+tTdtiFiwUsN66yyQ9gSzeqlail7TzpRtI0kNX0PxOp\r\n/K6k9GLQOZZcOaIW90zHJdkDwelqSy2LH8+CsOKHjZafF8Xk4FTcew/YpQMH\r\nP5PstXSN9POV53SkulHWkXn1gUuibOt7hJL/z8PSaaXHT1/MpmzoypEqY0nQ\r\nHiAvj0WQxJchUx/+065sTziQjsb8anrIaCo=\r\n=BIz/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ccf0ed3e8eaadf1526fd10979e8c00e79b228f5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.110fafa17.0","@material/base":"15.0.0-canary.110fafa17.0","@material/theme":"15.0.0-canary.110fafa17.0","@material/ripple":"15.0.0-canary.110fafa17.0","@material/typography":"15.0.0-canary.110fafa17.0","@material/feature-targeting":"15.0.0-canary.110fafa17.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.110fafa17.0_1658303208887_0.1393583025293983","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/form-field","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.386ef1d2f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ca5a8b5e7062c16918e20c7fc0855f41ccfa1aa","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.386ef1d2f.0.tgz","fileCount":33,"integrity":"sha512-B0laM+XSzTCk15iEBm32pCSNtB77LFv48sTOy+qwLxX4XjUT1+GlUtNhcMR1T1+UsE5uI8WwSoOUgFQdlCjBog==","signatures":[{"sig":"MEUCIQCKP4a2NpoiUsUgGr/usCrTlaDS8KI9RUHqkoj5hnl/vQIgUBiVpZbFYRN2sZ+1A2ftVf+xehXnSL0+tUH6tjCJeTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EdKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/9A/9EaKfuiE16CKL5FBIdDwfhpMz7bW0IR/UdvO3l2dMY8qYaSad\r\nJQ7AcvRO0iTjOoOBRVPo+6JJMyxDuL4KNpnvXiCECsijjR7NUW/hy+wXoVY5\r\n7EJMCMW8jdPLxM8zVw60iAYu63cqrmL+ACX09rnhAnlUs4494ssq+R2ekWXZ\r\nQ3IIpqq7KIvELJQgvXczoNxuKwJ5qUpGsa6JCT8HYeKGUMzygS5L80tQqEE7\r\nwLYAuqPBPmFOIwjOmWZGtI3Pd9UaRmgQKOs9jeI/GjO7zbJ3p3p5LkbRdTrF\r\nUHq4SU1Y9Ld2vTGeEv97hYvmzLpXl/2zJahIrpI2sA0fnlwqGsrhOSk20YhQ\r\n5pVaUYtsIm3bp4zrg5bDuDI2V/9GiqhVAagFvwQwnO4tky6kvYq8DiZxrOY4\r\noTvqO0BTotaV0Tqq81zulGcDPCXAmxUfpkB9XsUuS0SN8FyM9i7We7NHK9f5\r\nGy1b7Q37AsnC5qXjGyktZuF2AA4wrRt6XA5Veul4SUeWo1O+x/fVMFmu58jK\r\nUxnH5SeeMVoDb8vVdlhLuaAOrtNNWLV5MuguGEUge6Ylz0lp7Z9i20MPwB/B\r\nHFAVwS/pfHfw+zqJOte8k1zBDcGcB8Z6yjDqCbAJP2YAeotSOAfT9sPlp+T9\r\n+0PXqcglbSX66/noJw6Nls7M/DTB3OWLp+U=\r\n=M0gH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f81dc27b99348c90268023c46429639f145ca534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.386ef1d2f.0","@material/base":"15.0.0-canary.386ef1d2f.0","@material/theme":"15.0.0-canary.386ef1d2f.0","@material/ripple":"15.0.0-canary.386ef1d2f.0","@material/typography":"15.0.0-canary.386ef1d2f.0","@material/feature-targeting":"15.0.0-canary.386ef1d2f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.386ef1d2f.0_1658341193854_0.8878234728175058","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/form-field","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.c3924efef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b76db749deeadc2df816d55200e7bcb9a11b2cea","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.c3924efef.0.tgz","fileCount":33,"integrity":"sha512-8wBVbhh7h34JfzW8YVAT5PS1pd/iJf5ThomWsRJF8A5LLhiXjc06fiHD8141ykkBZiyBNsPMAPFW57twhhAbDQ==","signatures":[{"sig":"MEUCIEKAtZh2BKh0PAeruAkQYNVQorjEg7VQSRedePWsOZThAiEAlDO3ZIjrOQNjlYppZKI99AMhstNgLODNCt39hA0EOfg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EmSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7Kg//cu7uosB7pfuauPKXiIQlaf2h+KKBvPgUS+2vsjK3gU+QKKQR\r\nKqbwMTSXnAlMUu7HmmM/RAfIIWPK833gUUB0fXWHQfR5OsxscKpDCEib/0ga\r\nmgOa5DdFZHZ7cSqf+nCEx5c28l+f4chfVggurwEY4FUPcVPKtwL8Egp5ocdP\r\n3HMZJEpMPxUapX1Wvf5BDKj/sGDtaTx9TeyFkh7GYODBwqFL9vIDWcru92Mp\r\nqZ1jqWxt8ErGph5/bC5lf0kE9fCtDMIdoKbiR4O7T37SWg+0Yj6Th+rS4nNU\r\nvvl2AMdbRwJDCr8DLCzVm467ZXWT17dAtc1pw6Bi4/sttcysdspiRay0+u1B\r\n12k9HhwyGeAALTL+VNH6GoDS5cs4yBeoLB5FnVwKLx1lkBooigPd4HYxsgir\r\nB01sV8Q9GddLwkU169NgnwMWl6/HwJHWk8wZJ4Wi5X2FO4VjBiBP1WreUVAM\r\nOjohvQnSApK0QOk9Q+ZCkpm7u3oQ1Vz3sCBUJViOE3JC4DxW44CfpLyOT9uu\r\nDileADf/F+LdDSE7bahQmaRLSwM91RGOJHtfgaYhlPvhuxBj7hzqLsjXa4fU\r\nOEd0mJu8exEashfKEyTRwsH3VC/sHevUa3RzxL3ltGqbMz4oRPuZHqE+8rfr\r\nCzNnRmptTKg6uejJihHGOzGvq3nobMZxBxk=\r\n=T8fc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f665d9454e06d217296aa1a2064c9c67d3fe2759","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c3924efef.0","@material/base":"15.0.0-canary.c3924efef.0","@material/theme":"15.0.0-canary.c3924efef.0","@material/ripple":"15.0.0-canary.c3924efef.0","@material/typography":"15.0.0-canary.c3924efef.0","@material/feature-targeting":"15.0.0-canary.c3924efef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.c3924efef.0_1658341778666_0.0721154740798926","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/form-field","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.cf5c5907c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"231d991fb7d431c6a3b70af97c303737d48c89df","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.cf5c5907c.0.tgz","fileCount":33,"integrity":"sha512-PeOGy8qJEUhK3gAdF6sDfz71pLoHiW06MdkAGK8zxFmWHzFQKRHH1rzQVbdrSGs6ysQhtZTSkb6AUzcE86jdLw==","signatures":[{"sig":"MEUCIGB4KsM1tUskaWJd7BXNKHKT5puG2JPaQ8UV+EkenHEWAiEAhVVF+vbnT1znwBYbXXN6IeEOM5puZuPMhMiElHARGYY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HH2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDuxAAmOwTzPvf8jm/3YxZsneoBI7J2bXYyYinQwGOnHhyhHby8u74\r\n+KXpzMJ09GlznRwa3QHpifsK6mUB+LJyEHHVb+LMMFVpqbrwfVPCzBRxnAUv\r\nAJU4juyfJBwij5BYdsC09vlDfVY5glJxs3cZCUA2TxIYKa9UEDf+kOjl/NCX\r\n2zJXVwP7V7yeNORS7WZchoybEN+3nZlNV2Y4DD4cgITgBKsFk/bwgU/44tJY\r\n4BlH4atOgf9JrXqwLeJgVyZeHYo02kJSmE4w8TC1wKgISqmlPHp3N6BQE647\r\nRc+Oju6W53Xh9nwjJs43MWum9FU087+PpKU9EfcDrPQ/iVflfKHqGq85W8TF\r\nhwl74U4igN7+FcGADY4Cu7LotdUqGXcav5zy+a4uligDdtMvFcrElqvhcA8Q\r\n91Ys93MuTYyvsyi0NcATNgxaTw59A/9SVLYuxhfPBVyMdVUD9jcyTfiqRRMs\r\ngh/Y33tIx8CDRMF8Wg77WbZiebQlNr0u0QDqP/BbVXE2wQHbq0eJw04Pf55H\r\nL3K8ySQAOh0hh38ebzY5PvCdIsZmNs9UZYnCk8nchm3vykMxqMBCi22S2doh\r\nDrjNQLKLWJw3Y+1TPBwdbHc+VZJXmi2xvcSDAkpm8aE/X23RIdWb2sXB5Dq8\r\nYzCcythwmqQPcoQ1CgC0FLEbZBbSut6O0b0=\r\n=jSNR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ff18947542e40ce8532c2ad78551ff4e74f9d647","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cf5c5907c.0","@material/base":"15.0.0-canary.cf5c5907c.0","@material/theme":"15.0.0-canary.cf5c5907c.0","@material/ripple":"15.0.0-canary.cf5c5907c.0","@material/typography":"15.0.0-canary.cf5c5907c.0","@material/feature-targeting":"15.0.0-canary.cf5c5907c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.cf5c5907c.0_1658352117858_0.8059615773001985","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/form-field","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.0617e2319.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99f95d82429052aa336a67e3a4e8a2afde5c9bb6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.0617e2319.0.tgz","fileCount":33,"integrity":"sha512-o+s4TzP1dWlj8G/yT3BQRJDTqGPwNaR+7unWtj4xNZ5RxWmLeHKrHUNYBDsBjqhXEVdlnGaC2ocUjPqC++oKyA==","signatures":[{"sig":"MEYCIQCfUPyzON3nj4nDDs1/oD7T7v6/cxh17x1TAN49BQdcQAIhAM5HSSO4m8LSKIJxEOSVXdye7kNvWq3eQhuVJdKeyqP3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HY7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9dBAApS4v4CvWFLJFDKXEFNLQllxG7WyTnl6bM77Ped0FbG33D31Z\r\nqYvuv8+161sC40HC1zxfwxt/ChCCwKv/3gxZmaPVwx+xQJQ4B0ApHGcrT0TV\r\nP+rMnCSCWM68j4ce34GKslRO3dZtAgSkPSkaiZlIy6x1r4zKmtrHzAggSUhi\r\nSvIorlZfM9WNw/OWoLJ2Rjj6r2By2RW/EE+lYhooiE6dfZIwGRFThYJcpkNz\r\nwU5wUi2T6tx/NeqERkOt+fWdosOZsQA6yaAZ4wYztCUn3wyt8izlCIYK7j2v\r\nAm/WxBkTboOGftkQ7P9fHc0B2B9eiTzEfoM8fupr9pGLGitTPeRv248ER9oa\r\ngrL+TmQejYz4IdceOdk/DjZTN6oFcEFXtA18Lprk6TQY25FcYfIKHpOoHvRs\r\nna/uRAaFfMpmCPenNKmdYJvrMyyA+juQ2PHq+9szv0M57599v70XSKMXPL9p\r\nfSwflWbCjDn52C1rpcgCbuKhEx5z4tKYaQmOdEQpdbaOck5Gjnd/gL4o7Rw4\r\nbVDoIqODaR8UAz0d+cJ2xHazBmH4ye9f1cMyWSsOJvJDPfha8ifyEbh0UBvT\r\nPMC25DtOgc7+KMB4RsNcNVTQ629d1e4uSioOIdXMzhyDKLqb3UDdCUOI5eiP\r\ndAJC/1pswSXT48WfFWQTng3C/jHP4JtyvQA=\r\n=aBGb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a4d6efed0d00cc69adede24744dc368da0b2c897","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0617e2319.0","@material/base":"15.0.0-canary.0617e2319.0","@material/theme":"15.0.0-canary.0617e2319.0","@material/ripple":"15.0.0-canary.0617e2319.0","@material/typography":"15.0.0-canary.0617e2319.0","@material/feature-targeting":"15.0.0-canary.0617e2319.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.0617e2319.0_1658353211755_0.8357540567345056","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/form-field","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a743b7967.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c652bdc91ef11360f9978bfb78c19872e344f3d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a743b7967.0.tgz","fileCount":33,"integrity":"sha512-It6S8HNBC/hV5UQBwrNYLu2AbXJtfesyPV1j6ELc+UkQIdry6wjFFD9o0xFBPF3ecRw8JF0icAwji8kE3o0oNw==","signatures":[{"sig":"MEYCIQCDfhqTVoEOcSrvpMOL39nnEBsN6WfDSn6EQUiNoMW8iwIhAIlknDCGcH4j80qWXS6rC1v9Nk1tm3S0hqS46+bx7dzN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Ho9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMDg//a0KWWFSD+SnWzVHHDhSeFJEG1QmjbpfLaICibQ9QP7qiuaWp\r\nxSm1w86kNLWHT+smnV6hasmv2FWEbV4VOEtagoK0VqPuy9Q5lJ+BzVa4rwQ8\r\nHH6TWO7yPcpMHAuQLPjfZeYej0px9B6gsKgApNw7ttTBpU5wPZbSmk8A88MZ\r\n7Q3BYfclcp575zMEFw+de3MqVcsgxO3I2C1Q/AADG+E5TxxIEHfCHu/Z98hV\r\nXgxkXdcpMAmwGtE8Iv15ZgjISClY0R/IqZALF23ETZXraDsCmLwMFeF2njwK\r\ne/GWCCheMeDCALkKN/GLC4BLejSd9NIYgluurGm7aMdZOp+Zfc2gZXuvmrBy\r\nAfJpOTg5CAicKX4c0rALN9GFt78u+R+tPleAfg28y2hke9jgY/4K2pYW/EqM\r\nAhzO37s7Yx+NysVWMC0OeHZOboEPRXTbnOz4Rnex8jmpDX025y61uhFAlKO9\r\n4uVOuJCy0tEzf4LZFiQGHY4CYPHTAkM2F7u71+6jN69RiNDKwQX/poW8NYFi\r\nhuHzDQ03T3kW8mcCKFR/T49MAE0NDO6IkcjkeC27oyLhhL06LKc1GFAcC/G1\r\narqWWu0V2BsmNGEvmHTSeunsTVoGPUvm+k8fYsI7C8IlT6BODk9uN8QKsk9k\r\nrh1tQHdt0n3Ft5bTBTV9VhVK+v67gnB6zws=\r\n=zEwH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6fe7cdad71b01dac35a3d815662020bebbe50e23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a743b7967.0","@material/base":"15.0.0-canary.a743b7967.0","@material/theme":"15.0.0-canary.a743b7967.0","@material/ripple":"15.0.0-canary.a743b7967.0","@material/typography":"15.0.0-canary.a743b7967.0","@material/feature-targeting":"15.0.0-canary.a743b7967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a743b7967.0_1658354236812_0.8808760182208442","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/form-field","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.69fd619d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e0c906189866ab3575b0a98454f514dd6d82c95","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.69fd619d0.0.tgz","fileCount":33,"integrity":"sha512-+2iID7vCRhnaiwqt7f+3UVnkWT3TwP6nOyu7dVgfz6b6eVwW5/zAZ6RoDcsk1K/bBeZUCMe1ujabPdU0u2F/zA==","signatures":[{"sig":"MEUCIQCWBXJug+eqh8BlASyuOE4ERWM2n3hMJcgA4ITL0LG2IAIgJ8bbOriYt12REIGfL5rp7dx148GMVV7MVzDn1YPckZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H0SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqL7A/+MLCkFfPBpg8FrVC4zvtpir/GP8ysFPL09a8Uzesf7h7G36+A\r\napXPlRbO8CM2+7mLZ3fu26wFtKw5IRYWIm0Bvva4wDRJ//QrXQDEjkCaho9I\r\nTkQ7lIL4QImzr7PlH/OhHvnXPn98F55yHEFXx0KWQ0SbmIgFu/YSVzext8qx\r\nxewUGlhU2nsl5gNo00RWTI0xm/bNW48l6N2c/r7vbwhXzUnSeCifkCxOLJAN\r\nZyL5OTCGZOeO5IcHM/n025dWf3AerVm0/ybUpjI1LQde7olLV0dsXkMyVxhh\r\ngMjv65ttNsE36Fi8YcLj+pYuLkC17wjnCIJsKQmqgGnp8KHo5/VTzpMCB4lt\r\nPiqfiqJTGsVmUQnUrcI8WVyGJ9j1ElreQvQ1feWb5BlgjdClFTPK+T5zDHBU\r\n3/WAr98CE0vPy3j3f1MbDSiQXKg4p3qOqKnwu6UpoJ4gpbb1KMh8gV59AC5H\r\nuy56LF/F1SKvExuH6BWYQ3LsFsCgoQGIxdn6kz79L64Y/jQgN5+LzjAj+iwY\r\nea1SQfKBEemgT0q8vFhXC5a66xO7tRnsl5WTYwF0jGpYhLJf9OFR+w0Qn1WQ\r\n+DQWwxVceLlNagp6KQ6zrFGL2SWuNWffIG5Rcrq3VvjVSsxLNqueKkn0Em82\r\nc8xPaDZ4h0pQzEnUXK+G7SWJzgZ3ew+zsTE=\r\n=cf8T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8982644a21769a71fcdbd9d8a35d87f00bf73b3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.69fd619d0.0","@material/base":"15.0.0-canary.69fd619d0.0","@material/theme":"15.0.0-canary.69fd619d0.0","@material/ripple":"15.0.0-canary.69fd619d0.0","@material/typography":"15.0.0-canary.69fd619d0.0","@material/feature-targeting":"15.0.0-canary.69fd619d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.69fd619d0.0_1658354962495_0.6415692072364634","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/form-field","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.2a6ddc1cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8d4dbea7902e53c637bbdfae11058aab2f41313","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":33,"integrity":"sha512-bvxKWVk078rrOvsLm0rU4zAq84q3wlTEYsaeeGgL+6Cua81cKeEGnAMZGWNHL8s0HbjorKd/2vxHYiH27Vhxfw==","signatures":[{"sig":"MEYCIQD7Jn/fXHrltUZ30q2lmEqf7X24pE1JTLDwYtH5qdI5mgIhAMcTGG1PbVwVvlU7oLBfd1x7PIb5CfIK64qLxnyEfVJw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AUhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmolkw/9G2NzcVvDSuKs1k8KYbBUAgAZsKhUCINhL7562Zv9I6We8fpn\r\nTe1SguDQ+wdy1xQhoHV93EQELCk6Eop+LdASYwmBGoMUm7FzXOyDkKjw4TSn\r\nDkEm+1Khd4iORwFfmS510lViteauUCIY843umx2e8QWwdRvhA8GqCGUccrVg\r\n+y44ACVxAJEy8VgULUF9Y2Bs/r3pZD/f1ilSP5J74/HHoOA1iHeChJ8VX7cb\r\njLJ48Z4fUv9Bq37r6dtMe9+dKTDfosKCSU35bctYBwtzjA0dgMY60JXDlSt5\r\nhnS3nSV3UPorK2MGfFRJzu+NXIUfKV4FXzB0bmB7Fw6pxTGHj+Vu6P6buOW0\r\nPnSUmDaUcxQAZqCKrF+IrU1ckgxrpoIXIAdQoYpMFW2I3CHdpw/nJ1Z3DamD\r\n+B5VwgqxBfQrqB5sac0b3ohezmjLS/cKMTEe0FPcUHGmTgOO6wgmzMEVZoZ2\r\npXAFgl+ZK9XVZ3C/7PDOJBpTlpedRbvK/9w/0lDYLhkWYGKiLhnmDHqQJO8L\r\nTLPBmY/fCGhP9gIN0ByOiK86s3dTm5X3ysfeG3Wnj0SIztVokMdc1FvQiQ36\r\n5sbUpmLdXFP27mhpbAQmlhzObTH8gGxkzKCqUEcbt3oMRZ1htrX1uZTCs/fv\r\nn8+VadFe3gtZ+8kOH+PDWwfJMA4xHAS9320=\r\n=KWvO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0e951ea9d38f3d449f24bd1d8ecb0fa70c0da462","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2a6ddc1cf.0","@material/base":"15.0.0-canary.2a6ddc1cf.0","@material/theme":"15.0.0-canary.2a6ddc1cf.0","@material/ripple":"15.0.0-canary.2a6ddc1cf.0","@material/typography":"15.0.0-canary.2a6ddc1cf.0","@material/feature-targeting":"15.0.0-canary.2a6ddc1cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.2a6ddc1cf.0_1659110689421_0.34000395701823316","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/form-field","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.86efd56f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a5f7e622f6a60b76ea4b75e4065235587470aa6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.86efd56f6.0.tgz","fileCount":33,"integrity":"sha512-x5EqTuGCRXnWv1/0xyg5+JAlILpBnDtrKOyRNLM6RpieCENDBldI8yJ9j4pV1fhyMaU8Lmfc5OPtNyjZnWCf8Q==","signatures":[{"sig":"MEQCIDfjaXVmBwNghDhg/E9t57GlA+1pyJmUwvn7zDWY2p9FAiBKugwZsyvG2mvvsMHnwoFeXUjwa+HYgAHTt5UlwZwZVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6TiWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHrxAAmbnMEcSlh0Mdn3Rdv20sbDJGxSDkLKQa161Za3xdiwb+zQLP\r\nXUc3EjMG/1/GekLB0FDYq3ZgOlbL773yr7/qmzGt6pfhshjXpAWl2QMPK5CT\r\ntY3EfvQQaQXDqQaRIdiWaEMfv3nW7qBP28rMA2V/zBt+9Gu6lB8klqXmOr6C\r\nG8BlvtCWq768ja+NtS2mO6TW1oVZf1jnpRqsmv3/TrAmWuS59MuNr72qLpnn\r\nZH0YzV98+dPtzqBGY2A60tz+1KXgfgAvroayvt47Wttfi0yRxC23C4zyYPjp\r\n27KvDQvr4/BgBHN26HE+cLytQEPqGM8fk3vVNjpPjE972CcJwOzlrCs1Ofcn\r\nOC1LjlYyxO7QSwJ9ZEQsVEenXmL+ArwA1+5Iam4Lu4XOzq6VsiEfO24x4XML\r\nmrMYMrJj+Nqdbt0ovhiADlUpoDEZ/IJXxnpjvKOfVoDXF376kFk3m4HXOwzN\r\n+n/BGyrmBlyV3ecU2VWe8ZdOg1NaR9g6U0hs6o4HMu69axtDNi3HUMOHpeHd\r\nhKTODLYSF5Lc4bJH9w37Ng3hdMsmcloZxCP2GCV8VZspbjcylfpYEP73sH/f\r\nAsTGss/rxn8ej6WCUuae7yh/SxrbLFixpcEjHu1WOyqshy4TE0kYk6A5lRDZ\r\nP4y7cEJb8FzO0/2QoJktM+/+c8crCrkzXUI=\r\n=eh/q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a4781ca009f9a9b59c7dfff5df2d23bb14b9de2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.86efd56f6.0","@material/base":"15.0.0-canary.86efd56f6.0","@material/theme":"15.0.0-canary.86efd56f6.0","@material/ripple":"15.0.0-canary.86efd56f6.0","@material/typography":"15.0.0-canary.86efd56f6.0","@material/feature-targeting":"15.0.0-canary.86efd56f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.86efd56f6.0_1659451542042_0.10241785024703454","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/form-field","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.ccfc24d19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57fb1b06f30feaab23d8f50c178c3c4750627c17","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.ccfc24d19.0.tgz","fileCount":33,"integrity":"sha512-NU5zGJOqscJnOYcl8ff8ZDyViUfONQ27cISZxhw50SQLDPIG56AugtKkmfedBVXuOGwslYRwWVhfIe0mO8+XnQ==","signatures":[{"sig":"MEYCIQDlcXj83gKz7FXnF3Akp8V940/fFtwZhO+maPO+xRaclwIhAOALrSk9gLyKerDjkVs+MhMpWIWqdvSRrNIV06I+5Lwj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rrTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokThAAiaIYqSykU6ti6ht8ReY5sW8zjU1cugjdtmbfz3avqj86eFBu\r\nePtlWa4Ob3pssB80UDcVMW6wsr3KWyV0RTey2ClXa5jpVjWejUIxCifC8nSk\r\nU8A+KTLXzhnaNdeSRoqIVy7zGJbiOpDz9I43FUkYy9ts3q7A5vnlE4PgrsFo\r\nodCLzYuueGlZwYJVSJHyOjU6VukX93bG7NvaVCV9KxClK3gZfALPIw50qVJg\r\n8lOosbxhED6cu5O2t1BbeAi2DD7Rz67kG3n9ZOvxrdar5A0LGH6L2y4DQ+vg\r\nofaWVr965Q0b78ZlEFUUKNmDyh2laX6ndOr7W4fY2nd6Mk+sn7lgES9w3YBO\r\n94/JrzDL0wsihH5FDi/ap97FDAAj6dBri0PHRu7CZmrwpRNVnHK+2PQR2Hy8\r\nozNSF5kT6U79x7LAADLWcsDz0gPbtKaaiUDRnCUQBTSjzID3krGa6v2JoSyk\r\nXGzIRCN6p4WMu7QM77Lcsk3ToAAgWKZ4nmnmOHlPBdXhAGnJNhIUdgWk++Al\r\nXtk6fWGXwreOutDt1zDg2yN9KT6BizjyP+N6wgRWdLdoXFuFAqttTGGuz6UV\r\n9nk63lPqgHGqhF+PZbXvYwY3VqxsVckVUu2Cff28VoJX/AlRTzbX4qfIPZQ7\r\ntFZjwpSw3eQRABeEyUIhBAcebKR+G/8BFbk=\r\n=K2/W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f790058ff0b4b30289ee965102aae1ca19654ddb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ccfc24d19.0","@material/base":"15.0.0-canary.ccfc24d19.0","@material/theme":"15.0.0-canary.ccfc24d19.0","@material/ripple":"15.0.0-canary.ccfc24d19.0","@material/typography":"15.0.0-canary.ccfc24d19.0","@material/feature-targeting":"15.0.0-canary.ccfc24d19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.ccfc24d19.0_1659550418881_0.6307549859644814","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/form-field","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.e4570146f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27d3146d86707aba636ee9f019af7683b12ce2f6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.e4570146f.0.tgz","fileCount":33,"integrity":"sha512-KhJGS38DZJX5aytBGn6jYfjzpC61Sy8VAiRjmN7QwWXiv0pmcxbiJ0c8ABrXw5J10uXNnV/og46VfBuBN2TXog==","signatures":[{"sig":"MEUCIB4H5TJoqAu6ot9B8b5sO2gyzDu/2qrpPE9TCdT9+YXiAiEA+DLz4Kr+gu8ep76Ve/qF1bw9WYmpoCwiRBmNGi2l0R8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sExACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojNg/8CI6dNXHvvKjq69ilopFcq5innlmdlFgefzTKQ/DfUqdGT+Ua\r\nZFgJFNfBF4YcSaSUG1xw7xCwk1Id9mjL4qevpzBizw1mVpXjrwyld8O6oipn\r\nzojfgrOL4JUDQ+vV9AzCGk0rA73quFV35gHlFaFWKR5Er5q5MXIrcfGyLsmG\r\nH+CHXWZ8/uPwQs4VCTcU0YC13w87I6FtOpoT/irrUgRXMeE5WVdQL5Nw2daT\r\n8HE2uPZOwL3tkwGO7nNmtkkGbTXlpvOalOL93zRDN7RoOTmMncQ8RWN+PAdo\r\nkY9FFSECBIQpFzKZ34SMdGV/c5hlpe4m3GdAYlUo6h7w0PjRuIf7jk111azW\r\nkTVyDwwh24MgpnmHC715aGCYu3RmBG+/8wAGUKHQvKjqb2P7pzDBaJVFKAg8\r\nwsulJ7aJquoehIHpPz7jr/0IX7IupMle7CoGDImltEcczMvga9jYiZsO4vvh\r\ngEh980qQ9M2l87do+AhKkYAv/WWkemhoRAt175u4UDOLvAu/QUv9TTQ7OZzn\r\nMAmLP0myDHayYlgQWHX+NKbF4Nm+IRW6FCDU/Nz5x15Y9C4iAlFPYtiEiFlZ\r\nnc6nzNXh425cR65W6XP6rdUtfce7K/W0dfnVkCOZVZDRJ2bzJSBYBtd6NeHP\r\nRmOWADugad51CGQaiTqatniIHNUvodgRkq0=\r\n=Zw5A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e80d690ce0a868398025065053615e866dc51ada","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e4570146f.0","@material/base":"15.0.0-canary.e4570146f.0","@material/theme":"15.0.0-canary.e4570146f.0","@material/ripple":"15.0.0-canary.e4570146f.0","@material/typography":"15.0.0-canary.e4570146f.0","@material/feature-targeting":"15.0.0-canary.e4570146f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.e4570146f.0_1659552048904_0.39244161178739856","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/form-field","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.6683a36cb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f93476acc1b90edbabbe3218c2388dca48ef304","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.6683a36cb.0.tgz","fileCount":33,"integrity":"sha512-H7QJP0JQL46Q/sKVNjs6csD3x/u5wnow74BxW3bYDjDzCv6cYUN2Iwzh1LZd4Z0+VdUr2o86SYIFisefakfXyA==","signatures":[{"sig":"MEUCIQCLkz/pFP7cKU3SKcpeQfkFSmDS7ZWB8ROX2uHmUId+YwIgEsac6BwK7Eo9Rsm13x5Vk1UEK3XQqW08tLr3g8y1dRE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sqSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCPQ/9EXViCXaOwtF8K/M8zatA6aoywI+iM8LUCY0hl0PfgOPWYCRc\r\nRmCfHGwPaV/2vXwQQK9kSpcIcw3/mmuqSf36W8mGR0e+bfybD0fv1wG/SkxP\r\n6MyJKv3eNsjoDBlTU4eSJJHfqJYbDS835oWheSsLKnHKuRLxZv5kqEEsOPjz\r\naT+OYZr+DUYTmCvHmRB6orylIHh6Os3lMXlySyO18Yp2QQw6w1OP+pBcFoyE\r\nQRfTfnz2I3hnmGGO56X/UEjrdCFgb+Ss+yDycQafUrpqvQcCmVp0ABvmTun9\r\nQvf+hVy4oXIHM6V8xBKZReREdvOIxrFs7U+3SOh6uXPFc9fxGqtmuDEOdIE3\r\ntkHjVHQLvhQUyGy21LQbeUNek/H8RcbtB8OZ7T8A+Qwp0o6zuW+qs2fYhFzl\r\nbADtWy8psPkwWXLx1HGSm8imDdbZhJr3/Pa7VkGqnVmCTtyTeuYKH0TazAub\r\ndlBckziTDJRxLs6ubdvSD0GSg6HEiBIAA6tpbpA/Rrsl9ZeSjTRkIcGHmn5x\r\n+wSqzkanNm/wFHvKdwffhWQIrL8R64W76aENAO+wlTE97T6DJWxfHm9q4gHe\r\nhzRIiYojvxdxaqZNRAsK7Ppie/VemlysQSU7m/kfCBEh14VB9+XyzbjP628z\r\nLok5hsXQoVhOXsRG7xJOZFYXuhKJPqngUoY=\r\n=oxXt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8feb0b9a8c5151a18a06d282cce87d861ea12e5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6683a36cb.0","@material/base":"15.0.0-canary.6683a36cb.0","@material/theme":"15.0.0-canary.6683a36cb.0","@material/ripple":"15.0.0-canary.6683a36cb.0","@material/typography":"15.0.0-canary.6683a36cb.0","@material/feature-targeting":"15.0.0-canary.6683a36cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.6683a36cb.0_1659554450645_0.8003859541211005","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/form-field","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.10196647d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0dbbc9046f136e960fcfca4d9fe985957d65638","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.10196647d.0.tgz","fileCount":33,"integrity":"sha512-CkDF4+UIWjHJCeMSviT6+k3nRm0WzOPHZABzpfGBPDSIbqNStMfMx0N59ZbVgF/GaGyB7JIuhlR53YnsuZfB0w==","signatures":[{"sig":"MEQCIG9FYclKH7iIh9rK+UbCeoNgPc2TW4Lc1iqKLnpmuWzSAiBXjlKxp/3xE+aAUGF69PtYKgdItMOhpiGtBEgdrjIZIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u52ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZSA//VkSQvKkpY/kctUqkAzHSSvVirwYodyIP9gBJ5HOZVljXI3K+\r\nIKUZoYaFANZZtOd0SdLcSeM+AEZZdfCCsLyjcZhkY+1Z/AXnjOCIUhWR8YDI\r\nIqyckHQ9/Fz8xNmtg5wC22MW4Cw031MMqyAb7g68qi3/sctq0/5pZzMb4zQn\r\npBC9iZOfP/EmsZuCI0xlY1FWuymIKoZ6vSbXviJVhncIsnQosCMpmqIYSxVU\r\n+dvdMh5NcESOb/rU0Ex5DUH2XV+4fz8Bcqex4+uzBzhAgnzO2zaHI+8yDCJV\r\nBE7W4z3U/24nwp8sepojw9l+ScQ9GfcgOT26aIa4LN2mUBWLvYS96hrt6EhU\r\nI5hAMBh/u90WtroTPfHwdW1SEmUsaHhyMqpGviqkK0QpKJW0CoXG1Jcyv5X6\r\n8goj+d0Vaix6TF1KvA6uyQz53SqgBPGwuoWQj5SiUUgCAW8qNyOCXePgsH3C\r\n41nxgA4L5X3G1Wb744fXEcaOd1exa79tS+W4yedDFiSKstXUIih5OwV60Oxo\r\nsYxuVhwY6KHxO953UHMHQk9yz3yAK7/syK0wHT64rZKIwfzEknlmh3GUIlil\r\ndrKsQubbWk68N8eLmixYVQllvy4nwY581E2v88dRKG34CyquwaDhvtxXNk0O\r\nTs/KWe+cpg2uLK2V/CG2DRhKsfh5j3DUR7o=\r\n=DZ2t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7a708dfc09b3443c565ce80a676b159abcec1339","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.10196647d.0","@material/base":"15.0.0-canary.10196647d.0","@material/theme":"15.0.0-canary.10196647d.0","@material/ripple":"15.0.0-canary.10196647d.0","@material/typography":"15.0.0-canary.10196647d.0","@material/feature-targeting":"15.0.0-canary.10196647d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.10196647d.0_1659563638159_0.8353431321149913","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/form-field","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b20d3d73c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ca89c7616f0cdf20a2ad8d5cd11568acbbd212e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b20d3d73c.0.tgz","fileCount":33,"integrity":"sha512-//OUFuZPZ8BC1tv/D4oDrlJ3sF9we5ZLXYxfyJ/YnZ60j9G6CI6EL71BIY0aJErs9MshRZihUA2EzOasokWPtA==","signatures":[{"sig":"MEYCIQC1aMxuHnZGVTDtapiu0t9iY9LNvCRxC7Nuvs9INer03gIhAISX1rdzY1zpCktnEQghVCdK5De5ZuiChQasheWDtDl7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7Et2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQeA/+MZmEsl+izBSiTmZFELn+vqQdluMw6p9hJMpP+fuasJRaB/bx\r\nVr/gal4j0G5etLx9gIESrmSJ9i7LGyjUIQwBbfUp9jccf66ry02QbeRWt55O\r\n6gYHEykCzhRH0ph8CaMUL2EpFmypUu9e9FysWj5w+XbhWSqXZGN1TATMbemh\r\nzcl+9BLLJuE4/7duTlK+pVSnOQXvHUaZcwBjMZP6wqqMYOgZCvObNk8yeJl+\r\n+5YzCgaf5s5CqPn9ykDIJ67dsGQSO0liMuKFLgmg5WSV+GCxveonHkMJKsAE\r\nklY+PI2RsYJHa468CTAl+tsjEav0KtHVd3fRdI+Uip7Lz4xX15L2ivxWFFJ6\r\nAjJq3LoaJ26HOBjMrBGbO32FJ3lQb4s0Rm6/ChiP3dYEZYAgTGsIrE6zSIZZ\r\nT2AR2hs5jyC3YuxWNTmWfgVnRk7KQYFDmqbNMQbSG+KiGYQ/o6eDVAdWXH9k\r\nXaw/m5ARSeZcqAcAqUUfQPJfZY4jKJCwiBdZbm8w91ZyjOhgha41rmnWuqEQ\r\nEOfBkKzYm6NaER5TrGaJXmkeU51nRJpT0ItR6x2hB9AplQOvGVEDukkI2DOh\r\nuqfKT64oaj8J0qVBOPiaN/aPqUODvxi7hTmkU6m0ra9yZbewycGqTwdc9i37\r\nRzm5pdbupWvF1TS7KGFRLNtoWjqes35i5mQ=\r\n=1tRO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c869b5a3ceaada6bf2ec164c65f1e4fd88a0e7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b20d3d73c.0","@material/base":"15.0.0-canary.b20d3d73c.0","@material/theme":"15.0.0-canary.b20d3d73c.0","@material/ripple":"15.0.0-canary.b20d3d73c.0","@material/typography":"15.0.0-canary.b20d3d73c.0","@material/feature-targeting":"15.0.0-canary.b20d3d73c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b20d3d73c.0_1659652981856_0.9563607403753382","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/form-field","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.47c0c6b1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b496c19eff48a87cbd44297fae067cc56b0505e9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":33,"integrity":"sha512-44xEQ/dyTEBRkdep0mx1A3l3SOVsFUyHBTCsz/yYfvnUfm/uFGuOeK0p9UIUSqXPQ6LMeX77EfWAu28GfoSFCQ==","signatures":[{"sig":"MEUCIHb8kt9/EttlXXx31seQvcYfbLNGSqcqpfbDXK3kIJDiAiEAuQcuQgHTR4eusg0sglHNdy3DjVxjSNkoLJCipEkylCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8ntEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTjw/+P1NHRyesvZ9OzFYibAbmiEkO3pD0s/OzfB1TcEVpnFpsncgY\r\n9byRp5+n0Bty00aLCkQr16QhVwQ8DQphqd77Recqj4KBSe7Ob1ainphk8JmH\r\nc3FL+HJsa3zVA3njYXN2nPj2S8Ukqw9grgvBPWjKolmsCh199/DsLXFP1eWL\r\n4c0pDH04mdDZzCjwExrnZCmJdxFgsWNA81rPj16ulHNIsKrZ/ADJyVmA5hWA\r\nQLjM3jQxQRNTlYMVLaYDXyFCjo/WdDw93y92BeInj74VKgAu0T2q52U+YU/a\r\n5/nQGCpuCIJwEMf1HHbEna+oxBZJBryZJ2fnSONfQKcQ9L9KbH5/P+LRgAyJ\r\nISdKmAdtOj3HSI9UXBvnGsjbM84eh8G+0I9UnjuaQjoR9oHnj6JGRs9y7atV\r\nXavnvtS2+5+LCiIgDwQhcTq3LSraE88dHB6c4OAKteHrrUuKup6aB191SOGw\r\nGWcBrgNx33c5inOzt0dt872HgH2Z1VTDXq4dk0arhji6uXCBpgbyuwvxDFhM\r\nhbCRpkb8Q2Jby1yJDtLag6NWwAd3MhIFAzv6XpYVL7BDCRZbfMwbU4WQR2hi\r\nTtxdZmUyY4PKeBUt6fJeCItiKPCk8mwjsbQPRBSUQwUmc/ZFAsdL4xKd/M+H\r\nyKQYXyfNaTzqqSPbhhmSo8RViFBZf6rc7EI=\r\n=Z8CR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"692955bb2bb9c99ddd9321606e40fe4a56de120e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.47c0c6b1e.0","@material/base":"15.0.0-canary.47c0c6b1e.0","@material/theme":"15.0.0-canary.47c0c6b1e.0","@material/ripple":"15.0.0-canary.47c0c6b1e.0","@material/typography":"15.0.0-canary.47c0c6b1e.0","@material/feature-targeting":"15.0.0-canary.47c0c6b1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.47c0c6b1e.0_1660058435731_0.21408754375285532","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/form-field","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.0e3dc8e38.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24158e6644624751b3ac03a993f6ac1fb2a6486c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":33,"integrity":"sha512-WFhvJ4eeeqqi6vTh8gKBLMIk0NAcR9B5RpvuIzcBB74Px5Q+ehGw/TRKmaTx9nt3euYldOSzyy887MDFwvc8GA==","signatures":[{"sig":"MEUCIA4kgZO3dLvAR5gR/BkXTQOPfJvbM0a2ipUSe6dh3TkVAiEAuAKZy4pDiqj3Z11c5LKADFY4Njlqr7vVIJ5ZuTdjBLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U5qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpqfw/+O84yYUmKqlyMpL8s/E8nkBLfPxYHnoPJLOEEiEr0hhbHnsdK\r\nBSPF9JlyKYHKHozjKQZszOJsY5oeQS7o+KqHv7Uq4mLe4kqhYbS4Lk+HUTC2\r\nCd1u8QCO1RrjiPA1N2es6HLKPAcQqWByjTdEAqgge8r6UaAQFOjsLBX3qMHU\r\nRvZKjmF5W9+cU2rfNY4sovE1kbWD10hQqV7cKSjPDWpPcpa9tgV+qOS40vge\r\nk+10nAZYqLR6MZ0YLzjGSRtbY2aDOw/pwRSgMXHwg8DUdV7Ussj0HWwPjyVk\r\nfsu51cbWyPE+rz6bdk7FUSgrp68BM0yfunTPqT4hm1UNDousAxqdo4EWfYwe\r\n7oCDOV+F/AxZoul+K+TZ3N+hVopS2JRqR2Yl+svKk6lmR+gWYRLg+ShGd3tQ\r\n5iwSUmSHvx97746AjQR1VlTYCjJfjIi9sGmd+iCo2CnGB6tNhVjLuNCZ14Rf\r\nOLk2MvIQSyiZRjEoT4mxJMBYSa2Kievsn/Ln5yZ1xiDC6gLG/GrlhaKsbip7\r\n//PT7JhVuAosQvd1TpBjffsGH0gHzA17GcnvZBsb+oCTizhwW+96A82efhm7\r\nsQqxy7rsUh1UNHd26pTq0e0eG94JtEFJtOqA99oiBpmzTimi0G81fz4vL7sR\r\nWYvsErWM+g2mE+wxzrJh+LageyqR0QiDcMs=\r\n=2h7d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"51983e03d07e3c1f50454770dc24ff8d6d6f97a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0e3dc8e38.0","@material/base":"15.0.0-canary.0e3dc8e38.0","@material/theme":"15.0.0-canary.0e3dc8e38.0","@material/ripple":"15.0.0-canary.0e3dc8e38.0","@material/typography":"15.0.0-canary.0e3dc8e38.0","@material/feature-targeting":"15.0.0-canary.0e3dc8e38.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.0e3dc8e38.0_1660243562302_0.1425020619778412","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/form-field","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.d5a11f1c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f49ba394110bfb9133192bbe2fdd7336bca14e4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":33,"integrity":"sha512-cC5DpV5w5qX+h+ca4D9mnt7/CRJhe0WROUL76+H+cW0RwcQb5e88PZhdmigLoB2KgE09nveGqgWFVUM3Yj6qEQ==","signatures":[{"sig":"MEYCIQDtjUhStwipBs9QxMIuw/hkmbmISxNrmp5slLBnLFoz2gIhAPG/0pttWnLi8cNmBnosyFdJ9A2/4oOypHrxwE6GUGgh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpbEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokTQ/+OhUHw6Ib4Nm+Tpni5/b+qSiygkWt7lITOynAQWqWKe9OO463\r\nlYXMMcDyzyVPpwrfnsiR+JlV11dtpBfaOzonZ4NEXEgujSdlgo3I6SZCBdgA\r\nA+k12eU3PU66Xxnm6FCpRp5e8eXL/YSHPI95x/xrBQZ3yv3eWXJSsNVjdu9A\r\nLeEXnxuP8GS25w7bi4+j4J3finOcbeXUuHZcwjalzKkkSkpiNsrQ+LXMaZdH\r\nzErAzLJ4+lfjUgRy7wtgVAkTtIITKZ4mbQOP/sAr+O1lgyQbH1rZc7DJPt/I\r\nAgoQ+K3fqaVzgincbGxtrqJ1fGTX2fNUfHLFLD7nKVV5ZUVB1/3vKtZ0UlzT\r\nYJ/2GXcO1h4LMaij2rb0DF398dNFkkbwjb6ZEFQ3aZSO19P+wZVXCW8GABfv\r\nW3Z0YTigTdX0nzv9o2oEBx1NxmV9cA8A9XhRvQ7aOB6rwpB60aMmQ74PMMXL\r\nyu16UIG9qsc3+VpQeK/aBfC65bmVhKQOO9pzEFhE4t2UVEXRbWZ/eZYIU7xv\r\nT2zi5L8L0We5tiKQdTJYw8VtjY82hCE1PKPFMyNwRRgqeU3fQPgxiTcudL34\r\ntix7953Ty7nPDgtDMgJRVXd0Y8TP8HiBxOHkkvQsvb+v/vA8VtbkaqKjbp3+\r\nkPdymScUIgjBM7wTzxxy2g+bjLdjvQ1MVX8=\r\n=Aq/x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7ac71b54192751de3a5469d20cb2e1c30e544d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d5a11f1c8.0","@material/base":"15.0.0-canary.d5a11f1c8.0","@material/theme":"15.0.0-canary.d5a11f1c8.0","@material/ripple":"15.0.0-canary.d5a11f1c8.0","@material/typography":"15.0.0-canary.d5a11f1c8.0","@material/feature-targeting":"15.0.0-canary.d5a11f1c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.d5a11f1c8.0_1661900484483_0.669287759883235","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/form-field","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.bac992a95.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d7785345f1d8c3ebc958d2e97d5f8b8a2ad5235","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.bac992a95.0.tgz","fileCount":33,"integrity":"sha512-LNeUEZyK8FDocwkfu/p/dPLmFP+cMS82juseqF8nGFZFf+7hIuLSm0H/kylhQLGLbY10AjiHzAW/JtFWq7OOag==","signatures":[{"sig":"MEQCIBhIzJZ/1fxo/0kgW5hhxULjrnDoxc+epb0MPIbPc97tAiBAoVblDc5vedAtcEzHYsbF2M8lX+sHGROIdHVWkmN+rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFnKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrnrBAAjjVFV4OYHyxPDwlSBiaQ+LJhS/LApR2ddBS/Xxix0mRKIxj9\r\nBlhQlJ5QTDBSI1r9xYZNOS4LNBm4zDDALwSWZs16HUxwr2lCVFX+EhyRpsZw\r\nZzQK4ins6vTss2UvzT4MV5kPpvVtBd6aOnfSS90y+v9SiaX22ZNfqoWqPFTv\r\ndHfpKkexLButbIuaLkcLSKEaT8ni2G+uIwuyiBxhiY9D4ugALNxuVGwY77Fh\r\nvaLRmegNXi30NBrcQvPS7ZumULBucrx6MamEh17DuU5nYnlkwORZYaWWuwh9\r\nCMH+C2o/54lsJpZBw5UllQS/jB3l0eqrkvq0EudOkioV9EU9klo8L6fcbQdv\r\n4mQsWfliKLtPXvqTu4MFFMNkYyPLRu46vmRJ+SZLrbA0J2NlY/x2vlP799pI\r\nWuAn/9o6kTuqALmer/1nhZL5R+qneXBarfw5eO2XZnpE+tZ38DOQ0EVdaPbk\r\nSA0jKNkVGA3KGBw+Aca/v64TjnPco9+H3KfEjzv8miS9UrMi2jdchdYhzaad\r\no0HdF28hriiC6c4sfQuKJAKwscuPVrYfryQ8LslrqDhnnA6o7QKWRrF0mA6f\r\nWOipp1P/BBajdaYHjQmsZN13wYkCMS2bdBlWCiI4NoXe3Tk8QIuB8sFq5CkL\r\nf5EU8u6rb6bsoHbaXPJt0dhC8FhoI5GKtWA=\r\n=oMiI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b8dc8f019b6b9a7241d55c21925faac495f9230b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bac992a95.0","@material/base":"15.0.0-canary.bac992a95.0","@material/theme":"15.0.0-canary.bac992a95.0","@material/ripple":"15.0.0-canary.bac992a95.0","@material/typography":"15.0.0-canary.bac992a95.0","@material/feature-targeting":"15.0.0-canary.bac992a95.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.bac992a95.0_1662015946148_0.9863377756725167","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/form-field","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.d25f3404c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0290465c37599b575478d196a3b01ee10f083c6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.d25f3404c.0.tgz","fileCount":33,"integrity":"sha512-AnYy0x9JdlP6OyqL9nBIdWtgJuDvIBnCYpLl4ShoKewAZz72nEXXLSb5TZjfI9J5UnPh3RndRG+srmhxQCHZMA==","signatures":[{"sig":"MEQCICdq7ifQLMi4s3++39/9RdIQtIZHyInQeEUJ9g7Q/ax8AiA64AGFRGwxGL+PUQsnZfYzQxTgtDV9LrsUKrbtW/9o3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH8TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrupA/+JbDDP85Pk9p8eNbJ2DCLEw2s+8j26owORs07bbzQKdmO9Iqe\r\nRlI/JDgpsSJAlW2UxdL7VTzvkWnlBycQ5CPALh/cXBawAhMzICccXQCV4cpk\r\nXHaNmoIK3GNnuEvM+W7mlwk5bLHfP2EWaxpOlvqwWErjTxvQXX9wc+VWvi0e\r\nLBqKpLk419e/gK5JtflfcACXUXcT1YJCKPNjvr0cokfM22cOuVXg3nHZjEaN\r\nw6m6JBiMgEgsMfJJqd6MswMMj9Ok8LKf0IcW7NJfSVfAekcbb8EMrUUdPvTm\r\ngnFwvsBTSZsADWtMqJ7dO5wdsnMgAozmCG9595HSwt12DTxt8Alk9lD/LmSP\r\nihN4srXS+4+tZr+/19BigXVW+UaTWdUIqYbmr10jo9Af+NBSCD7D0rJgP/LI\r\nqw2zXIHrsuRESjzr5CJHWctawKPdsLaJkns8RfP3AfQOaQMYoAIdlPygj7nS\r\npRgku4ncz4vv027oSXgHbkXsVxBkbmivlyiNYdwWcOdtKzDeNzixJ01VaZaE\r\nGJTycsq7kBuWGkIYXKZE/YF/rokjL/cZq8nyBlUFCNYxESVkF9vayn4Wad6k\r\noldcgKGAGbP5d3gMckPCtwsmXTx7gSEx3KcEUqWDUsM80EJAKi7zHR/cjZA1\r\nUDEYPrPPCU4MyWPKIBytRvA/wLIfFGOoO3E=\r\n=GdQ9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cea256990068cc2248c9bed32c4a47fe622a3286","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d25f3404c.0","@material/base":"15.0.0-canary.d25f3404c.0","@material/theme":"15.0.0-canary.d25f3404c.0","@material/ripple":"15.0.0-canary.d25f3404c.0","@material/typography":"15.0.0-canary.d25f3404c.0","@material/feature-targeting":"15.0.0-canary.d25f3404c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.d25f3404c.0_1662025490682_0.31023875524070754","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/form-field","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.920d8a79e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ab1344ef7021a76473b50894517ebdbe67e13db","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.920d8a79e.0.tgz","fileCount":33,"integrity":"sha512-G09aGsLeWdKLggTqDxpAekT1pNMijclngcMg3eb+4Oc1vJ46yZret9Az2+SDOmt1R+NDf8Ry36UHCSnCqdv8CQ==","signatures":[{"sig":"MEYCIQDbU4TI2LnLRzNvTrksbX1H3jJblYiAzMQe0Es1u9MC3gIhAKt2eOsNOCq3ebdfsIlzLYREIExlpUJ/iTbNDHOCYfpN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERQxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQKQ//RZeXm7XA1pNTpj1UmV6wKjZ/Y5/Ks4oDyEsOtohGDlMcHROu\r\nomoE7Q+kSiFFN6MDSxXUFxxokn4uRrnn52S/Lmukzi1nTpqgz+JE3Rb1lRiY\r\ndig8AMGNGDr8E9TJbLtIkih7nxMnHFqph2q7NzIaHYDX1V9SCQzTALgxn+Go\r\np0FHBqToAwWiqzEyo16KqXziYI6DqBepXX6XBd5TKpBrjlyYUVVcP8FAcX74\r\nCmH0A6tqc88gJL81xfExuCgJ2IsGu9A3pB7U9LTe/UXOTo6Jjfja954lzfY3\r\n1Jo75UBmpmbUVdx4McNxtnfscwW7c++TxkyzsowF04Y1qAuogggdTaNHPa8N\r\nkelc2lK5Y08qovS56WDc1r+EbImFddqcg9SSt/QicogsN39j6T5aSvRkLmPk\r\nwl0CRc0ttNhS9tkYHUXUFcIfQn2bWzyL6D82f74GpZGdlDafPMnAozQsDYMO\r\nOq8D9zV7yIVR1fObnBtNHsSAj3TjBqHy862WfdbfCH9+eEmcjsvQ1DmheXh/\r\n3UTRbHAAb93poFU1PmSOakT7UEWf2ugsAH931a1iBeIoVVnD2LKmaLzyb7ed\r\nlFpvTZ4ovaAkBm6pl/WUZm/U1E7PMwEUvFQUb6FocZgG9kSE7D894w5M5T85\r\nEF1+TMJuqifGF40/QVkqt/l0PATuJaFtAqM=\r\n=4/Vk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"781a4c78770587fd97c25633bf9f137081c35bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.920d8a79e.0","@material/base":"15.0.0-canary.920d8a79e.0","@material/theme":"15.0.0-canary.920d8a79e.0","@material/ripple":"15.0.0-canary.920d8a79e.0","@material/typography":"15.0.0-canary.920d8a79e.0","@material/feature-targeting":"15.0.0-canary.920d8a79e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.920d8a79e.0_1662063665357_0.7648374605907904","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/form-field","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.c363f267b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b48997af833d6e219375fc029231da14934f1d6c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.c363f267b.0.tgz","fileCount":33,"integrity":"sha512-QJ6ZZmtsF7IpFIIviEqg/wQTL89rCU7lWDb/fEtQIgux6hZTyZQBiRsL9Ou/myceXPuQxry2iomCPbPS+Ehlug==","signatures":[{"sig":"MEUCIQCOi8gSVt72vs123LM8Uspn2Yh8WKY8519IkZlOvchhYQIgQnyGHeY4s4KSQtbJoienVqF+Ln3vUCP5tc2XCv+QfPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESGfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqb6RAAgsQMjEGY95rFBnm9LtyFImMZX+apGG/q0UlsT/WWdrK/MAl1\r\nN5MozDks2yRDbsYYFV6FDyAImuFQmDY00cwxtyQYijTx1wUAZVkmmp/AMMrR\r\nY5bkIEsdQmTF8BzUCPmG4XH0lYEIBin4cI89EHnIL+CRdFHmzNW2N53nUvf/\r\n+rSg58x++WRLQW8vNCEhow8wG+ulkerazOR3sBzAjlMQwwMDFUc6bye8MnIY\r\n5pCceVEuwGV51CpzO0VBmg8YviVTI0Cv3B0RYfbqhmmsPYUdcqjWhXRhgetv\r\nWs3HyzwNlMezsxDxb9lqypenN7+P97jDZheVebcHTEM3U5FxrEvviwF94gDE\r\nxoh65sz+Kozo8SJFnArF6fCN/LI44411WjRfTXPsW4uqLysHtA8RHbN7qUKY\r\nhYE8XsBZmVLLyacpiatukYzP8/xBiN13YdD8ldirO/gaZHxKXfCu4tGBO7GY\r\nOyLB6SVzcXPskGD76P+Q3MTUvIY7ZD0qJ8L3gJ8OegycNHgnPsceaVMlX0xy\r\n21pzfiWw1R3CxDfXhO6z1oeNGjM2UU/IHMaoz2tI+fRaU0tPlQ7mrf151LHK\r\n9VmjncJ6QYjtzNYN1wvRRmsmMiupAT/vwpaFQaHVAB/qbw2SvwsbcHbUu2Uc\r\n/v0U7MF3MWjQ+6rnnWsC9HkHvS95JO3zUs4=\r\n=jy/Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6e2ef624f85a84b5510b55933f017db57797f611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c363f267b.0","@material/base":"15.0.0-canary.c363f267b.0","@material/theme":"15.0.0-canary.c363f267b.0","@material/ripple":"15.0.0-canary.c363f267b.0","@material/typography":"15.0.0-canary.c363f267b.0","@material/feature-targeting":"15.0.0-canary.c363f267b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.c363f267b.0_1662067102891_0.9685957531007265","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/form-field","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a4eb4937a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"128c9e9e337f0f3635efd72f0d02cbc48a0f4a9c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a4eb4937a.0.tgz","fileCount":33,"integrity":"sha512-OXui6vsTbF4IRUSQATdJuYR+Z521bSYJn8pgTj3Yg4VtrDSozYG5UgRIeYerno4hLcJwmj+mqnuhZuhOHYR+ng==","signatures":[{"sig":"MEUCIAn74ow9UCVI5xEO77QyNRZPKiv7xKC+w0R/9E9bGANTAiEA84vZ8GbhjBaznPPw7A/epxvzOdzmWE6/SDudFb+tEcY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF49KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5Sw/+IQr1QYEN3slVZdw1k10/4S59snAUaydLfziYykmLtUY4+hDz\r\npT/tCfplI0jkLi8vO1KD8KYr6T/2mQ8zfQuIYD97SHvKke2owqD/xdqxAdAh\r\njLwqT1CP9mpGNW6ux8jK/mLM2wOfojyWjGRd3m3ahav2Bu1M8gnLAbOKx8XO\r\ncceN3GOixLwi/G7BD6jFArpd6mX2pmKlEcyytqf6vq2qEZoDkKstRU9336fz\r\nge+Bav6xXxRn4Pu32FI6mw6UpSyOmVQJjIuHiA72vvHgKKgzrMPtCH4KFRpz\r\nztpijjvbtVicP3UmZTk9uOgzF53DgyKdcjAYVNi6YC5NCUT7uDcYDjCkyAIu\r\n6v+mvUhUJZU2lCa/1YhcOouslTYcD/wjW8GG5pUp63YhlpEUZCSp2+zvqJpY\r\n+OE6rQa3ve3V76SpHcrP5mh/xxzkQVcOHWcZyZC2AcJXoG8fZEmTkyONDNPg\r\n67M7pVVA2vyQ/vb8b3eDzgT8XD0Gz4vjNIhzr+2g7mAcJShT47YGb7IuW6BB\r\nz4P6UibpK0io2Up+ElwuFou1mvnLxsuk/WoKdLxk/cQXDny62LEUVRNvM34r\r\nAtFs+JeQSPSwhBBbPuCfewDWUQHV2XPVX6TT2f6Vts6t6kcr9VT5787sANWQ\r\nXTd2tMkUFNWzayTnl1ceckgTcskzV4IRZQs=\r\n=RH0W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cc03915314119934676831cd7a244f70e12dd2c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a4eb4937a.0","@material/base":"15.0.0-canary.a4eb4937a.0","@material/theme":"15.0.0-canary.a4eb4937a.0","@material/ripple":"15.0.0-canary.a4eb4937a.0","@material/typography":"15.0.0-canary.a4eb4937a.0","@material/feature-targeting":"15.0.0-canary.a4eb4937a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a4eb4937a.0_1662488394687_0.8891132377616182","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/form-field","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.4299717da.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"007eca6ef46c5a731f960880935c96550f7dfc0b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.4299717da.0.tgz","fileCount":33,"integrity":"sha512-kwQJJQVEZsDQMjJevIRFVTNwGD6HDMM1113vlDpJrLH+LCAHCHKWNWd6SsrV6fUtDb7E8RPN/dlBEVpD9AtnVA==","signatures":[{"sig":"MEYCIQC5DuexfiFeXNgI1na5E6scMHLO5b5rXd8t6E53GpL9nwIhANk0r3yqfVsX1nnfd6nuoKlOH4dcoJ5YdoMtFLdWvQZ+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMO5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprOg//Qmi6pcs1vtXXMwDYAzNvg6meAVtHDaDS2yf4ALqWB+3c5SsT\r\nUAC9+xIk7VNSRyby+x6+bG9oVxUuDXgGjeIQa6SmphOW13MZ0g+MEAo27qaY\r\nFEPxbvqmIOC/W5gblyohDqUMXCOi4UIO6Pmd1MUau3LidsvmYZZIspwg0TQ2\r\nATsqMS6tpQn9He6xW5vKbeA3qB6YrJu4XJfXkzovzG3HcfZ/Va7LDjamAhI1\r\nIEclCEGA/1wfZuV+8rDrwp+IW3o5jUq8f62NrYEyGdnPpJ8OmxJozm7ULl8Z\r\n9gfYIuYJzbVjy5dCQVtdJz6G1QPZ2ogPx7P37u0jfT3yx5bwEScMm4HQcwRl\r\nvj/WKxzFcdjgHlcK19V68Oj6CGLT4bZmlwJ83hzn5VfY5IXx8rDIZT1KtF1c\r\ns715j+aTaeXZNwjMnYdkBxxIF5no+CJBqU64oxwNuJ7BWwUVYE1W2reZHlDB\r\nAaV8MnKnCBiU4yUwBGHp8POCwVxIvTW17WmErhvMFzppU0STIs1ly2M6yLCZ\r\n2urbpcUmbikqf/CRpdFuNhBdcpmXooFJIsDG7USYbZCdO6B/aKNuqjm6qkM9\r\nzT62Oz2orykcnsPCWegEwZEhvZOu2NMoglu8Dg4l29THnagARS0nezWdYHHa\r\nazlYprIKlQW2x8YoITGVvCN7YiRmEc7/BGw=\r\n=GS0l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"22082634ffad1ea812192e5ac62786a8ef47aa81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4299717da.0","@material/base":"15.0.0-canary.4299717da.0","@material/theme":"15.0.0-canary.4299717da.0","@material/ripple":"15.0.0-canary.4299717da.0","@material/typography":"15.0.0-canary.4299717da.0","@material/feature-targeting":"15.0.0-canary.4299717da.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.4299717da.0_1662567353644_0.836646573287821","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/form-field","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.fa7d8d44b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"784b60525a25817e564452bb47ba8c2729d4cbf1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":33,"integrity":"sha512-GZaTN2+bfRT/2r+uGrgx3qgVq+VfbX6PrdOrgEpAcej8SQyNiMuUUKP4vSeSdXgODR/9pY20uTycZBl4fzMmsw==","signatures":[{"sig":"MEQCIFyZQ5ecpwRAYyj+15ZZRUinulP7Mjd7jig9+iHSdvjHAiAg5lXzzu1QhQfYUENpcua1hYOJyaiLZ8yYCowSxOEiqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO6qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRwg/9GlV3TlkFGXvIx7h+PTpLRv9De9YeMMgOpVd7DB923DMAiG81\r\nlVnmcslN9MITjV/xPFhZoO7iqTLMWHmpV8kOAwDsgZF8RlcrEreeJGUA70kQ\r\nXBsswWwOnFjLXbt49MGA5BFt8APUXwA+gc/Mitxs/etb4eMWXTug1bjS1IoS\r\nT5TyD5QF+AYmBv9KXeJQeLcssk3P8eNqb9EzHe1a0J2o6XW/xgg+jcG5JovY\r\nD+HWxvVheKD+k7fMKLBhreNFiZUCE2RJ/js9fXAIW4tu9HsdZuXpWVOmPC8Q\r\n1G4s2NHjlBJtX9X1+5FAsI1Fs78Nw5t9YSYQsh+GB87AbDxNnMk3hF8TBhnF\r\nzHH4qV/O8/IHAW9SJXymhChQdPuCU7Qa6rybtdFWEmENisvwWDJjFW4Z5LaL\r\nFSchMkmdIn7cuX3BhhemBDIlIqjX0Tzu/ez3XvcJ7oE4xVsON/BC6ECGrPUY\r\nwrn/Wp6KJzilPyUbneJiMRSf6qffVnkZ3AQDpoGsE+VCyn6R+BKNM/iOom+x\r\nrPLlhKIJ0DSLOdh+r173JfPdVVNoyjj3raBycDWRsEF17yu7hMaBG7OSMUgB\r\n1ui6N+M7AroZzkVzPoFdBzJUlO4jzAYnaUhJ03d4EfVDmkarIXykitya7q4k\r\nlE7Ibi25YezEX0GubCX4ClceEnvzQJk2dik=\r\n=qKvg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6fc828292e73ec2f8aa4332891628e90f4586658","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fa7d8d44b.0","@material/base":"15.0.0-canary.fa7d8d44b.0","@material/theme":"15.0.0-canary.fa7d8d44b.0","@material/ripple":"15.0.0-canary.fa7d8d44b.0","@material/typography":"15.0.0-canary.fa7d8d44b.0","@material/feature-targeting":"15.0.0-canary.fa7d8d44b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.fa7d8d44b.0_1662578345666_0.4625095001698425","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/form-field","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a40e3c768.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b9c38df31a4f22933b62eed0e307db204267206","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a40e3c768.0.tgz","fileCount":33,"integrity":"sha512-QLwYPZ07Yh0DwsVdJS2wnJmzfBP9kvH9MWBWSZA1q59tSaTRfEH+CEJEo5M3eoYJjnKfzvTm5dBymkusNBOWkA==","signatures":[{"sig":"MEQCIC1jZunCtXtKDU6YBkRTKHi7vev/lPl6+0NDvFPxdCd1AiBk0Xl8y2aVJGI0o4GGeui6ynC+Rb1ELeCYqV4v2PBc6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5wzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrO7w//dELwUwG6Ez/ubRjnxmXESMcy2XDIe5Wh3itw9rdWeh92P485\r\n1fnEkCP+sEP5HiTPzwzOKO/jHNWOpYNKbaqBKr8dK3M1pR11AK2dGdbPIgAP\r\nVcsaTgVAqCT3+YveFoHEnP1pRSrl8frp5c0QuVRSwnAth5XXwZIE45tuBtCB\r\nN8VEBEuA/eqLMd2Q9/HuQidWccAQ3jUjuzcwgIYBLLry22xqWHgAFLMKKmee\r\nZ/l0Y8wugc9hCNjn5dl7mf5zfluGEMOHNIbl4I/p7LOygOgypX2nXqxHI+2I\r\nBk6cVUqBFRn7jkgpKyPIpTwW/uAAnJhLNudvJEhuK64UEvJVliLLBKm5RFAt\r\nUS+pWWfm1sOXCWaxleYAcdn5/6UDllw3jibY5ILSwQ9a69DhKM4+QraK0ly4\r\nrDDrcJkt/z94+dvhu+5qQHbRF6rH6PGlttsiYNkmzfPq9CRpQyHGvCp65yKM\r\nHxZrIngM5FvL3wSbfGIyUJ8cxwDxnthT9S2qzmolhiqQPYo/ZRSeMLM9OkYn\r\n04QXRkIf/tJcFyyojvNHwh4g8T9/HJzOsyqprjPHfnS4IVCwMuKoTwXEciCH\r\nX0zSr1AkxhGHDC1NGHeonYKor1prQB8Ki+TNjeqvH/zHkAUcWtNc8GLyRzPD\r\n66qIgoBUWFqrfEnr5SeKo8lm4h4Z8ONUPQ0=\r\n=k4qu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"33ff1e71e12298ba7158884edffecc83f0055913","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a40e3c768.0","@material/base":"15.0.0-canary.a40e3c768.0","@material/theme":"15.0.0-canary.a40e3c768.0","@material/ripple":"15.0.0-canary.a40e3c768.0","@material/typography":"15.0.0-canary.a40e3c768.0","@material/feature-targeting":"15.0.0-canary.a40e3c768.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a40e3c768.0_1662753842889_0.0740893197058794","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/form-field","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.18cdc9a00.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4cea622247ffdb4e8d8f4465e4bdf36869fbf82","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.18cdc9a00.0.tgz","fileCount":33,"integrity":"sha512-b6beCVgpPTi2rIj0RI83Ts+miQAIf2RGIgOv0au7or6giioWA7pY2ylZJTOFtIN0xP17GK8Qfld87WJjOOHEhg==","signatures":[{"sig":"MEYCIQDyiq6RW7TPjpCzcatX5Y12J5VkTQ/Hb1ubshoj77OCGwIhAO/9utu1LKzIigT3XkuNXpvSEkYlzSYZKYcTEESYHw4G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH56GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo38Q/9GM07tQewLoUh0jmQ6pH5oK2kYuGu3/q5xqBJmHUsFpn8w+bU\r\nkLFkesOR5TgOYnzoRyfYxUGnW7YlKEb34g8xiONLEz0i2RinIh2mkDL6EmQd\r\nQ32xACz3yqWtTGveDOKjoaYOJSsIAjytewpJ6mD4qX4siqfObG2p4jgDXCeh\r\nY9+gHvv0qCRhYJskHH/f+g7gPsUPQuk3+Dz2LMggsLIXvzD6TK0Q2rSPjjlx\r\nh7Xy28X2fflAqw4iG7IehaW+m7vFivmcpsFc9kXIgkKUlRU5KytJzCt7bDQ7\r\nL3qLLMDfLyfST1IwQK2Miau0XrWkMwsn/GCynjTqspiZJWX0Jy1UheEmfb2u\r\nAY/YwHoimwYD9orVy6IGPFH3pXqBeqpfp4xb+iM6V0gu1y/tU5EQD58Wqwbb\r\np7CtUbFg99ngjqg6bzt+odZUu1ZppkstphF33ZnS6dQdMNWZJkKgR6VZ3gHX\r\nA149dlb5nzmrx06QaC/qs8LqxLOiP8HFKVEBa4yy4ZtjqdM4GRHaBg2aPw4T\r\n+5wP+Z5etBZJWF3dRZI/fgp10d9UhxeyFKeZFyS/3Gh0PU/D60gSJ0o5UCs7\r\nqPLRLvrP1QwxTb2Y73AZbNkHelWF6C9Crq+YmOKaHuyTzVT9PRIOKXifIxuD\r\nyGXBOhOoMTihxvNPiGXwBQBsPUs4wWRERWg=\r\n=8UQ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"85b7dc2034fbd68e480826d635d6d061ba62d3ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.18cdc9a00.0","@material/base":"15.0.0-canary.18cdc9a00.0","@material/theme":"15.0.0-canary.18cdc9a00.0","@material/ripple":"15.0.0-canary.18cdc9a00.0","@material/typography":"15.0.0-canary.18cdc9a00.0","@material/feature-targeting":"15.0.0-canary.18cdc9a00.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.18cdc9a00.0_1663016582796_0.940067556710044","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/form-field","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.7ab3cd3c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9279e2b85f17f4b1fb025e07f5dd1f0fc2176065","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":33,"integrity":"sha512-/OsrhvAxCSKtedPvAifaO7oTijcOv+OgyqJdp2HalGERGZq/rfEPqHGNF7oPtlceNxBpuH95GKNVN35lEA4Bmw==","signatures":[{"sig":"MEQCIA/MFz3mqvfbsdZ+YNFe5iFOcbFZZ27W4vvXgaZkImP4AiA2GdXqUM5lslH08wWIRFgoUe+ocRMA2ejRS7AWqwGbnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQaWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhHA//c+Fm7AMfrjgPa5wMBsYY1Pd6Aj+6xE0BFFs0f0U/kTTKsBmO\r\nLQOeeGiENNKzQsQNhYnEuUcAz9xBsBXwGnArJZQeNysnLwaFeWieq7Jr2nNJ\r\n/fTVpw7wJT2C4ROndrNd8lboeGldzVWDrA11H3W0c2/vzCbpH+QLg5eSntYY\r\nMuX4N1VSVPU5rBS11wAy2f07Vp0Mm6PwtQKWGcquNbD0FTKlW2dWIkyEqGai\r\nu9JzAfwVFzHMjXhV0PU20dzJnsP/LFG48mwwXptBPwKh+UN9lHp7+QGiNyTo\r\n+2vUYB2k0afvEnHC0c1PPVKJS9AA74C2ZyfcwrZkWJbXEUPUSClI3s5LZtRH\r\nMZ4BFLHTKUzMRxzsx3IAoClKiABehT/8yHMHmvSeos6Nc0iLl9q3lx5rmgmB\r\nXOf0Ql2h1OyFFGSgbZiNJFfDT2mpO61byVzkrmwTUuElibdjj6yIxKNXjY3P\r\nJACWN4lHTmRwjwUy433h2UtXAssyqnUoezRfTYFKjxG18ZQRPIGPJku54fOn\r\n7AJbfFPE2LIABId2B55Rt7TCJUBHIbzA9I+eLSyW1uSTyuHRZz7K4us/sEKd\r\n331WAirt+p63kp+b6V70NDmgG67JUgqBGH6zN8aiOiP7fGsnzk6wnnVdX029\r\nwRx+ZEWcZr4cs6hzbeS+BhhP9erzOIV/pYc=\r\n=oQ23\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5e840f2c9b221706de7ff81194e71da2b68b82f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7ab3cd3c8.0","@material/base":"15.0.0-canary.7ab3cd3c8.0","@material/theme":"15.0.0-canary.7ab3cd3c8.0","@material/ripple":"15.0.0-canary.7ab3cd3c8.0","@material/typography":"15.0.0-canary.7ab3cd3c8.0","@material/feature-targeting":"15.0.0-canary.7ab3cd3c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.7ab3cd3c8.0_1663108758347_0.8905510496944724","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/form-field","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.2860d244d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f49ac451515883869b2c821ac93239a950ab1025","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.2860d244d.0.tgz","fileCount":33,"integrity":"sha512-3wgu2KGmeEQRfb8o96bq+XE+kWt66MpKCYZPg5MSsdKuyimaUxW15KrYl8fA2EJcBbBjg+1YwUFbDa0Tuenr3g==","signatures":[{"sig":"MEUCIENEEzdcAODWX5sVLgroeMRpW2xrnSMtII5iX+Y89VwrAiEAmSo0vJeEGIiN7u6X8RFDO428LrK5/tVWTOYAp+jEtas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP7BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrxaw/8D1AM3ax+hCeRQtzBVXrPOAYKgeQrSe/t2P36KkGOyoaxg+ki\r\nQkCU7q/4g8NIg10xt4POKUPQtMZ8D69CdFAT78MvoP0BegYHhm7nLXLdlQXJ\r\nTsCUEcNmp9hbbVwIK9ncspMpw4Vwl/cgBpp0j4V9LWYJOyRH13liYXpZmbYm\r\nQ0DJpytgrJdVXkJMOizjkcZdpslb+Mh8inY9Za+t9oy22pSM0NHNgW4y3Kyn\r\nGa3Pal3baVbJRjqvhljghmh18sr0Wn5xy0BK/MfkzRq+AjaR5y6TNY+/0tlR\r\nf0RwNjigpcofIppTc3OFGkyxVmh6REHnQBvs2hpMbzHvHmnRcEqhf55jo2hY\r\nBAHwjJ320z8ha1eBWXNG8a+kDXerwHqHvey5/8nphBL2ryI89Hx3mY7pH7d7\r\nZF8p7ADIoP6L/7S1KNYx4pW5TvcSOjGv4gqxV5n4Fk3jId1M7iy8GofHLciU\r\n/CMRU5YdBQw44bGoci/oiL5o2iJLEzlp2M7S8u98z73EolPSIYtQO2+Uvwcr\r\noBqKZYbfiSYrsex9DOqqmpXXXcX6zJ306kl8UBQqtzu5UtcXWekeOgDxQE/S\r\nrdtswq8a0YzgNP4kULGvcNpPAZ0pnEzwJb5LXAl1xeQPhZ90JJJtrYq7h/Xo\r\nrD9yNeFRZTNOR8zQs/c0v9dDL+WiBJ/eRug=\r\n=NWMX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"992b4ddc7340e4e4231d1001d68229e8911eeba5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2860d244d.0","@material/base":"15.0.0-canary.2860d244d.0","@material/theme":"15.0.0-canary.2860d244d.0","@material/ripple":"15.0.0-canary.2860d244d.0","@material/typography":"15.0.0-canary.2860d244d.0","@material/feature-targeting":"15.0.0-canary.2860d244d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.2860d244d.0_1663368896841_0.2625607289179437","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/form-field","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.e8726533c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21ab94481ccfba4ee387133b5746de41b0145834","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.e8726533c.0.tgz","fileCount":33,"integrity":"sha512-idH5DPd600GyavJM4xVIRJUX82YwZfO6g+CqYrZMzzHj54vbqKD9kFeORFwLnAt/4ZIjyAS+pfgztj13rUP83Q==","signatures":[{"sig":"MEYCIQCBV7JYILASqs0fz8RBgDeK0+4SzRDleNfoLWwrQLpxuwIhAPKnC+/+lwTp9kcpDCB0RzSFw5es+ICjfm/QnNSSOS77","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKh/sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWNQ/+JGXJR3Da6tOxcr11QiPwZtj5vRffHrXriKVLN/QlSXR2P/NU\r\nhxy6pymp+DPoEAWoM65jebdApR3j5EIiyZMpaVnwZLlZkXrQHOOQN+jTUPlh\r\nfD6gcU700uj20He1ITGb7yU5bpxC1ysNk8s85u828mzgwpZ+y5L6y8WDi505\r\nl4DHJrNaR28qQaQDBy+FENFVxwW/sKcscHRqX31s3Ogtsu28NMTVA7V2dY8B\r\ngVARf5KtpajME6mVxi0xXPZzWMSOhqcL+NgsVV3tNLmOWThtpMuxzP1WStEF\r\nKKo3DnQgUFom7YLFj6GNel+I3kmIQSECW0hvsSKD/Hr/9LqmPFyb/yb+HOMV\r\ngTJWnxwQBXymd8zq+wNQKGqNocYHEK90eCe0xznKZoL2At3UJ5bso071PSAK\r\nNkQJ0Fs6uUBYUEVxBiPus36WXzniTyQ27kUeUNQU5eHCBu43q83G955LSceB\r\nal81KokhA6ZsA+i3A1Jixpwx6Tax+YBQW9sHZPe5jYOF9cZYI5/KqbFcZBu3\r\n8K5lxfkVXFfFUaSeeNahoIo7L90lnTxsXyqbRj+7mj+bvKYqd/Oi+a4krfR6\r\nXWTH0R9er8DOBjecy7hoIi+MGM0haIE/GKsWVw9UXd53MA/favyTqlgFiWo1\r\nJlqAoubW5aosup37FTfAXfVGRHUXaPF7Ipw=\r\n=/OjV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b85a9f4d1ad6e30de8175562c0093248848c2598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e8726533c.0","@material/base":"15.0.0-canary.e8726533c.0","@material/theme":"15.0.0-canary.e8726533c.0","@material/ripple":"15.0.0-canary.e8726533c.0","@material/typography":"15.0.0-canary.e8726533c.0","@material/feature-targeting":"15.0.0-canary.e8726533c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.e8726533c.0_1663705068354_0.8414096834493767","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/form-field","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.00d8de0aa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e989259406a59d970ff20c0d3f8d68aa61fc740f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.00d8de0aa.0.tgz","fileCount":33,"integrity":"sha512-08NMVMJfN+6MnYZoc9hDsr96rCfv7piNVsqwmkCF4dy8+3BUSbVlaRWoEEe3rGX6KNYCTcADx0o9YcLdIEc/oQ==","signatures":[{"sig":"MEUCIQCQ/o4sBB97ZHzbvwcCXxXZHfhqbDa19uRmK6WcMNuizQIgBS3jNsGPkmwgq7+Bckyq5WlINM6xRKujqxVm8soun1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKyutACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+8Q//blzOapwrf8Ng/FLw9AkcdXiyptDQm4fztrJFiaJrC2QzRWEz\r\n9SCqvv9/a7X4oXVfOOqkdp8hGHXfj63TDb2CwwVisHsRon6utB/liVZRVfB/\r\nYCsDsnTIScSJOy24HsN6XHoaWPwtAwTckD6GG9UsjkoCGCy0vFDCi6oDQIXC\r\n6CTHzo6wjauZggMy663HQgRVbZ13DLCxQ5vLqk+4q7ump9sd+9LP8DhclH73\r\naObIVUaYMsdHmtQKQAnAft0L7v89wufJzAeixoT1eA3SDKwoTb+ofBzRAwm1\r\nPs7C2pnPF0yvdwmtdM+pQ66mkROqjqrwBhW5I1mMuXR92lp2bCPa9YcK+rmy\r\nxRT+0ZoMJYv1K+qh1tZaH0kt+m2sOZh0bCs7TbHUrc293mLGfL8MAw8Cgkin\r\nIOI0zPhi9qdcJRUlrEo3cOWXj9BJPE0zsnj8fcRgFfOFH6srSs3W+VjhIGJe\r\n8ivAlWpP13UDC5/PQsqSgnwgFiLR+h6pqcPeqmm9sHMlOgcngMQHgXedpkek\r\nv0opEFQeu0nT7A5G3GyGnoTeNRasys95UifX6xSu1me1eVKW9Eg94Qhhw7vy\r\nrmlz0p2Wi1pJuuu2ZIQA78USKs+C5WvZdmeqQawXk39NI6/AXXiWB2WBgGMM\r\n8b4zCvQ0Y03Gv/h+Cxl2j826EkWd0EU51Jg=\r\n=RG1L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0be0806991396e042fbbfb14ac3ad622770647cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.00d8de0aa.0","@material/base":"15.0.0-canary.00d8de0aa.0","@material/theme":"15.0.0-canary.00d8de0aa.0","@material/ripple":"15.0.0-canary.00d8de0aa.0","@material/typography":"15.0.0-canary.00d8de0aa.0","@material/feature-targeting":"15.0.0-canary.00d8de0aa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.00d8de0aa.0_1663773613716_0.39458619079665147","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/form-field","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.271aedc30.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e16ac47c016fe5592d23bf9f4a38a71f2f5a191","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.271aedc30.0.tgz","fileCount":33,"integrity":"sha512-uDIEsA6f9GLPUQTjPk3/EvxsdsCdQm0gSHAy/MUMhZBR5WNv15lecMR6DcBzRHZXs8/9Tfl80bKlrihvHPowFA==","signatures":[{"sig":"MEUCIQDGnAkoBk5d6suSJpmWD+A33jIpknCEIXgzRcmKFHK4IgIgKsIfkmS8fD+dGnS/DYFdxtCmaJeZtAg7h8huX8aQecw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy9jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCMQ//Z4Zt++GVslNpQfU5nB9fjdPpgKyIJTXSwGfofPYnQszIUouq\r\nBo+5yQPcseMS5lRU96NGv5C0VKzb8PcWOh15761LIFuw/D762iH+Mne3Wvfl\r\nQ/3r/BdLdN/JHAv2jp7xgWl5Jh8B00aZGPqNu6juL6cDg9MAoYz/ZxCtWjkH\r\nDQFtzGzLlf9DGaKCts/hniQNsmZVfn5lb91OKJg+KmwZ/Mb8/GWz/KQBTNXz\r\nWqeeULS37z8Y6eTjVTXpvfbY+WndRFdIM2HtAUaj2jIyVH+DeAch35PU3f/O\r\nPMVMzXHCPv4yTdrWFwZLrj9BquQuyI7+ILOwWyXd5Q5ben4+6V5smDqyLipa\r\n8MPTaD/VdPSGRqXPhRdZlsQv8X8p1rXEpsUmQPHwJLxSYETYrFeKgOJDH3qY\r\nseqAIWoKDN7rZhtG3X8AduFANC0uQn+r+/CMaDQ5KpXZiLrz4S76mslqNhGy\r\nBBBepcXJwfxJtVct2dD+B6tvdUYtn0amdlBtzwxvFwDF+wcb8qBTEVkMS6BY\r\nYFmjUnfy+PMuof+WzjYDD3WvcwbXJK2agd9GAbBaHr/BQKCIFRCGHf5s3Vhi\r\n8VGi0+VVglItYGdLAh731LSkMrEGkPdxp5fLbh2JposMuxVW1COPnyDHkhtP\r\nPs5yh5TO6KIfepKHn2xcJ8suy9bRbvsPum4=\r\n=jXlS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4972da221d6f097e904fd1a001de647e0e185749","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.271aedc30.0","@material/base":"15.0.0-canary.271aedc30.0","@material/theme":"15.0.0-canary.271aedc30.0","@material/ripple":"15.0.0-canary.271aedc30.0","@material/typography":"15.0.0-canary.271aedc30.0","@material/feature-targeting":"15.0.0-canary.271aedc30.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.271aedc30.0_1663774563565_0.9347435008786571","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f17ff2cb.0":{"name":"@material/form-field","version":"15.0.0-canary.9f17ff2cb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.9f17ff2cb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"225ad604da88ebe60847a09e9dd9f08bec8c395e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.9f17ff2cb.0.tgz","fileCount":33,"integrity":"sha512-V848JB0cdFU7UONKWvx4/TwyHSNy01Lb9QOXwGAFRLsBGIpeO2ULlJWMIn4RbIguICptP9qQ6zwzJnow5QCVTw==","signatures":[{"sig":"MEUCIQC2pVS/10dEsH2fdysfg08+bCVriDjMV8RsUsQWSs/FEQIgTl3OoTr2YolsJVSMsyWZaHvtjqNQEGqBjwJqmz3Da3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjK1MVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/Aw//b52jQFxfbcpgBrENSOX5WpVsoet7MAYSvFRSwgC6r8fO/kzW\r\nwcpJwfKeqhY306+fM6ilK1c9L44zcHQutKo1HZIrnFLCUkBZfqQr0Hrw9EFU\r\nSqUFiaMKto3/qgxWyhfQpksS7Book0glEoflVYFXYGihxJw0p8Uixdvlz6IO\r\nOpngYYnRWeuw7MFJDx0Bwz62rTd2t3y5zeGuy7dnLPtJCiJ9A3Aph50og8sR\r\nBSOwn1PvVRt0cINbqO0nM3NzFrwWT7YmH5rWICiVUdVC3oUL1p1B2LrWZx8P\r\nM7FqbSuLxk/bk1X9M8SVqgFTB14LC7nF7FbW/vLS62GQtVkwunZV3kbvtCVV\r\nY3BQAwZEc3TA10WwkLaBoITK5tHWNYn+A5C+JsT6SzKMy73B3WNhbnq5Llwi\r\njds7ejIoSDdw80ns+p7NnnC4/EwKUyqAcLjHnH3KbUG7z4dXCVK5qwwuj5vX\r\nGdTY38c4TM2w2yPAW74CUTmfHHtKwtC/hmYvdVJLZGw1UnM8REpYg9vZ0+MA\r\nI3J0WnoL34la6pgPGvtzJu4vfwCwmjckDbs+F1ahWVpGnTxf7bScBbUocF6E\r\nm+xDHKnrLAuTpNQC5GfIgfHns3y/fNUMT66ZS3HKhO/DW73WgDw8/fkNzKtH\r\n1wjnsXkj1OXzDv3F7HCQTlBh7bYzD8PNdps=\r\n=saiC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"34e73eebdcebc0a0b475c8b2f9fa0dd4a4c3397e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9f17ff2cb.0","@material/base":"15.0.0-canary.9f17ff2cb.0","@material/theme":"15.0.0-canary.9f17ff2cb.0","@material/ripple":"15.0.0-canary.9f17ff2cb.0","@material/typography":"15.0.0-canary.9f17ff2cb.0","@material/feature-targeting":"15.0.0-canary.9f17ff2cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.9f17ff2cb.0_1663783700820_0.417868382777689","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/form-field","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.d3344c16f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1eccc9ece6b6cba3ffa1bcba5ccf9b31dfebf4fa","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.d3344c16f.0.tgz","fileCount":33,"integrity":"sha512-fNe2D85T8BfponAyM4K+BCkLRWNu3leG1RtGBdHvi/cUNtSxF2WbB87ICGTdUDe8TR8rF6r+1bti69c3HcbpvA==","signatures":[{"sig":"MEUCIF8JFWUjBIYrUJGoKrJXT1cnrLDabEfTvv59YDsyLxPcAiEA/nwdBt1mRoSTkkgOGl5I/kvBf2w2jXlw/G1mQjwammY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCnPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwaA//faCWHmKeoF2PrNx94ZbASqY7xxO8zb6eccVrIbjYKPSkyI4z\r\nPG/EeHNRucV2G7BQ3KAyk8/cGBDiGVpK7TAxkbf325EtMbQWFj9HU8W9VLup\r\nShNhdVSIcz1MG5S9YkQ6lEQF+fbgWrSmddnaIZpJPCOBZ7RnVar35No6bY5T\r\n51a/OcL3YsudLJhA/kZ4a0c/5f1aUM51GX7VQ14cmRCy/xLBMTv/BzW1qu9n\r\nCWfNgUNk3jvNuzypoYrAPKo5Xa+kGUqGSHuZFhDCj0XNQLKDZE1yepBQX7nO\r\nhg/Ba7gAhJRsrwvQJ5p1g7JzoGfemv5cV+BQ6p1nTG1m/4U/5X9ciFUEDta6\r\nKCl+9itAZx1coIo9GRtqGSkrW1SNVx/7GETbHoW99phmY5OSc9BtbLhr1mvn\r\ntSjCTZPb8QsvSEEDoZw/Zi65nmMqdLOX3lFG/fy4FuIHUg9phKC9bBNBi6ie\r\nGd61Ve30M2/7BprSEaNxLWcBh+HT6ziGQufV6iKJfDQawZTezUr8HMA9Bn90\r\n0MCCpLFqvvhqX7cdtiLGt8XWFynbJi4FcTqBf1A6us1LzTLJfMrewfxnomtw\r\n7+xqVPrqgnog6nnjuJMqMHcxoveJGobLitmPjVRzojiUmQRiBaA16vJajQQC\r\nXJFWXIjHcLIZ1JgphNAQEafRFK859SCWoHA=\r\n=LGEm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e0a8dfcab6df46c9fcc9969a6dba1f4fe48e028c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d3344c16f.0","@material/base":"15.0.0-canary.d3344c16f.0","@material/theme":"15.0.0-canary.d3344c16f.0","@material/ripple":"15.0.0-canary.d3344c16f.0","@material/typography":"15.0.0-canary.d3344c16f.0","@material/feature-targeting":"15.0.0-canary.d3344c16f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.d3344c16f.0_1663838671340_0.45907863852254405","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/form-field","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.94f20ccb8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a35752c7d8de314526da784947f042329ff5694","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.94f20ccb8.0.tgz","fileCount":33,"integrity":"sha512-+iuMdHPffkhE73cW2V4J54RlwnTasxEsEOWVi1gE/3WmD1JWNphCGYFF/fywtw3X2RSDb116riJ1Gq/g0hcmyg==","signatures":[{"sig":"MEYCIQCAZHnwSUMMKnIGJPeQG9v5BKxENXyvS8Zac4SQrthbUgIhAK2w6FS1jVxz5Rgw9j6t97FynE/RMZIyT+3sgCJ+K18J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMn1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrv6Q//Q0VJRzjyPmi76mSn+aTMQ/K+BeUJ8W7PKh0oUZZV8XIcX3tl\r\nNbl3pFYzmdTMWKE8YFQcGBUaiBwJvlRW2IYHZvV9Unz6XTRcZ9UGLSUBwbY8\r\nwSTp4oxMQqzwYUHQTIBYfeuHOZzdEFp6OWht3WdgxtL8tfSnqWMV7mtQtGd+\r\nlFEc2PnxynXl5lGyWme17FqZEc3EY8Z/9uTqXwZ2NRyLpbS7HJjWblQO1E7S\r\ndlTa5v3tHLuDwpVJwPp0Yb3e5oL5yoa6NPtz4hV9iLGpAsWcxJgJ3EjiZY1e\r\n8ap9+Y3XxqfUnKWt/qgFnDm4NgZKKlUTedV9aBUou7chbX/NXjYam5G0vK3d\r\nXCsVZ13xgCqQRdBv6PGhWMEjAoxwf0FI0pBqN0LJP4bycltiiBzrEDmcUEAX\r\nkFt314EJyQJ4nTQBkII8ou0Yt1RbZ3fkIgAV0/l5P7OaH4Z2YUj2kzdAhP4X\r\ngoivo/9yAbOH4l0s6Wr0XLpPazJvCPeKJ46YE6ILf6CsVYusI6Z6B7cdHunP\r\nyBAIOtcQOZNvKXdAj7W6IbYDJd4ws8MXT3jrKCc/nbr//41DexnujXOmwklR\r\nWQhlgc8iuPk5caqP79facVfFEVtTHRzPLXTniohGNgD4wOzMZxuzgf6N5VoG\r\nTT8Ybdmdde5YgsoaxVNkHnZXCoh0f0WcSnc=\r\n=ERIT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"16225f613437ecef2ed2d760a08046953ecd51ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.94f20ccb8.0","@material/base":"15.0.0-canary.94f20ccb8.0","@material/theme":"15.0.0-canary.94f20ccb8.0","@material/ripple":"15.0.0-canary.94f20ccb8.0","@material/typography":"15.0.0-canary.94f20ccb8.0","@material/feature-targeting":"15.0.0-canary.94f20ccb8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.94f20ccb8.0_1663879669096_0.1933476208054088","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/form-field","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.81e4cb7b2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d0e347eeb35ce87bfe95fa130f146494adab591","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":33,"integrity":"sha512-dbWAcH2hH2Trn2JjJjXYkS0PaUqM6PMKPc4fOpSTv4y0FOQvkpJt0yN4XwV5n4AFp6NgUU+MT0nUnN8toSGLYw==","signatures":[{"sig":"MEQCIBhQqPrHhHMNcmC2UW7xljsQ32WXtWi0zskM+IXmAcBkAiBTnfNTty20WG3n8+QIsLfKfPc9NOY7t1dJjzNki6fLzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcveACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpDA/+NRf4HDBSHja0aiYCA8vvmEV+EDdnAWX+WvkAyz3r7IslP1+N\r\nS7lxmGV48q3mtXpFZXY07YPPHambfNoNl6r1pXw/NECWezruMbPeJlffzeUl\r\nX7F+mZygEvd3Eb6J8k5MLsDL97gkRdw+rB1Q/74hcGA+90f/abSLO1ZrLscU\r\nJrlLAH7t8ZfNa2IJhVJfNyHf4kX/3qyge5h73oVrxooCTLUQDkTpK3O219Ez\r\nvXr7FkUuW5D8y6cU2E8ti+8QGNS5DaRWoi6nj9kt1dvpV0MEzMKKFSY1XJaH\r\n0hh+UstEeH4/8W1D+6r0R4MgrzcXeJgA0pchQFechFJMRA5n4Yw+bW+SQCp7\r\nch0tl9thi6KFzOB5j40paGTPUI0MFHSJWVeGQ17z+yz/o/Y0oad+iV0Wk804\r\netk/QlYCpRvNqiyVTaUUac3koK3bCW0/rZWyJhAE+oUGlesRiIkcq9U9fthR\r\n/Ei0WuRdeB/tomH2yL7FSYhcGSpirKtIMEjgCUdAj/5dfN1CDQ4GrmUjf3Tl\r\ncSDDKHtU1uu9v47xPaUY7K4a7ZqQUAekJAe1DvG1Uezkyn2o37mxgUfCXK57\r\nywBKWe5qNP00yemSQe8JArTdL3woVwkHztCY6ap+5VlnUWTn/n8GLCyuWewX\r\nzdoOXTx54ODOzhfI+qsaGPSieRShrQfrpZU=\r\n=mGRP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"63fefc99b30106d8aae83dccf8e6e8073043a3fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.81e4cb7b2.0","@material/base":"15.0.0-canary.81e4cb7b2.0","@material/theme":"15.0.0-canary.81e4cb7b2.0","@material/ripple":"15.0.0-canary.81e4cb7b2.0","@material/typography":"15.0.0-canary.81e4cb7b2.0","@material/feature-targeting":"15.0.0-canary.81e4cb7b2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.81e4cb7b2.0_1663945694574_0.7340064810491289","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/form-field","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.aa85f9413.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da55a21e6d02baf739cdc886f824e9d19fee7146","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.aa85f9413.0.tgz","fileCount":33,"integrity":"sha512-JFkJW6GjxYPV9Suk8Xm2osQOpa0CAf94kPndWT575PZtYykfGRlioVohK6emdOAqc0Qc74apo9RR8ZPe1ICKrQ==","signatures":[{"sig":"MEUCIQCOPSA21dKfZ441dWYRVvF9Sar4/btiIwTE/4lnWb45nQIgGj8k/ZnA/U5bfWhWZWkdywfcW45CyaU4DgRNr+0eBNU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMefNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoIA//Z0XZAqDaZLp61jmPEw/+COUYnPZvDRpgnU6YY3mutYd1SzvA\r\nhSEkeI5Y1WsHJHQ9iq1eAWKGQb0F8Y6p+7/Dla5I+/kD/M9QUbVRkj27JKaW\r\nAvM3yn+YEFk78VutuAg5/GMsGLXculvr0wIgbETgjzfLliBj4vqfEmp4/QjV\r\nNlraisz95mgZznnZN+UDXEqmO8hJjYPxhs+EfV/ZrWZ6q2WILWRfBsKnw0+D\r\nN31SBwkmkB8FAI1ptqqZC1Qv5tju8vVvrHaaM+tqg9j4feeUqPRjlJwo8Nmf\r\nnE/t+X5diXPMssHzBXMp7L43dpwgp+KDgBfGd9JrynLPH6OxjMaG7jetgkTn\r\niXrZVcwAO2WbL5ozTAbo9BwmPqSw09U9INNyxPXZFobi4sLkpg6wSp5Roquz\r\nOXWWq0uSrR520HqjsmViHClDVGuEPEEYqpDIwG/0qEniT7rE6t4ZlX2IGf4O\r\nnUXvxl/GIAdfhoG0DPXe7SrUy50VMTINnwETF0A8bzFdSduDWB69lbPscmb/\r\nhoc2hIeJSxhX+VoWtV/MXYU16y/A3WQ+P3hLHko7favFpTbfY9LNigdbTbSm\r\nYTDCT2OPn+Xl5qpzENShVo1CZZtcxifYzKzFcv8DNxwQ6yl+8+7sBN44pCaH\r\n/A1s4mJONK8GV47XXya827p2hWyVEzvw8CQ=\r\n=3ZZ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"73f7402d0fd839f22c2c3bca08292a66389f5829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.aa85f9413.0","@material/base":"15.0.0-canary.aa85f9413.0","@material/theme":"15.0.0-canary.aa85f9413.0","@material/ripple":"15.0.0-canary.aa85f9413.0","@material/typography":"15.0.0-canary.aa85f9413.0","@material/feature-targeting":"15.0.0-canary.aa85f9413.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.aa85f9413.0_1664214989719_0.8135268948189016","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/form-field","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.7134a7752.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a0dda7e1d92a1c570b828ee13598c87d255e3b9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.7134a7752.0.tgz","fileCount":33,"integrity":"sha512-pOYVanrrFbUS8ygTne0sVt1lMx9ng9X18+8Te6MTb8i+F/9GvKZS0ay8G5gbZl3P9F3g3OHuQGst4zhhFyeY4Q==","signatures":[{"sig":"MEUCIQCtMdaUH0v2/0YzpSZ+w8k5IPnkdJfMzgjXwqSfBEndvwIgHEe79XOoA4l3B7CUkRZz49T4CwSjf6fvwmq+JP4bVUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiBcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjFw/8DZ2loAJsK7VLSnSI9s+flCCB9NtSSDcBkuY9pPWUGsKC3oNU\r\nVUgSMoSkHdIKjrw1RItFYN1kAF3e2dGip/oW1MBDu4knXXETkTJEUWcCkMac\r\nAgXrvUZLpoIBYADlvZsH5pnmHLpYagFm/RnuRaJPm5ZWJXzNv1jrEzWXfW6g\r\nHXG6KA4GIVRf0Cr/5rjWvhmndZOLIuybzAEmdeB98dolNzbJjYCZyisYH5gZ\r\nVIidXCBuPzHq3mfY+0rht8z2saHWLLn8V+kaVHtBLaPkYnBq0R3Tm3QI0Ert\r\nPoVf1wpcVQR3FPkxN3Y/9aiKSpEQWv8aZMUR4dF0Bj1r5bwUvYY04OsHCqTb\r\nthsKuac2Zj22uK3JsNMgsg/rRHuXxfucBJMkhbTeYBjR6W8o05mxAeOsKaZG\r\nUIlcq+hK7zC/QlLMhG8ZZvpHbfP0H5sIJ1yG3XoNV86PitUnNDXi06IhDNGk\r\nMq7l7NfqLE6QuoAw5xsHccT1uvFJjeAwf/7iaxEQ2HPd9apWANkUcP946L/z\r\ncT3j/3TE7TgM8UeBLS8D2x09r72e81Iay60CGk0pJJtDfPa117GOgL9EeM3j\r\nCa+61N86H5f+s6YRKmpCNn+zJcjp763nqn436m4eBrV4DUX3yVz/GwnxqC+x\r\nW0nCbaUUlAVEoH8NhUlFelfteCkldCQKeDg=\r\n=61aG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"31aaa09805eea1ad3a30e7b91a8bf8ee8911e80e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7134a7752.0","@material/base":"15.0.0-canary.7134a7752.0","@material/theme":"15.0.0-canary.7134a7752.0","@material/ripple":"15.0.0-canary.7134a7752.0","@material/typography":"15.0.0-canary.7134a7752.0","@material/feature-targeting":"15.0.0-canary.7134a7752.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.7134a7752.0_1664229467837_0.06290534282159","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/form-field","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.70b8ac16e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00e28e9c7431d2c0d4b2816154625e0016c8cf26","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.70b8ac16e.0.tgz","fileCount":33,"integrity":"sha512-8dgB6RpWDxfvydlNyfoCbrDt4nIb8oEf6bqmPBkOhOYsQbwX4F9rPVEgoNiudL/eJp8T6/87lZLlCOLuvotgQQ==","signatures":[{"sig":"MEUCIFM5+ZKgM7wdN3qH3t448SHX3W8lXteoEUUCw9H0rR+ZAiEA3NFHWak3fkUvCRicXAdH28BaaLLESEOAuH+Szq9XSos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM3zpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorHA/+OL4bzgFF7vGC2BhdM5WYrAQpmGa8xgykuUFz+iiGmFezpLLC\r\n/vjBF3KPmKJIrk47PY8Gk+HLM5zqPXEf5T7vGUGkQWYOm3LkrXzIC+Q1TrVb\r\nFo/v/ji3D8lS6iF+i++Xhrk32/G1MiKWnr4xhBSPVq0E5aAoD3rAktTS5S6M\r\n1Ii0TPiQJ8UoRzAkoj/gaeHAMeMosmRVn5si0gzaiqa9jW62m6EMCa1ZikGw\r\nfegJVj2r93O1Awo5glo6x8+Op65c2VksGbznCLmPVJhewStxLqcnTDkpLKUB\r\nlT5H1CUUPlWYsodi5Q+Px4MCRmmVsxxwyLd9k1SA7CQd9+0NUHsKMf2M5XvU\r\nDEsVHYwYaYUELdEiksEz4Vm9k+UMTK2ekFo7mirCPuUoNj6Wt/By1quZR9zc\r\nRll8PfAM2qXHTh09HidlTdNimzl77b+g/SWW4Hv8sLCWfupUGt4LqPrl8zxt\r\nIF7I4Oz/Rw850mv0PXhIHvgOQHva4pXRNdTxrBEszYIZvdSKOqCBWCXyHSJl\r\nBKPkt8PlCE1IOzF0iaAbYp8I5Zn5kqI290Lis+4WwEM5acOQfFIj0/uWnRzv\r\nOUN4WbO86twY5RRayGimOIsNOGUbw1J2cZm6FPsN5qleEe7fpEjqkXgKeFy+\r\nyyzhNNYogt3nVNmTHPipuLmp4sWY02PVjFw=\r\n=cksu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9f9fb4c3a4123798d2b993ab287cc4bb7e8d7014","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.70b8ac16e.0","@material/base":"15.0.0-canary.70b8ac16e.0","@material/theme":"15.0.0-canary.70b8ac16e.0","@material/ripple":"15.0.0-canary.70b8ac16e.0","@material/typography":"15.0.0-canary.70b8ac16e.0","@material/feature-targeting":"15.0.0-canary.70b8ac16e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.70b8ac16e.0_1664318696919_0.34951141839901334","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/form-field","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.c20d74405.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f27ac5f77ff80a0efa36369a7832d3c46c1034bb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.c20d74405.0.tgz","fileCount":33,"integrity":"sha512-GwY+E5h1WftctK5ihgYqBU4k6ssyi5d5KvEmp9ufu5hbLj8REL4PQ/JZiJS9yyAvGWkDvG0usaRIIMBv6WCY2Q==","signatures":[{"sig":"MEYCIQDvNS/Cb8fl4IUmYtXXl+Szj8XrQLGMHE+peBTp2tjR5QIhAJ0ou4NS9vhLVEgRPoW5mPUslB9NgBNvCz9icbsm74ZK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4fGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqB0RAAmZbk9cfuB1eBww1sJRlxrthacPaPw9hA5Ubr9BQMSx68+ZBC\r\nQbTEQgKTEbcI9Nf7BsfAnizHyYu9ACbporjWJTSMnqIHgYGyq253bwFZb7Um\r\nwyqDfKUzZyhQls3phcttAX1I3WW8GfX92CEIP32zuRLGIQmFi8Ey99L1sLcx\r\nqQCqkVgDG0ZcUdkXZrgeKPN9HgDOVn5qBXJy4y5CFmnO5/C/RROC8SxceNSI\r\n6pd2wTGZOCdM1ugz7ulkXwG7yDSH9TtSgSF5heZuWJbj6/RwipLHZWcju7Lk\r\nh3s1SXgxzLSeiavX0vg4YWp6UtTP7J0opoD7r/Lmcx0KOwfqcx9OhwyuN4cI\r\nxbnQbExA3nKiIJtDxb3ZjyHgphF1ZIOewYVw0TqZxkLCQzn1qNJRH/9znUsG\r\n3bHQmb3PLu4fpvZ05nitpRxp3yCwRdbUlFllnjm5n1wiCGioaXS4o3G2gz6n\r\nBkxb19VK/H486E8+9gvDOrEr5ULeB1jXj8KCUCOVeJy9UiAssfaP2gZr0hiI\r\nEjjNAxpT1EvMAkYVuMMIaRXQSAVLOXwmHGcRv2XSHVCBf/vu97qkMUVRTJBx\r\neUx+bIeDm3gXRE0Qs4WJu8GZs5xEKUKS/LgHY8erQyoSwjxa2U/jl6B0a7gd\r\nZxV7v7Ti0vFcqt6j612FLNi4vRnWAHzopdg=\r\n=32Ri\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7e1c6f9d7e3c90438265d23d710997462d087d78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c20d74405.0","@material/base":"15.0.0-canary.c20d74405.0","@material/theme":"15.0.0-canary.c20d74405.0","@material/ripple":"15.0.0-canary.c20d74405.0","@material/typography":"15.0.0-canary.c20d74405.0","@material/feature-targeting":"15.0.0-canary.c20d74405.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.c20d74405.0_1664321478165_0.8777322581848641","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/form-field","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.f033fc8d1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0afee0a7bc55f019caffa875b47fea2988c8965e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.f033fc8d1.0.tgz","fileCount":33,"integrity":"sha512-S7t/kJLSJ6gMpe1PAE6NFFfAuYY+PwM8bzW4KJJxkqYg7Je+9JPWQTZmEpI6sp9QS/ZxaVUXCIbuZ+k0g5464A==","signatures":[{"sig":"MEQCIAjZz0YS8pjvMOW3wrDjB0FZLcXheWmkUB1AtkZedkOmAiBOjeOvh6nUCg3gZgisDWsTIZXi+e6rBt2qIoQ+vg91rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM43kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYgQ//XNBhqfAN/1uGU81n9dgkBnpewyFoXz3w0ANM9/N7RdBWMFq7\r\ng9Y3PypIQb6Gb999DKYOE48GhSH2UuAizAp9OPRZZzT3cBXWi0xIRl2/g415\r\nhfSIo1Y+FcFMrjNFJ89ApUQGm9n1we4QuL7a1vjclB917A2LLeslLjGTZ8m2\r\nlc/OntkXjX6ezYdtc/B19bexht5wT0pf5FoShDCFXhd3xc332amYfzrCSmDA\r\nNZBhqGmb+CEwagn5By/nSA9hP1cnhP84EjihcYl74g9KXJ69bJ1PEPAM8pc7\r\nYk0wDT8hyHT/IFbAX4uDHvw6Ei2CiOZ7QXnpf/GJFSO3vKFq6idjrWcIhaXo\r\nH82cyOu2fRtgeknhceGBZttxawkX5bPR6SmmEvNGUkZftilDz19raUuFrbRe\r\npIiT9VMJs4D7WKQfxBqg9/CeLbYU4AkvPcccYJ3TVLCo8NXAKRV6yzusoyF8\r\n8czXlqgoiegAUdm7Y9UWHO6OlhQBw058fgpaHjZ92YroQQFsZsVb/6QN608Z\r\ny5bMKOoZNF6Txda3j6q9k6aAa1qjY/lpA1FOA2c/nZt2XvRsgbVgrurryV73\r\n0pgRRBdIuvPSqMXb28AY6IXvnRvZ2zfRCKxImf27wLvlAJkhR2v3SUUxG/er\r\nf4Ewt7PAAsUr+w9HqVQ4qoftw08+7tMdVsM=\r\n=aqn4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a658683d647364520f9de8a2d51f15913b5ffb78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f033fc8d1.0","@material/base":"15.0.0-canary.f033fc8d1.0","@material/theme":"15.0.0-canary.f033fc8d1.0","@material/ripple":"15.0.0-canary.f033fc8d1.0","@material/typography":"15.0.0-canary.f033fc8d1.0","@material/feature-targeting":"15.0.0-canary.f033fc8d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.f033fc8d1.0_1664323044091_0.36639655533957693","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/form-field","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.8d7ae912a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89c746681bbee76ea01a8e410c2a75343c436ff6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.8d7ae912a.0.tgz","fileCount":33,"integrity":"sha512-RqhVVJnxaJabwTvJkbTfCha+6u9LvK2QRo09zHG1nZ+p+5gmge4bUcKZSMosHQ/TBScc0LVSNAWb+9gooKomEQ==","signatures":[{"sig":"MEQCIHph4W/CpPUv7PK490SGbOTkQog47xjB0MG5jiY/zOE3AiBkOBb/TtJxX4c35yWEcLAVJeZ654qeMC/X2tK/r7A71A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/4YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLWw//Tow6KrJegH+T6ufQyB8R4T2dIgEc3Q7ljm+Py3Bqh7FtdR6Y\r\nuS16bE/1p1P7yH8NMWD59+hYwP9XITOQknEpJnzEzXNMXVIVynMiDF+EEb1D\r\nul+dMRj7VXoBea9UZqvX93Xf6+N16bHa9HwmoPA5nAb8om0UxaAHnHyX6c3z\r\npm/T7PpOtYNAuPQ20kwkqSsweTJSMxpTrGhWSCpGl/Du8jOU4vGypUuBZDtr\r\n/7KYsaYUwEtXp9+EeRSRj+JDY0EN4X3Q4KqQDqmGPHZI762cetmkYRUQAUzD\r\niM35Lt38QRnbQ/R/D7cV3VLcqBLbmNjyk1baDwnA5f1ibyXwMKNU+yMNBD56\r\ngPbqpFkDpjJG1k/7Le/3l+l26uyFb9dp2gEketSl+r5bWh2obC+DoItleGx+\r\nQmb7Px+pdPpw2LATxbSEMMIk5dhHxuKwcq9R4q/0xColVByOIYgyXT/jj78x\r\nJjfzLMBsoe7PjP4KKBetu8QEelmIEVCI9m4vmM40tOZCt6whwnaSNqSrG/8P\r\nMlLCfMlwqWYjocPVjMClJxTMSd+FiuHi+iNZWZ+51CR0MI0gBddWUmy2eTnd\r\nkgEJ6YY/pd6foy9FgzpGK2PJhc3A08KmfFOf7t7V1bptlLDG8uE6tFqN/yS2\r\nRRs2+FzfJzlthSlUA1N5FbULeMBKVtalgqE=\r\n=PcLg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"26b2ab57ab7cb3eeceab31102ed1b6cb133f4cc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8d7ae912a.0","@material/base":"15.0.0-canary.8d7ae912a.0","@material/theme":"15.0.0-canary.8d7ae912a.0","@material/ripple":"15.0.0-canary.8d7ae912a.0","@material/typography":"15.0.0-canary.8d7ae912a.0","@material/feature-targeting":"15.0.0-canary.8d7ae912a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.8d7ae912a.0_1664351768516_0.8313388022261263","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/form-field","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.db414b864.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5977a3d7b7aafb7d08e5d45b0ec4ecb9ce000678","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.db414b864.0.tgz","fileCount":33,"integrity":"sha512-wpnZSsNBCb4/LzFHUn7JSZJB5gwVuugauyO/fBrnAd7NgeJB0xZz8oS3GDH9wV/i+JoKiscYb0xAYAT5IKOIdQ==","signatures":[{"sig":"MEUCIBhSA4YPTDpLbgj0CEYWVXQjRZDL8VZhqhXzORz9dsZ9AiEArCo+JTk3XRvC+S0hU6KmlELTUYzXk8lbqxhNGsgECSo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF++ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfWQ//Ue7oHFHSNJWJXLVNHM3BAv5j4UsPSV3qkLjOhXqyaOZ5YmJ6\r\nyiywKgIxD8TT3pQVgun7Bsx8u1VcEhsTKVXxHg8DTeLTwsntlBfQacEHn7KS\r\n32r4Lk/Z202WNjYd6EkSvNUTmRJykdB0QfReVBBVSHo07tpB6yv+V5rVRBdM\r\nMoMMbzqRjsjYanztxqU7a0u7TWEoXrC1U68RS+6Ve0F5yK910VoS7k4xnJrV\r\nb8uz2BGeoSLyabdMNv+JrfQrvZEWOE0rFka/jcqRoIkblafHDJsfpXwpyxbY\r\nfwnR5SXxEFdO8qYPOD76y3EePivWm8UOAH/o+1tZZOMPHtjH8OuP2FHK+lUh\r\n0yfr5x8W0JFttxNL+TfWsJR7ONoGvYTAAXFVL/nJevuYcvxLz8BModW4Ivd+\r\nmKurJp5LVV8pWf2kySldTNGyEiLVFQvfeKOf3joa6syXsjq+iU57buI7sAOk\r\ni8cvoIva1T3JGUsb53hq5XwHxXt6Tf4w9jImz1ViPhXRx6cWvukPbUXuah42\r\ncJ0LGfOMVohxEhli6V2kO5JaIVLsPGcWMhdB8ckSAXWTdgNyNG6XSZUNat0a\r\n5PW4flAtCVJdu6wg4IJ41YzfmyOJz6uYBSSk/bs6QsKHjLKtmMnxad1oamDH\r\nl+5WMb1iipndfd76qwJEBT54YJenWInhvoo=\r\n=y2Np\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7601f089a2e7599728805effc4e9bdee40008aa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.db414b864.0","@material/base":"15.0.0-canary.db414b864.0","@material/theme":"15.0.0-canary.db414b864.0","@material/ripple":"15.0.0-canary.db414b864.0","@material/typography":"15.0.0-canary.db414b864.0","@material/feature-targeting":"15.0.0-canary.db414b864.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.db414b864.0_1664376766051_0.8356766799716815","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/form-field","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.28cc6791f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c91818e67b8b58f51586a0d3e26583889f07df09","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.28cc6791f.0.tgz","fileCount":33,"integrity":"sha512-+eWIC1ytWb1sidweuodUEJMLNzYvMrmOGzAnTeRh7DsIc7ez6kjUUqyUJg8AxomkGQ/nALEPbDaRnltCLnN6iQ==","signatures":[{"sig":"MEYCIQDLHg3KULNwWYmBpsbB/1BjD0jLnjXUJ75R4DGprVnmjwIhAKfUcXkF1z+EM7vqfQ1jPiIQXh8eGe/MFY6akL0DbEvw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI1BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/pg//RoZEtG9fuovCztSDmK9BzdfhbdpPaGwkRhVWphbMerxpfezT\r\nfsdcAqv23TEISdKJRlrsl3Djfq7Ue+odwJHGnmoUCD/6oPmFV97pillPh3Xj\r\nhiWRkvH4Juq0PkWBOWgH7ekyvGoVE0UD+5+8L+IkwaDfP9OHX2917rjbcU65\r\nTSoHFc8A+uYs6yuO7JOZ2g1EX+LJfAL1X22KeC2DasIEp/AhZtf3Bk4NQhay\r\nVx7I28p7+fqd9WdjzxyMJ9cWCFR3vmiUgO2iuHXp1bPUOmrEJdjCC34yCjj0\r\nD2SxDMCkExhIigWixo43dobgTWzaeIB5TEw2dtafMtwFtomoosf0rY39XmSb\r\n3mDUHPUrTHA72A2Eg0FMwJreMpah3JrgXkkx0yFptCm5j/l3b+3fQKAblb7I\r\nsf+nee8ZxhLQfK3NXO4DZS1BNMaDniT3L/MgZTHNbpgQ/QtqX/+QwFhg22OB\r\nfwYw5m7RpzOhSYQHyLGOc49rNHTvt7rklzyFkmvM/t7bUC7/OcRTcoqWUr2E\r\nzhkfhx2TI4/GOH4j5BCkpPqlmiol6keJloSVuew0d4+fy5jw+1KzvWUX+Hnq\r\n9bsiy2/NWOsuJ51o7sA3inFVU9D0MZSHQIQzSzGm3QeDuJSFWpFuPOd/mHm1\r\nChszlLv3H5HIp25RRnuJP0j4wu3Wx3k+cUQ=\r\n=nFES\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d2dfa219437727922f4cce877090f9afdd87edc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.28cc6791f.0","@material/base":"15.0.0-canary.28cc6791f.0","@material/theme":"15.0.0-canary.28cc6791f.0","@material/ripple":"15.0.0-canary.28cc6791f.0","@material/typography":"15.0.0-canary.28cc6791f.0","@material/feature-targeting":"15.0.0-canary.28cc6791f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.28cc6791f.0_1664388417460_0.857346093469284","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/form-field","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a515a2d18.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30e4e55a196f3ccac3f4e6f8c8382e610336bd3b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a515a2d18.0.tgz","fileCount":33,"integrity":"sha512-jiZaumtpTlCGPfAYKXVp+hr6hhjfDGH0rbLKll5Q3s4zDV6EtWD313m21qVRSxfb145VAF8SzTSvea7fe5njLQ==","signatures":[{"sig":"MEYCIQDfZt6n7xM0CWGz43cXhYElEgpwjRVBJ6OXga0gjITwEwIhAI+73cL6h9k3pXX0QwP6kd494MpTCardo5YFm2/KEHC/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJi0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRqhAAjSEmcuY6MAFxaEc71m8oeyZFju8JR9iAxdWenA+KnCK/QNCI\r\nc2oH7tgOrQkuy9cyayFFzXQ0Kg7zK2pCxNyv/DpTaFQC51d7dKiwLHvXGRdy\r\n+OuXADoiZwZiW3z+ll5bkBlYqRk1uJ4tBompF2brcTM+3hubS17CYcZQLze0\r\nbRPyb17K4ppIomeWfbSK83YWebH1WCfCLXp8rAWOgvUSyPDcBmuGbNzEYo1J\r\nkG5R7HNkziAN9TYXyapRbQJ/aeYQwIwUtERUKjJHjIQPvHVlBR2tXazpZqJ8\r\n94pCFu94qkcJrqxRGnMtDsfn+dSmQg3NBFrT/E+Ktz2C6Xi876pbpgawC9tM\r\nfVm8ycKvWkVycsvdUqpMqVTXwboFxfbd4F/0pB7NNp2yHv727jA0Q77JYBDu\r\nG5/BJea3LSaLq4UDg6GTjTioA3qxGj02gWk2Pcu78iNuBNQSXCu9X+YZLXXz\r\nHw8lrstAUv+2AaUBAMOCEMxh6QcdWTYEsnyld1GnraNbRX41Eke9yVprgPsC\r\nbc7CZB12jlOJQ++rH7XYwgRmlbMrYdw+X+ZaWobCMvk9zDVvFsJpN2NS7jkx\r\noXKb9+Yadv25aiKMal8NZ8OWhAyt1St6nH3M8t3IWrsRiIFgLJp1kAeOZLkQ\r\nPkCJnlP6nyOIxlshqlUvFwe6W3utv7+2oD0=\r\n=XVYi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b634251c1f816bc66bc81c76758fd339ec40a76b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a515a2d18.0","@material/base":"15.0.0-canary.a515a2d18.0","@material/theme":"15.0.0-canary.a515a2d18.0","@material/ripple":"15.0.0-canary.a515a2d18.0","@material/typography":"15.0.0-canary.a515a2d18.0","@material/feature-targeting":"15.0.0-canary.a515a2d18.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a515a2d18.0_1664391348597_0.45813417747590757","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/form-field","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.ce9523167.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50344646ce7e79a54b202881075bf2af1f6e7a82","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.ce9523167.0.tgz","fileCount":33,"integrity":"sha512-rUyNdYi3ryJb1ulXNXn1LVqiGgo+buGnI+PkJ30QMMmUirpJIV1d4LZrcmBC8ncIdcFi4594q1kvzyIHZrNoaA==","signatures":[{"sig":"MEUCIEArCWLiM4wsP6NYiqwZ+eT/Z4s3HNAmfNi3ZHiRBdoqAiEA0X3PZimtxQH2WDgvx/cEO5mdW5UMRfxh1ZLTUqHG880=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgCSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRgA//QzyC7Yr76dRjGSHaOZ7TcpMSLvjx76ELnzN4gYYlJpuExtQU\r\nc9i5iU+D8fuUEaiD3xbXlUGFgJX1jwsg7vkwv3U/5tl41ydI+joacHM1zsUm\r\nS3fKI/b0ffyLToe/sMXKTMfdkFg7JY0F+EuAFOsrXSOdr3t0xayFALk7sH/Z\r\n7ywC87rc92HTXFGtvErr1pDgKhm/YkN/uL/FopEcMteGpOCMUBop4xI/Ciif\r\nNtavaOXg64WC7v6U2E0ZneEABAjobz0ksyGeyH7KI6a+zqu92Z9aKHXhoCKm\r\nyNP87IDsjPiWMFjG/oAx8Q6oYhwNPZ2RpGmQUFSJf89A3VQmMOlvLvMmnKrf\r\nhCCqak3ESJ1TK6m0OMdytkPu6GuEWwoKIf/VIWoTo1hTwClQE4GVLceaZg4a\r\npOkpfNHPtPNsYCxb6uFBShJaXPnnAMUbD80GG/mQXg85EhFJH4d9vqQDePrE\r\n0VS2KA8fobtkErvayFCSGKMmvrPESX0inAl+7hhaBxqcfY5Cok39S/K37LHi\r\naFqub5+PbPuXWDf1PpeFB3/xxNclN2jS+PWVhT0fA37/as0SUHLvJFvVYufr\r\n7uuXDN408EEnPhNTIUs2sOb4tf2lHP6ksnc8vsgDHmJQie7cjrFDXs8wnQ6F\r\nY9WjsITVQoG/sOP5euUioiyxXO6GtCLutoQ=\r\n=iiAe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8aac5a80fa36dceacc7b3a6e2474218f9092a107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ce9523167.0","@material/base":"15.0.0-canary.ce9523167.0","@material/theme":"15.0.0-canary.ce9523167.0","@material/ripple":"15.0.0-canary.ce9523167.0","@material/typography":"15.0.0-canary.ce9523167.0","@material/feature-targeting":"15.0.0-canary.ce9523167.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.ce9523167.0_1664483473900_0.01880922326880241","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/form-field","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b2310f7dc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"558ec3532d6972078141a1a78abc2a2ce093f175","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b2310f7dc.0.tgz","fileCount":33,"integrity":"sha512-0s4Wq13OtGIyc0qb48ARAG5jjXXU32F2xS8FxQCpJNv/g0EY3eEKN0B5nwmIaZLZqyQXnyh9GdlAXFb2q8umBw==","signatures":[{"sig":"MEUCIQCAp4Qa8tA9sBnCdEkd8wNHXzRG/odt4LrzUAdMI5SlXgIgDiC411Knn3P3q/L/mN8MI6TyVaLIhGyCvQbokQhkRzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjTAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWiA/+O1CeJoYR8LM3/v3TB6MCuarVe41J6fDWjDTcfcbb3z7k18Lb\r\nsYzTEIfBMex0NML7g2gwf1TybJZKnA7yyBrEzWBF0AlUMWgVKbpr2k/LJEuU\r\nMRPjWaMjyw0CBCC8m3BJhJB+NTvFQuI0MC4omatJnX/naJvxYOCons0c/7ME\r\nplH2YtxVTSBBI4Y0JtEF1T713T394Dk1wQASqNkQOdDzXvs4PGRMFBwIVjkA\r\n/wzWbdJrzEnzvptEdPVdd2BdLnR0Vwbidnmy+pLsgVZ7Hzqo1TF1hzaHbV+x\r\n0WVHolxio+yJGirsB7YG1PEPnpMiTvJGk3wOjbVMmv19LCI2g9rPCwNKeGrs\r\nD/1WRm4uRDvAOmUaUkhOfwfDgoo/+dugrio0fXcGNqgElksSkQR/U7rO15OF\r\nWPEedNbK8lB0n7Kp5UyFm795+u0Y5tGw3VeUvcbNQYHuzFLdB9pXdZPiZI7+\r\n4O5Sm7v/UgTiPCRWFFjCAY5yShiNLY3UB3wkkAPbLia+3Q/fEYNbM1yviAgx\r\nng0XG3X98Ay5ouAe8F8X8GmeLvZNEPh8RimLNDPCiAv3ISTPF0IMlsF8+ssD\r\nCrkY+pZv2IgQgpFtW51v5SH1dhJVZU671v8en5OOq+AlhxIsfXQDbXu5Mmol\r\nfElHfaM1j82cIjG0WPA5wJHdesjS434KosM=\r\n=yZ7G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1b1f8d124dcef049ff4f3730b930eadfe1e2a58f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b2310f7dc.0","@material/base":"15.0.0-canary.b2310f7dc.0","@material/theme":"15.0.0-canary.b2310f7dc.0","@material/ripple":"15.0.0-canary.b2310f7dc.0","@material/typography":"15.0.0-canary.b2310f7dc.0","@material/feature-targeting":"15.0.0-canary.b2310f7dc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b2310f7dc.0_1664496832170_0.6857397179062168","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/form-field","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a44241e54.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8cffd6b9d1885905ba588a2cfa2cffb3c868439b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a44241e54.0.tgz","fileCount":33,"integrity":"sha512-ODY+5/GYB8vqjWiXi8DCfE2xpVdqtXo9Rzw+a9CziGbSaQ5fpiOAcHpS5UBtNAU0aZ3ppGFGTeOzzijLeJhT0g==","signatures":[{"sig":"MEUCICTza7342j4mZHRGwhE3R7GujnL8zVxYme84wz5vVs7OAiEAxm2BG0CEUZeLxfm+Uk/JrrGJvZmvnTi9vzaRgVqLpvE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqb0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodqBAAg0pwPRtqKwHTmDS8FzBbqRaJhQHaHyggezXg4EW3+UdNjo29\r\nvmU3mgGwV2eVo/mxydnbU5wEZoHGiCKvv1KsAScibo9wf+SLIBT5vRuqa7HL\r\nPYUiOBUM05lkipg7vI7Iz+LB9WSEYN3uLcxJrDW+SxnUiuM55uEVZsrp5fAN\r\npQi7zfNYHZ/0Ro63OO/e2ybWb0bRHSupmlTgrJLn8jg3rSyvMOe/chlYnCKU\r\n0QIUH4hDWlmeR+XfP39DnSPw1WiSqBRO18kHQAQ+Iv0DzJhDlrxK2CWrZyVS\r\nt/DDXhaD2otos9TO4U5DxgXy5w+DmTt67T/XuP+BIk+djJlIAJhoR2JAXGGG\r\nbw4UC3kV3J6RC1GAsreq5OWkCnaJb58aeiNtGv763fpF7xGltpe2rzWi9Zt3\r\nDD3EuPLf2hSWxvR9/bNVHmi9aLGXvSPkZrSBwh8MIoGjS8eOVf6vSYgUdxr8\r\nswupBOBP+acAaP7h6mEcK0JhRVxOBHbgVwRzOwNJQBvoSQwbpNrdxFXTSoAp\r\nmWxxZ/C04OhFsbERKAajxBfwkVVg2zVOUA7GJi0kPtBm3hZdAQzuK0AgdpyG\r\nZIMksZm0dLCa23As/0+jmJhzwv/4xWwAPSfc1xmOqMnpxZrJp9dontTGs2gS\r\nWSDnPxmCr5malugwfhAm7KLrvVWAEPbR7ms=\r\n=kPA+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2a5fa6460bb58b3b2866631eacb27411a12f8d21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a44241e54.0","@material/base":"15.0.0-canary.a44241e54.0","@material/theme":"15.0.0-canary.a44241e54.0","@material/ripple":"15.0.0-canary.a44241e54.0","@material/typography":"15.0.0-canary.a44241e54.0","@material/feature-targeting":"15.0.0-canary.a44241e54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a44241e54.0_1664526068483_0.6162643448244247","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/form-field","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.0ce81e115.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"14b2f3cdca46b8a20b6c6418de071cf7bbf36f73","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.0ce81e115.0.tgz","fileCount":33,"integrity":"sha512-H2NdGlNd3Y0g2lzE+Nn2MSlGXgWQUcbfSYtOBdsKpmrk4k7sDUmOzTUIedmwhVUBZtKYPTFeZJ+BI4CvfhVbAQ==","signatures":[{"sig":"MEYCIQCLsaNHjYZN6Fnw9QIblK23nhR7Th3wNrUqXu7K8Y6RGQIhAIyQFdbcmw6j65YpuyL1CoZDJL7iTmHOL0sUQR90C+UL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzLsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0hw//c2rwNqHVl5HlZK+EuqR0YRnFrJlulejfOsQPT3Z7RuK9DKXl\r\npIgGToUzpQz6aPXKpB8s9Pfa5RwECSEpbXi+j7NFcdVmceAbVTaGTZMi2r+X\r\n7qfjqHiZkIcDyyyPOeqG21HzOcU8g9EyzNiVIuxNMbJjrmrj7VAf/oGgX+J4\r\ncniqJ9ARjKWZ5nScI9aGtF6Q5fnN/gDSUX4tQf/Xu1GA9Die0Xs/lTgwzZwo\r\n3YauIZdJiWCqMXciM8//o9rWjm/kwh4Kffxnf25l0ekIRH/JKkq8HJWhEr/u\r\nilGRKNx7KH3EDzhpvuWo7Y/p5J9GbowtWMbM2/TCloDe0XhnQx/cVvsV605U\r\nAepR/PpJe/GwA76cofDW8Gjjo5iBHbzeHtn7Sc4POuZzj9kHoiI5MaDVk87A\r\nSnFqqqZZ5nfO6zkKFn5xDEqhMSki0yp7XL/kZDpTylKj88G4o77w+YnLFk7B\r\nbegy3SykWGH9cPWEfZXarkd9I4JK1hVf7ygpWT/jgQPxZm25D/47RwAFNWD9\r\ncsFHtMDky2slrvRukz1LUMkbnQX7EEz+y9GMu4gdEUzGC9AoaHGCeQLbFQt2\r\no6H5GrqSu0b6DHHnIEtopKPIoucxVouUR3JLThMQ2xc82xnJCp0CntONJThp\r\nuEks/p65/IGxVI4PQNkUHcnPC5pq4AitVrc=\r\n=4f/A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d690b44f4e157e829199ea749861c3b827d46dff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0ce81e115.0","@material/base":"15.0.0-canary.0ce81e115.0","@material/theme":"15.0.0-canary.0ce81e115.0","@material/ripple":"15.0.0-canary.0ce81e115.0","@material/typography":"15.0.0-canary.0ce81e115.0","@material/feature-targeting":"15.0.0-canary.0ce81e115.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.0ce81e115.0_1664561900533_0.6579634713705329","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/form-field","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.3cc30f6ad.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26132e7f4031c46f35e2a552bf1c666516f470fd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":33,"integrity":"sha512-P1cUQeUzcMlonfYVax1DP4z26ot5uOEeXt/Gw5rBpCQ3h/Jl1IRrN96ZKjLSingjI2J55M3+h5HrgZWfhi6yMg==","signatures":[{"sig":"MEUCIQC2m9MH5JsZZB3fFesCD+6kzR7uV1vOwJZ7CkLh40E+eAIgdlSH0pKJkvqoTAgBFsyr6Xfb09WmSoONXNaLOpxBZM8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGsZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrztRAAiwYUGfc/BUv6vfVKB51ru/ArhRiTRf9IUCg0xfvnMT/wTwK9\r\nD3g2YsXDISyh1UYntP75i70StqQ6m7USgQwIRukqxMGzFr2XL2QqfGSvM0/6\r\nhn+ZkuE4V6QnOtR03esw53vCr1hAh8ymVLAsZhd3+MR7txRz9WdkZgrg2WP+\r\niezHgUDH4lQEyhSf7LqnWzy+7rh5nQlqKr9uysi/jwsik62OF6bDJLHpdUe8\r\nABzY7WRMWRAWQyZIc2wE1HLEnbpQS9Sy29PXmuexfRinC/d1xEN6H9TQOWB7\r\n56IMocYRvNRapk28cOLz8SiddrMUh+6F791nMI6+Z8QVOTEt0DrQwQmPGg5h\r\n/Pi858c+8hwoxv9u0YEBNQWxucchWD0kU65STFpS3Dg2EHHm3En4I3969IOM\r\nccHGHINQ4f1ZLxFFqK4iZtuo9yY4l8lyuXklOMceuOXq/sTqpMLqwr57soG7\r\nf27csaaul5re4pPsleFw8KL+V+D8JCE8pcCz+T/FZKwtto2oY5QYhvd6tnX4\r\neMRYRFbdLtg5RfVCodXKMAXtH+q0yqhlGps3LDFFiuywiSrcP57olpU2ZgE7\r\nYicgqXflJP67qrfUSj5iqJbOxnJ0LZjLizr4/G5PoVO8ySMH3qURLLh3Rtix\r\nlerLd4/0Q2+K9qnpEr6QF97n7B29J6JeWdU=\r\n=tpiN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"78d02265193749df2eae507da620e7571c09da12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3cc30f6ad.0","@material/base":"15.0.0-canary.3cc30f6ad.0","@material/theme":"15.0.0-canary.3cc30f6ad.0","@material/ripple":"15.0.0-canary.3cc30f6ad.0","@material/typography":"15.0.0-canary.3cc30f6ad.0","@material/feature-targeting":"15.0.0-canary.3cc30f6ad.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.3cc30f6ad.0_1664903960708_0.6522554904765803","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/form-field","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.d9cf98e60.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5986ef20fb3c73ca68a2076ab6801d6b9f0d9cbf","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.d9cf98e60.0.tgz","fileCount":33,"integrity":"sha512-rRwMVcZhmhC+y9pPiJiCuWhC++071Q61kpF1fwkWipwH1z342jGOJAHo4M1pbowQSYmHbTgYXD9zJZQ0EDkC0w==","signatures":[{"sig":"MEQCIHt5P4qHrS/4A+LgfbxoeLV8kl60KC3B9Qnk+AO5AFELAiBWv+670R1+Gt4htZV5VNuILnSlcwi3UqmKGJRKlge6Dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIOTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiPQ/9F7ZYCV9U7z0eILpUksFI87u5DkzZ6AEpOXBPv+6+P5AFd02A\r\nrNAG24sash52UxhqgjIl6YhMHrLEmbk5bWGC7iApqCSIv/x54U8UxhS7i8ZH\r\nbTk8IUfWNeqsnzlBjLvBu1p7rghAo3zsyE2g8rF5+Xdn/ixxaHavoo9OD1SO\r\nRJQKlL/LxYhNaEvCDwSyOQbz9x2fs397JMTb5xF+1DautZkDhv15P0iHjyjQ\r\nQuJWGzubKozA9O7u+b+ALEigqRX/jpElC+HvOrGsfitoDTCte2u9ChAGBTxh\r\nrvo5C7EQhNBsedwkdneyFPjfDGDkSzt4Tl1hhV5UG9f+MxKJj8r6B6bmDlXd\r\n7awo9z6sv1AU+88ed2wSqwVAlxI1bnwdIcUXI+eHb5UAx5mJeOUdCA8MMVe3\r\nv7yTmfj3971Wn3KMvmV2bdt0Xa80KOvafh8lHsdy3a+18Jry/0Vi8H2Td0xz\r\ne1wxA300nLzg3RJyk2ltWDCfdr6533UNkKWsMHcJM/b7uc6PYwcSIJ0Zkmlx\r\na/vjwphZY+MJVbFt9DvaImb4w6VOCqgVP8+WY+wfpIM1+W+bQ6ZhuGDH1Y7c\r\nPhMveJKnN7Bpcgb7/ChPmGzuRfXJbrE6I++3D0owVqaX2xP7qfRdnjRbUkgH\r\ngMFc4b5GSQXOyl6LVvsnA4HPnk9+aoJ+eAY=\r\n=GxgP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"554e3182e6804b0bbc262ea0e730d556747b7382","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d9cf98e60.0","@material/base":"15.0.0-canary.d9cf98e60.0","@material/theme":"15.0.0-canary.d9cf98e60.0","@material/ripple":"15.0.0-canary.d9cf98e60.0","@material/typography":"15.0.0-canary.d9cf98e60.0","@material/feature-targeting":"15.0.0-canary.d9cf98e60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.d9cf98e60.0_1664910227257_0.3342063026672146","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/form-field","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.d71935c8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d0e1032cd5dea8b938ab937800864dd5e17cf1c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.d71935c8b.0.tgz","fileCount":33,"integrity":"sha512-XGTgMSJefZjuqno+Y1rUsT4m8StGr/t7DcRijONm6klXntok4AzOPrdQr5hWQS2Z3oxGdskYco8qoics9N0L/w==","signatures":[{"sig":"MEYCIQC8dFf7MDhR+VwoCayqqM0+RbvTXwwJSSPYPVlAWwTMowIhAMx+/t9sV6fALaMrT2VeAQuVYIePX9cRpoLZN4uAlupN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo59ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpc9Q//TXETaxXszXRX4KqJ/DL8ijrnEaKQNBfwr+XHkcKQ46FLDnMs\r\napySSpB1b9HhlNBK/282GHS9IJGj7AcOG8ik2CATL/Qni2N5gAUY5FJs52BX\r\nevpNxObBzdum/9DDHdjCE8hw5PmHPIaRQbayzfmjlY/AW5HjVWY8fKkHvymE\r\ndiMjGDMcUthI2R/pD12WfWR7Pp00mRua0Z08yPH0wClYqfzrl1l1cWqyVZI4\r\n8mphqp/6aBW0qDu+TANyppUqXMu7IypIKrFqc2YTK/Yt4GWkiVjZoJNG2PSl\r\nbM6oPPrz3+/58dJeC9qe5EzPLyo0dgPnlPqlHhiN3QptkvSbBxewOo9P1//2\r\njPlq9SnI0TH6J3My2zPzMsO6WEMk79NFl3jFSzUI5xcBXz1CfWs2zJblYaju\r\nccyJtoyDh4NnX9C6w7CZzvHPw6blH9cKPy9/L79T5zKfhIcDvEaPVd1sBoco\r\nMl0P/WXDWS77sO9Hp6v8V0KBFuJEJXDvSdzby0oNvFS8mXbNMeSXX3UasD9u\r\nqfl6RB19YueIjmwv+xSVV1NhkuZjxcuyN0oxGE+r1UQyKbi6XhCXNFTzfCIA\r\n5C75y71tuUf9mVaLBn4qZvq25ODOJnEV6iuM8ZoOtSmI9rBUchoJ9KoHwy44\r\nThBOofXPCxmsAfBcuVsLKcMR4oWzgsqlNcE=\r\n=Xf1H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0e9f697d8ab3c0b93969f61d22a2b06760934fa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d71935c8b.0","@material/base":"15.0.0-canary.d71935c8b.0","@material/theme":"15.0.0-canary.d71935c8b.0","@material/ripple":"15.0.0-canary.d71935c8b.0","@material/typography":"15.0.0-canary.d71935c8b.0","@material/feature-targeting":"15.0.0-canary.d71935c8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.d71935c8b.0_1665044093759_0.7247885897009576","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/form-field","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.49c56a25d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c50243e16886ffed3cfc27c265a445ff510f6154","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.49c56a25d.0.tgz","fileCount":33,"integrity":"sha512-AOp3KSUcjm8ji9+FbuvQ9djNN//aKtQEcxmcgeSo3R2ejtbLe//JUzWdMx0VVZgXgAAmSjNojo/MmBt+d8G6Rg==","signatures":[{"sig":"MEQCIBjRGAj7OdYaMyhT0lS5CiVcpCFSed/hbRpimCcvZ7IDAiArSehIunhKq6YA9DI42Y1UT3FAqMXuWe4AF7mINC/Blg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyOSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+2hAAm5IBQOeUoFVIdsVgaxfGUBor42Tkc1JslwUDwpE/YfGvLljo\r\nojJWrg0yQ/65CwV3I/HMakdwQft6iyMWmzg0VSsTRIToNs7vS6LYUEFALCGL\r\nlDZTlLopX8iWeIxJjYdJDwDyr+VskQnQPIgGNmd4PmuuXL11snIqY9xzJIPs\r\nQbAa5z6y6OQDfRuBtdU6C1yDXhMeO69O06Ktv6/ugVktdpTlx/5kRvNygB+z\r\nMBnBjkIuDW9c1/aj7CzgwO79uBnyUsL+IeCghHmNZSux+VoVY3c8/riy7d5C\r\nA6hCIHAmhozFyRfkBcJ0OVp6vy3RI4bPcTGPdmyfUgRmYtXNMVLwwIkUhbjR\r\nuzm++P4mGk/K2fpoZO9bwt/M0FV9kuRLtaWivmDT++8hpuabGv6LoAiHx1H1\r\nxBDerPtgJaxdclOBvPNT1Gam8mTTFihRZgrlftbitF+9si+L1BO7uod1HruZ\r\nI5NT8+pzzFEF/ECYPTAVAWH5nemkKS5TaUVPyvInbqLd7qecI+hlyBzRM9A9\r\nipMjIK5+8ItZmB7BKK6h6taqem44qey3m8e4ovs4F+QHnyYMjjxG+JHm11q8\r\nH4H5LrPiPe686++ExUKWO/ZnLICPLSXV4v27NJ422c2jDZO0HATjOxqBPOY8\r\na5APBSYhu7dxfBWSMWEQH77/w7Zz3ARmiio=\r\n=5Uei\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"46425b4f1ee71ec9e841d7ffacdce7cdc35e7b69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.49c56a25d.0","@material/base":"15.0.0-canary.49c56a25d.0","@material/theme":"15.0.0-canary.49c56a25d.0","@material/ripple":"15.0.0-canary.49c56a25d.0","@material/typography":"15.0.0-canary.49c56a25d.0","@material/feature-targeting":"15.0.0-canary.49c56a25d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.49c56a25d.0_1665082258042_0.5620929863648885","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/form-field","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.07acddef3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35768b495b8d7ef9f17252943a64bc17b2893a3d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.07acddef3.0.tgz","fileCount":33,"integrity":"sha512-aOBmXbA988F2m9mM16DpNFCIB2iS/Ucjw72tt8P6L1MnVusLAf7OM4mhuiFcaC/347U4nzb+l/m54qOVYis6AQ==","signatures":[{"sig":"MEUCIGnW+CgyL0uDbyvT4hH4w5r3lWLiu4+xziuROnx331l2AiEAncWR0ULqXMszwoHW1jBROhOXMafXGZCXHvifg9XEJpA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJw7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkOw/8CiderrqUJoD1LBwFOb85zHbM7r2LDUaSs9rzvpGaH4mRAgEB\r\nU/DSke7+w2GMJlyZ92Xwu25YkuiaCArHMjHsJsUp5Kbyf9SCJoCcOP2aqTl9\r\n+MJruz3lAtTcz/aRBou23f7u28cAQuHbDJz1lcRPDvGXO6URlhpNmoOYFZj2\r\n/zpadHXo9NW0BKGb3lm3fgRzWct8x7lfD0k1O4fL9mDCwmhUWq5/7uRrpPVu\r\nuzJPDGinl5aOAqppQL4uzTQ9N/UtYkKvW+nztdzv6mzdCgOBOVZwPDOc4b/4\r\nS2CdjLluT1umY0nf5kY5eh93eszVX9tGqjb6iLNjzgGu2ZQ6K461J2xA0a0W\r\n/8lUuAZLTpARGci8KlP0TSSXToUgjHFv/AvK2aWxm0hLyuMq6i/Db4YKrCCl\r\n0mBFrtziT1guf/7C4fOO12TeNgq1L4XwFrWhF5oyG2LITPWY0IJfPdEVDl2S\r\n5832ze5HKoO3bSzZHDnn/BtiBaJLmgnsOYw5Z7ImL7n86vWPXinPNIv6sj/f\r\nIT2gWkBo69RV+5I+D8+hRB6Utu5v1eb793LDnSF/D5J14v7F7BNL9XBVGWQe\r\n2KgemIAsB/R5+h84wC33o5H9lUAIOqVdQqnH6qx9JJwFM9HnCC9yokvQ3QRD\r\nsiFG6zmTkvzLw+ePlPhFmc2+b0zUms2tPDw=\r\n=UKsE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f61a6c26b4bd60354b690448809f9dfb7ea11564","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.07acddef3.0","@material/base":"15.0.0-canary.07acddef3.0","@material/theme":"15.0.0-canary.07acddef3.0","@material/ripple":"15.0.0-canary.07acddef3.0","@material/typography":"15.0.0-canary.07acddef3.0","@material/feature-targeting":"15.0.0-canary.07acddef3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.07acddef3.0_1665178682920_0.18245022261389843","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/form-field","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.1c74eb2c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b32c5be53111855bf27bada0cab2a73db38eeab","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":33,"integrity":"sha512-ZdgodDulVPOz1JCiAXswcPVYx7seDWu4wwdK3Sbxf4gsvun7WFhlliYOGDw7lDNYGYTy1ItwdBl5TDgjyFCUBw==","signatures":[{"sig":"MEYCIQDfHLp+8ps3nEIWjlCWnOfyxmbVnYiur57Uyqht2oVSUgIhAPLCEg2GcyppVL5s1rMaxrrZGQKYLMj7mnbv0TvbtN71","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKBIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpucw/7BHroIaYfUvwBFSc9XY2eXqOq7bFVSWpnZVaOeEqlHu/sZFfl\r\naynOkO5ccyzmMYslJHh3n6TGZX7oBncwLsrYszhTaYWz3NZ2T6/ER12TacvP\r\njqKKP3lVqz/Jofo0AWifhrbde/dUHj2CK7Ak+Sk0nfILsyWCtJqa74BDZ8Th\r\n6xAsSpavexzTYrMU40ywCeYYJ00haGnFQW8QKzIFBtQifNsZLr3OqXenYbqV\r\nf7t199062fdVjxPkwrEuCTcLk+yWjo2zmURGmcl7GtBT6dQKo9sjxH7xqQGx\r\ntdm91MqDBkH84dUoVSr7I7W+LrxsiwjNWvhruVtT/JvJez9rkORPGudyLZqV\r\nTq0zEQWEczv1qKaIupt+VnZixvEifQA1rXSRvm6QQblPuCFPDmUXlsbIJ/50\r\n3ff3Gz5vpLwwYQhaT3iUVAQKfv5xQTf+Fqmt9if4nxK896EYnvPfg9B/10Ol\r\nvbUTDrajMoYS42Akalhtvm0J9VVVVawjGg5VgRwA412pEEFn9J6c6D+NQPiE\r\nE4IAdnj/Wfjb0It0e29r2MZ23sjYXa5nr9s82X99ce+5nAcjKXD6bri0zE58\r\nfdYFsVsiC/9ROQt3dSjtRz/qA1BomYJx1jaPXPT4BdaZFfRH+t/G9XF/kN9E\r\nzbx3G1sYqd8LJTxP+kZvnSDzftSv25OWFGA=\r\n=wEN6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fa2e48f4e71714ca4a637a500ddf18f562031ba2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1c74eb2c0.0","@material/base":"15.0.0-canary.1c74eb2c0.0","@material/theme":"15.0.0-canary.1c74eb2c0.0","@material/ripple":"15.0.0-canary.1c74eb2c0.0","@material/typography":"15.0.0-canary.1c74eb2c0.0","@material/feature-targeting":"15.0.0-canary.1c74eb2c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.1c74eb2c0.0_1665179718912_0.3143976173414025","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/form-field","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.dadfb713e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d22439a422bb3cec375e20529d2b26bebc481c8b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.dadfb713e.0.tgz","fileCount":33,"integrity":"sha512-WR1vOW+4aPYi1tYvzoPd+N6SWAcBqKbeNutOeO4GSmafrsBnEUPzsJBUQ0akqQESF0R5OMj5VLubU4uA5FZMPA==","signatures":[{"sig":"MEUCIHZu1nl7+FFUkuIn9lB5/+RTkuqXi+QkwKqBOnaDQmzxAiEAy0+GVF0YH0N+HGdTruUdyC4S9iOY3hTFffWqEqxa4Tg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQVHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5Ng/+K+zeNN90JnTq8S0j34dbghJpN4nLOO01e4lpHJDfMzc/qn5e\r\nVgRtAdVlN329MxkQAX4y394vlDXg8XKUKFvd/1I611WtUfTI/AkrbyOaxxqd\r\n8sHp5VztlKXqOMexe9Z0P3TendFgVlILLPmOdMp42uuaWWOG6mf2+IgEoj1R\r\nIS2hGjg5vBCwRPQtDMAWI/heSJVI23OvsaXGxmU/N+vBnEiVLFlptaebRRLn\r\nTL1n/hvluDAUeFRN9lA1km6X58NvXP/O5whP+rKQ5Sk8Ps6R23J8lkcdbr0t\r\nVREhwwsl+KGofDlDzLFbT2oenF55Bbz4pgYH/+IRQ2KBODWs0VriWDauXAxu\r\n3EjfvZ7o/zhso4qRhoPSnezlMSyjFuqwRbCMHXVDFaTrd4U7UJzgDXcapqgc\r\nPr8feqxgikkpn+Uq9mdv4vzU364GcKWSU9+JUpMMS/PeSxu1/38r+0AmVcya\r\nih+CvRSaFqNahNfTYZA49WdcPsnqJVcypw5hu+UpPmfZBtNAX2uAeDfotZdW\r\nLuWKua8naJo5zh/U2+dUVT8TmsRjgnqPpa15KF8DhE6eqKjDMrSA0YTGSoWd\r\nTWMv+o4u7uMh3mqn1lyI0hGLrjT+BEcNxAYgqtXauES6ty69P/ywCq3m5W+c\r\n4zF2PX5HKigLj74eY+VUIYKr/k+2dnK8Vas=\r\n=K8pm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dc577772f45028a4c4dca1d7c8ca8dfcf636e763","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.dadfb713e.0","@material/base":"15.0.0-canary.dadfb713e.0","@material/theme":"15.0.0-canary.dadfb713e.0","@material/ripple":"15.0.0-canary.dadfb713e.0","@material/typography":"15.0.0-canary.dadfb713e.0","@material/feature-targeting":"15.0.0-canary.dadfb713e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.dadfb713e.0_1665205575591_0.5488239222906959","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/form-field","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.395f1ce61.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"684e867a89a55184dd6015de68bcd5ee3faade0b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.395f1ce61.0.tgz","fileCount":33,"integrity":"sha512-XOxj1/TKR4foEvD+jZ3/6/6wq4422iTMS7xFE1taxJOSsInLkl2+g+YLXlRC+tRdcwMOeg1HTxZHHh0oprOaJQ==","signatures":[{"sig":"MEYCIQCcobMR881eg/weCaqL6QcpRd4yqmjrG/2Ii4t3hSuABAIhAKvt6Ut9Rq49uonFR13L8Z+MspKJiBgkhThq3ABaRjth","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQXBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq01g/9EamhW1V4mTEksxosL5Q3Q1uAgWXPuATMcgFWmH7CjAXVyrKq\r\ns5C0IRPQcKm1c5CAOslwGVhuFc7hoadWfgDqy3ObEgvIxZv5WFEh7o/ohDBE\r\nQ6hoDf9UxB8mUVcFo0WA3jw/sY0zqsAxddrTRWZl9URkT3LWlGJKiuuPB2g3\r\nIT+T+tsfvTlyUJ/20tb47Ij+WzTZ2WyN1T6Phwai6ge6PciZkXxqSzsmm2nI\r\nvcm+BZCp6+jaYZz7TLqn9TCJh1jYnBzZ5llRqGOblEKaYIlskgulHBNE4Pgc\r\nZkwPx9qT65y1nFp7taRxtyC8fHtZ88Oj1xYsun4mcnSUglg6i0+DOIvee4Jw\r\nL7hhJ01KQLh3wJooI+zChnzcl2eCfBR74TODcH3SezZiPTUKL6uQIM80aBEC\r\n3frOY1UUVAQ++9E4/lONHPToMFQ5Qjlq60WZnCPg9jMe9pEINKYvLRF30e8/\r\nDH4W4PDg2nOo2TgvySfhxklTPxuf0ECxTKXSM4vhAgPQQe4vY0ev59WzAdc5\r\ntyknln4Xiw16fBSbsstMA3YcrHxUGQnXUpo0+fj5fF+Euv638fJF+lKJlqNq\r\nvke935XRKJ7nHl8SXZEvxvn60oyY3MZZPUQLBHf9pstRtQGmFv9FJLWiIWOI\r\nFMOdKZ/mdAH0Zb9ax8+WNZqgjQah+ctjbvI=\r\n=Kau2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"15a2d954f8c5260da0e9b6f65b6f49df69764a95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.395f1ce61.0","@material/base":"15.0.0-canary.395f1ce61.0","@material/theme":"15.0.0-canary.395f1ce61.0","@material/ripple":"15.0.0-canary.395f1ce61.0","@material/typography":"15.0.0-canary.395f1ce61.0","@material/feature-targeting":"15.0.0-canary.395f1ce61.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.395f1ce61.0_1665205697165_0.9996574528604907","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/form-field","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.e741b5c82.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c06f8b5599c37f2e6379f103c59753c45bfe9874","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.e741b5c82.0.tgz","fileCount":33,"integrity":"sha512-qH9HGyRgNJSEXmJstTdCD83oP28etA/ibp0Fes6+iBRRD6uvE/2Rk2ejZ3YiHiDMfg0PCaSMecouh8RpIC11PA==","signatures":[{"sig":"MEUCIQDHJNa/xBzPl6INTk0SY5tJMmiAoa+/wgV/Ixi8GR7ElAIgVCB8Gwinp3jw0LZFcyN79rZ8AERAZ//7Aih9MisceCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFiaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0fQ/8DVj0nz/kR4KLJ30RJkRRlYUYqeqKEkqX8vXZ7tDs/MHvtX1v\r\nug/zwSH1U2fXZugoDmvojWdcxSHfwB4COGVbsHg1B9EXNEc6XVewnv3epe1r\r\ntXoDApIakIH48SfJnuK7iZpQaQsgDu8KMwMJs+3BUT1KimC336FZNEiV4sgA\r\nsyjIbJ/qHEPgPlRPd6hh7eml2936MZQSJ5AM8K5PNuwCwcw1Iggb8Vm+Z+pq\r\nLQzJor6y9qoYO7LqkoNABFXpanguJvu5XrY9xpujqEgeZ8h4TzfREyyrhBX8\r\nr+0ZKfuDGo4L1jt/5Njo7bmUja8ShABBbzTgghY7JMR0ltQhHeshud4Ss2xU\r\na9/To6u9mavn39XsrgyEYP6Oi3sjj0ga4avUetPDOk5ULsy5g+Fom2Z297mO\r\nIgJ1osx7YRSWIJPeH+z2EjIuz+datdiIUekbZpX0tFP/l4ONm/HMuzI8XVom\r\nn1mLyo6/2LASxB8L1D41I0UeCw/oZlBQ5PoZdvSec3h9oJ0T2L8KrZjtM0G2\r\naLC19w4YFpmyuubJ+THwyo9yCZe+UM8ZkQI8c+jkqef5eVrSrfxflw4Ohw51\r\nR5Atp7vf5oAM3WkTMqSW9XryTWkw+OrKQOLCEGhlG8OIcMtQajaX6zuapyTc\r\nyYAbesTamrD6bl+w7IvlHMhPvGnAnnafDvk=\r\n=129u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"489583dc41bf06c909feb0a87f9679b40fe6c03a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e741b5c82.0","@material/base":"15.0.0-canary.e741b5c82.0","@material/theme":"15.0.0-canary.e741b5c82.0","@material/ripple":"15.0.0-canary.e741b5c82.0","@material/typography":"15.0.0-canary.e741b5c82.0","@material/feature-targeting":"15.0.0-canary.e741b5c82.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.e741b5c82.0_1665423514124_0.9602944022275199","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/form-field","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.582f3cc1c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5ffc388fa0c5c41bca8f2a90707c6e07ec51029","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.582f3cc1c.0.tgz","fileCount":33,"integrity":"sha512-CtuNXEkgFhxhFUCaX4CIxPlD5ZAXDqzzEY/RUUTk/cyzLJOwE4Or3t5uDHZIIoY7/EhXDLE1yaquQ1VdJYesUg==","signatures":[{"sig":"MEYCIQDYFmyPxh1Lp6+VNnVlTne66Cy3JRey0x+G4zezOz41/QIhANAuii7Tq8uRA8uWOWVWFPy5D4DHtTUxHtZzfFr1QqO9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPXbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKuA/9F3EKKHbvBoJBBefgtpQn1xLoMY3wEbO2O9Dmcaw9NHRja2NC\r\n8RN7dRUgm+xnGih7nRYhcYPzzXpp8jjESfRRtnXuenHy3k/1k5h1zYzlRz1L\r\n6rPM8qm/wLSorYgBJ+bzzhRri++3DHwKAVuthhjliiP18cs0R97jX6wYFjDo\r\nxAEzUdZ5sM4Ka8xU9XSu6kmmeQodVsKELLPbtc8mf3sy8doyfVgZPLfu+ozI\r\no7nET8gVqbDf5b66VCFMF78ICv8hY3/GaAtN7djZ09Cgdy8M2pwSbvRi1cCC\r\ns0yyyK+BhesZXfqsdCVIX8Jlu9nwYzq8rmd/0VSn4CHafA+TgLfX1Yq6/6WR\r\n8IYhpk4h5lw/dWXko+uA2GRFCHAwEAy9jihfBhIqhdJS749ZgmIbSLCVS46o\r\nfbsoL4qAVghpRRcwSNlCHVOWRyXFy/142IEiIgBARKE6gflPDdhd6O7sLxWR\r\naTGEkX27TBDudW74LIHBeSJQS4qRscbrA2sSZIE9hoiSeVLW5mb1HNXci8Q9\r\nWv4mS9W5Sf9/Q1TshbAVgQjUaovBFiyfwBI+uQPl7bOOIslH3+Dp+oIIaif4\r\nhko/ZVKlur+8YSHcV6LSy9bNzgoD6eeeuXwmmJlrt2+pmWx7av95Grnz9Xgt\r\np8NrtabtTeClWoeoL9mmq5HuSTEQKR4oPTU=\r\n=gJW4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9910dd1f5b3fa962bd02fe552774781896efa7ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.582f3cc1c.0","@material/base":"15.0.0-canary.582f3cc1c.0","@material/theme":"15.0.0-canary.582f3cc1c.0","@material/ripple":"15.0.0-canary.582f3cc1c.0","@material/typography":"15.0.0-canary.582f3cc1c.0","@material/feature-targeting":"15.0.0-canary.582f3cc1c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.582f3cc1c.0_1665463771350_0.8679139199218964","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/form-field","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b1a6e3e88.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed596e1ed9be504840072e77c58e19bb72487363","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":33,"integrity":"sha512-zs6fnBquQmL5F6NvQTDiImmxyEV7IaG6WmfkjiU/Jq09XX47uZqlXFtv9jszx+Ux/4I6QOrmxGyoUfyoLXDtVg==","signatures":[{"sig":"MEQCIAJS5/qiPjamt0CKHihzCa8IuMXKy2PkkQ3TrS1ToDxgAiAwS7lW7K5LJ/5C1poSK5uOcOo0RPaxxFNuI/7KrHHWSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRqzpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJhA//SSj1W1Nk0QQ/wbsdqZ3vy1B2Sl3amms40xWrmOxJiEwDcmex\r\nlAueGMPOFbY+94zKEg0pUi0uw42ThvC1SZIpeIQNwcM32gbWQgJ+NmXlobBB\r\n2AzS+bjOtonnlhcjn5s0zkyZ0IVkbrBwP2n6C5EhPqFBpkNJ4ZVXRp7R5DwR\r\nNi8BzImClypbVoxvJksoYaWQ58nhAuxS9zFAHnlazKnj+fqEV0xPTn7jdEUV\r\nKPRW4OoKllw3NFjaNg3VPqf3xPiC340MK3J8Nz9ZLkQDjWEL0SlX5LEW09vs\r\nPmEiAAZhFqASYrUuX90GHLE27umQI9xhjRNnk7RraLFgHGK9Hdk5/S6FWQGs\r\nNM949bDVDYeOWIjc+V5yW9gLNAEQxhG0bK35rNCObq2fdHhevmS/xPaQ6Vpl\r\nnIX/4zyTz/dNBKt7ajqPGmlcuz+G++QU22OTGrhsJlTUpBrrQcjgx+hR5msx\r\n2JoMZHDUNuBZflGRgI8ESeHfUXmOxqq65CRn+SARMMYQT8qR7Ex+7GOYVRl/\r\nkQ3Pd8e6/1Mf8X63249XOXgZIG1pGMB5vwgQ4jcD0qjA0Gk+SZpPSWmgy+Xr\r\nMyU5vkQQ9Noef/TqDVFupGp6gXHesj+Jvqu8q3q2lgW+bqSE9Fngf31+fpdE\r\nDw3cskXBkSSiQqpnM9/V8acOvrWmr5aeiSw=\r\n=ES0p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fd6420b1b81c64578026927a4acf4ea73b7358e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b1a6e3e88.0","@material/base":"15.0.0-canary.b1a6e3e88.0","@material/theme":"15.0.0-canary.b1a6e3e88.0","@material/ripple":"15.0.0-canary.b1a6e3e88.0","@material/typography":"15.0.0-canary.b1a6e3e88.0","@material/feature-targeting":"15.0.0-canary.b1a6e3e88.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b1a6e3e88.0_1665576169634_0.32838581311216486","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/form-field","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.c9b1a31e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a89c00132850e714cf50f861a65acc7b53534c7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":33,"integrity":"sha512-9sTP+wQD8Q9zlkohWTJcfm0KIFxzov8iPTIQUnV06OApS9GSwpka1vMdO9lBbCrMKXxM58kaGgp/cFE/QbSeKw==","signatures":[{"sig":"MEYCIQCYtP1Rh4IznizbdfHCMgokZUSS3L1CcW9a8e5xD2GwwwIhAORCPjXlsNR1YHL3p8zPGpl6ff6NpUASr/TmS8COOpth","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvJWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNbBAAhb++wGaq+yinmIMO/7JtQ/J3aW4FnbcGH5YXQ0DKfM2J4PGF\r\noKlsMhN/tg7U2lG6rGIfpf/KJIEMotff9dW4EAUQ0pGbc/v/LbdZ8yjvoUBE\r\nTGguLNL29uVf8doha7NJOa1uYW/XesJnD0/fyckpDjijzlRCihpYB03S1SB1\r\nSV8w9FUD07hnpRY89qYH+voKAWEKiYjgOPpIYVN7epf92pmX69Q+J6wZknr7\r\ntv+HYhf09ysdWgZEa7wHMKi7z9S1vt1WxcNBs5CoUIaWmSSxbyintpPZTScf\r\n/6fHg5yE4+3G++HJDcy/HVAmj4y8ZZFCA+bEpmdyx9oBi+35u1mi/oSknUSw\r\nWE5/M0YdNssQ0MI4Ce1eEaxkfq1ZVsx+5ngbtgEs64W8gkI8y2sT600Gwfqj\r\njM5xyF+c57HuDh1d/E8M57nBULr6sHP1/vd/2qXtAsTk4Tk11L+Re9RPYbKI\r\n3qWAtMumCV7bvBqljggukU0oB95/h7HrX3+oPHALX4nFzzAInCwRbcD7TdFm\r\nh//oEzD9Xh7CT6BXpPQRLxv3L2rhQws737ZcGPnnsaY8a5Z8Nzf1LLrYUtMN\r\n0iLogop00+tGNCTd1FQ0Ifdw2U8YcM1/SrswSa9g+0SHgPYf8OIS38Frfm1B\r\nsNs0JzAQ4SKzyDA25nY1+b+1fTdiiqUFvw8=\r\n=/PDU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f7a6b71c85fbf0d1a9db952402e002f8421baf4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c9b1a31e4.0","@material/base":"15.0.0-canary.c9b1a31e4.0","@material/theme":"15.0.0-canary.c9b1a31e4.0","@material/ripple":"15.0.0-canary.c9b1a31e4.0","@material/typography":"15.0.0-canary.c9b1a31e4.0","@material/feature-targeting":"15.0.0-canary.c9b1a31e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.c9b1a31e4.0_1665593942203_0.9493027408776373","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/form-field","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.13e9b0d1f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"322be7d7d35c5cfd138b54798072700b39f454ce","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":33,"integrity":"sha512-HBYxznehfjCX5z96ikMZscGqfFw6Ysrhya30o4kKQPUFl12YC4U7VgzoQ3pkqg333AjlhrFNS+LTP745k5ZikQ==","signatures":[{"sig":"MEUCIG5wZZ7bRM3yCFq/+8HyP0H6qf0iYzx+ddb1v/fq+PeWAiEAoEWtpFIPDaJDjX3JiNtcEvd3qxFxwHEsRrvRqrrhIIM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxPCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3TRAAnA+t7hQ+OKxErm0Bc5Dx9OAGNlPdRVQUQECfBI8+jK3Dcx5E\r\nHTiSfxyES1DhxFg8lMYIT3X1HLS+THxD6MOpumCxOL+SY+wGMk4BlY9uXcAU\r\nDnxyGW//owmVsY6eSMyQKCButK96u0GF/qbarsPb/CVs1azZiLwE0Tk9KOuL\r\nnPJ9X8bkoB3/3ZmLbAslFk0fpCOSd+nQK9v25byN61Kzqc4z1VSnMqYYJzjZ\r\nqm7BVqzaJKoZQ10HQzHoDuO0vyy/Ry7VbWn+VeiGfemoBws8mM5b+S21pG4D\r\n/RH11IhJJnhHWIXXUEohmFRrc7Ef6Hnog+KSah+gH/AL6mRBPcE8suJSBc5W\r\n7IAvUuGgJKOEZ8PMU3zSSdSBQ9aVvY4etF9Vx7rbuyd2wmMvu5Z9tuM12RUC\r\n+xU+cGqcexgGMQV79LrQAkjdNLRPZOFV0W8soFp9mnVUEOcN8i038twzqgWC\r\n8X0ESL/YENhzjzpWorKcqv50jsTwocB0ohwzi5NypmeKG4bNgdAstMzHl5AA\r\nmIceIcg6rWCMxylQ1nNBepwZGI37M9sYX+aLLx+Ky0bJA+RmAXU1WExPL18E\r\nQWdwcMyMac7sqxV1Y51h1NCAOgwaU6HwOEahIhUudw1ZEFf0s6Y+CKJJgusm\r\nWCkgquBG2nr98IwZGhBf9JXdLDeb59mT2/4=\r\n=ZqHt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4d9f6e4f27b68587a15ebef6f003f73cdad60bff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.13e9b0d1f.0","@material/base":"15.0.0-canary.13e9b0d1f.0","@material/theme":"15.0.0-canary.13e9b0d1f.0","@material/ripple":"15.0.0-canary.13e9b0d1f.0","@material/typography":"15.0.0-canary.13e9b0d1f.0","@material/feature-targeting":"15.0.0-canary.13e9b0d1f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.13e9b0d1f.0_1665602497950_0.8855033197853699","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/form-field","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.1dc797e7f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b718a418ae44434dac68c331f3b671f636764f3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.1dc797e7f.0.tgz","fileCount":33,"integrity":"sha512-MPRqk4I9QUtcNeNwRDC5ZhDzdFtmTps7bqAEw1/XJhaH/GbNteZQdDZImdXFFnIdVBnv3ucquFftbALs3k4rtw==","signatures":[{"sig":"MEUCIQC2szmzbsQH1kC9xfdsAFGraD8UIcbsSlvPg9IFVqzJRwIgUYmau+mtKHuQVtkLAt78KD6ShitnvmIo1ji2rSKqD/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS7oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6xg/7BPs5xIRQiEIm1J4ccmrgg3uCgX8urLq/Qh+nmIRw9gB1Z387\r\nnVbkJrEbzx7mcV7AsFPjt6Mt7U8uAD+o1bw95acLGvde5fTkdMNlYZevg9NE\r\nPhxs8LASyvW3HBflmhpqGXlJt9zhKclmIZsYsy8Iqk6tbH4diLqi6mg0yT/n\r\nmR3CnH1wb8ecDp/xlAGImPuhbv1xZVXEhIedvvKm20aqEqy5dfhWB15TZ0xQ\r\nCv4yhtoY9ebtsts4VlhzUd9ygv767DF6xrk7H9U2ZsgQVlzMcDraxj/Q8p16\r\nbh//bi+2+zWo8GOZlyIFIA2gY5dHjIj0xIAwW+KIJnPlUPz1UeiaM3M5JG8k\r\nRW5es5CkbXTLlhtRIZKE4mBBRStqxapUsDDuJWV46VdEw5xn7qIA/dFJIdn7\r\nCx6TKTSJ4MDsrGqgj5t3KDKLF82DpzoDV+tZUKRN6AoJwlWLTgzufqnxtM2m\r\nUNo+V7uv1AlROqUi43jzayVVRDcqLSx5FvhUsgKStvid3QgQIPMO97mkJ/F1\r\n3ORSH18qtPbMX45SU3yh12ZC49SQYOaJc2g5EKSZBrns/wr76JlpZwS1pc5R\r\nouyempQyNI2tEVvPc5LEw/YsblKjirMZG33t5hPUz5ig+5h1KsFZmqtKeotk\r\n9pbJyxTD8Ne3T/lpPLDgJLtt/G7PlLfwc7k=\r\n=y3QG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"22eb0904d0b7a84996854bc57cc417286deb08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1dc797e7f.0","@material/base":"15.0.0-canary.1dc797e7f.0","@material/theme":"15.0.0-canary.1dc797e7f.0","@material/ripple":"15.0.0-canary.1dc797e7f.0","@material/typography":"15.0.0-canary.1dc797e7f.0","@material/feature-targeting":"15.0.0-canary.1dc797e7f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.1dc797e7f.0_1665740519965_0.5430519020170823","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/form-field","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.ed4009397.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c27f7b16f7d395856614155ff08f057e5f92773e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.ed4009397.0.tgz","fileCount":33,"integrity":"sha512-SoYo+runsNziv25XPL4ofrlXBXUyGJSEg1PUxLrJR2j+4rKYGB7uPF7HHH1FL6PGXi43uxmRnmyjCMAqTzbT9A==","signatures":[{"sig":"MEQCIHk6M6PDqzE9OaAYFDEenblb/A+fVqividxrWtIdFtkGAiB9nllEkYO3aj+n5lNI8bRe4yfoQli0mQbJPGWJjglHDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZOcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwBg//Vl5+dwAG/aHOMF9A1pjj9LXCjp4zJVmxDAswLpjxqoLOkYZE\r\na7liHKf/xCn/ZUYS20+gtg3WJorU3gqDFED0uD23ti00iWlkDB1lmxstTkhh\r\npFpTp9P3wKBfJpGrvUQ+pOXILR60QMl0BZmBV+exOjpLq3+NBsBCZGITjKvT\r\nQHb6W/v9HnUyr7UUkQbH/l+SdJdWHc3Z+FDyil2/KMi/RiZoRi0fgGyVcDlY\r\nbrNFMpV4UXjynauT3qeegGaPL9bx9p1AUm7HhpwdtbE0x4S3zLZsVLhAjcBG\r\nEAdwa4mzPeenRpCKEECMenKNWI6N/hw5ZZW3S0c387eCmDjTV2WDWd3POYTP\r\nnYYbH3pBMQgk7JL8QexI/rOwhscqp3iV+kb+BOTa/WG0zZzCqL+okiZRyaZG\r\nNZOxlyqBPhMCv4VJwP9Ql1Ljj+4YYWig3xa+OQHv4+zvSMQfm8Y/9xr1lDu/\r\nQsZuuos5Q3mUnzeuiHm6IXID14Dm4G/+tyysVx0zC1lrTvmcoU1aUSbaGUq4\r\nc0nPAHqcZxeAsU82v5kZE32jeuWVIUegEu1IEZra1B/vVCMnogIHkcaqFyy0\r\n+Z/9niM1bkZjZH0I9GgSI4caMgJ5oehdUqSDjYaTHaDLyLFxWvWPGnlx1bDk\r\n/D7MuiZMiq+U4TD0tiyzzayBCQBFCmhjUkQ=\r\n=lHYx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a749634198bd160446873ac2c5cf3d4345b1620f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ed4009397.0","@material/base":"15.0.0-canary.ed4009397.0","@material/theme":"15.0.0-canary.ed4009397.0","@material/ripple":"15.0.0-canary.ed4009397.0","@material/typography":"15.0.0-canary.ed4009397.0","@material/feature-targeting":"15.0.0-canary.ed4009397.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.ed4009397.0_1665766300130_0.5928960189381489","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/form-field","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.95ef196bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd32ac82cd9c492b737fe79304b887688f58c194","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.95ef196bc.0.tgz","fileCount":33,"integrity":"sha512-a35KAlTCUUklvku5OS9NHLVq+xsIRJ0LFeM+7ErUpGIHxJxIjhp2s+2O93IJ0OgDApu8rWRLurV5xjMrd+u4hg==","signatures":[{"sig":"MEUCIQCOTx+sjqWQNHvRj1HyLkntOuIICARwefj8Ol8wjIBG3QIgYo9xnA4VvuvGi6Rlor2qoQoF3eQbHB32kBDhfySOCmQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe1LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0hA/+Lh4Td3l3zQnGn5YC5wNH3pAKNHyICp7nvGN/FYtLkKEsYUkS\r\nFeGI6FojrC/tEl4u2KaBzaBsgDZLxidayeg/jD5mVawp7Cj5n2pcvCSWcuXG\r\nK0TSYKBG8MQiQhLZ+c8IVjwyfNTWm8AgvSL1juZp5A+wFK1icRd7lV0kZ2pm\r\noNwohgxzny/T/HCmzc62GYZj06FnFT9AHjKejUMM50G3SvTLuNmjgXoxrvfu\r\n4y/QdlLQPxG/ODqQmpkCUfZzno3+HmMe0ibsU4iobpAOfCZQdoGeDXqgxM93\r\nKjcOSudjkVBMEk/TbBU6p3bF4f0lYEt6TZMMpXE6nALB82MepZLI/CsYoDpk\r\nu0rbnwXQTdmw5OOQpM/VzwRtyoF4Al29dInMLPsb7hbD9uPoHvJ4PhEmVISh\r\nYSCiBXPrfvqg7lS0x7scLoOQJEjUIzzTfsnjye+tzLaH0T3FNVmJlRvezXlV\r\ntD+kBCjqOUDrGMDz69s6ntoaRFFy408xHzzzkoBirS4D2xmpybUiKwIrGqH2\r\n60M83rfX7iI7aX3tiLTLQnLP9v0iHsUEAHbuXw+gnC75BsZvQuqW4rbY5d6m\r\noFjJZkLgEDPgUG+pP7KEO5YPe37CRCXatdKpxduWq6tLvI7QCEoohWrk1aMM\r\n9ur/LbloSnNdIdAZHjIquJTE+HkZAapsIUI=\r\n=/EB9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c133997c8c45e50d9ebfe12fabab75ec90d244e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.95ef196bc.0","@material/base":"15.0.0-canary.95ef196bc.0","@material/theme":"15.0.0-canary.95ef196bc.0","@material/ripple":"15.0.0-canary.95ef196bc.0","@material/typography":"15.0.0-canary.95ef196bc.0","@material/feature-targeting":"15.0.0-canary.95ef196bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.95ef196bc.0_1665789259590_0.29695114467881956","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/form-field","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.13eea1b2d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf4c8c3c7c1e0320369dc13f83c1cc2ccf364d4c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.13eea1b2d.0.tgz","fileCount":33,"integrity":"sha512-RwiBMFkjAwFIkONwW+Rl9xF+rRhauYla52bCwI+c1605ulN0STi6u0DtUkwsZ5jqnTMHwPyXJngmpPmoPJgZrQ==","signatures":[{"sig":"MEYCIQDUx9G2XvpHPa9FOq4++Azf756xNLCZph8X3wHScZF1AAIhAKYThgJJ8nMShYknlH8hfpkfVwwJyTbeDfwFb1vYT0cx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNFeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4SA//UTo6jZe8IMewuIS3uekziAdSl0Sg3Tp4MaDpXsSA9q3d2HzT\r\nAXTTWeV8IqFdFE9224e96BcSPaeaxGjIFfmXce3IaGIlv9KkHQGWkXy0MOxl\r\nnH9CnOQJ1W/u99zzcvGZJtzZ/A4YTSbdwKmsMBdO+lksxcvylCITN/SihaXY\r\nlBtyJ3GrJpXaESmFlYVtRjNuY8D11o9sTTzNKalq+NjByugOgpwuIha/JEKy\r\nLDrin01BRjpEfAWB+ylNlTK7qntyhMXxEfibus3XFAuUn41Syvw0azF9xonH\r\nPDzX91kN2wa3E9qI/Pt6gS9c0FeT2sBjCAPwTWSyUYVW6yfABLmj0ffohaMF\r\n8uRcLUdDtVwr65rqnRdFdxHDng4+40iIhFnli+Sc4ZdrkkfrqawbypMFgOG+\r\nRrqC4tP48b82tChvfNcM6l1n0cWwtGa/cVJodo9/xFWOxP9nGQacO7Ls9qEV\r\nV/Lof25L21ZfWegONEzgpkx4X0CDOlJrWI1XNo/q/ZTsNtlwABSJV3MbBrkb\r\n8YPbSraczSoChxfE4feIR5DvrMWO17IGPYfYflr5GPrPu3jUuFsX1PFkOSjz\r\nOQmoayXcI0KymqnbMeP850E3RsdselU2KOyp/lUgf9UqfupR2WZPhxggZUMV\r\nlewE5DrVouXxLcHALTAj2cu6VPZwUPp0V6A=\r\n=lb6H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e9a13860e495e7f113966b4c71b9c7931a32807c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.13eea1b2d.0","@material/base":"15.0.0-canary.13eea1b2d.0","@material/theme":"15.0.0-canary.13eea1b2d.0","@material/ripple":"15.0.0-canary.13eea1b2d.0","@material/typography":"15.0.0-canary.13eea1b2d.0","@material/feature-targeting":"15.0.0-canary.13eea1b2d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.13eea1b2d.0_1665978718617_0.33436249507823845","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/form-field","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.ef9b2babb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a1b72dbb8bc813ce6be14001b8fd233e1992ba8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.ef9b2babb.0.tgz","fileCount":33,"integrity":"sha512-UWvn2N7GbrAcCgvXx5G9LgJ5NkE8oTA1949YA9ypiDfHbjpRNFFERhL9Wskg9Ifd8+jOCRB6aZtUEUIMxaWYAw==","signatures":[{"sig":"MEUCIF1zTu3triYa5PPvg8N9zYXlYXc4p3PV/A9zxXb87Ov2AiEAhBHn5CARNQEyU2yG+Y7Ub/MGXAWvGA7HoyqpXnP/BAg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR3eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4Bw/8DYDKv/EyeMPLWHGIl2IvuMx2Al4pYXtfOi/Qs7hwUCSfzZ2W\r\nEbxy26NzO9RuNrqX3wRy3e82J5F3iK7Fqh+QffFckG05oh80pQKuyF3gxCDo\r\nrp3yLB77MEdSndSgeng0GxyjE/HVygIXESMel12rUSNBLsI9idhdUQ5lHfdG\r\n7Mo7f7Pnlva+Om3GEoR87NmyOjCnXiE/tmt3w22U3vLKlWOgdBr5TwmhSjeD\r\nmpZX0jP7cNSQdTTYWjtERyl471/Z+/fKiiO/H/f0BcytTVeeFUu9fut7opxV\r\nRCNuUVaHoF26H28k8RM+BX8nBcxASVWE6tKUdEFJsuxaj5SLCwH/v4m/Prp8\r\ndMOvSMjAGsJ6/BY+TaeMUbBpDKdGxsD7ssk+rT5qz9WHJs8BhVkOc0t4NQGK\r\n6734FTajHAHAYSyzuZKR4amQMelW4TjtITI/ac+1m9C8nkBL4vCSGmzT9oLv\r\nZDt63AXWZrQkRnUQ7Gc9g1L/qkZkpJKPLMVGbZ5aQWmoae1hpGlg10nNJTCZ\r\nYQH2OQl+gTtqgb1Q8+ezvAQppXVYxwUp0plEHu8nHdfqobreYGoYvDn1NFDv\r\n8cosNdMwY4oywap0skLfg13yigedm4hJ4G1ZTeGGH+01ePx4Nmq3AN+CFz9h\r\nvtLkEMQnAlV8Cv+RrTr7bzCSv6k1s8gHVss=\r\n=8wNO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2e04dcc89ca80bfb50d7ee1e4172ff9713c149ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ef9b2babb.0","@material/base":"15.0.0-canary.ef9b2babb.0","@material/theme":"15.0.0-canary.ef9b2babb.0","@material/ripple":"15.0.0-canary.ef9b2babb.0","@material/typography":"15.0.0-canary.ef9b2babb.0","@material/feature-targeting":"15.0.0-canary.ef9b2babb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.ef9b2babb.0_1665998302731_0.10367802506872126","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/form-field","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.cec7fb987.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39c2576a015fa489d79ba3c742ea637d27b9fbe9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.cec7fb987.0.tgz","fileCount":33,"integrity":"sha512-pbA4bHOS9XaRqAC4lMN2doLiZRcCbXs3qwzmyQ0VhrZfRAFglr0VpIkZnqt72hnVE6qq9lWO9SJSkoxftr2DwQ==","signatures":[{"sig":"MEQCIHo6OCUpPZSsc1izcZLJRddFN3P+RUCx2S6GAQ24KcXcAiAW4yZsEUOAhARHO2029ZRCaXH9CuggCnMftmWdPZ9lsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTTsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdHg/7BzGbZeC+rNIfp4t66Dh9Lx7VhzAuWUCuLDl6OUxIlae3EqUE\r\nV65S1agf8LKmhey5fGLOMU/g1fBCOuiyDRAcYv8Lz/TZg70RlkbPH12cbGJw\r\nUxdwVfZeKZnpgq63v8KckaHottZ8UViErQZpyoccT3xpmGH6N09V/MMuBqKA\r\n86T6xiEF79qavJUtiVQ5Fbeq5xNXLuuHSofvaD9hn12U48Un7/p/F1S/bAtt\r\nMkNWqecz1BGpwMnVrG3iCE+6yPHsrC4qkYF7/KGCGF/DNSddFJ2OURIIhH0v\r\ndjNkeolzJpU09V4XSirTR4kaa44AN+rsYEsYRMb0PPEqvsJnHzPlGIgcPR5n\r\nurqKd5pscPkB0v7Ht6MThd2k8dR3lmOLj8sh+t6oxDiq8O1rSN9wol4fyMbl\r\nobNg3TbMzSJE33hDGcks4X3Jvi/L+/rXJRXthRwWwoIq2RpURO59VAoIPMoW\r\n7LuptI4wg+tLVQWmTfVrZl9V02ohOKSBu/e+EXSYYVvqqzm2osiQsS08j3VA\r\nzeRUUGAtYlV2taexfJL6AD9GNgRwWczar1pmudsFeeUXj/mvh4a5ug9ImZHL\r\nbPtIT8/KeJg0yO2cRnffzf769ZQ/r8bxaC+Kbk2mAxkNdrlLu92cm9+n1Z/E\r\nzLkN0ZB+E/JJ0/dCPinsJem5ddgAXJ2/Ifg=\r\n=Nd39\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5af4beeec511ff0266173424b4b179e209402a5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cec7fb987.0","@material/base":"15.0.0-canary.cec7fb987.0","@material/theme":"15.0.0-canary.cec7fb987.0","@material/ripple":"15.0.0-canary.cec7fb987.0","@material/typography":"15.0.0-canary.cec7fb987.0","@material/feature-targeting":"15.0.0-canary.cec7fb987.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.cec7fb987.0_1666004204738_0.6443951741735394","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/form-field","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.4fff58b08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15a6f7dafeafd21c07b47574c2eae7b0781e08d9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.4fff58b08.0.tgz","fileCount":33,"integrity":"sha512-NJqurbrznOSbIVsYaOsixkufJ0pDtkMJNzNwdgVGlrddg3VwXj4Ct/LQffMEGhskp0lVbuExHrBPSzvhKm/p2w==","signatures":[{"sig":"MEQCIFfthVocx4S8qjnjcrzI7xJlq5MBzKbVquTvQ/ppwCsGAiAVzaFiTEJ0SSj6Ye5Na7p6k0R7YsCPNdWNdu3B3yTCDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXNTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhmQ/+NWlVl2hgoCY7sFOUUwf3EruvHesO3wLZvzm+zJYQgmkltdH/\r\nlaKfUVq3BZNTV7EOHigKi6tEfnFHRkKlQPNe9kJgjnzwGIXkeVcKqpABWXBF\r\nJzzfHuDYMamEiMFBM2nqoZJlgxjWZpeF/XSnRFqtZauw4mvCdYF2KmXoiYX2\r\nRuKEPVJ0eGlmyDfUJAj/ghQI6XzIKbXq23uamA5jA/jWWKLrzTo2CUmX/2Uz\r\n520UnXqLD0xgPpaaV+Y3/ziAzQB+De9Zq8x6QO2UljNvbepXdzCTGzqoQFxL\r\nxrQou/MZgLLDu3fevRYj4sdts6DbUSjPVhI9iKDIpowZVOenPlhnJ5G/jAEW\r\nLzWt6l/tpkq999xcdg/+eBbnMYhUgdY96Jj/sx16BDkN1H0SNYuveRbZyw/R\r\n9nfDRPJjsAxN6U6+af61o2HXHfc1F1/Xub3r3ROy9xFna9PYAb/16GBVAXhR\r\nQ3J1W+LmDsZTeb/X9pIMv4c6iGL+LYBaHsArBrKti5qHI7j0raOoiTvt6KBY\r\najMjE3mglKe6IvYstD1YUxCZlCeqIHXiDjDovlQgZmGLL8a2Gz2SoGNfL/ik\r\nJYOD+oaJ5H3UjwBSyK4OaXOoUhE9fOKuofWm8w/MYTdlji8Wm4YFlGcS9L9D\r\nw6sxyRkeCZG26HK+4wEemJivu+e4ddmE7Fw=\r\n=kU5T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b44726c7f5a5db16ef660807b5247cd71a447c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4fff58b08.0","@material/base":"15.0.0-canary.4fff58b08.0","@material/theme":"15.0.0-canary.4fff58b08.0","@material/ripple":"15.0.0-canary.4fff58b08.0","@material/typography":"15.0.0-canary.4fff58b08.0","@material/feature-targeting":"15.0.0-canary.4fff58b08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.4fff58b08.0_1666020179196_0.7814655752289166","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/form-field","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.587d8f871.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e185dfa1c21b09fd6dfd2a79c3f9499b462a6e35","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.587d8f871.0.tgz","fileCount":33,"integrity":"sha512-2z8z3ynlP1GO9G3EqC6o8rUup0TRtCesg9fFBxN51UqKqqed2bF4IJx3A3XKw9ze31NET8Jca8J5N/PU7yHwKg==","signatures":[{"sig":"MEYCIQD8y2Kv5l+Q0daWss2mlkDijoif5rVlDz9h4bJdY/0K9AIhAKY9/3T6BigMKivQ3j4oAljVuYGrcJ6/qQs6XBz2pebO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXtrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOCg//QAZzEqup8WijZPMqivNgDaL8URrPtbwAodJIReSQX6G4kVxB\r\nwNbnpxQzDANM0DuUtfb8j4LKMsf6i2mgpOyc3rbz3y2gzQYd2VvfwhGbDCQp\r\nvgx9i0v/bS78xvWgVzl3bZTyWPbmbHx2A3a/Cpg3A6uNpJ5sNVaPi7ZGEx7p\r\nFcb6KlA21lu3qjoacpaSd+0HRAZpkv2etRhdUo92rrM3kQLaSkpGO8G1uDYt\r\n9h+Do4u5BUOpZhwczHg9+Evv42zkZ89ODrrYt/Mv4uVfLrDNMjuvKQKxgu92\r\nbWpLJtkSwjgZznpsEbVRlqod5QR8Wd30l3mYTbbAWEz31so7vdlBSIuBwlnK\r\nYvuOFKYbZJaK2TpS8Ime2QAQXqcsOHIfFmln+SUdSyqLsu9tupUovdj0X3OD\r\n/UtLT4RACX8AjutzO26CX/RNakNu3AOW94jsD8xRD6ryJwuYWiQFFajzS8Ah\r\ni/r7OjDuGAVWk4ZJXxPuiR1XC17836df3/8lAqW2tDGj9ks8uUrm48bFLfa8\r\nZlyYKNe/wiL7WzwcjmjDnPSA3N0rcfxTeWwbX7OGPMoBIYU1DgUuUHa/YSOl\r\nQO49E0zPp0ivZK7ZI+DnJ+OB9NLOnPLUulaammohp0DHVUwbiC3XQYLA3weZ\r\netCDdYqRWKg5e4/XzkuP7alIT95ejozvSYg=\r\n=shU7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2ec38be871dc355461961e4ac44d48ec44c42a1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.587d8f871.0","@material/base":"15.0.0-canary.587d8f871.0","@material/theme":"15.0.0-canary.587d8f871.0","@material/ripple":"15.0.0-canary.587d8f871.0","@material/typography":"15.0.0-canary.587d8f871.0","@material/feature-targeting":"15.0.0-canary.587d8f871.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.587d8f871.0_1666022251015_0.5778119968354294","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/form-field","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.edf4b98d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88c53504d08cc44766205c1f97adefee76b145b2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.edf4b98d0.0.tgz","fileCount":33,"integrity":"sha512-RaaoIGNwaNgSU71k//amHmTYA90OeQgMY7M1VtopQ1tmoXEpJcyGU7yaRIOTX9KCMG9cPagNpeWQceeQubYZgg==","signatures":[{"sig":"MEYCIQD/DDLDycEOihwyjtwa4we3AMLBsIvARpq6giDb7p11PQIhAL0MXlJqtaF3iQUVPfdxCCxoKsv0EoFTrgfA3wgR5fwm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187880,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYWTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHQRAAoESsEyBJg2s98ryUx8uYr+aYcYHWgxsdIZGy4AXnwiQ6D2Ii\r\nPd525XorDNvZZrwMje5qI2COphxV2ATiXxhqsXM4YqSDRiWrtwgJxXf/trl2\r\nmqPDg+yFeJcf7bF+BYcXEbapRvglayvBnrpBP0VRK1qckeGuyE0uT6SWaE2m\r\nkIjkxGIsLNOUAghmF7APp/3VIz+YZOFLqSPCsdjEtrq2GbYVOGhekPnR+9O9\r\n88qdyQaksGEUyvnj5PwCEZ1ZgqzbouoC0JbcfyVo3/ExLVdhmJH0jQ6Yh0kC\r\nnZVN6Jb9DMzJJSp3hC0TPlFBvndMxm964/T8rJz6U2YWsUDvWWqzOJ7KkJZF\r\nAYF5wPyvqiuDCLHTSJp3HPBbRfIMWP3/tJeywr0btpq/2s8UheTnmqomxzo2\r\nydk4QrIIHzAXfjTZ/FciS4O3V95/OEL0wlnOvKFumbY/HZfOLAJaZxDWv8Ed\r\nscUx6igIQda9bK+djPeeThCdsSE3+ITpUr6ps0ikNrBBBVkoy9+YQUlKNW/d\r\n8s7pA9zFz/6r2AXjAnr6umdpdekGrjI5WyTV9Og15CqHnfk6u2yJ1bqfOmEj\r\nOMCw0OlV2Q/mbry8ys/Mg4oRPN1gVWNkJa8hP498ZTrCNIS7cpNAA5tfyr+P\r\nlqw/bX/bU0p6fylO+rnvhXm2gc2R1K0hrz4=\r\n=WX/A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ad4766965d2bd24e69b2e2e6940c960907c93c1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.edf4b98d0.0","@material/base":"15.0.0-canary.edf4b98d0.0","@material/theme":"15.0.0-canary.edf4b98d0.0","@material/ripple":"15.0.0-canary.edf4b98d0.0","@material/typography":"15.0.0-canary.edf4b98d0.0","@material/feature-targeting":"15.0.0-canary.edf4b98d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.edf4b98d0.0_1666024851450_0.7488966785856974","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/form-field","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.024ac5f16.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57359804bd8ba4af18588658b9bd035599be7739","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.024ac5f16.0.tgz","fileCount":33,"integrity":"sha512-zm35zwV7bKZEPjVuaZe4k6NVLgq+lGk2gD9wJ631043plzR4uAjbmZw8pKNBroNGjR9MD6t9L8Lrdj2Kf8h90w==","signatures":[{"sig":"MEYCIQCr2iT2FgCpcbdCXymgR9CE8YhFmU1ZS7KegiS0Rwpn/AIhAJm0H+zXbbRDI6HEFQcdyRPhtKsA3Qmx3KE8gwgQj6vR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdpmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIsA/+NFW6qM3TdP9cnEcSGcEhYbwOclB3BT2r8L4LT4TFTQzsBWTM\r\ntrnfwZvWIqDie3dLpBko24JJvNC4teuI4omNotyTnVPpMnLrVcbLukRcsyep\r\nJNOz3iPEvNCVhoCFlgVkVjkrgdmN/eqmhFIccXRbwhhIwXD8tWfaawSHhi/M\r\nyUk+QwkxeSbo/xZR02CPqEKSHVZ+dFE4ptWbPNSzVSTr4MlAjCMC9m29xHOs\r\nOpLqxg87gyTgeBNJwr6XED1lrA7PojBBRrNhV5cfJMiLrj5lbbDtOXuBZGJ+\r\nc1AHPWXs98QuDa73juRwIR+AQDQY49Zzwey7JVU5+MXD2mwW7c+RD/QpGbMD\r\nYwAk73M/jup5W38b/BAy/uPJ5SIfHdL1Y4fmQNDIQKLMOlfVRlU9UBqkt+7G\r\n8uiQIedfmfily8Zl/FCX7KelDwcH8axRX2pqmqsi235/T9FHQGb/S/xS3zf6\r\nsvQysAukm0so2pMTDoIxY7plspcVBFLFzabzquQ76FAXEYbmMrFbLh439RzU\r\nJDfNkPqQA1eUBGgCGVhhYNG8bS5MTTSc7T7P1MsYNihlR2ECNWw/UTAfsgQT\r\neYa2WhDE7y7u1G9VDjkQJzWyvIBp0wMTYdIWQKkJJziF7e3SvE8AS0szu/yh\r\njNkU5AdtNnbDJIIT5j2ofg7TQK/RMu0kkP0=\r\n=BD0Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9ad8e77cff1167055c10b93b4082fd5b4e1d8643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.024ac5f16.0","@material/base":"15.0.0-canary.024ac5f16.0","@material/theme":"15.0.0-canary.024ac5f16.0","@material/ripple":"15.0.0-canary.024ac5f16.0","@material/typography":"15.0.0-canary.024ac5f16.0","@material/feature-targeting":"15.0.0-canary.024ac5f16.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.024ac5f16.0_1666046566369_0.7289642009526662","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/form-field","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.c8bdf6144.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9a453ba2f062f0f498c6b601082d58ccb02aca8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.c8bdf6144.0.tgz","fileCount":33,"integrity":"sha512-tUqMmdZHtDDOlSwZ50A/DMMGTtPKRckoi6solbZRCzJloehD2pOSkMxDINsVzXwAp7/uk2dmtycbMgPZBkKzKQ==","signatures":[{"sig":"MEQCIG9TDLvrokWfnSVhOfH6W7M5bRvGdFMPXBYBrrFL9vIMAiBEdXtPaYYcrhIrPvE9DiglbiDhHgX955cpxP9YYnPiEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu80ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/LQ//X00mx5aHd2u19/N/t0UNnxcYttc2SVPKOHBZy272Wn1GwIYu\r\nuayeASUuhtl9b8+qobIzKgEOtjGGLw8u+eSKcXjYqodufwjiqqN0M6DRdrfz\r\n31YjYttVMoKOqtPFl8IDJqtq8A9Hcx0c1xhYwrZZqSwHLSIEtkDsXNFozpe2\r\nj7x1OznGomoUQWpjs6dzJyD0ynejOzwAr3uTyKwI0Ro8EcoPBWh+YNJEw42M\r\np90qU0nBAIZ1Kly/EDaBRxZHsE72FFiVoPduxfyURcurq8Af0okX+PTvLPFV\r\nKgLAaeMwZ82J4U8gz2doOBoSTcWEQhkFTZ+rzwVr61mX9i2Qvrjt2hq/tLAj\r\n5UT14rcWwKJoy24R+hgH1IHBctJir0Uv3G/VEjjKvvHJ5ckAnWon5smJEqBc\r\nyPvoqAeyORRtdMp1o2aucvNv7KBbnGfwCwrZnoz/hHJYOw2i56XkjfnqNti0\r\nBKMyzipMn7uKBP4jv1aqJe29heP0JQgeyJfsFVH5SF4paGlFmtpHqtfHrHL8\r\nhSda98qdLO6bVKXxIcv0Hqq8tejA5f9DA4+xTazuaQoiStxuWpQmLJeDQVFp\r\nr7xHsuNiBWrXC4YZJjtpXS0hwqAXBx95ykJFWWjCaLWPVMjJl+xHRfs8LtYy\r\nGuOPpSng9fnglbQO7YXjW/Wcmbegx1iw7ZY=\r\n=/ql5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"92f4fcf51598cb8f9b9e03a35332a980296c24e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c8bdf6144.0","@material/base":"15.0.0-canary.c8bdf6144.0","@material/theme":"15.0.0-canary.c8bdf6144.0","@material/ripple":"15.0.0-canary.c8bdf6144.0","@material/typography":"15.0.0-canary.c8bdf6144.0","@material/feature-targeting":"15.0.0-canary.c8bdf6144.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.c8bdf6144.0_1666117428561_0.26146695484716376","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/form-field","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.bacda4885.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c710df60bc52eba72fea2e32d7d34dd046f81956","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.bacda4885.0.tgz","fileCount":33,"integrity":"sha512-DDBWzjUaoQttony6611AA8yxDwRMRDNskNGj7CxJ6gOXl/wX7XG4zzqZlWvTLUtCBa9UYoy7Csjx3m6lnMoANQ==","signatures":[{"sig":"MEQCIHDVKFmpvSFriuSpQiXmoeyMYdI5tsudkw6Keuuz/IJCAiAELkDrxArWTeVssuv6cZjjmMyKuVDFloiJcImoVxkgug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvO8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiWw//SxLnCJcC4CrkSG9wlpJNtsWrzsTfmUrPEI83emHNxcyqRsDi\r\nPnh/0qXbRP/wWTj8vgl3JrATvmPrBTqegFfI2LxPs+9db68MzGDX7kJJg98e\r\n+J619n/crZP4sY7RXjBwP2t7R40KFw1AV584GJQigh2Gi3d/YyReH0BC3BDg\r\n6nFjaeKy8vPaPrF/0C6Vx0Wp72wSDh/pO8yAKqQajWB8yWhJEf2nm1Tx/3ZB\r\nlyDQctO/NrE84H9nojWtjCocuI5qwb694exRznV1rQndWyD9wT7ehVkvW7kP\r\nf3e5BHHLVpZPsJV8VEndio8cV4/1V+beQ5iP2nH4jRbQHiEw1NMpl2kcwop0\r\nhX6PBME/YKgEh3zKW5hVJCBp5am1xzzIP5kmme69Rszfwfz+TlaHb1C/Os23\r\nwVlToF1FBr+futhup9eftp3GWIyENWMzJgdZs1VG6uuZCxjFCCLYkPvC8XwW\r\n/RshmpzpezGdnqAW6msUJCj4TL8XGFA9mSfDylMkceHXv5bKtRFm6ZB9AYoq\r\n4kXh/iBOswS8OBnmKj9Uj5rgEqh8DZpHh6dmc4cxkH3ecP/F2GmiQir2UEJv\r\n0sWgB7sjIwygugkHOeheyi8Yxjnl6aGNn2b6KHbgp09CmCMsuOLV2+7sQWru\r\nvm+Y0l2SWhYHG3uxR0LaNWOEc9VVy4Ocum0=\r\n=yQuJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9e0a7dc5fb5e2d1554093d85949ffa6c2aaa33ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bacda4885.0","@material/base":"15.0.0-canary.bacda4885.0","@material/theme":"15.0.0-canary.bacda4885.0","@material/ripple":"15.0.0-canary.bacda4885.0","@material/typography":"15.0.0-canary.bacda4885.0","@material/feature-targeting":"15.0.0-canary.bacda4885.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.bacda4885.0_1666118588190_0.31514025551093927","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/form-field","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.92b2556cf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46198db126c90fb0e305b81e2d9f360c98f20f58","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.92b2556cf.0.tgz","fileCount":33,"integrity":"sha512-QFY3U+ZAcJTNIvxZljl30wx32XbrdTseJeOYdl5kthmHswddmydi/2BKGP44ZdUZg57G1hXN45FMAZktx5Ki9g==","signatures":[{"sig":"MEQCICHJzIRDodU/e5+6C0YgsZ6w/s2v6hBdpALl/EKhgD/+AiAbVir5/VwJzSdd9CpFh7EOUosaXYPaqjbhYGF6csa0bw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT09LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrhtg//SIukgwf5xZY2xDZw69/wQkvPKsm9wpTYdwxQL29zPJheZGZy\r\nuGDAkLIi2Bp3cPqD4Ystvcx9D1tO5LdJusCjxRVHXmp2APMfo+5y3+qXnJKE\r\np3FcfjCR3auCYqrFF7+gpXnFD6pMVWJ1DWFE+Mp/BSnN7MZhXGo9ZeJiKqWs\r\nQLHJtf6QJhKnqPEs+YkO0BknKdb9fldyw1dY9R4LcAxy694yeIzsuYpaBDbr\r\nsnTuwh5o/qN7GiE/3621yGBn5bhMGk4U5P9vYVP+H63T1IwOvmD7Wf7rJSGx\r\n85oSeVqfnOhZdNQ+3pXKY/4ZWsYIrHEvXLUbbCBW7WMjiKUnarQ5PJm5dxXv\r\nEO7LPVmsENAbRtuDw+ciouomk03//9BcBQTmWGhBqAqhvWdc6ojCv+2GtvMK\r\nZBFcKfQdDBYBSqfdzuM3TtJ64a6JZv5hUmq2YzCn4d9zfxnq8gBJxERYASYG\r\nC7kkfNyaSDaf+HLRI5I4N4zb7+m9AoY77iLZXCFMLVptrcLiYkUbXI3mpAPU\r\n/LvqxGNNEcCSFp6zRUidRqoGITWH7FxvehY7ShWpp+/TLrt3FI+YJsZxQwCc\r\nV/0csxkQTZieJ4Fa6fqbbfdRuOR8/kCEEaJNmDXSKOsg1hiuog16YVQmNwYC\r\nAwT2uhb1Q4EpOol36TGtwTdKX8s7M/RD5vY=\r\n=lZxL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7ac326ada7a9c6e84bacf5e01a6d22e675dcda8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.92b2556cf.0","@material/base":"15.0.0-canary.92b2556cf.0","@material/theme":"15.0.0-canary.92b2556cf.0","@material/ripple":"15.0.0-canary.92b2556cf.0","@material/typography":"15.0.0-canary.92b2556cf.0","@material/feature-targeting":"15.0.0-canary.92b2556cf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.92b2556cf.0_1666142027690_0.909959755151174","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/form-field","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.cc804509a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a915f5280d7bb65ed07bfe6d71e5077be00bb39","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.cc804509a.0.tgz","fileCount":33,"integrity":"sha512-WQo1gabkmEthE0q8q6duu9o+Jmd5F2cAR/7edzhyOHP4wXssYKNkBnoRm1zMeshmn7lOWcR4GwmUvhkS+Cts8w==","signatures":[{"sig":"MEYCIQCOflWBx1JDZ8C+S+MBd6QHnNTUcrm57FS0Bdbw3nbJagIhALLIqjYAtaMjrDDxAnzviRVJz4WIo4mIN1vLKy6y/iM5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1AvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUxxAAlNN6KZoBj1oDvZui1dbYoXhgO6IhMKjNN5rtlwpa+50sjPCb\r\nC7lhgZDdHAJKgADiU+NLHI7ccOtNm983DXKnOAnAO2jMKrL98MnA+qXSNX2X\r\nowK3T9YCeYqz63fO9AwD2+sYkqDG/6404q1A0k+Oqb5LSNImxOGGW+7zDfyd\r\nwmtaNWTMlzF8ArojqF6OdEccPnabHqLFFK7dDdo3d/jp5yZmm0FZQB1dMxmo\r\nLkxut0mSRy2Xv4TGyFy1VKkrKfKh6uG3M4/KyNUdAfbylA7ts97IIGu/IvWh\r\n6gzt2nxLZrvg0FFbutrPBX+5JIMxRyz8Ee0/yTSNyY5mjJaDr5DoQHh5KKg2\r\nBwZ+mTOitVhpBnpprWhMsj6aTifKsX1BJPEMrB+fPIWjkK5vlBaitec9drTi\r\np5O8VrLPCCeS8RHIO/OPQRPLqT9g1D6HrmWBz1OiOZgVsNAcIr0s4HC+b3Mg\r\nSp4Aqn89tGbCrLLilaQcOT3UQp0ER+Eh1Rxazvf+SsZVHQesiYUw+Xmial1g\r\nLS+q4lJhaiHkN1MtdZjIhFeE6+TjCQESm67ZrMzXZf5ogGZjvFqTvUft4Z69\r\nCRdmuzEP3Xxn30qmlmTChPc8HyKqgViR6UjpkDcIYLXeSUBjlPrka0Bl9YYz\r\niVpe13HWrlEL/NOzY4uRfwOFRBNjj/7E+/A=\r\n=F2w/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e8cb944f6f2263dc4b4fec5d7ade2bdb5172b4eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cc804509a.0","@material/base":"15.0.0-canary.cc804509a.0","@material/theme":"15.0.0-canary.cc804509a.0","@material/ripple":"15.0.0-canary.cc804509a.0","@material/typography":"15.0.0-canary.cc804509a.0","@material/feature-targeting":"15.0.0-canary.cc804509a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.cc804509a.0_1666142255532_0.9191620207622191","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/form-field","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.982bedae9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0085dc3ff052e082fcdae0a594499f035eaa9826","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.982bedae9.0.tgz","fileCount":33,"integrity":"sha512-vXa5AsHzh60bYdXi5tcoEQXBFLc62meirXroAOwZoBqm3ooK6DamKvOsbaM4Cb5WOr4cTFjiykrn+QpU/wjV6w==","signatures":[{"sig":"MEQCIFOOzDq496985oXglqHl7gxWV34ieciB/kLHSpo5gooxAiA06RoYNKoNjbEwKLqobOsB7XGGEN4Z9iPcaSonaE34CA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1TfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2AhAAoc5E8IPsQ0aR5yotlccllLOp6nyM2Ay72wiKuxeOz/JjxyrE\r\ncpg+dr64UNzbHO7VzQkEs4CC7aZ3afHCxCanFCOhlueTZY6QKrDBkIjVUnFP\r\nK3zbZVe1JF8zJeaAQgLu/JCQ+3syt4p5Xn/YuFXpxjmxUwtKdrDzBq62LbRB\r\neffUWhmGUZJCjWYJxwB7PMiN9QcheoH2JgdMZLiNdSj1gg6a2IH9muj5s2Wa\r\nDxUCxquqm/cL0iWVpEcyWZjOqLWV1EUQ5GlDBL82JxpWWX0xXqoEC9YCLpmx\r\nAyoBZjrP/JJM1KmrPgzow3q39ByHnmX9LKvtfW599NuqUElxERFOsZa1wAsV\r\ncMKWff6dqnZtZDBeePxYptXOyr6hqGGwEzRmU8119Nw53OdHdyTDoaIB/acl\r\n+JmBcJUhJSLcdqEQ0y+mBEVBIk4eoLoZuKKLdTLnS/qibc3HngP9lpVRJwnc\r\nflGGaWUbje4IuqO9bsqMS5WqgRHfnRVrh+YjHBtZFAHwAx7f91BmSllP8L0Y\r\nQu41y35YpRMTtklz3Uuieh3RzWv+17oCfvLnCjbVNCK7N6xW847oWVIB2xpl\r\nzA4mrS2Q7sh/DQ3nREamqdptX/iXU/uHvGpPxGgEKNgny99gbaCNxsgXqLa/\r\nFHPsOZ874YcptWdrdj6cfHS9XGVQj0ONeoA=\r\n=URfE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"247fc73217ef7d2438e876f1477d141e6970c9e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.982bedae9.0","@material/base":"15.0.0-canary.982bedae9.0","@material/theme":"15.0.0-canary.982bedae9.0","@material/ripple":"15.0.0-canary.982bedae9.0","@material/typography":"15.0.0-canary.982bedae9.0","@material/feature-targeting":"15.0.0-canary.982bedae9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.982bedae9.0_1666143454857_0.7016218449226297","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/form-field","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.ee40081f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"debd43fe6038b807ec562f404b1034088fd84fe3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.ee40081f4.0.tgz","fileCount":33,"integrity":"sha512-HMkRtZwt/gk3s3QtNeCWeEQ6Kfpv4M6K5p2ZP2WG3BuBB4Iiv8HFutlQGMjOEf3kQIHp+I0CSrLNK3Lvqdq9Ug==","signatures":[{"sig":"MEUCIF9gJ0uuIh2gjt+tL1Gg9SiLMeOvy4OpxQ0voshnFi5fAiEA+8Tw0i5aNQNMh4QUPjCHCcvYv1ms6H5OTViMB09+k6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFoiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7XQ//fQD2olOIR+/p8zCXMSEpPl3KD7kmfQPg2RjN2NXR4rRr7uOu\r\nvGnUD8A2Re0t3h0T5yuF5IY9hlahUuUajHFAvTpYgmO39eukrq26q8HN7mLx\r\n7+fg4MA0UERh934JATdm7UixO4PLT+Fj8H1EHtoFdzfJ8gx/Jt2sGzdNbF7I\r\n++syiEBryfzu50NQW0REWHM8JHg1N48avUehWaBMX/gjeeDiY3WBKB5b4CyN\r\n8rbQo42li9iOFMTQE4n6HpYsy9C8hUM/AFbVhM4Twy0d1AVxpTIMfsnRWkWI\r\nfDGFla0/NWJY1mpcCYBT+g5pe2eRiGAEODRt/jVzonfJ7PWGP2fXYtAylM2n\r\nCqAkZBoY1RF4+pOQnWqat8p/ltGIF0QIdDHJCzaeLuSZxwxzLoYcfnNGZhVf\r\n2FgHU9j91x1cUSKh3V8rHufKEcHNhfg9ayCiU37ZNWXesT1RT4Bv19ZHaO4J\r\n/mp2L3A/LPSe7QsPiH+fttwtLktdNkq49Qe8vPib+i12z5/2O8nWGHOEa9nt\r\n+NaynzGxIVMFiL6DoeXPXK1CcN4EhA/6Ysqhgsz1BYq3kn8jes095+T4cGl4\r\nNridrHHMuz9rpAFKs0s29PLoA+NCyd9RW+fEPuIdCuoCwe53Vx1CQ/+hCoth\r\nGUFPtUsvADCFi0j7jQPaY1iTgUu1giWMF74=\r\n=jNxd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"04ad48e358b6eef4ec9ee359b0ab906b30425504","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ee40081f4.0","@material/base":"15.0.0-canary.ee40081f4.0","@material/theme":"15.0.0-canary.ee40081f4.0","@material/ripple":"15.0.0-canary.ee40081f4.0","@material/typography":"15.0.0-canary.ee40081f4.0","@material/feature-targeting":"15.0.0-canary.ee40081f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.ee40081f4.0_1666210338697_0.6934709113366364","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/form-field","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.98f1b54e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57a49748c423bda67dbc980117052725ce428b9b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.98f1b54e2.0.tgz","fileCount":33,"integrity":"sha512-Sn+4qz8cIXiNnTfInyo47X75beqIzv5oWFKh3vAlqE7NG6fd/eNTUC2iYJzFBrAp/ohQRpM/O8NG2FjxAbK2Lw==","signatures":[{"sig":"MEQCIFiTFecmTJGV+3VjZo2TNeXbkPh3zRq8imTRA1NauPgJAiB3V4KKkVkqp+8qq86304T4b1BEaye/VFbfilpopAm/EQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdJDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQYRAAoX63fUEtPpWaztK85WMZItRW32v7MwlS+ZxT30OYDs1kumyg\r\n+9v8CxoChhONks1q/cYWC+2fZee7TD9Q5bf/5ZmP9KOrDtnUCKW93VyJvaAj\r\nKXwqEIXAqu7KYZosZdLs+SFgAg7bBNIP1YTKACVACcOhr8/GQrxTHJjsisOt\r\ndpecwv7UvwYRdJsCRavchP54D81l3A6qdJpPDx4VgNYWvYy+ZvTDdHSqDybS\r\nUrvsVELB6YTovO440whbkFjGA1ek28xioV8i64+ElIBkFIiGjBvDJwPCBqDg\r\nARFk8JmZKGeNy8VGRmRNw7J2xbPCzw891tZUfQSzfAcpkuOQ0O2s9VYxap7S\r\nHM0bVfLplsArY0yfSVBAPJbKHYpgR9tmQRnpoZ8Bal/c3dVrDz0DnJY6+4+b\r\nCy4ZyfnDrP1K4zDF3u86/uJtcQTKqzpo0RNXLN3l6X2w+Mc48IiRzjHWvlSo\r\nwL9JAjoL+1XLc1z1O6+TlgAj+IUad6JYb9oOi0nldvvyAc4XJk+J/8FMACX2\r\nlft2CLiglAwUvBTgpkS3EKPAOrqb8r7FtR2vsl5hmcI0nahuCkHdP5liEXLQ\r\n62gtLUQfHAE1o1n8PuE3lQgI1BhRvtq1A5V5xFluy8+yq8NtgVJJMygjSTje\r\nBgBNn0Tek6yYvJhxHJrt/i67HxX5mT/ZEiE=\r\n=FyuR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"aaf0a191532b3357cda509746499ff62e3aaa47a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.98f1b54e2.0","@material/base":"15.0.0-canary.98f1b54e2.0","@material/theme":"15.0.0-canary.98f1b54e2.0","@material/ripple":"15.0.0-canary.98f1b54e2.0","@material/typography":"15.0.0-canary.98f1b54e2.0","@material/feature-targeting":"15.0.0-canary.98f1b54e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.98f1b54e2.0_1666306627700_0.6629690463323066","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/form-field","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.e74b7ba7e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e8e83aa53776321bbd232b57966b285c01181e4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":33,"integrity":"sha512-2LFtXpFnWhO47NqgbjfiDPS974fbCR+kfJ7568FTHuvr4Tu8FyXDdjg4l6emvVRAFRBYFIvGx8JADQDWFkpIfw==","signatures":[{"sig":"MEYCIQCIxIUkJ34PkMxX2baQDe1sG6yrC1+r6ycFkwx9HTu+NwIhAK3STj6X7wt0OBDzKkTSrf0SZKccVbjSejbV1Lvv1p7O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtGFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqscQ/+Nzc/awEB05hsO9UXjyXB7JpBGg3Ls+SYEnNHvFgfm0XPjai0\r\nIgW0f+Scxa6RnozTKieWuqidiBiwXkjGbn2iThX4lVzss5paW8IMJKPYcijs\r\nJYsRxBXmt2jAQwcQ3WiOvUc0xZPDj2wnDmimgHlTEqGs4P/bOi5QvVEE4X/F\r\ntSzZZ4mtreQhTR8xEK0nsNdtWUPqrLA96UDnsypN5VY9gTgfVomLjxngWS+Y\r\n07VQ1lGT7mWwVCDa71svGycDQzVZGsjVwt/f5DLo2PRG2hjZzaOvucp3+xUu\r\nZI709Jkt/AztMGAtAv/euPf+/GTVdjkmeAbvLaNaFTyqyTFMjgfHs98D2MDr\r\nS61wPT3GBe4oE/+0qBXB0HclMgygf+pMBgq05iZY0vSoDQokAjkqYl29VT2U\r\nQ21wHotMgPAVL7lzOX+zlnDf1Y+uvyXzDYlTqn3QzE+65x7QfpdOl70/6dQP\r\nyVtGpDqGqgg7rOWFmrfmqjWtSymCg4xYPxmtJj1qGAGlxqb9sKZHhmfqzYI9\r\nssyJz2jh/tYzZqW3VWw4MsQ6DJ5sYSs1P9yh8dT/vruXUXaczMi1AcklgzkJ\r\ngJmZk0CmJZgP8GF1oTrT/q3/V3o09Xx9ki7bCxn85Vx9qEycIecDilag0Tcq\r\nhSPXt326eO0Lt4VSgpZZLX16emLfX7DhAEc=\r\n=ya/j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e30e36776ed9bc98d53938cfb5e48bf5d2cc67c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e74b7ba7e.0","@material/base":"15.0.0-canary.e74b7ba7e.0","@material/theme":"15.0.0-canary.e74b7ba7e.0","@material/ripple":"15.0.0-canary.e74b7ba7e.0","@material/typography":"15.0.0-canary.e74b7ba7e.0","@material/feature-targeting":"15.0.0-canary.e74b7ba7e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.e74b7ba7e.0_1666371972785_0.9577119820764526","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/form-field","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.ab55c07d2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25b8dcda487cd4964e548be0c1e02caf78482a19","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.ab55c07d2.0.tgz","fileCount":33,"integrity":"sha512-MqNOKQqImOWPG/QWZhqI3OkgsLwfnl7RJmeVJaXcz3shPSOWZQfzFF57U06RFehNxuAHmWEBO8Al0L41qFv6DQ==","signatures":[{"sig":"MEYCIQCh9bzJ+vMftokxA62GmJTu1nhNl6CJCpGOZ/moh4jOywIhAI2m7GWR53xkwdI1XC6fUcU1jXCP3HoT2za1A5/+U5lT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDQ2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVAxAAgVJu4MtUGnmpvEfwMTh4U+Tt46lvKjiBogfI61AzS9e4X8eF\r\nYImoryoJM+et97mOG/KVCCfz7Z84EQoBtbChNlCPpyJ7ybMzJ2QfC3gYX/8j\r\nwLWW+Lw8mg4RMfU02DJPWLPFVplj1leHZjUV/Om1+qaZDwapkNqTbJNMWivQ\r\nLzO7uu5LTdDdQDT8Y2uK8gdVR6ng5+Y52EIok+A0Ec8YVLiaauDke8eG+T04\r\nliZQHfIOdPFLzseTdzvIGN18fAMIeLNf8drNOhjH+KFWUrHQ53MHNxP3ddO8\r\n1FMjhkUYXGihuaaLRURsXQHjcjLoNLVRsnJDBLIH+hU1saAUZduKKaUWkzj0\r\ntqWUZCu+ERgqE0nYbnFwIRNNDgkyH+40jj4L7dOse1pSBCCCxyF5SQrpd798\r\nXxa3B+boBrbT0DCiFgqdbRwwNcRhmnAZbtptkJOh8NzSQOgZ5Y/Rk3FRY9KN\r\nQW53WoTmFD1oOU7o0nwwWSBmRd+WVAKKVNGJbKXTA38SEHpqbtqjnoJ1h0wc\r\n8uttbvbx6ASCy7ja2sn2cIulyzO1Pg6+DvZRYd4YYt2QWbzuBa5ytzcw3ULt\r\n/aYe1B9vhfCouP1MreDM/Noei1IHMKp9sYA5q5cIg+hi5mEvtwJyYEKfD/ft\r\n+jdAgP9RSF11pIvvCzIU+UDnBDdeIeVyHo4=\r\n=ubMd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7fb32c724b7903a8060cb457aca1f150a15590dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ab55c07d2.0","@material/base":"15.0.0-canary.ab55c07d2.0","@material/theme":"15.0.0-canary.ab55c07d2.0","@material/ripple":"15.0.0-canary.ab55c07d2.0","@material/typography":"15.0.0-canary.ab55c07d2.0","@material/feature-targeting":"15.0.0-canary.ab55c07d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.ab55c07d2.0_1666462774845_0.2386854490164676","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/form-field","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.fc539db34.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7eb39ade2caf4ad418d996fbc752c2007b0a3f28","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.fc539db34.0.tgz","fileCount":33,"integrity":"sha512-gllVTjX6QScMGEffovJw+FgXN5SFWfr7f/ae9/dsceOmrm8uQJGvN9Gh8upJZmVUtsKnNHU/yKTaPfQh7fjztg==","signatures":[{"sig":"MEUCIQDf7kNLCJ0RTu9W3XhY71xq6uCetIqWLp0CtD0ALlbBqgIgdxJwNcqpyDpq+uxrpKTv/gch8gSV3KuOAve/obnQk64=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuCVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGwhAAgN4MFzsEP1wYUWLJi6d6V9NPEzXFj5ZW7qZFVlVkvRnLRPaU\r\n1twjwSBCkXdIZy7GtV6Mk2DU9ba0Asl9WlNkzQwmCOD1wqMGxs9Odv01hqSX\r\nw17mivazugATFe57DjPuEUzSfOs3yGteA17UckJERsMRq6dwmyp7lFvIPo7U\r\nbX/O2Bg19EXYVi0ojamLMfnoi+9Vb1dzmSpXZZilZwjNrEEgSpa7oFgbRGCS\r\nMd7LITfSvpu3jFKM42MAsK0VYOpsuZoQ62bAr4OHmwDOMqbNNiMXOVJ6hCXm\r\nfGOUgHtiO0XPTkINJPiAFqQ+tAUXJ+WYwWbimFGpsTcfuDxR6+/Jvtj3eCzM\r\nRwMa92Z0GcGE1EC6CbtyzIW4nXJzSONI8oj6DwAZ1d+GAgOyNIvV+y+ryrHm\r\nr0Jo4n+8i5ByPdGgZU4c+oaW9To7Y/vgsCw0jyUiuMLO/xL4d4a6yHVzbEbd\r\n63iJmP+ZkCkOW85iY42bnL8GBPPObb86lnom6sn7IY9R5OZ1uV7ZXa6wZBkg\r\noRrmMmMrC1Gx/hgFMt7lBQ58h5v9tEHIZdQFiLm6ru7o9uOv9vgI5t1fwrlm\r\nQExGZ/zplt14VLemrVf4AwYoENzUTVsHLLDGS3M5S/E1UMLdlNS2ehLNhhB8\r\nyOqtqgyGH/+xZP1Js6DpqLXyEgywqnjj1vE=\r\n=WIIA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"18c679c73aa42d66117f8f1a88ab7cbde6f2a201","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fc539db34.0","@material/base":"15.0.0-canary.fc539db34.0","@material/theme":"15.0.0-canary.fc539db34.0","@material/ripple":"15.0.0-canary.fc539db34.0","@material/typography":"15.0.0-canary.fc539db34.0","@material/feature-targeting":"15.0.0-canary.fc539db34.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.fc539db34.0_1666637973743_0.20346690581849658","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/form-field","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.e340b04c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"036e061cd4c6fb1b4ba37b428f83cc2975b584aa","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.e340b04c5.0.tgz","fileCount":33,"integrity":"sha512-G4/euXA8Bnh2z5X3dwaheTg9dnpo4UiRAZRd82y456sPGulUuYq6UcG5fis33wdiK1CDKJtRU4weLZRVffKo2g==","signatures":[{"sig":"MEYCIQDhvXwEdc2eiw2MnDg+fA9rWyAi5VVPYgwr3toXXbjMpQIhALHCoJ/4eBGVZ+NfPKD33Kfm1d+kbd8iWxB1rXqKdYYC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHUXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbQQ/+OD9ACkZwgWrAmkB+qXAaro4YeYm2XgxP7HyK4qrA5Cqu1vLW\r\neI5tRWJg59falmRRJll+rSNPqGF0g78t+jebat/hPA9IAIqWTT5+RmeUggTz\r\n/rGtx5i3iZwcKStOuteXM4wNvMMW4UwLuyQQ6goADTkr4FdYj5FzfU/JSmba\r\nZt1pwwTapQ48yzSv+Q5L97DaSI53mPWVfXonfOkqDR6FrF8yXilxHeMICrqp\r\n/gRV/KIwD1ZaRcuij3+Hft0y58fI11P1LJymTHC9dPCBXEljJmhYpvo2XZrC\r\nvak2y8BqwhOf64vV1NE2nLuK29z9433DDheU721yKxjsI/KX3bbK4eVM8w7+\r\nK98cJ077fXoS8cWIHZhqSoT86ZMa1aQJIuqb7vwuGLetLpcNs+NdmN5x6Ich\r\nBtV7MwPRAF3SLBahov3fHj7hq2NmfSuOjB/LAOrZdYpfbAuJq52RYai8iEH2\r\nDO+R5zMuCLN16+gJZOR2dBOU80Ty2u5BOgUnF4S+JdDAWCjUVVwWdtxXbP9r\r\nxIhz9Q2EONuKNL38YZTxlOW6EH7TnlY6S9r/Bo4mJpDvfPw51eu+8yVeKpjg\r\nQ5hAzdLpUP+ZHkhBr8got+zmf3ygQ8ZQrbiZQp920qUGm5UN+HZDzZl8KL2k\r\nr0IBtRm0ESsnHWEi0x8gGW2VnVfGb0J331M=\r\n=iNse\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f3e39db57f42dc19c08bf6e97cd6918a3ce32dcc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e340b04c5.0","@material/base":"15.0.0-canary.e340b04c5.0","@material/theme":"15.0.0-canary.e340b04c5.0","@material/ripple":"15.0.0-canary.e340b04c5.0","@material/typography":"15.0.0-canary.e340b04c5.0","@material/feature-targeting":"15.0.0-canary.e340b04c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.e340b04c5.0_1666741527259_0.46319368549378237","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/form-field","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.2c1a8f8fd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0943c4f5913adeed90c9c875d03fa3a1bcf53df3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":33,"integrity":"sha512-mKY8/+qTFkwdweg+GXuCecBnVmYCqU41z47qGG/4Wi+13etAwGTAT91K8MWgZpRa1g06zn+CmeUvAcMHg8axLA==","signatures":[{"sig":"MEUCIHpAFMw3LxKqzXiZnqpfk+dt2IvaJw0nlZaAUuLQIAAkAiEAlPcZVLsZEKK+ZDoYch7bdhEybLgt/o4BtJQC6MHs9pE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW7UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnDg/8DIJgfn1qvQbAuZoljczV7GPoEuY3G/VTW4WUlzbtcQMT6vvS\r\n0e86m4AYOCaU01ceKNsqkj4R8mbaPppabASFfzXSJPidPAp6pI3+nGsP6Crb\r\nKUN52uEsYZu1IXzIcBhRPB/jSFXCYsHQZptRQRXsVQHRypdTgBIuRL2wmyab\r\naotDuO7ueHaJEjHCH1gGAeO87AGKE9UPamcWiw2DO79O5QGhJPFhqNNN3GIO\r\nQ8wlzYZk3t3dyw26zeyp2A8BLqoeS5BH0Td5PKCRPXBH41okPyMTU7OaNvy1\r\n/rhgMoyvZV7FPI8t4wRgwwAydSULYQcZxsP9Gs6HoXLtkpoct4+ERQeQ/o2U\r\nMO25j2FKGCCQuyV5vhB5td9ObZFz8DOp9vTn44GZMYrh6go9AIU3KXcAMp2a\r\ngWvjTMDDAfVc64Whut0hN1oi0zWS9RMTkxv5AC1HpTa10HO62hgvoUZ/Co0k\r\noA5tUvM5IyfkuxNJQoDQyXF7hgVsWyjLG8mHC8TUPEd/4P2EnndAskgzBs5k\r\n6ZYJ0YZj5KqXwsHzV5AkaMHGynLpnWRGdnjjVdQNJp5Xzr4YSdapsXi+X4aO\r\nmNDsC40amHIce1UhwJqZoAkww+HSsF34hQERNLvVPdfj9Y1//KEXJQ69hOU3\r\n1zo/aKz2sUyyCsW+TMpyCyGbRlEnHeOcKdA=\r\n=Spxp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dbee023b5e37423b8695520d95f2d00d884bfd5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2c1a8f8fd.0","@material/base":"15.0.0-canary.2c1a8f8fd.0","@material/theme":"15.0.0-canary.2c1a8f8fd.0","@material/ripple":"15.0.0-canary.2c1a8f8fd.0","@material/typography":"15.0.0-canary.2c1a8f8fd.0","@material/feature-targeting":"15.0.0-canary.2c1a8f8fd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.2c1a8f8fd.0_1666805460133_0.5661783232355639","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/form-field","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.ecfee946f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4890093d64be7ea2203863ac99bc7f10511d7479","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.ecfee946f.0.tgz","fileCount":33,"integrity":"sha512-+RV+iwUVxGocOdnR03YyPcyc6scAJIqfrDH3xU9XAl6rkMDWbJvRF4ujySbLfh9FzffrwUN7QqSee7ZxZQO+WQ==","signatures":[{"sig":"MEUCIFM1vl03XRJnhcJwZCz7eJReg8/sfk4eJ+djXyAg3E8uAiEAt81JfFxQmjdyFb6/VX0hTUbJDa84l1ajcap3/KRVHUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZVtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWYg/7B4DolzTsmqwh1TReghG5Pcby1nvAHAInKcrSlIea2XAN+Syv\r\nYDcoC4Cju+1PEvDyuc4SAkjwRzfrkRINZrDuH3wAXQWdyAhEKQ/0g7K++IlD\r\n4pmaWjI7brFlqJtGAlG62OZuUxa+OUt1qtMySc1zsV8VmIn9SaMd96biI+Hr\r\n+dR8jmotL6E4wKvDuC4voDO+LwpDTm4CN87kuiuRzks2NMEg0FmF4Xrp0ZYm\r\n+0y5RoHpCZxr1tqrZMQpH0NgzrN54gE10Zsuupx//lMcnsOMlsnGFSTg1/8e\r\n7tj2sEReoIZVvGvroJI12VPfaoksLZUzWXYLyUnk0YvLjTisqCpmxSeFzgEC\r\nFVlrJ8F0TciVnHkyCDrKtVV1uojvUHn0g4xiPnAntr4r0bEE4rxi60A8u9Pu\r\nt3xlkgTDNimfPUaqAE9Dp7J3Scs2U7EaIr0ZkOVWsbVlDcFXmG4XdK0+mVl+\r\nWo4Qj+JQwh4nrOMmDNlA3/Yge6e3uSgk4c82m4Kxc5hus33vn5wlrltoOls8\r\n/qi2vg5BdDiFs+2H/iQkbSISk7ed9rzOc3qTolBWhFjnbFWR6tamu0y7NWZo\r\n+ph9yCgHD3O3nelnRrzO/jgwqcN4uFE5DrT67S9Y7FKLd0cx56vtrzi8yT09\r\n6tPLN7egMcmJrrmWX9o3p4Ez/txS1loJRzw=\r\n=pHH0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dbe05d725a401275de1e88f9d5bd6cd2079a0047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ecfee946f.0","@material/base":"15.0.0-canary.ecfee946f.0","@material/theme":"15.0.0-canary.ecfee946f.0","@material/ripple":"15.0.0-canary.ecfee946f.0","@material/typography":"15.0.0-canary.ecfee946f.0","@material/feature-targeting":"15.0.0-canary.ecfee946f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.ecfee946f.0_1666815341461_0.007364439440056936","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/form-field","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.73ca9dbb0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"021cac3a84de6498b6d6d6dcb8519e460e11a4a7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":33,"integrity":"sha512-OeRukbh2/MJt2DuSh6iDVFM1tWpDdb8CZcV5PchaOyg+2SsCek1KVNBXipiR/KM8T1EPaaLrCQQ2P4SiNh0rnA==","signatures":[{"sig":"MEUCIQDK+uL2sABG8zQFYYwf+O6kz0WIk2FcKJXIpm6KjMeCsgIgEvgtos3bCFIajt2lswFFoAxxtxw99YIktha5o/H3H4Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAbFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMoQ//cr/O2HE+zTkrUTZiOvlLrQsF+U+iWA2j0O+AiJj4vyhtbTcR\r\nM97XSw14xY6VQkdSw5HH+rvoS2D55dw+iC6d2ZVUPFE8w9PTpzmB5jQdpgkf\r\nJQoNOvan7KSlEyzuf28eLOG3beD9DHDcYqjhNiQVL67Jbd1cjCPtwcFPNyt8\r\nfcC7e7sPpoECNe3PKIJsz7InXkx4HcFT76VKQUmIu4aZtH9uXm3gxEY+LNjX\r\npiAKlMvfhN64RpJG5JTrtu2gvNCpLCtwIv8D8KaMF0JsJ+5MrGx7/clrhYtJ\r\n+Hr2isXGGM3wesgaosn97Ffl/P/sxA60CcCleo2y/sQt3X1c7K6Vp+ANjqdy\r\nOWrtFfj4YvL1zzo3X2F7m/dMHpE1ppYX17bbb4B7EbX+eAAUelGv5fhAnqEA\r\nni8k/lckmz/zRo4Z+CiYWl3D57O4NCChQIz5K444WscN9oB7cA1dKIiUpyEZ\r\njn+us1YNgdfiF5hcdPY36/g++uZD805yunKvpO/Q6yaZOFD+AS/L7/O9F2WT\r\nUhF7Qf2trRKw5j/TPCGKbhx0pXin1uq5qYynkkFb+9d0GDzT3nFkTQ2tEBA0\r\n9r9p1iLXx3UkFYZTzxI+LJsBpT31vLORdBQkwQKhTPRR61OYerWAp4wmdUlM\r\nrdL4/nopFe1/ogdNSXX6es4UPbrIPmOheZg=\r\n=lWjn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3b1ecde6148e6e8d98c4b0c8a4dd2ba56e95586a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.73ca9dbb0.0","@material/base":"15.0.0-canary.73ca9dbb0.0","@material/theme":"15.0.0-canary.73ca9dbb0.0","@material/ripple":"15.0.0-canary.73ca9dbb0.0","@material/typography":"15.0.0-canary.73ca9dbb0.0","@material/feature-targeting":"15.0.0-canary.73ca9dbb0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.73ca9dbb0.0_1667237572992_0.6800252783435479","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/form-field","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.357f2e5f1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93a756a81987a7917b5c727ef03e1414b95ef490","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.357f2e5f1.0.tgz","fileCount":33,"integrity":"sha512-d8ReYkcKPcwNjQrfIO/glN/6Kt9o0o573hbJF3XPknHN8ViJ3PnnUkbCeszP32Fnsii5md5cgGI8LnHnSHN8/w==","signatures":[{"sig":"MEUCIEPFlUc12Uei7V0MRy6mk6ODeQpb7nJWwSL3mKUxg6uaAiEAwi3lg3yJkjO+Wr0zdR+O3ZLCvhYIreNvKDXcUbptubw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBjRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmre+w//TiEv9b8Hxf2xCOtVbLrgrnGPuAliVA/PqrptH4aItXGnVmSk\r\nFi4JNfEwvh8On/nX8uCyESZuJBAZpoDUOV2K7CMnoHzFjkQHZp43QTL/YjT/\r\n/V3QjjscIITeDfW2hFqLOfMIQszomnyoqZi4P0m71qZFJxQ1wmcdPNy1Kf1b\r\nrpnGw9g0jSrCz3RfijHCv33NOGvtjkjUnDd+t7B2uvPHehLMgN+uhS0JLWEr\r\nvc2nSuxtX+Xm6Y9ZJiIDK63WS2OJxKwOqz2URc48F8Rrlr/swyXKrxhARAvi\r\nVp5myMIV9uuqe65igJi7XY3HNCkO2tGuq+6kSeS0gXo6OGygb/bP/1ywh+ps\r\nKszjAyHz2EVPWmO2qKAtWG8Cwvnjxn8VRlrmnto7eJAOMvaOz/Wpz1GSsEaO\r\nnUnHRcAs09f7bHQ4rbn/9XH4GrFLeizlzY0MClsSGOGWvLk11mLyXPwc8pGp\r\n5PkFSmU7EDQLRMObjfk0Fmkz7oJm6K4GdWNBmqbznk+5U2lfg02mzYRhpTe+\r\nDvctEj0f9359QtT0K+wsStFKXeCWQp5P+y6C7lhi4Eiur18V+VyNeAMwJVrl\r\nic/Af+p/RhGs1VJpOHk5D81EFbN3g11/2Y0yZVS/INACfn5wHclo6TXP8Rj+\r\n/uNp6FldoeidwKlM1Lv+saPVJcfHcq7UCTo=\r\n=MYga\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7f8af87642d395b497ff80efe06544dd459b947f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.357f2e5f1.0","@material/base":"15.0.0-canary.357f2e5f1.0","@material/theme":"15.0.0-canary.357f2e5f1.0","@material/ripple":"15.0.0-canary.357f2e5f1.0","@material/typography":"15.0.0-canary.357f2e5f1.0","@material/feature-targeting":"15.0.0-canary.357f2e5f1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.357f2e5f1.0_1667242193282_0.8423244838629325","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/form-field","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.eb103d4b5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a61e77606a372d5ce8c5c530527dce0ab36c827","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.eb103d4b5.0.tgz","fileCount":33,"integrity":"sha512-UlpKbOj8y5gEy3qXD7zjPKpxQffqlpS0JUOwpXKdXYcde+5B40Jn3wEsfzP+NlSpGAP9NcMyhzCM7cbiTP7SjA==","signatures":[{"sig":"MEUCIQChk5GTo1bhgt1O4rxLWfRhttav3Rn7dnqDUTDsDot5KQIgZW3G7XlkVkE2WRoFg4Pq4gerNstBOaM6ZQdl9Kj205c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYCiDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqfeg/7Bw8/RxpwN3x63CkaqnDCxLI5LpvarHTgZRhGTJIotW6v7GCB\r\n+BWeITKOo5QZa+qnSXBE+jAcOBSdSA4RZlobTQ6P4AcRgliL2mQlmzrn2aOZ\r\n3y1rOz9TTcb70jxB0u1ntKRaXj7gEnnKM8uGgqajoWfoFNxqSavrZO2kanTc\r\nEE1567TPGaBF9hWcdxVNYB06qOoTXZg4/9QKjd3t+sgzxaS6CP5RmWJoOqnO\r\nPTfbu0RHDndk6mwBasQF2neBLAWK956CfAubcJFzUvt2L112X8/ukWvthqTw\r\nCbAcVdQ6vppZQAYpXmDCywni2GYPpUFpiPaprR6dFvDZrXBFFctLCyEzPcQ7\r\n4U1i8jqfJ/jtA/1Jq06xZZezrrbNwZoY8qHHYXUoXE669ss4NNrIQUH50MWW\r\nfGIu1S+9decCj1vi1364aZ4OIzlC1FAWGrZQk/SnLLOTUs5UB0hUtj3Z9UTX\r\nFHjZFSm5RGqzLKE/wApVBbiFFekrRcePQ8lit1fKze2qko46w/Af9CqZ9wzh\r\nOgKIZ5fQjMQ+E4pyQwBYGLDRi0xzK9pXO0R9gw429s4fXhZnTFuXvbD9Wjuq\r\ngiE8TbX0M7O+Z7lfoN/bb7lNwQ99yOg1yG5JnSke1XtdnoH2n/VQtnZRbaTX\r\nUevYuql4k3iAwKjaqS3Sz3hMlinVI+cJODA=\r\n=2gyj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6fd82c2abdb8567ca00c6847142375ca8ac18b90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.eb103d4b5.0","@material/base":"15.0.0-canary.eb103d4b5.0","@material/theme":"15.0.0-canary.eb103d4b5.0","@material/ripple":"15.0.0-canary.eb103d4b5.0","@material/typography":"15.0.0-canary.eb103d4b5.0","@material/feature-targeting":"15.0.0-canary.eb103d4b5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.eb103d4b5.0_1667246211167_0.9070520852371609","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/form-field","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.af5f01223.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51780d6e0d495e1718675862639b7da8a9b6efe2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.af5f01223.0.tgz","fileCount":33,"integrity":"sha512-mR0AsSu/x5D9aVVUQP3jh6rUr9zi4kSt6j08CJHgqnpy9xcrlOZRsVUjtbIZg5CMibxic/ZPjYgtyHTJgXBXIQ==","signatures":[{"sig":"MEYCIQCDLw7IbDj3tULKqH5+eEYGQHFRzTzdoRNgBnONe1+jSwIhAPBhUM5Fd8c8BOrfrVEzJzLlJFFhRLPMjrnyAJ8otcIK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWdeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUmg//RUpofov3V0zhWAxqQbwC6nLkCSJa4+k5KfsDoSt2OICWTX5I\r\nwAXTciObCcSIheC1kLpQeACyNwQ+rAoQBlkECeUDlVkTS4tdUKTOJ+Iyui1/\r\nUXnvWitaewiJb/6ilaRhbF97715VTpzjnAVICKSKa36pQGSwo/YGnnaAp3/A\r\n1YrShTjm+PJczzI5LyxVxUUrMI4YXfiRkuCfAeDsOfSs06DvmswAyP6C+X96\r\nlYIPVQg9h4qRU3GqK6lqwrcivsdAfzftlFTjCHXmFva9WVdrcksnPZMIrQ6d\r\nW9EqEl1oLn682S7tLRIv/NAPvPow7aJpaoWure3fo395gEoSl4xTkI1YCTf+\r\nb7AVY/9Oqg5sdGjxjlz2Nr+iOlwFekorcb+hFfyRkz0Wu1GuOw8EtYSKIPEz\r\nrQzmVgZ0c4kVF+zoRie8uK8QL8fEDEhpBIolM9qYmmGasAxDcvY9CpSsUXO+\r\nDB6jJR+nuPjkyBeg01gGLum5b3xhq+ijf6Y1VFmozsP4cg/e7zKBXT4kKa8H\r\neyv8aQMN9HILL7uqoeWv23+R33kFKxm7s2Ejc8C7Xe+2n5tp/LYvtimozyn3\r\nV8LsqLz463FPunseYX7xIcX1Zc1w/GUdVdFQW0/WHLmnNF9FTFtXCI9/qhPq\r\nkaRB8VCC76sCBEsSXX1TIXB5mKnueY8gnHU=\r\n=6eW8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cc7d8ea77d18e30bad947332164ac02701e1ed9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.af5f01223.0","@material/base":"15.0.0-canary.af5f01223.0","@material/theme":"15.0.0-canary.af5f01223.0","@material/ripple":"15.0.0-canary.af5f01223.0","@material/typography":"15.0.0-canary.af5f01223.0","@material/feature-targeting":"15.0.0-canary.af5f01223.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.af5f01223.0_1667327838434_0.9019689918207445","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/form-field","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.58733ef41.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c64af2995791ce0dc34bf6718a19722c3c5ca5c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.58733ef41.0.tgz","fileCount":33,"integrity":"sha512-2mhrReb0KgZEBehp3y0O9eQBE8nhTWTB/ibJ2mr9uip1NewUt6Y2S95Sdsdq/LxTvdZdJeNd33IfFO4mB54ibw==","signatures":[{"sig":"MEUCIQDW0aM7pKBXVSKwRcJtYM5wOKHvZEQ7l8Kd+neGndruPgIgHbfau5xunCgkAwYr+2tvYMSqY18LPNrGAnLWwnmXBMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrK9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWyw//Yy7RJ8LPfmGnFvbSwb/qNYcEC79ltT2pWMbR3aGKMFjlyf5B\r\nGEnmLCe+bnVZhnWls9mfw5PFGjYUENncbehH2lAyYBacdYiRQDq/y4dNRijy\r\nj0MQBrBSUwzo0BbIirIdrIhPdkXL8mTaASk9iAF6zRhfnwujLEZ3Lc7yIu+G\r\n1Nsfi6ICpI4+c4g22mJyCvoUqEpBUJb+eKGGAubdp/mDNf1vvSc23suBCNSx\r\n03AJu5Opy62JRsPVPwiqbZKIIgXxJE0FaGOXCxOHJz/L7qD0vEX43px7DKb4\r\nOenz8c63wsQ3uEI5w9o3ZFf7DRPt61cD5bg+/8urKUTodbyrSkx3hvG79OvK\r\neq1GXheQwwUTOPEM4X8rqyeLHSgBgVLN1CsrQjysAE8wAyX0Map0s+gafjQi\r\nEyB7Hzqf2SjNwiGThDNDQIWCflQm2qaFIvpOob5zPLXCRZuPsiW/tx7sguT9\r\nRAbEZQD2QCNGLVNeTiu+EsfO2k2H9BuDlkTN8fe1UbyuqImVHJpF3pekP9HJ\r\ni10e5IXmI6PbOiVHgWeYheMOKbZ7UiKIAWCVxzDvhqrAjT4W+r82TxxxmcQi\r\nNBq3xwn+yHOcfBd/ChukFC8fOCTFtowR15gSo4VVhCtgaaPPIeSKOMIg4Xz8\r\nAUKu3CVJhdreThYCTTrOs4VeEwmicUxvQwg=\r\n=zifd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7754bbdf66b8fd61976d3dbbe04b991d9dbc0caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.58733ef41.0","@material/base":"15.0.0-canary.58733ef41.0","@material/theme":"15.0.0-canary.58733ef41.0","@material/ripple":"15.0.0-canary.58733ef41.0","@material/typography":"15.0.0-canary.58733ef41.0","@material/feature-targeting":"15.0.0-canary.58733ef41.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.58733ef41.0_1667412669006_0.6850811725747716","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/form-field","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.909b48215.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"461d505d5e4eeab90ba9adad5d7efcc6d083fa9f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.909b48215.0.tgz","fileCount":33,"integrity":"sha512-bT78GpV6y0V870daMSKbfSnTd1o5GhkqxrYGDuchUYJLMuTBEQMfF3oVTOrUaONFGP20aJhfw8AXcbbbZqAE0w==","signatures":[{"sig":"MEYCIQC4ao37kX0meOuS4bQe9s/ItOTQVyrO2SuR8oxcfhwfAwIhAPEtAmp3xn67vZYNhJYQJy2W9Ro/N0ch/VkYr5kDyFRP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz60ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLjA/9G4nHePJjRGp0FVRRVhYlkuGelh4VCWfGsard/Jp1As8ZOfYx\r\nMrwqJ2txerroXGN/iUTCbchrTMXwTNJwfa+s9PiMq35oMZRwxM7piPTarFRr\r\nxhDmnjipEpiYEwvDK95vpu/F2nBh0x6iWYjpjtibHjm2DMdX3R5UMpdyKon5\r\ngH42nSiofoaAszkm0G8bM60zRp4QnKTyQYbeqxpc+w1q5L8BeLvBkddIQES1\r\n+3CXNphjtSuuCefdtNzHCE7mmMpQaWYEslxNDxYRQDdsYgkV1ACyqH1wRiFg\r\nnn0WvCbOcvEFSnUbAPXKeSKfNd1WZy33vLY5e3UvhrLyVMm1d6qjKsKXbZ7X\r\nZ2cbPF4rnFbd0oST1Y4Un5OzVT+5jygdpsiE0wKuWIP+41vumFjYxCWNgbNY\r\nG/li/dFEikiBzm7z2E2wP5eQ5LdnJYbug2fWRa3bYD073dU+8HzNWkMHZus2\r\n6h8TWSJ/tEJEBPdtf/t8Ai26g5bJeJ+pIJe3Pn2UVIp13sL0GICR6n343ifg\r\nTA6qWNXUSCLHpN5GUSJtjanzy4EiGpgMo4dwxLoINh3tcCmcYqzU7FW6UU+O\r\nwPcEMuUEOc//6Y7Cbdkdh6Ky/yn/JWRCtbzJqg3UDEaqkF97EygO8h6aVWqc\r\ncD1lRtvgXWcB3xyjiqJabzF4ip5Ip8QR9fk=\r\n=1n4x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"68d372ae12d017bf28fa2ad3c86cad4f70609116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.909b48215.0","@material/base":"15.0.0-canary.909b48215.0","@material/theme":"15.0.0-canary.909b48215.0","@material/ripple":"15.0.0-canary.909b48215.0","@material/typography":"15.0.0-canary.909b48215.0","@material/feature-targeting":"15.0.0-canary.909b48215.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.909b48215.0_1667448499876_0.5132307084082952","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/form-field","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.7f17127d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"012233a73a50d59de53ceb6a40db8b6e676bf145","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.7f17127d5.0.tgz","fileCount":33,"integrity":"sha512-cIky0FO8yMlNQuKBaUld9UHap4VBTPMUxjDUZ3cqxEMp6a79rTjqDG2pu2CcB7OdROv7KNsunpVHSCEnMF+SAA==","signatures":[{"sig":"MEUCIQDhWNBqs/E0n3r5YQ3oLT4v7aCkCzkx/ctk+6rAvog9kgIgI5VUHppbcphQpq8FiwHaIyD8mq/o7IIvLMLskkyrXkg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAY4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEEg/+PSzRVDAMCv0TH1ggvpY518HQte4Q7g/iI+Nlb+26drWO89Sg\r\nPfsXRSCzqEapTBhk6sqEmyo5gPoHrG2rDigM22ZJuTLzHMBZw+CGKOZ6j69b\r\nxAQEf3w0QVudaTDDSXsWRUtKBGnd/caD32Cx2dWy1puuTFd1S68WpBf26U58\r\n00CoyRuavIvROLyssf5n4txYuscZzaea8OlUGiQQ6Zegm8MZa/h0wXknppj+\r\nrmhDCR4kOWufSSS6PoBYfhHkwVNWTLVZC0mRGsGv/btyqenKhrw+yrpeB3sQ\r\nrQTSHfWgBp7RnTUDHNBqaLAwp3O2jJgn1tQ9OOl/sOkI9JtupP+FW4mhgH6C\r\nlPrZi1FLS2DJz2vJr6ImdIL/Cf3Htr5qil7K++oabxvdGHWcXAVeeDfArZut\r\nAs8CR4joYEkjLbE5S6gEG8dAZ8zMLhaGFpAoZP9Vx7K2f82nAA5xpmOV2X3o\r\nVmgcRO/fW5A2uN4mVBxPQgxK/A3AAgYGVKSgV1bK5Nr7vAJJGaYkGiSXkRDW\r\nHRSMOe1Zm9k4qQ08lv9oq09koYe1ErkDXPd3tFO6MxMY4vBHoiwC03Kioi/8\r\nztcEVVJfQh9BnyRgECVuDFKvjs8J0q20IMznlgRdmnkJ4hpteJmBhcRTaDVo\r\nfJMEzOoB02nG3uYX7VQtsFiskNmiVrrZy9E=\r\n=s0dz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"26e22af93057c0fa00e7fa9eb104abdc96131eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7f17127d5.0","@material/base":"15.0.0-canary.7f17127d5.0","@material/theme":"15.0.0-canary.7f17127d5.0","@material/ripple":"15.0.0-canary.7f17127d5.0","@material/typography":"15.0.0-canary.7f17127d5.0","@material/feature-targeting":"15.0.0-canary.7f17127d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.7f17127d5.0_1667499576540_0.6249783888531824","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/form-field","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.da95e2a05.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e89c08f0f3e5e0580b1f7e73862c87ebf327412b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.da95e2a05.0.tgz","fileCount":33,"integrity":"sha512-G9+SAks36401vme621bFs34Fb1vft1w372NHZyv+n5Nx6SYfXEMVJGXEooEZOBFPsQx0Xpt3gIRB3+NWHp95kg==","signatures":[{"sig":"MEYCIQDZi5O6VY0UZnpj8S7OByLaw14avrZAgLE11ghgQYYinAIhAPG7dp5w8BK0yl78RHodUOr8PlFZcLWg80dgIy4Iql09","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUTyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVnxAAnrzjxLFX0IKwxnnYzL02OhswwBq/fuu2g+RpJv7yh0ln5HDW\r\nIJYhU3xcSbae2ayEDkCFu/7gzvTNWjAGVPdhoHzYAiNmYydK4TEPh1gKxkuO\r\npU3Bwhpyw3YlwH/GcvFXK5CYip+2EahQkdJNHeLhwpEnycJ0yG3bRMobBh4W\r\ne9yzmMyi35zQ7vlZKrDjTfK+Qpi/sfBEr6c72pp/ulNm2dxMzOKYSUMFqnhr\r\nvxxe1ICJMIYcwEMXTaVv4irJfbL7P6LtwuYoZS53zcH2PEN6WGzFgHsJMNBS\r\nfG+W+N6FNYJY9sEgGvLnkRSAuGcJRHdAVAhxU+TOoFrIewB2DlL3ceBFjkhu\r\nCQ7TyrkZPkSUaUgTuBc3k2DtJJNEdJCTCgd7dscMd6SlQNO1xvkLfTDS7MvE\r\nhWGp3XxYzBhskiUYi9sDH5Xjp8QM7N197C5HZOCpnRdhD6aBtajeYRb/CAHe\r\nxErf5+QlZQX5xI23gM2VCGCWQ9tR1dKZcfGg/mr8R3MsCedM46zYMoaZit44\r\nFCzQrFy9bOfts/tfJvd/teyzaFh5QoEfjPYRJX7JlGs0NSDb/V2sgnPLBpT8\r\nEbonb5GuITCKEiIdIAVAU91Lbj25YO3sODF0EHLlpALWzX073p0gBhcogkFD\r\nMWkrbjSGrhHsDeqa9/X/9z76JotzSgyJYrQ=\r\n=5N5y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"eb47dc6e824d05fe1a33c55066101c99ce1fe241","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.da95e2a05.0","@material/base":"15.0.0-canary.da95e2a05.0","@material/theme":"15.0.0-canary.da95e2a05.0","@material/ripple":"15.0.0-canary.da95e2a05.0","@material/typography":"15.0.0-canary.da95e2a05.0","@material/feature-targeting":"15.0.0-canary.da95e2a05.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.da95e2a05.0_1667581170082_0.9362965798900347","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/form-field","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.4832e2750.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5b1636416be55a1cda5f6d3e7426c812d8274d8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.4832e2750.0.tgz","fileCount":33,"integrity":"sha512-Cbj0OPykbfwurOGg7+57U9Ep0lPN2atj563YrJdcLL78krJ/camvRZIcTzSEjjXJ9UoWIGwhhh7r0Z3Hxmc+fw==","signatures":[{"sig":"MEUCIQDyOGOvY7fl9tSBI1DGQ3oy6w26hC9JSm1DeAUfjA8gKgIgIBOIcJ0tBcjgHdgw83OzzAuYviSqu2L0MwWE2aV1F1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXy4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBuA/9FjVZskXUpbpRCX23GY5WYOFmpjuiNxr9siEQhQO9fyfc+UZB\r\ns+783SZsLFTfLgwrxWxMa/POCocyqpZ87NQlo0b6WfV8aCb1lDsehVKKhHpI\r\nKJhVQaCsltpXRZ9u4LWtOEKehA75NLrQSMzQ31jjDw8NXi2Ljqh7L8XBYRSE\r\nb9hRB4NA0smf06HnTvSVRNjJcTyPNhjCtNmtxJ54YCvaBew4mwkn1pdUiQO8\r\n5RoamBTpbCWOHVxsyjfF6Og5Lm0qRGEXhQzxBR2p4BCI/fGeDJo2k6KXdvW8\r\napW5aKY31Oidk9MWqI84x2LEcnFyiOQDCaB3lvgsU2dXm8YtH68DvfNFJuMt\r\nmUtJtlAXw//3XnE+2sxCqcpuFzAR6BxvUkEvWQHDM+5IQ+IznKrshC5wIEyk\r\n6duNWYilujpT34XIxGP7ygYb4lEKfaLy4GUmdENlziodhUcATUKTTGjPOVde\r\nNVjJc8BEz2rQlgBAS8uAmXaoLkkU1Asac8Rba1/5VX/i1MpA81Byog6zSsR3\r\nCZFbecP58+inq5XpedZdX2CoYdblQBifYF9lKfaoYYrdyBlpzC2jCB6x13Cl\r\nsyU34+tBc9Si+l8PhTHcAUoeaMBbVQvVAcJAbLTtOnnvRmhM8Gj0eJ9eU1vL\r\n6uJllUPrNZwGRhRkCRQihFBffb9cO3ekRbI=\r\n=4XfD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"258def578bdd5ff3b52dbbfbe6f06e14b2b74045","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4832e2750.0","@material/base":"15.0.0-canary.4832e2750.0","@material/theme":"15.0.0-canary.4832e2750.0","@material/ripple":"15.0.0-canary.4832e2750.0","@material/typography":"15.0.0-canary.4832e2750.0","@material/feature-targeting":"15.0.0-canary.4832e2750.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.4832e2750.0_1667595448009_0.8100962985984916","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/form-field","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.215506426.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dbda3995b5ae9dbc80c16e8500f88391e5bf8663","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.215506426.0.tgz","fileCount":33,"integrity":"sha512-58ciy1Oqjy1j6RYncVjikxf7lQIKMY2tFVyFoRJXz8+St/UWLY0my51TTQ4CS03P60MbgN5zY0JFXKcQz3UPSg==","signatures":[{"sig":"MEYCIQDyWjr70uiAAS5C/+uMbwF2wTAbFi1/ARMmUn771n4LzQIhAKdXays11rh1n4EWNl+5+hvhJ+LPiWkM26tf6+vZ2us6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbcQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7jA//SFEMZkj7t85ZFHnzvPQfK/pHNwrHqTWA3UqmQFp4HbU8rJD7\r\nZsZ+hoZmLOyG7goHscNIlyTmUDR861mrmohPRDN8+BK4TtjF0Jtr3c/UqwSz\r\nBBcHAhWFDAROYZ5mVb9+LleMs3lL7wJFmDVlZggSsB4LIJ7eDDR4NlzHf9Ke\r\nTg6cpsrTsqGD5yQBrSIKJ4ZDmhXDoqgRJ67uBcqdnwaQl5cZNMd9FcndRrou\r\n3OwMrrppvQPAgzJO8/9YWss+tncdeuwWvW7IbzpTvKb4epCdGzqMetXt2HaD\r\ntkYVrifyKieuJMZIjXXCPFUE216UhKvNdfZfLuuEBuFQttwQUJ6z2GLb+Io+\r\nETt1saGiR5BKi+QN9lLqUxu99EPY8uyxnCJeltkP1LTwA6UzChwtfBCVCsQQ\r\nRwioldxxfqWT4iUkmIxLzoGWxaIk/ZMAGnffx4c4kj+xclwbP26aeAfOJafS\r\nXMJqhqGqJYfVeI1802z7XrUVBLHvG/eVGI7mwtYDs2z0jTZ2ooKkbJ1sYnFV\r\nAxacM8dQUsyTt58ZYzoIW5LXGbnXIJ2Bgl4PnTVxsn14lNYohN0ZYK3ojbFU\r\nKE0hLuf+XrbpOfiCniSNzuMO/+DArwUnEzcYmxRi9O+guoGKMT2grOlz8X+b\r\n6Q0aAfC2DUJSSK0IywXQAmjlHKWgq5tlInE=\r\n=r9TH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c7da5104ce280eebfc1b0cab2279b8acb906babd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.215506426.0","@material/base":"15.0.0-canary.215506426.0","@material/theme":"15.0.0-canary.215506426.0","@material/ripple":"15.0.0-canary.215506426.0","@material/typography":"15.0.0-canary.215506426.0","@material/feature-targeting":"15.0.0-canary.215506426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.215506426.0_1667610384611_0.7415291087655669","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/form-field","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.4cf917476.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7cd0a3aafcde47b50cd561adf4f6a3ffee9fa41","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.4cf917476.0.tgz","fileCount":33,"integrity":"sha512-kJ9X0hdwRNDdSiQ2mw5Qc7eelSWHwrxPibajWO2t11oMpoSmL6mYOd/pXO4tMu8mpLchN+wIn9Mpu3cUH3gZ9Q==","signatures":[{"sig":"MEUCIHVh6Sfpx7YyjGtY9H5o8senQVM45BKh0ReB+pFsl5Y1AiEAsUx6Ug5pKeOpZli8h0NM/SJ/VFBOnTrOFsWCzrbeIuY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqWuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphZQ//U93aGc1YajniqgBioGIVFG1ceqJ0WxWwlkLwkjSt4vC5EmOo\r\n37QddK8chBrptxA6zygUIGlCDW9xwyVa3tzmo0e9cyClpU0qBw3CAQRnbqNw\r\nQfpYmFiAkhWoZnOOEHcETvWFsJp2dVGKPTo1b4YXoa9t0H9I9d9mXKp8lmqP\r\nHKppqI1wBVwinDXvBa2BUr5OMLqEp7hXZf7rsS95PoxkkZrWHK2PXf3/QgWG\r\nJihOPLWG2Qab9+Xnu6LXVPZwZpnSEmIxVGU7NVrMfZI91AmPRfcUvS/cLwnr\r\nUJgGFLQcXzbljLY5rCGLPmMWFmRYj55SmIQF+mXyh1xK3ff28KnUF3g8GBs1\r\nbymekAieQOX0QkBqt+Je7RGY3l859sRlDoHtbSMt5Pea+KFtLDOXYnaOwHom\r\nwYqp3JffN5DAheQbKl7N2coEvVcqWqcwf/GLMXZPVV41NqGdGMl9++V1L0ID\r\nz7maPKiPU/OZMPV0SGhm1pCmz1O69xufK1gfZJVjUgWwDlrBdg292TKAdMiv\r\nLhVheqxa8qoncQ0NtY+dxiw7EZn6MwIVxxMLAknjKdyef2Dm7M1S9f3MQauV\r\ne+yMz9uD/0eW7tuY+7rYI3IWC0CWxt6jxqRbG3G4mXMAFnfHpsQzuAxmZnOp\r\n6HqdR5u2MozhHwXfKE4wMtYAzn0yIuziz2A=\r\n=ans+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c7ef38a54cc085b34eea4d38f143f3b65dc649e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4cf917476.0","@material/base":"15.0.0-canary.4cf917476.0","@material/theme":"15.0.0-canary.4cf917476.0","@material/ripple":"15.0.0-canary.4cf917476.0","@material/typography":"15.0.0-canary.4cf917476.0","@material/feature-targeting":"15.0.0-canary.4cf917476.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.4cf917476.0_1667671469970_0.11759464764111649","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/form-field","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.eef14bd32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2afd453aff06d1be3af3c07856caa565a511f4bf","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.eef14bd32.0.tgz","fileCount":33,"integrity":"sha512-JaBZdxdysHcmriVF3FAVLpnzUP3bpFT+RzHDcDwEnI3RDe31cCZ+SYzcuafwoszAhmvqHWlFA9wBLmE7dz0v/w==","signatures":[{"sig":"MEUCIQC9fnSPkL8HNyCnbMaYXHX7agLJjevJ2gOGqi7rNGoQTwIgcJjUhu7FUou9lfDBDC1GENOUJ28lRjJw/Zw6oXxJMQ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+3sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7JBAAhd0E0iaFIXVDHjmn+gxNrHVBD7fP+W1mWLSm3Gx1/BUN/sE2\r\nKB2g4gi73EZm+l9tBTzIGNHdGQwNX3JrH/WC1lQYWiQtVnHBd1bb46h2BQB0\r\nk9aAdzwH4M4ngA47wCd89BbI3UoiJwNdt6MXZU5rGML/rCY3gP0D50yfYXaP\r\nEjESpkhGzjKvdR+sWTgXkMY4lEWCV45q2sz7jMPYJ3qsXm/5srLAxZdUiWhb\r\n9dU3WNiyHg3rvieSYkewn1QY+5KgdV/BX5zkbgZ8rYaO7pX5ji4LGwYhoj3X\r\nU3L3UnGVS9WoDwHg+UdNE3936xAAp4nc7sMJYLx4xbp4u7KVUlHataEmuG9V\r\ncw/uWe/WEbSjuiMPcl6avqp7jucZ5wm1gfbVGC02louPmmqNdyP2osXArfNB\r\n2kW6lMUn5cbzKfplkfuqctx8+QCJ03/0hEmj4r4bbCc314tbxQUUM84i/IyC\r\nk+h6qSFtRq/8EReWcv6OSg+Bg9ZxVpi8tv8YAoee4397FBLseiOuv1S9sz05\r\nOvo2QBdKjaxOZJoTBi0u+P6TzkAaPOd87x12bE1iGYQN0+Uu1dfqscMt8Lz6\r\nDnmIfH14ExxK7liGm8qvRbmWwQFdkDx+z2ySznY0zZSjI8fS2HYFpEcQA0rM\r\nu5BNITllVh3V856i/H8hFIbeG3LsYvzwSCM=\r\n=72r1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"40acb6cbe1201f5ef758bfb96da3145ae3c4c1a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.eef14bd32.0","@material/base":"15.0.0-canary.eef14bd32.0","@material/theme":"15.0.0-canary.eef14bd32.0","@material/ripple":"15.0.0-canary.eef14bd32.0","@material/typography":"15.0.0-canary.eef14bd32.0","@material/feature-targeting":"15.0.0-canary.eef14bd32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.eef14bd32.0_1667755499824_0.9904981676304414","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/form-field","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.6faa29fe9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0c0e097dc506de9e26a051b17bf5fe95de6da7f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.6faa29fe9.0.tgz","fileCount":33,"integrity":"sha512-6Y2iJPIUYjJOc4bY/0bq8nWwhvElUaXvpHSbik36TecfXrRYATOScVbseBMcCoMnLn93St8IVhsSRMKuExX2RA==","signatures":[{"sig":"MEUCIQCk1PsT+p0huuOREc+L812pfmzSRVlwga/sLOWrkmkgVgIgE77pLbBvNtwuR2aubdy8BXvFy6yoAR7ZRHG0EjirgLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHftACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/UBAAnMosevvlIazmboysU7PCTgVZhb1aDYdRNy1jqPIrebGl5LvW\r\n6rlZ9OTGIYqukZERQjxMOJaRfRnQE0JjY3GASsfhgAoNMw4NXofJp7alynqv\r\n0vMAn0vG+g1O1drZgQGcDOXABt+AtbvwQEIkF54tnfG4wdbzlXato2oWlGlz\r\n32K1YX2VnwexJXuxErzqn/kr4AgtAJ0nusSCNXOlQ6N8Ntwv8bxxYx/5ki37\r\nHCH3jknqBQTScfTt8nzr2sY6bNHs/pb7HAPggBCsx3nEXdljEg5p2zXbm67n\r\nAHXUSFc5RGLLKLaDg6gkgaUpeudyI1j0Wn4LmGAsW/6tyBZ4hkpIQ4qs65X9\r\n5kk5Eu9wjqCYHg0PPRt8DU8LUos+IAcnchKtv6Dg4E292+En0y5BtViPXoIz\r\nn18wWSNeYABLjHxrE+T+4a2qXkysoBWmM8kjk0D3W8a78C4Arf6c2fgkgtWs\r\nqUaHOFLKA8BBBmQ3QeeYWkfuY+I+mjCnaaHFSKoOePvGvAPlYcxUXnNLOkg4\r\nv72odF42FF32zHm+CkCwJ+rTz2yc2hHvnU1pFZeymmbIv5/Kuf2JtDFRZ3mI\r\nemWjloopixNXF6qSYsVlWLi4vhxJO/tt5mMEw2lfxlPwwkf7s6doN3CNnsQY\r\n69PLztJztJHVE0v61kAP52cu+Rp/xd1FKdg=\r\n=L+C+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1403858386443f73c0593105b5654b6ad8596a9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6faa29fe9.0","@material/base":"15.0.0-canary.6faa29fe9.0","@material/theme":"15.0.0-canary.6faa29fe9.0","@material/ripple":"15.0.0-canary.6faa29fe9.0","@material/typography":"15.0.0-canary.6faa29fe9.0","@material/feature-targeting":"15.0.0-canary.6faa29fe9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.6faa29fe9.0_1667790829623_0.5556841304541229","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/form-field","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.9af09b967.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c7c56da9387d74c898f98a54e02edaf03f87ba6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.9af09b967.0.tgz","fileCount":33,"integrity":"sha512-hY/PG6IH7rQOnCHSv9bhp7LGy6rubtB+A1AdE875gbZTY2gQ3F4tzWpN4XvlzctTlw/vBcbzOXqjg7gWKi0JWg==","signatures":[{"sig":"MEUCIAQhfnFo4088qMi25KwR8xNTsxYY8HSHbRkIhJnfDULLAiEAgtdM0flysApq/cakiEh8Xr3cW6RfgQHw+yWGk+2zD7c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU49ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoohQ//SmFizusnJqjwIqWI7wkbRXbSnXwNoDT41HURGXHaDNb6+Tdk\r\nfwwCaAc9dWfcIhG1OKWgf1TgeZm88j0NOU+h5dWPjKXcHbJesgMN4Z79o3em\r\n38/YiQX1XWP6ytPIufVXvw1KhBFnkd/HQkT2GJBA2Wr3+21ogWkM8FCTNGsF\r\nK9zbn6adTLWrjocI3ZThMfgpUr1ypKBmJe+nuoCMAiOjNftcAvIlhJ1grBUJ\r\nI/23IJKABGlyHH19SjD2YFGRomAaCS5fHz5+NQLoRw5KZN3R25TULjKzZRFL\r\nRex+UU2dh0rd/1iSVpG0Bq3qreQRFFkqKGTpMAUoGAG9D/TErT5iONgnLD0t\r\nP4P/9X2wuQIr1VzvFX0oYUUrtpv0vkZCL1DkwI4TW4fCxIyUhA7Lv0i+lJZy\r\nx/71zUGS0vg65lrHBN4YllCTgqrsMdxnZIIxw58lI5Dn+s3BLzwYJ5Xx3Hju\r\np/gwCA3/SjjJBrZiU4VMSKe1rqENYEHSn+Xlr1EQ3Q52WT8ChLG8CVrYRIXN\r\nnPD9IA/dpK8TWyD7Re2YQlg/ok95MsrAgU4eQiIYBqP3hc4cdMo7YmJBCeax\r\nr5M0rjFVeW6kE8CB9SKlqIX1cEM9Gg+Jvuvxrsjq39jk8sbzsvWNEtc2XFdD\r\nEvj2xBDUcOWK35xzUl+VnPd8VfDYumnh8as=\r\n=oKY1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"745e702463a22f4c5de6e94b3527530a9bdcc9d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9af09b967.0","@material/base":"15.0.0-canary.9af09b967.0","@material/theme":"15.0.0-canary.9af09b967.0","@material/ripple":"15.0.0-canary.9af09b967.0","@material/typography":"15.0.0-canary.9af09b967.0","@material/feature-targeting":"15.0.0-canary.9af09b967.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.9af09b967.0_1667845692927_0.38875045282437526","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/form-field","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.0f54fbb93.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b02a28535ff5d3d35d6ab412c8e6daacaac9d83","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.0f54fbb93.0.tgz","fileCount":33,"integrity":"sha512-OihGzO8+EdKL+ynSTj6qkwSrMDdoelQF+KaySw11yHBZiSZT2QCTE7WydTbeTidBc+IJPp9ve0P5AsMXCZeY2A==","signatures":[{"sig":"MEUCIQC0cjya7IH6DFi4aGLMmapFH7kZ/P4Q07+IhB5TZOSWaQIgJ6aBAuDE09kjBm1hqR9S3cfTK7DKS6end1dHExsIQdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatCrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNYxAAmREo+lC6z893rSn8fd4WWnDDTkTz59jOBxWv7WmWNny8kPVa\r\navzb5ztmifNmOhJfv0KPvMnf0w38xrueFOJf1tBxs67prO3mhZf0bFN8qh/X\r\nZ0cCExjcDJxLWjiWphKi6YfQ0ubVkZfjJAZHjwQurlLOxVMoo0hYg+74ZMkZ\r\nw+Qt84c0TQGVwM3YXRRktnQnuAHN6JuQxhJHAYbsz4m3UDCKp93aBlHOQnIz\r\neakmCrYdcOgnucV1rU4/+5kho0DqCPHvaR9OMEH4Mn5uMRZObSaShNmzli2M\r\ntUv9OcqYh6Q39ITuom1UkwBQvqFkcQ2zrj8oTBLAXmU7rdLsGtAxKiSpAmN7\r\n6BVej8hFI68lIScdMMp5qUvyOnzGd+AwKYGZ7BInVg4heJjT1ddsnLuDBdeO\r\nLMCm9MrxO1ugO6ArGlxnCRBA4Xri7M1LNpy/Q60lzr3MkbUU3oxJRqBS03wb\r\noeizWNskh9mqXyBq8f8OtGKdcA60UCvUQQNyKm0hDcU29v6VG//9J9JsegDx\r\nvOcAdQ2x7nkpSo5B8xLkxfNEwRBJ0IVNfcbXtwFcBgI5ZZ8M4gBEnuRFKUl6\r\nGzXv1j8tsCwlT0GzvcKwFHtCiwqnb0PQL6Iqwxn7yMyakYEkrmPe7wKoU+1h\r\nhIFXoM2IfFqIcYrzOwvn6/feRvTLbumn9ZE=\r\n=/EBb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5d2d1814fad8065dd869bd95c156c04ad45926f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0f54fbb93.0","@material/base":"15.0.0-canary.0f54fbb93.0","@material/theme":"15.0.0-canary.0f54fbb93.0","@material/ripple":"15.0.0-canary.0f54fbb93.0","@material/typography":"15.0.0-canary.0f54fbb93.0","@material/feature-targeting":"15.0.0-canary.0f54fbb93.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.0f54fbb93.0_1667944618795_0.6358826792566776","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/form-field","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a8d47f9fe.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"550f81d1a4cbef9af9f0c054eee030d19e363e99","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":33,"integrity":"sha512-Yvn7mAdfsKpPzG/MPnPIfQ+HPUZlRrZbWB8IGRjvCN3yRIqeI9JFnqs3LYQibYwl4TWMADKe/r79J/its3FtHQ==","signatures":[{"sig":"MEYCIQDoCk1SShx6FHbWspV/4Oec0eN8WqMX7s3eL31lOe/gNwIhAJgmgQPfJ3STS+CcZFZZ6aGBkFHXpA+tSqMTwYlV6Ckj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjayoPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq86A//UHIsC2QmnRVeGiTObP69d+hCDyrz/bnh6x+Faqc5yngsI71R\r\n8SCHgXzpNrXlCP/UMe3CXwDaSEyRcI3AnFTDUiIOiplNNHHxRbYEKR9WZ/Kd\r\ngpCik6sDmddWEIU1Hk5zLgR0vQJQ5CT8+4bEAsSa3/103mTjMQng/kSHvKhO\r\npUGLJuSnVFgCkKD+1Xhut3hIarYPVKyclrVFH/l8UkdpG76pGjGD5+jSsoIk\r\ngDJlUOXnITbgAMcVDG1vhminXggutiaLvNbOqV+dmCRDo4L/SfiKRfnKSpjo\r\nGToww1kGRvEfui0o1msWK5wzn1NlHL85Gjdul4HIkM+hCG0HNQYk2GU0z3Zv\r\nHS0sYP/rNBh4CxkAibRtdWcaEgO8X1z3xIov1pU1fDVHRWdyzgBaJpjg85Pv\r\nBc0o+nVH2A+cqxuvFrcDF2U/xn1HtIQH2ZsEng9aL50HJYAPsAVfItL27lsx\r\nW6F0hJa5Nn/9kvTi3+1eBEi52oE2mchE0rFtE0b4m0SnfAzB5Ly+VPrLv4EF\r\nUXEmzeFVtT4YOD+7CF6mPgdMPlEsIJTfKE2zYbiXLHho5hw6UPSshQncle+l\r\nuDs5Czx/v9waTvNmPMSvkcFPGj+mPXNjm3pSfGKdVHOt7yUJxI26b7tMdGoD\r\nM8jbqo8X3wR6IZ81RybGTmWwUoTRwv28O68=\r\n=oeq4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"37662af94525622cb00ae2dd17f31f6a93b4eed8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a8d47f9fe.0","@material/base":"15.0.0-canary.a8d47f9fe.0","@material/theme":"15.0.0-canary.a8d47f9fe.0","@material/ripple":"15.0.0-canary.a8d47f9fe.0","@material/typography":"15.0.0-canary.a8d47f9fe.0","@material/feature-targeting":"15.0.0-canary.a8d47f9fe.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a8d47f9fe.0_1667967503121_0.5696445633656673","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/form-field","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.66a1e75e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9724fbb5949ad8f26d8cbb61445c736203783a47","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.66a1e75e6.0.tgz","fileCount":33,"integrity":"sha512-kwHMy5Nc9YD5dwkNMC2cN/R29dmnwotPbefHfvsqzx8Vtc2QSrb/ioZl/MDU/2igo3SNRCO0MqlEGmKzek3iAg==","signatures":[{"sig":"MEQCIEgxDLMJfVIUoKgkv9aePf628BGMMFXPJjCKfkN0OgDVAiApd6wo/DOOzMfvxrLkA5lCbpu3E+wHirFoR0R8DUDSsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3R/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9uw//fT+yhlH7gH1SnGmYjX/d8pTmI/sYQdSDd4qJM1FWmDKCr1gp\r\nFwYuvxKkWDkDutvwd1VRyakX/8ESI7BUK7qO8S5ZlvT0pTvW/+YEYLV503tj\r\nsU0O/cM5MuzW+XJu4KeJ+3fY2A4o0lT6vldjE7K1qed22CooD087286zVSva\r\n+ow+jdvsYOVh4UEWT2/V30ONjCUfWbp0S/M5TiVRwhg4XW2JJHOfyCfBtvMf\r\nQ4iHoSH0bYYrPXei4ziSiRtbj2gZO19ALPv4aVTz9lMdoPp8JqUn0f63EPkb\r\nf5YdjMweMEOBEMP9kfTf1zTuOHxWJLbT8eA9SDfI9QXSY8skt48W7XHyfWdu\r\nKHdX3lMWo/rVoD72sQ8DkeMhVhJuVcg2K7og6FcgQr5HQxo+O/rya2EA/dOF\r\nn71lSeufaW45i+MxFOHeecLi9YPDTPpO+yyF55Fz0JWCVOeLYyt9bmqxgRRT\r\nccYxHPppjunKU4lcqg+CIbhnPO2xOTAK/SeQSUobxRAkxx5GnwpJtXV9Yog5\r\n7mxb4GGxqhuP0DViaLwT02e1aGLzL/ZEdk2tgSrheYsNa+z59JTUwr6N2HFf\r\nwsdYtFiSwWgYkO89UsfIpvCw3NwfnQaYPN7SH/fMxNYQkzoCkeIGxSXJgWtq\r\nO0ZOUbsHOXFiHQ9qzrGVMRDl8VyvHiWienA=\r\n=IuCu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8ed0cca778858904bcff29669c6dca407f25ef98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.66a1e75e6.0","@material/base":"15.0.0-canary.66a1e75e6.0","@material/theme":"15.0.0-canary.66a1e75e6.0","@material/ripple":"15.0.0-canary.66a1e75e6.0","@material/typography":"15.0.0-canary.66a1e75e6.0","@material/feature-targeting":"15.0.0-canary.66a1e75e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.66a1e75e6.0_1667986558889_0.5545260725313199","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/form-field","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.5e5c2afc0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01a462b97529702cf8a2da1015e6a85da470e3db","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":33,"integrity":"sha512-SpdYzsexq8Wi5Yfc5b2GNnltefWhLT747B5k8DYCfGTGm1koIIh3P61PMSQtqooGX2Q+9UW+TqdtCAEbEWnGyw==","signatures":[{"sig":"MEUCIQDjmKywjk6RtTC4FwKmVZ7cid8bwQOtoVKD4+jdLfyZEwIgdVMP/uplfou8Qvs3GQBrkfGOa+8cVG8rz/S//RKF0hE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5TFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRJA/+KTeIHC4KazA51AXiwyxX8RHh31qsfxiPg8qRCD1nf3V/lIOu\r\ncSHU3rJTh6lICOiEXHFZLR3VVq0fHxhziJoQOEoIPL3U6aw5x+dEH2hXhNnp\r\nST7sCZs+yENt0KRW43NAUkxBtAcc6+GwSaYhN3S4vkttsAZtAZTqUeA85cSg\r\n9nRsGP0CBIAZg3l0ORm0kCino1q+6rL6XyHP9jXQQC9Z1w/ZrTQxrbEBGhqe\r\nFCmvdlqPTijJEtFHGTJMa3Sf5ky4GBGEhkAVvdHUvOTRfGBNY4TrJAZPzOeb\r\nO3R2FFBPAUTUEIc8L5oHJQlOuj4Jei3Xno/vNt8VjK4TZYVeu5V+XQKoi58Y\r\nOcnp8S8YDaMsuY44TGvsCTPI03jTlwNgDjZse3ktZ+YgWCUdIzLy9/2Ni1T/\r\n2yDxVhQT5SIvRhPQ9vChmMjwYavNpN83bG1DVvTN6BchQ09YjUgDE8HX2plA\r\n9KsoNTr8XrzXC2FSheM9UZw2dCa1XpU/lFKeSmoAaXl3TikcQgy+LfKoYMjE\r\nyVT9wG2b+Cbilj1ph3KLa8m++QU1p7Pgzb9PH7/NCfaYnNnxZfXEtatGze9x\r\nsKZLXADwl+UiPFVt5vwVesiWkrHftL0SeUN0fMd8vsZpPM9aT+0s+p7bxbO4\r\nuoK5Anzl7LsRWEbIzmB2n3F7OZob/PVYgsY=\r\n=e5UM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f14204a01be3c79ff286a8287a0ab731c371492c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5e5c2afc0.0","@material/base":"15.0.0-canary.5e5c2afc0.0","@material/theme":"15.0.0-canary.5e5c2afc0.0","@material/ripple":"15.0.0-canary.5e5c2afc0.0","@material/typography":"15.0.0-canary.5e5c2afc0.0","@material/feature-targeting":"15.0.0-canary.5e5c2afc0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.5e5c2afc0.0_1667994820947_0.7077687849905285","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/form-field","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.3e3f43359.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da7afbd8a43408ebda1514125b96ef117aad3f20","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.3e3f43359.0.tgz","fileCount":33,"integrity":"sha512-vKSOPNWGNr1GILH75F3yn65aKqN20Ymj9LDmFf23QI2Mfm0GhgbHytXPTMQaCDGQFBvmTNBEAeac/7HdwGrhZA==","signatures":[{"sig":"MEYCIQCnBgRpWE0PyDRNEHALQ0XYg2/R7EpjgObWwRmh20yX+wIhALHNenL6CYHsg0LHcmngqEVhE3PAzvW2/rc6EuP3J8tM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAeFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIIw/9Frb1///67sweX9S2Y8EgrettIhpD7pj8g6zgxYQPkBT5jPtx\r\ngL0fL7BIXmKpZKs0if29oxqRIeZntPWdfVBtqc35/uCBhxNsopSH3PwH+o0Y\r\nEunDtjF4ICNGscUqhp5s5HYxxBWNDCCVaaro4A+v+Gi4QbkhQYOPgGtEDWYw\r\nowkzG0qxYWY/fxgPSnBoohquiB4xkxnOZdMYoqYQWNkoNZUbP5ZOVyucxSWo\r\nN8MyS1EiEtqPJjygHSVLcgNSH7nz4qb7CH8txSPFRN7zRcDMTOMfWrHJMhm6\r\nKlpYqMLa6Bz70/RE4nj6CYXkvRHbFZVK5MS+crvgNBs2ykGEwmGd9DelZYZr\r\ntIfosqrrgZULcP3EPOlQ8p/lw83bSH/E9km7JHWAkiRJjKz2zM4gKiYeSEzz\r\noBE7yq7nhKOdjwD63+jb22DJdXp5Np911cNZb1x8QtdrkS+XRPRaE+s2F1Lb\r\nZw1Saf1DoxRE7tJkoC8u6zMp3kKK7AuoOLs9Xkmyg0UHqfxjlhzkYqdpaFHi\r\njSd2QvmwqiZ71DhUhV1RoArU9Z1yyhiUCtpWjUq7kdW1Y9YRZpHJipgG0WBC\r\nF2JaUCUpgD17vedCgtI7fMxms4G1ZSLqBsXblLBTRBowYH6Mr4sXAN0v7wCx\r\npFC+aZqL92Jzs14UxqcNeSk3vveyRnXgoTg=\r\n=rCYT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"722326ecc6026aea1f22d8b4e1c9901bc13141e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3e3f43359.0","@material/base":"15.0.0-canary.3e3f43359.0","@material/theme":"15.0.0-canary.3e3f43359.0","@material/ripple":"15.0.0-canary.3e3f43359.0","@material/typography":"15.0.0-canary.3e3f43359.0","@material/feature-targeting":"15.0.0-canary.3e3f43359.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.3e3f43359.0_1668024196907_0.5643862088400091","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/form-field","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.3f667fac6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a1025518c8e3f54dabe910378a54e27fdd9afd0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.3f667fac6.0.tgz","fileCount":33,"integrity":"sha512-MZKAkFnr0OvPKtlDP4KuAB96YE8sn8Bm4sjw7TpSdMojI+Wumqg02F2YL6P9MmmQ9HEQ5YuXVwywY/BsLNyY6A==","signatures":[{"sig":"MEUCIEzChgoofRneWeRspKUlJIpEx9VexAyCqoJCGw6SbJ1HAiEAlQuRUgfOYCG2FrYXvqJ3FwAV0zP+yemqdwJe690rGd4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCRmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7tBAAlgtDlRnQK47OK0H/pJBzTVAmH8kPV4iKRVnTTZgPKW5Iyi8h\r\nDkFZEJ7rNJugIa5OH6HFlEwSpK1RhmGZc+cNldyi8csRtwT3TAyEaB3A8fQ5\r\ncNs3nPIZ3t1MJeBw0ymOrhNzMwkjHaG7vJNoIiDWX2uVlMBrTzb+Mov42Do0\r\n3xHAwKcl2A0XL8S4PtPXoPanVGITLTa+pw9lClACOwvA/ebGJr6Nwr6ep5Ep\r\nbBWVZZsi3mQNUzO4oA+pAk5wVXNs1zT7f8UvTKyxhn6kS4C5XZGMEGAACXGe\r\npClIW1M0qoIs/bLPthr8Q4ueog1EkECLDRDYxG6ZFsjlS6GZyUZev8pehLjK\r\nb6W97hxiMGtxQAM+5Nk7TeI4bJ/U6nAmf/EW7yCslFk+ZnrB3B239xgbxsOM\r\nS98XO+q6SQH1ZIJrmjctNsQ0EMZCqzjz4qqDRWaJv4XuFUZpuhdFk7+20JkT\r\nN+skfQt8S7g6AGbQkyAXhDXlhPhrG6GmROyI0aftAudWB5QWH9q56MVSm3G6\r\n0bE/q81Mn6yuvlmraHXxptBiPdZUsZWgLyj3W1GHVPH92NQFAUdah+AzVTSl\r\nhfB7qWkJwF34FBOmjwIhOZO5Oy5m00r4BWsvEBeqCY5F0aJ/V4fmSrd7S7OX\r\nXjSJiK4p3r9E82H8r9P53KWzPa4vcTVmzGA=\r\n=tYui\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0980467335d47e19b4ec72e32644ba0a08bc0c34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3f667fac6.0","@material/base":"15.0.0-canary.3f667fac6.0","@material/theme":"15.0.0-canary.3f667fac6.0","@material/ripple":"15.0.0-canary.3f667fac6.0","@material/typography":"15.0.0-canary.3f667fac6.0","@material/feature-targeting":"15.0.0-canary.3f667fac6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.3f667fac6.0_1668031590199_0.9583624962753081","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/form-field","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.faa28c1c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"937618285695f9262c87a6a05844bbd9dc99cef6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.faa28c1c5.0.tgz","fileCount":33,"integrity":"sha512-V3vIFRkWqEpFxUC/QFXEXUgRflev0VSmAj7zE8kMQdmjBT6OIjBVaNILrkOunlnG2j3gZ4UseZ43tp60pr76Aw==","signatures":[{"sig":"MEQCIG5DZACUqM+cz7/lUdgw63CuomrpQB8BPNktcfnOGYUzAiBq9b8p7rfXRiE3moqmbqm8hTkV6Cho0iuBUn8zlwZAYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnoAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9gg/9HaQ8sBdTTkZOiebXKYriilDy/ls0dKKpchkrLOq61JTOVXsm\r\ncX/3oykKWlwuHTiIlqIfRb/DD+e05LSco4NphVZuSiDQxTMOqe3kNXrxDzgk\r\ners92owKUaNIw1cz3TxzBu6MRyEA4x/KSoxDRjrKcmKMtixgRuuD0wg059nm\r\nOBHj3aLgVFbSVGbFLK4yWS9LiFMURKkxXQVO7bkvmwmH5yHc9u+HH9zkmzrp\r\nHptTLjFyLrf7G4NokzUv86PeVKeqbjx4N7pbjoASTIFurLCzNOOFUiJH1sB8\r\n7GJResryP9uGxopO+wiOGFvPUyjSPjPtjvxsiepRZl8wJpLF99aiBHdE6bYQ\r\nRc30CynrZ9gdQJCcYd1hfjsrMytRSaUdTF9n8F3SWYWV9tlhlkexD2bzyALK\r\nlq3krtijq98t2NKiLVEHcRqzpu3jHEKGM3Ymb4KclNCLOjnjbeT6pBTqtjM6\r\nk5v8m8PkkHv8PJPIG2rT2856AgCeUIZ3LaBv+LJWLp85sRjKVvCktxnBQYHc\r\ngmE/YHe/wq8Hqa+RNSJd09DnC4H0dYr/9g4SMJtj/Q+2AHauZ/3zRVnEfD8i\r\nK7qgQszNZKS646y6svmS7t60S3yyLXvSF9ecUqcWcQrVEM33/5QPfUhRa1BX\r\njPxflptXUGxQKxQv4DW9OhemELzsNQGKZnc=\r\n=/Jqr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d36350ee1c0fb11d053acc0cd521939199fd696f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.faa28c1c5.0","@material/base":"15.0.0-canary.faa28c1c5.0","@material/theme":"15.0.0-canary.faa28c1c5.0","@material/ripple":"15.0.0-canary.faa28c1c5.0","@material/typography":"15.0.0-canary.faa28c1c5.0","@material/feature-targeting":"15.0.0-canary.faa28c1c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.faa28c1c5.0_1668184576626_0.5634614889417158","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/form-field","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a868c7866.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c81f98c8e38cb706b907f3d9518925edfd6050e7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a868c7866.0.tgz","fileCount":33,"integrity":"sha512-lbyEjaXfrp0YSJ5MBoWXuUiGCJdXGXaKQ4uSvD5imOMZ9UW7v8mUZAjvoXLDlw9kDt6A59j009CZ5g5TLb+6Cw==","signatures":[{"sig":"MEUCIQC66KOInln1/pG8fkePuoYA2WGTdx/Iz7M71q7r8F99fAIgC8W1alprR4HWapxiwSRP2f8AOZKW9TmhV89xxltg6mc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnonACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojWQ/+Oa0K1MXWHVAr6VB7UqotjvjGy1foSsH7lczUtK6fYuNEzk85\r\nms2t4cyslVc0UAwmWLaYVEhRmUykhVszTu6fb2VBHOYykYdMyXpHvs82oal4\r\nh5KcsD3MlXWhCKWBEE00RlMVobEESRYEslZkwwty8W6Gj5hdq1GbIlK/6StP\r\nh403Xail4+yJUpcgIJ4lPGN5xtvLeQgrUwiDYsVsK/BJ1vVJ7IBdVwii2CS0\r\nekTfNDVyJV87oTH6Ws9Z9io/WEokwzbi+H54n0flXq8Hv4ibNSFdOtsa3Zwf\r\nZuDXqPaToseF0FAQXbRcyMyC7AqOh/85GLRrxbDu3fFayDyDQW+Q+Lqy1n1o\r\nU/ngGrnVPGqa7neTdYrwj9JUbkCXA2tsGV/siVp86Jj0E9B1D9dT3aFI92Zf\r\nldhMu3pl8hj6nvZ3K3BbQZIDnYljtu/j3OPZdabNlYC3kwRSkqyQmTiDhrLF\r\nj9FlaloFKt1GVGz0frxLvugUcUzwY1uK56Afq+l0E5h66Wq76aKRDuTXPpgM\r\ntaxMd/PiG/EdGf1L+Ot0Rq507lXYiFigbc/70N4yEzYD/xr0Co8Ay/6TbxUJ\r\nZB7UW51FRYamk5ICWBdTUvaFhYJKZTwRY/mTe5q0DCzjLoMZ+cMQqpNoAEeH\r\nejRefKBgLMyakJS6AtfjCtDmHyMaXb0Uq2U=\r\n=0XaB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d35416d7d3365898437e980f43ade48e60904e85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a868c7866.0","@material/base":"15.0.0-canary.a868c7866.0","@material/theme":"15.0.0-canary.a868c7866.0","@material/ripple":"15.0.0-canary.a868c7866.0","@material/typography":"15.0.0-canary.a868c7866.0","@material/feature-targeting":"15.0.0-canary.a868c7866.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a868c7866.0_1668184615514_0.874863047204048","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/form-field","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.602fe8efa.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcc12d747a7d364fbcf088aebba62dfc098cec58","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.602fe8efa.0.tgz","fileCount":33,"integrity":"sha512-xftbt1lpyXokkHxrnp3EVH/WQPzZSE61BzrnPcbxhVOKVw8SIAyn6r8VJ91WHVs28qrhzqe3pyE7TwXJpO9f0w==","signatures":[{"sig":"MEUCIQDTh/cXdN3bBsjgckyq1VATSQT2pD3E1ETScOrp4OscxQIgb+8cIYSQcP7HWl5/PFeke7vnCLxrCxrxJyayTQRSRT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboJwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdLw//SQejMV0zncmnIUsl8UZD6cK9cw72GvB3lBffmjrZS4Yigc2b\r\npnHhHsrX98R5dtA6ZHyWEao4/Eu1yM3woCc2PmaWkTZSDAFpQecBmZUjhUuk\r\nEDi96jvEdyK5uz75Q5GdFEM+1dM6o4j8DSgIcKdzJle2ZSr0LZQmwCSHgeMB\r\nLBVv9vLdzqffyCTUhnU5wlUYUqGVI8kshJuMbu7btEbObPha8Sao3VtcA8iq\r\nntfZD+1O8jwhDnhs2vWHDYfvfLZqiOWThFdq7wJR4s52m03vM6FXPGWGxKNK\r\no9+KkM6ww/baHNoEYemQxrund7Tj3STgeWmpsmbI7joMaDans/eG4MlYQoQZ\r\nM47K1f89Bj0rOu1a6j5R9vutPRzG7izzs1bkW2M1aMxPlQkflL57BbqPTTIZ\r\n4KsMLlfOIQ6hN3qrjvLCfQz5uQmyxb7ms2CGpvj9VP07xpKqCGc8rKQNxRqj\r\nNLS7JAafLieJcwrvEB2y03d0/dgDlx3YozrNbHo4YEKbI4TfX2JRamzpLj1X\r\nYz7/78Yk6KJSzv/Y0Mo1d5wcAixc+j78YTdm/9BsBr9Cu9dXO7i7qdN6cr36\r\n61+nu2eJRfqb7UBq95g7F4WlNxYvRj9oXkx+1q0z0ai63IRXBtqXkt4xfVCf\r\nXmEfbfIxsukU6iDgUUuvGrw2mO4oLw65vS0=\r\n=BN7K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6bdfaf09ca41b2fd7e3db4797bc2f536f8fbbade","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.602fe8efa.0","@material/base":"15.0.0-canary.602fe8efa.0","@material/theme":"15.0.0-canary.602fe8efa.0","@material/ripple":"15.0.0-canary.602fe8efa.0","@material/typography":"15.0.0-canary.602fe8efa.0","@material/feature-targeting":"15.0.0-canary.602fe8efa.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.602fe8efa.0_1668186736137_0.8180921496532751","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/form-field","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.558c2be62.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ae0e73e6c1a26286dca0af4c14e44520f231ed7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.558c2be62.0.tgz","fileCount":33,"integrity":"sha512-0FQaMg9uqW1QbwHrcS1PpONvkklf7tkY3YWAQ8PMy4nMjDAL1bq2NjGJ8hVyomK5+nPVSAtEGz5z+yhx3kCMJA==","signatures":[{"sig":"MEYCIQDWpJA3efXstQITK0lF6ZZukz9doO6K1PcCUg9KAReh7gIhAKGTA9cFGntfI6ZfDAiqrz1Db9T4WdF/qIUPpn5XKaH1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtCVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogNg//YKCD9rOi7aVifPpXg3mmQd6qMxjJprRnYp2dpJGqrd2IhqUn\r\ntTLf9MNF+l47FiGqDYZ7Fd+rKouuVBTTCiepDhvXZCITBW0OBQqlCj40noPC\r\nnq+ufb8NvgFj1DNzAQM3bHQYTABF0vDKW0ulvGxpHtJL8OTKuOjp5+aX11OI\r\nbLjih38Cf31mV8qX01lrVrn3PmFDh162mig6waZ8E62xTTuuCCvhegJuSJ8H\r\nlTSDXVJLoF2R2YqMuhpmJ1DmbnxYgXXsAHKxaenlBCHVAx82xWM9L4G3odPd\r\nP7xK8XAum7CCT/p/zOtusOjDz8Fqh1R00sE5PapC2L/9TURiMgZUVzeDU6vU\r\nNKd0KdJ0KUDpcDQED53ET7giXfnBEUnhKcY268e4xHrBLACyHlB/fR03zw7W\r\nOvZviOhXQcTwEUjS5EoZrI9Cj2J/8P2iqB4Bvmt9T+/KwHH30d0Mx0aqgT6b\r\niJX8aIuGBIHSZ3IfYrxRoAyjHdrm0XaHcXEhEUtPDXVloiNw9ENLBvSMLVHC\r\nb59NA7e3itExYfuXbxGTAYYOsJPC3cR5cxQst0xrnbH5i0IxXjF0VIN3TGv2\r\nobJ4ERVERIdhPION8IzHpUNZkMdcVa4Njfib01uDpfkqyOyKr57IIRzg30Hf\r\njQyf+ecvuxvMGIPuzO/VdFkqrth/xsqTf0I=\r\n=MPsh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"64666caf2aacf562ab6ab5b701e89f28a9bb5c74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.558c2be62.0","@material/base":"15.0.0-canary.558c2be62.0","@material/theme":"15.0.0-canary.558c2be62.0","@material/ripple":"15.0.0-canary.558c2be62.0","@material/typography":"15.0.0-canary.558c2be62.0","@material/feature-targeting":"15.0.0-canary.558c2be62.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.558c2be62.0_1668206740943_0.26233141939061877","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/form-field","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b5c13a7a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4721329a75b9e668b4f650161bd7386ee5af50d0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":33,"integrity":"sha512-wgGne4kOhRJ6tdflOPPRdWREGEZGwphzGrQ4uhDXLMAwE/QVjU3QVJjgIuJekWQaBHw0kxcvIxhtQQelUW5Yyw==","signatures":[{"sig":"MEQCIEK3k1Z5yg8UBa3B3mQ5CaTdTmjCiMO6KdZMVYO2hEr5AiBIFcLim5qntPpkMnb18wM6XUnYquL26KjBW255wnMSqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmXEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbdhAApBU+22ygmpwcxvbDZcBaUlGgTmazg2fQvOQLIfT4JA/4qvEQ\r\nELS3q4VH9+EhGSYAhlUCbJqE+EKXTOtQiXdnQFluwpEi/X8nuA/AfNrAlLC/\r\nLtY4p/RM3yAvC8MQttlSaHPLSWGxnvciToFv87I0GAddV08pgtGD7ZLMWOsd\r\nlPX5GgsiuPz0Cxf3AXk4T/LQR63d+dlaGELUXb8idbPQEbngERp+utR1ruAH\r\nhpmLX74i7iPk/PDosQLRhEzUrjK8mP2c9ol2na7dw053AeG2TwGIcXoDI9yX\r\nmEPtj8WuWwIfwPTGwTxeds9BeKa78X6lXjJGaSNs/roiLgmMCpxu0aH9+ZOi\r\n3HEmKocBDkLYpkOauWB8unJpPtjPCQCPYAfuQBlPo+6HvBkO+/fU2bNkqyre\r\nlTLa8cadM5ms0cfGQQQegLdeqmm4859q0r/4A2sVdHlqmeS1ioWF235AsPzO\r\nERZ0OOP0Il9uOsyKCzVZmm1KKIyXGL9gzXUsVvuEOct36yGQeM32JTL5CTo7\r\nqNCB3DVLI6M3Jqyl9tKhIKeJNztsc1UwIFIotpiJ2yVl3mKFB4vqgTGM5M5m\r\no+nn7/BjqXprB3VIz7axjjHSZqJLCGAXkKpalIh+OrRUV5gv/3JVKp+YNm+q\r\nexeQbCsBHXMDEHbk6wi0gbUStTcrA8i6siA=\r\n=HVs0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d7e326425877e3ba53b64755680e3503090a01cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b5c13a7a8.0","@material/base":"15.0.0-canary.b5c13a7a8.0","@material/theme":"15.0.0-canary.b5c13a7a8.0","@material/ripple":"15.0.0-canary.b5c13a7a8.0","@material/typography":"15.0.0-canary.b5c13a7a8.0","@material/feature-targeting":"15.0.0-canary.b5c13a7a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b5c13a7a8.0_1668441539970_0.07956930171624288","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/form-field","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a6e1c0702.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7a70c99075148b6ffc02bb1e1d5ded42a1fbdca","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a6e1c0702.0.tgz","fileCount":33,"integrity":"sha512-pBkKYgGV85sDSmKl+SUg9NsSlEY/IdAR4mKCQWwgbSeECGi83YmEClIzRU6PdWHKlH0bwHAzmEaiUzjdcaAvxw==","signatures":[{"sig":"MEUCIHx8QM0R4/KKJBoIelzhLpbU8qupoIeaCfW4VwOJo6RdAiEAoIv9ycA6otJu1Ey7BQg+QYKPSjVxpFN1UZ7FWMxQ+T0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnp/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVUw//dc1VREbQ5Jtw2IICBt43OCz97P+Dw8Dv+Wp0blldldbg8bi/\r\nJA+GZr3Jrr8oIIuCloettT/Q19aeOMND1F5UXuMxOEy7o041T6LxWeU8eCci\r\n0ElUtVaF3o7mLxEO+xHp8dCozKi5/jizNYoBoqY6LmVFPCRbJ2Xox/2i923d\r\nQ5gAFfvDDPvP1+AJ0UNYxLj/NG6rDn84mEW1pdXuH/uWQdzkNzfcYtQKw4+z\r\nR1gLJUZugI8G++tScnZCTc6oni0Ssy6GkHzgBMTamFSq1SFjw0KH9uEV2Qb7\r\nVEYhsU07dzkajHNyD4Sj74cBUdBHBEoIt0AVWEYHXLs8tDPqXBmnKthxXote\r\nQiNB1oaOJHJtBfijZYR7p7xAT6EPvdbx80lQynciwpoQhYv6+BOOaENDpy/1\r\n5e6EgIhSERd0GqBjy5KkEsIvA5pZpEDou91YIi2Yi56Gx5AcdI546IrLBHBm\r\n1U28FTXHNSEvxESLYhiUNbvVwWOSbnLje8djWL8LdzSmNeAdVbywwaKciqqV\r\nDPYX5p1QVZ0e+391/GAHtCF5S6fgy+XFBa+SRcoSuufeaHt8DYPcsqPDVXEB\r\nC5fgVIGtElNgTSCv3z6hgqpp2WdA5QOy2ALiXldNZ8lEg6nAW5uWkmeeZzuV\r\ngG470y/Ydjoc+48ztJfZIdftfUqMYtHUdzU=\r\n=c93v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3c1ee7333cad68ece747437d4bab1a737d6ea96f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a6e1c0702.0","@material/base":"15.0.0-canary.a6e1c0702.0","@material/theme":"15.0.0-canary.a6e1c0702.0","@material/ripple":"15.0.0-canary.a6e1c0702.0","@material/typography":"15.0.0-canary.a6e1c0702.0","@material/feature-targeting":"15.0.0-canary.a6e1c0702.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a6e1c0702.0_1668446847719_0.6547440122331389","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/form-field","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b6f8a06de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c68f8e7b7984de58efc53ff8a7f3a65f178e021","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b6f8a06de.0.tgz","fileCount":33,"integrity":"sha512-JunQgTq1p/wzE6VOEBh3xDqMQiC3kVMiA3Kzbk3E0DEGC6Loqi96iUA8B7F8f8VKi4ktwcs8KJAhICH+xHljwQ==","signatures":[{"sig":"MEYCIQDT3+ffIcQcTYGSzQK5Cd0m/K+7mcZO5rDzDsW+NdKiHgIhAMQyzcllLJ8j9DdGlOJHsXhjmO46D7e82WdmhWltrnU0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1vPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruZBAAjh6yHqN9yv0aTSgLd+c87u/MKcMJ5OLbB2V+jRYBAwPRaVD0\r\nkJdTK642aK6c+CemsoEeiasO1EUb9WDrgu6a/oJjmEmIYc2L2t4EclJfNrPb\r\njb8f1gh6cCsRRyrvGukqrcRe/9Fh806vd+5tZgtEhJU6sc3QBNHNj22qdMYa\r\nlZEhsgBrrqvMwYIop23S++riVJb7xou/4rgBM6GgXSrP9SzWpGokjMUmfS7q\r\nMEh/izne9OsBx2og2lvXttK/MY5Q2DWug2vkH6SkK6G4AJrlQJyAVSxRKb+/\r\nEKyefRJ2g4HMcI+Wzx+agV4cyDlQYjHeVBw+FvoHXa14XbdcuJgA1alV9V/k\r\nipd0KIqyW60WWc3V2SPf8harpPDiy44xcHb+I8RxwcF2rqljeWvVOdMepSSd\r\nfnXCm278pU/lOIDCMkkln3Z6HqFx83fgYXDci5K9dIAV2v7/wI8NJtw1C1/a\r\nTt3vcXUJVQy1+3nl4bVSzcf49JsrBb7YjKfy9mSBD6w3gEcDOFRRtVTiTLeh\r\nHLe4AfukEA1zyePAtkTD/DLCZ+h9ur50MdyVlgO8zng8KmEMve7GJhcwvCAO\r\nXlF3P9FO8V5xPB2kAu1g7npemc+T2YHpWHfPhY9SNNEstvNL7Vd+gIumhR7M\r\nmwTOVpUV+Yf0lEJ+3mC4RDMo+bojk4m7vxs=\r\n=KCss\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"92681882b16f14e6a94df4b1ac983fa86e242640","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b6f8a06de.0","@material/base":"15.0.0-canary.b6f8a06de.0","@material/theme":"15.0.0-canary.b6f8a06de.0","@material/ripple":"15.0.0-canary.b6f8a06de.0","@material/typography":"15.0.0-canary.b6f8a06de.0","@material/feature-targeting":"15.0.0-canary.b6f8a06de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b6f8a06de.0_1668504527215_0.9684807526639398","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/form-field","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.0163f3ba5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10e752df669ed9330e98887d170b08d0afae3040","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.0163f3ba5.0.tgz","fileCount":33,"integrity":"sha512-dl/WjKAApZQytewEzvIgEVwHUhakPVXN3ufgg21lCS8D/1JlAcnYaqwYmmMttM6IrCcuLc2lfoZSX7aMC/RG5g==","signatures":[{"sig":"MEUCIQDFLS6dMf86TOKZne9COhgmxq5izbvlnV8ExbNs3Q3XogIgZMF4oKvX4oaN3gNbnMjUAEIxv1DfjJQV3c4pfWmWpOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9Q7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFZQ/+Jv+HbGyWA7aY6R9XAezDvLfHvLb8zUnQb2/fr4X84UrXWh0b\r\nbWfWFf5DxeJae86niD4NZEdmoayma49b63F6BjG/xYMHI5qMryY+pjzkZLg/\r\nyLyuNJ50kJbvIDJiYG2Ua3htMZ5YiK1xoWgXhph9xGU/C4wxvHM6DA3Ze6uO\r\nFm3a2mHIUyaV+SOA4SkX74skfzNSZck5fMr3Zcl0yjxvwJXyv+f1lByACrUJ\r\nPJ/VcHvrZZvEDL4cgD4Cw/5M4gZCJGP07JDnKIhkH4bt5mWV0GpMQPqoSlmS\r\nmXNebUjEpd50X19ReSzD/7T2sPUDWTnpsUY4aEit1DQ3AmJcwkzu/iB9zNU+\r\nvSkD27cJbBTAb2uWLUrWwch5vZwbGwqMmKwzR9wCrqA0m0cRenBR5qNAe5Tb\r\n0OOql0m9iAvlUDvxRR1eTvBheJiI6YXyRWMRCZbJj5NlmNuEkQcfGh6ywseB\r\nYgx2g8bjp+P5l7bG4CuKJQK+3vDcPPiEL+TiTyqhI3mB3jxlUeOgxycBsACS\r\nvAGT31w8PeJe/j8tWpNlN3R29sY6Bma/2W+AQd30U6gSJ3LjxUOfiKNSRvGY\r\n8kai8wadMW4sGxwZhvc0RiUHFfWas4dRmZq2Zzsofc5E49BpkvIWq88fySqB\r\nRUeDONjt4KBvNX8QmMF/wF862LtuibAbpDM=\r\n=jyJ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4198cde77ba33a68c74eb5e814d92df422f464c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0163f3ba5.0","@material/base":"15.0.0-canary.0163f3ba5.0","@material/theme":"15.0.0-canary.0163f3ba5.0","@material/ripple":"15.0.0-canary.0163f3ba5.0","@material/typography":"15.0.0-canary.0163f3ba5.0","@material/feature-targeting":"15.0.0-canary.0163f3ba5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.0163f3ba5.0_1668535355475_0.2913710869053998","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/form-field","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.66c5cbb94.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e177b67440c221e38a86700dfe3b885c8b9eb55","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.66c5cbb94.0.tgz","fileCount":33,"integrity":"sha512-35kvz5LTyskIpVD5Bvj1PxMv5qyaAuYTMhMGkZt2Vg+68P0LoWaMpB65dpMl9n41Vfe5yMcyd/up8FZC7uuS/w==","signatures":[{"sig":"MEUCIFLLr4nkg8Cz5bEBPL4M8t2X3iLAB2ka7JwHiYuhJ3wIAiEA3r7+cdI15BGt333Zo4cHl2UC5qbMEPCge0G5nhYGAI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+jaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkEw//eYJIsIISMliCp3UzEiYuXKZCMwPc0jnLmW2ApnCBmnhhkZHV\r\nxq6SrEEkORVE1m0/ONmDzEtCG6tAjohimn8FGokOJtud1D8S/at7pPWoXyLg\r\nx1x7q5ao34ruoPEuP++oWW1VjZPhFou6KxWwb5aXExA9YMZ7lamMGDVZK2kn\r\nEgaiolIpMHFBLhswhkqgwgeaD7+U+SgXTqLERpuFADqw4Nt5I9njfHPxmamm\r\nOtUk1Prbm0sUJHKK1x6ie8k5fVGN9ux+GqfYtjdJYL4uykYlVKmacC0opWxa\r\nj5B8zSlHLXTDBiJIoxfj0+fkYx39YmnfcazGom5FRwT20PgNv7Iu+xLbIHiV\r\nkFOmJ3wykaRhnMZz746DfrTX96B3aYRA/QJIYezeV3mCbuNqtMNLMnHETo/n\r\nboYfRpuR3IhEyv10SWUTll73Zoo9V5GIYT+0Lm2DEUGDvEeB6kF8XKAXgewM\r\ndTzXS9Wdul112b+CVVE9qZX/JG1Ebdf7jd2pXT8tlprz7hSn5K06di2Kb9sI\r\nyxee6LatEkj2jxuoZrfJ1SlYyHmfK4qHCD7O18V96YOc7hBGEstLb/4iAm8/\r\nYxKIzsU4E6hSDF83k94mUHO5RixjuZUW2p9inN+NN0T9XbrClIcqK9aCS7P6\r\n/O06TPK15KPNf15FMr87s8ZHXn1b5lPHmws=\r\n=oWfx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5d01716a4e4556657b2c4ebb469b826660673327","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.66c5cbb94.0","@material/base":"15.0.0-canary.66c5cbb94.0","@material/theme":"15.0.0-canary.66c5cbb94.0","@material/ripple":"15.0.0-canary.66c5cbb94.0","@material/typography":"15.0.0-canary.66c5cbb94.0","@material/feature-targeting":"15.0.0-canary.66c5cbb94.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.66c5cbb94.0_1668540634395_0.146540165390324","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/form-field","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b01136063.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1e15a530b65946af267001d299ee044761b6cc6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b01136063.0.tgz","fileCount":33,"integrity":"sha512-z5NrpwhBLIvN/SaCUAu0q7W5YOWuSFmbNbRKs8ypC1vty53onpH6NDLstXsXx7vm8dnJ68yfHx4irW3tRN8CLA==","signatures":[{"sig":"MEQCIAZRZrZ7AJtia4bSJiHqeYCgeh78RAdyxVaGZhion4kzAiAV/qhDJiGyyp5eNSXg5Tw+tavYH+1wjcVB0z4mHX6K7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCvSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQAg/5ACA0B1fz4eQ7EMfQe/uA6/z473XPHTuLM5T/8gnsN9IA2WXu\r\nrItDKv/zma5KP9M9Se/4Mpw3Yo6ORIGHNwnM0QjxhqguJtt5HKlVbf/e1mhL\r\n0g6DkxQ6QhaCoskWdarIuA5Ap3UCrtJLb0Cl6OvHulT2hBvxQJM2S9XYIlP2\r\ncL46PPQkiNGj/Bxu6zz6UYWctb2JEmDyKk69hrGEe8U5tSa9XRdKvxzuQeNm\r\n9LxP/A2OqEBf/dct/QRJSfg+8IgyEVxVPFCz+oVGtfKuO9ve6Cre8P8kF9Cw\r\n3j+/slIHKkUAEfzptAmlqUMFV+1R+xbqHw5Q9IOY85M+mcB0Xecn0ojaeM7Q\r\nrRuAHIEA3MPSDKSsxsKPwIELFSm1zD9Qc+4roKlF8q3eM5UCX9cjF4KtITr+\r\ndJCsXgBi1wCxLFLMelpeJfXGAWoGtvPFEOeKpveZAzf4jvJnhN1K49dXTFzc\r\nXdTRzimsT+Vz2JQAolFrREz0EAURIs2xAF8StPwoSHbjSLvG9Yq4bX3n1Cyg\r\nQzX4DrACgiYYQTV+rpXOkOsQj81r+GWf6igkzKVj17y9+JiWtY20ZQXmlZtC\r\ngDCpeV/nlUEW2E578nraE5bXZ3uFXSkDXhOLVeGiH4uTxWo3ZIqCWbj0m3dV\r\nvS/wrpXNa1VbKjwa1XBjlgV0CO4tLeRN848=\r\n=E60n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"125921cea459cbed7dbe3e1c938761a0cc03a263","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b01136063.0","@material/base":"15.0.0-canary.b01136063.0","@material/theme":"15.0.0-canary.b01136063.0","@material/ripple":"15.0.0-canary.b01136063.0","@material/typography":"15.0.0-canary.b01136063.0","@material/feature-targeting":"15.0.0-canary.b01136063.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b01136063.0_1668557778075_0.663336206326586","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/form-field","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.01da0cabb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9de5fd695ae2014aba552f91d5cc76a2ab4f3221","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.01da0cabb.0.tgz","fileCount":33,"integrity":"sha512-hme72/ODEj15UuFqoDObLVkwztY+31X6oEJJ62ykdi/DupR9Sl3DqDxFWztVyi+Mkln5aHyhsnUe1yjOiJKrPQ==","signatures":[{"sig":"MEUCIQCwxeKTBWjBsqKqCX3OHaPggpwBHg66ZC7sHu6gAbNWnwIgDUlI+Guxl5f/x8G+g6wMHHzo/fTfu8FZ4wA2L7zTQoY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKnGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3yRAAnBFpIZ41GaY5vhka4qnrQmiY01tBxm4ewhqOw3KXCHCnbPl9\r\nEkGSisqnhcXXpgAQrH1M5pS+jA+1GIGKZtnMOHYzjGP2BPW52Y2rq/4ZEplF\r\nuB0jCrr+Vy8IzQLkrEb2K/ssqbpGLWa+BgCK85LTcpEs8P1+3r8rok73wp0h\r\nyJyb0n4v2XT+lBwBT6zmjZJftYyx+GUmdP1+7OvKSflhliRH+7oCPbvaSDfw\r\nhw76z5D+/Jm31MJsjeFr8XBzuW1BtQ66Oz1cbpOab9YHDDX++p1E4ocwjJBn\r\n/QFZPvt9eMYORrgsmHtugyHjYB+Zp+h25+UB78VVJNAW8tXGL+t923ozJ+Xn\r\nEEPTVDfBdpeDNSY7P80yD1JAAj3AtXWElO71GBGsnVvorlJwuGTFZ4Lkp9KK\r\n0v0VqzjMVm4vn/j8OfGCDD1Mo/fmwi7D6Caa5SILEnCdVIopjaypmklikqlz\r\nxXvXdQ6ROVg9okgPTX6Cd4zLccIPUACsrtIR/5v8JzdHyu4a3I+T0YkiWDb+\r\n5zdcNIHP36ZcxylaTm9QKcmKdenXDae6V0bv5FyQyHv8+Gn22MUjU6v7Cp4n\r\nVDHPuS2zMxXPUwLhmp2uT87crt7TtA451393UdyMGbnlem1uI+DqyXoUvBPK\r\nli9oqhkEuNPlqrv8YwUSIAUBOJCQ1CJ+LS4=\r\n=A043\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"63a5ccdac9b23a6c70c2bc776e20ab703cd1dbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.01da0cabb.0","@material/base":"15.0.0-canary.01da0cabb.0","@material/theme":"15.0.0-canary.01da0cabb.0","@material/ripple":"15.0.0-canary.01da0cabb.0","@material/typography":"15.0.0-canary.01da0cabb.0","@material/feature-targeting":"15.0.0-canary.01da0cabb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.01da0cabb.0_1668590022423_0.6742007469151634","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/form-field","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.4ac393164.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bad814385b1dea48265edd65f136ce5d1b033d9f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.4ac393164.0.tgz","fileCount":33,"integrity":"sha512-vK3k4IG0DaGipuvBMuJcLGTVz8z+jviWd/HiOolrEmpNDGXSWbAEZWPB9p1CGZ+uVEZiNzNAPm5Ao0wQDMNn2Q==","signatures":[{"sig":"MEUCIHgs/7Iv533bGXPrVzQbrQl/mfWIjDQj18NAmIBcyBqtAiEA25VYkQyBQGvPm0T39EZcC2EaaZ+u9lYVALZQy4EuTWs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQy/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplSQ/+Jt6AyP/gpG2M55pSRaF/KIprUsJ75SzO51Q/22OqvcIkP5GL\r\ncyCpSSO0L8p4l2zc2bGwbTEs6/AlX46j+Nwv3s7lAac8d1XlY4ig5AfAi7rH\r\nPzOEW6anRDm709c5tdZ6V2sR7Ua8qVTMUjhO1lVxRs5F3RedHdAcxeOmxqL0\r\ns0muGk3/9ZT4aS6wjyY8yfCEUCSJ0ccfV5jXpJQiKTOwkzblS2rDwN86Xenx\r\nFd7l8ifAsPYN0EW5+HhsH/JSVFwhveoQMqpV7W4ClSdeunQW9jRtWHveos0K\r\njdNUvKwtWIwGC1gRQ+dQY9/Rc+lYj+fRNJuUSPFUV3rtYJ1py8rNEoQX2zN3\r\nB9MqJA6cY0ULwnbXVDHbAFwZsc6+QcRzXchU/XpXP3uC1UyQiu05BVlIcTkL\r\n289Ws9yUiDnfjg6vN7Z8RbWsN0zqilEkECYkWKt/ZPJUHHRAIYo0LBp+GJK2\r\nhDiRMY9iUacSXjzFUVYYq2wg/5BI//oJpehz9tkL6W7mGMVati8Britrp+ce\r\n5oD2/QsdflUBYWZ3M96XO0apYdTYEtaHB3ftQJmJIok1fQPujYcXy1mLQkjA\r\nf7KAjLdIDKs7k7I+bcaL859itvapp6s9u+2sY6a4zLH00ccFcP+Wo/Ul3BFL\r\nlGyBzj2mHg931ktBmxZvY5rq0LVyopyKgUU=\r\n=Rp0o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f14d3444d266ac4c6c92142c377275be3fbc5d0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4ac393164.0","@material/base":"15.0.0-canary.4ac393164.0","@material/theme":"15.0.0-canary.4ac393164.0","@material/ripple":"15.0.0-canary.4ac393164.0","@material/typography":"15.0.0-canary.4ac393164.0","@material/feature-targeting":"15.0.0-canary.4ac393164.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.4ac393164.0_1668615359187_0.026679230705851653","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/form-field","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.6048fb563.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb7e823b4817a69ae98c19897d4ec2deb0eb3f17","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.6048fb563.0.tgz","fileCount":33,"integrity":"sha512-J1XDAkugbA8pzB1tCidcQyQAEFKSJ8dHRzHvEdjntIA3ebyEIZlkJLiMEGkQH3C2jjwO0HibYtLMIV5A1PzpBA==","signatures":[{"sig":"MEUCIA5iDU+wk44gKw4LMAnSKIl0xjNQG6iQUitmi3G4Tv1kAiEAhpkM5fBlHoxJP25+QNeQIwVhsS95/VjPajlbLLbyRcs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ03ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHVw//QQDSL790hj6kP0hjHwKI1MhT2QZBygF6c+ZrvuzaXgiQHo53\r\nctsldK2Ams4D/Dbo4izKvXBftsfOLBeO5lVH3zvH1A2VZXJ06fEX1wtKpj9h\r\nuhetNtFEJa/LtcU7nHL5S2gcKxQJjEJL32pJNnjgHTndIdXfOmKondqsD1ww\r\n/ADEhc1EDvxt80weud7o+ejVBn3uEzp04xk7y3WCKgHLNtzu266Fc6tHGgQY\r\ns2qLpNGBnD1o57FoxKS3aFxyUSnPv1nL0Fqu6KfA8iOQ+qgeOZdCLFoKueho\r\nrrMTJHvxBEj2dgVhGS3ODdEyMesp9L9j6y7V+CJOqmmRASm2gI8X7w60jOPI\r\npLdfrPLsshfMHrBS82LoHmgU7Ogpb0aUHKo1f5oDU3zW7ju961RpbbzktlIS\r\nP4HZHlQyhWVgsjLTG/qCgEwa/K8fCuDzlWjdbayZB3coNN69fp1C1yIgR5DG\r\nwqCGijtd7wWes2ftIFsIxCscw8TW5z7sVrh4xiXbwpM6fkL4Dosp9DjCWv1l\r\nwAgb+rCrSAy0ZAKJZVZjuQd8rNDLvkNooMczFx/nJe8GdfUkstmJVqA51Iq3\r\nqQrGs/9CDaH1xaOKfOkYJnGeUA/tif1Yhz2ztxe9MfJH1I6kyboL5h5hmZ5D\r\nR0r/CwagpQEMv34IQNnYP8wjdPOvrRV8D5Y=\r\n=MI6D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"590020431978794ff2128a91f19756dff9dbc37b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6048fb563.0","@material/base":"15.0.0-canary.6048fb563.0","@material/theme":"15.0.0-canary.6048fb563.0","@material/ripple":"15.0.0-canary.6048fb563.0","@material/typography":"15.0.0-canary.6048fb563.0","@material/feature-targeting":"15.0.0-canary.6048fb563.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.6048fb563.0_1668615479594_0.07879826966146464","host":"s3://npm-registry-packages"}},"15.0.0-canary.3777b03cb.0":{"name":"@material/form-field","version":"15.0.0-canary.3777b03cb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.3777b03cb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"162676377e6a4c4e64472580a6e66933a06050ae","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.3777b03cb.0.tgz","fileCount":33,"integrity":"sha512-9QJWNvzTQkRj/HMhys2ZncdhIW5vIAAiyzCK43bX8dJ86DfEDeJjS6N/9pc4zDIN4Sd+4Sf68pihmHjajhx5/w==","signatures":[{"sig":"MEUCIACQcQxLfbF/aJo8QeA6qxVPY+HhrpWZJfRXESYIvCysAiEAgdr22M/wcaYnvv6bKRBwBGI20Qrqohr3iA56xzf9jjg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS7yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTSg//fE+xUiead/phNBnKiyO9jKvik5sXfxb41tyT2+I1uG0zuF0e\r\nqISS8lTN7B7vpofCaCNzJcHwI6/WY1Xzl+USMa+LkrQnSsKF1tjztX5tcD9M\r\nsB9kWA74SPB7yLxeDjbJcdgvpZ/k0cKaN5ELyOuPytdOYRtdPdtgjzAqhADA\r\nAL7bwjXd6K6+pu2cq7BDkl3RVt9oW3xxpsTtReYhHa6tsfbRDNTmJ19w0/bi\r\nz+StNzK59Cz1N7xMEd+uMMQcQ3WtERtE9LnMT4/JOJq6RUk/m+I9Ay85KUGc\r\nhdZ8Qq0Zwmq/AbsrQlL0MNYqOohbKyUSk7u+dna73i+yBfnv0uxbouvL7/kj\r\n5QZCdOEOlmDJP9tYAgNxjgJqwDVugj2Po+RHu2vMEt0nO6b7xt7A7XX3+uuo\r\nho57IO+pFUApFLPIvqeFHoagOTuNvIpoiH7MKBMg9NUHdsWcvV9bkX/r13Yo\r\nZUZ1cOGdud8eB1OD7fRWPBe7clIrD+CO8WEZh+OZK5xvT5g4cLgDI/9oAWuC\r\nhE7az/E0cb0xPFed/vHCT4JscsgQ+squVh3x0m/NCod5IlNAMxAi6lz/MXGq\r\nxS+/TE8IMg2HJIVyWrdCfsaXfefA/jlSrvF/5scyJnVJrH/jYyshjS6w2Me2\r\nqQ+qUGWsCRh1qumXLSegwy3C+GnDzjsMVTw=\r\n=aCpZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e02f6251b19559b874fd1998a9f0bea7d651e41f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3777b03cb.0","@material/base":"15.0.0-canary.3777b03cb.0","@material/theme":"15.0.0-canary.3777b03cb.0","@material/ripple":"15.0.0-canary.3777b03cb.0","@material/typography":"15.0.0-canary.3777b03cb.0","@material/feature-targeting":"15.0.0-canary.3777b03cb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.3777b03cb.0_1668624114707_0.8115019234051057","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/form-field","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.f7f56fff7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d6b1e9b70b6aa0d5234a493b59b49a9fd398bb6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.f7f56fff7.0.tgz","fileCount":33,"integrity":"sha512-M8EfSrbH8EIG273KfSg9EBp2tiGA01rvp1zPb/EyYow+/D6UUVMwgWMdIXpKg5lF2xKjW8B/a8zJ4PqFVieKhA==","signatures":[{"sig":"MEQCIHrRwdZB777tetRD+UuSikdv9qZWcjG85Sh1LTzpUOPNAiBkLaSXaSgAUEgw5T2idjCVA94JcQ4rkOcfRYJUmLmH5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUBqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCDg/+Nq+fQVaolqkYtjaqfCh+FTpjqC316kFmvK+QhSoI3VreJx2H\r\nnQx+mRKNryBH95SASlTbJrS7JmyO5ukO/JLmCoYE+go5KdhNIRKYJspkYsot\r\nL7DqJAnhg07rKhf7nhoQTDRJ34t8zyCiJLWqAqBTOsNb4R0KVGg6lk+6iS7m\r\ndjuJXzl/RMO2Bb1jJp0n/aEICE8LOPaGhy9WrK0MTK+dL38m7jWICR2LI11f\r\nK6d5GSxQMvS/bDbe9mTZqc8Axwq6cLL+prBkgw8J/bxOU8FjKFrUKx/OOzZF\r\n5heEulCmKfQzAVRcuj6AbUfFM5hfNGcSb+rzz5FY57Dd8zcuqFmllrAV99g2\r\nQSmJEVO58oJ65EU+emi2xhRgPj1VdyGlgVuAaJ4EZddkZ/rQdPv3bpVviecP\r\n8RcMxOyXSWEMVDmJW+Em6JBokk6TFBbwrQxMxrz8e3GoGuxpk69CY6bRoDrh\r\nxG7wjS753r1C+8Lbswu4P/M3+dESOpEwxxWBPOH1UeVw3UTzfKbz0CT9rza6\r\nQDoYt5n+aD0af3HNrDlEzHVZoAzzXmMBaFurS0yA5/6kujwqiDDn6FylSeIa\r\ny9voKUjo2qwgEXB0Reld89XYhGhnQ9I8w97EKL0qQc4/gw75wUIhVXSOJnRe\r\nltLY8i5sgy09D54vGZVhqN+NwulO3aDjLOQ=\r\n=KEgq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bc90613e754d04f738197ec3f3f4602e9b362d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f7f56fff7.0","@material/base":"15.0.0-canary.f7f56fff7.0","@material/theme":"15.0.0-canary.f7f56fff7.0","@material/ripple":"15.0.0-canary.f7f56fff7.0","@material/typography":"15.0.0-canary.f7f56fff7.0","@material/feature-targeting":"15.0.0-canary.f7f56fff7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.f7f56fff7.0_1668628586529_0.05402737820555181","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/form-field","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.7c73f6134.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"253a6ac16c8160a9a26494893f9c398632944f15","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.7c73f6134.0.tgz","fileCount":33,"integrity":"sha512-H5w0l7K3zxh8qsNXvIpBjQKuUB+qJ4QyVFbKZ7aIY87JfE6B3plWaq2TWGqUFrb8tUsZ1m8UzqjmDGpr/vq9Ig==","signatures":[{"sig":"MEUCIQCi4iOq4qkMn89WFPKqeqZAQHiJwat0A0TftPkCsb4SaQIgWNEsEZ+nqqDQ/J7IukwVP4iqfI5RHw1q5uNRVNVcqL8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUE+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0eg//Z1qwmksCw+tGRHfQ8wUGjZqufou/CpwAO+JEsTp+CDFwRBPo\r\nHkzHXva0+PNkOOVMIYlNlFRuSuQswe6FGZuSGbXo2I6Spwq0lu79kMujW550\r\n9LgKe3wn/3OhjKHTDyFi5mMq2XkcHPy5Wb+N4uNlZL5UD2g85vuDdWeIPW2F\r\nHs8Xx98Ep713oAWaeKXW0wQotX20UrEL2ZwH2piozh7Ka6Ak0ct4MCptOHoF\r\n7vHy0YOhX65fgO2KeVyM+d9B2IXTcLMbJJKxVd/c2l4cRYnQuYzu6TXcFwUC\r\nj521kB3GfTbyXXwiEp2Uj3+6ChnrU0nvp0TjMGIL0V1TZKmHywC+toGs5vie\r\npYNjYoquhvk6AQ2wwqd2n5DNDv4WDWGHKsW/RwpZ1rc5qs0Zt9GAFtKVbAZF\r\nvvZh38KiaOlSQJhHXpvzQsqD0Tzt127qirWSbgTJaOX/OSzusxtcHgCxCxgp\r\nG3UWbTvB07JuwHA4BeaZtnIrB4LTQzAedpFTJI26tcioBg9MRB/IkhyI5Dwd\r\nef+dQCzjJ48ftttWV/vhZVu7nuA+5XcijGsWeE3PNsIM+NyFJ9beqHEGXKCd\r\nHWCHU3iJc1oOFCa9hc8g7zLXazYLHdJegMd1mwq5S6C0W86igKLEcXMn4Gcx\r\nxD+SCQis73Dw3Jh3Ps3tSi7Phm03wS7eWIU=\r\n=fuOy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"14f53e565ed77defe907254a486b9ecce4b45146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7c73f6134.0","@material/base":"15.0.0-canary.7c73f6134.0","@material/theme":"15.0.0-canary.7c73f6134.0","@material/ripple":"15.0.0-canary.7c73f6134.0","@material/typography":"15.0.0-canary.7c73f6134.0","@material/feature-targeting":"15.0.0-canary.7c73f6134.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.7c73f6134.0_1668628798641_0.016529358357730395","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/form-field","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.f1e037150.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acd1743264ef47309c2a06c027deac46417dfd0c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.f1e037150.0.tgz","fileCount":33,"integrity":"sha512-HCRxTWF93bDH+BKOMu6LGzL+FZ409qfRuNrM4818f4tEHDvfnldYRajRTtpnLbClRsOgM4y1CZfrs9+CkthkzQ==","signatures":[{"sig":"MEUCIGCs4tc7ZgzfBEbcluYpdcYqVEtnr15zlJoI//iCWsgOAiEA9zZv0YHt3dpmvG5hIXQJ5bzVnsOY7Jc/QjL/fMmHBJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUKWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqInQ/+KZ/U4Mxxo6hR7EWnj7TyPfZfQu42w9du9+o++m2nrOdHDB9l\r\n5P31dGWk6HLwX3UGOwizo4Lzwh93dZwyEhdbFnWQzZ9i3N2qpVVkHrp4XDt5\r\nJpaYOwTBlPT5mT5GlLDaKRihXEwuWPTF91L7ePRr1OL+/2PorxizR/c98pqx\r\nG1wy7esOzT98rUa8OxjLQygGLDpWdpI3gV/vj+PlGwEI586zZmLadnzGvPLl\r\neYU+dlM72AJFLv1oLTh3qOtThhYW1T9ulBWAACEOVd7vUNiqaO5f6mRWDwPl\r\nNMs8U80OvbSAQVie/x8JDAV4q3amrEADTGEy/56NIXUnU7bRA0rX/pQY0BtZ\r\nZeBsIduskechFusc7qBZx2XBCwCj8dMEMNNKmnwFATZkPOKRFC8ntepDYT3T\r\nupNumokVcAbxcxR7/YU9om9Vsm75JUdg4ELoepWsc0Cv35c+rgFmjBWSGz2W\r\n3o3P6R6Lk3AzWUfRyG12pdA7UgP50aMhqTITxZYnmTlNcObgMObvL3YLVJES\r\n2o/R1B90RcVJqTshKBpWF4lZMbFReziqn/H2lnqEDcANg/HBWOv8RvdHwzlX\r\nz4Ut5XHiU83T999mZU6x+VgM26MqEkzzjpSUDEKA61S5jDZDGX0etwWl88AY\r\nNIpZbuKm3zs7tV0x1V2MXk/yFtueFnprl7o=\r\n=jnqO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a639195febefa28bbed957ef46942b3da6a4cecb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f1e037150.0","@material/base":"15.0.0-canary.f1e037150.0","@material/theme":"15.0.0-canary.f1e037150.0","@material/ripple":"15.0.0-canary.f1e037150.0","@material/typography":"15.0.0-canary.f1e037150.0","@material/feature-targeting":"15.0.0-canary.f1e037150.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.f1e037150.0_1668629142293_0.1136945545012078","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/form-field","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.40b18d043.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6698a5a73af60cf56424cfe9c486fd15d15370d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.40b18d043.0.tgz","fileCount":33,"integrity":"sha512-NXkz9oDTBiauKVzMkrqXqXT9d2896lICsgZLKa//expOUZnJkxuyuJ7Zbx/KZjgyuVj1zkPc0WU72K723TiIzA==","signatures":[{"sig":"MEUCIAPq4amRzwwyDUd7gIXH6VqoXMdXNiOUooLVrgGbBsSCAiEArZt2j/sbioolV7WzAi3zZAzh30c2cusANPArkF+GZOA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWtBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqa6g/9EZmMAGR06+Mb+TaEnBWFz/gby5LoFLZ+QSv1cpjbginq4K0X\r\n6FrKX6Zk4uL6251Y4WZ/noxAIPPUUN1Q24klQVGAYYBPrPnuLPmMraXUx0Sc\r\nRMLJytejnqYCdz+sOs0zoaEmFfUujoh8FIQsAMkfqfdUdvwsupZiC0P6fAI4\r\n+TJri5EIwfVrCNYb54xFZisaqBse7v+QMopEs6q0+25FhwhB4idLfNFE+rpo\r\nkNY5Zkukb3hIN3ixgeYNBf3Nt8+jm1ju3YOMgGTSyvLuUf/LTMr5sGwHwZOm\r\n+/H55CqX8wKgZ1nlqW3gxZF1d1KSgAm5EMvWYOe0nll45o9ULt3pqdDrvFO9\r\nJWdR60Bm+4njNxCMW8YLZ1NJNpI2DVGqYpGvu8B3JQP2/5q8OSS7k/0PQku/\r\n2zDWp6t2cmrwxf1YLneZ1/JGJlgLDcDK+5NFG8y8Kk9krO+gRhmKAs6xc2gM\r\nmdDU90y+MXXaVYqZehzhoRkoGsTYqa0mYPmQDjOUK9rBbxBqncq6e5qBoAUZ\r\nlFk249t5du1mYchila0AMmdVWf7MgFQp2rmZRQOdJA0AqjU6hQnfNaXm2eM1\r\negdYXPA3Kv4sUSCslJV14YCHz5EtlGTyZBZLT/s4NdxZJtayH9SCpMeOOA9X\r\nQTbbMM4vnD45UzWTlzxqwwGHUO4AN4GrRO8=\r\n=IkCX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9ccfc97518c89cfcc2b5e776dafe81024d137f31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.40b18d043.0","@material/base":"15.0.0-canary.40b18d043.0","@material/theme":"15.0.0-canary.40b18d043.0","@material/ripple":"15.0.0-canary.40b18d043.0","@material/typography":"15.0.0-canary.40b18d043.0","@material/feature-targeting":"15.0.0-canary.40b18d043.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.40b18d043.0_1668639553330_0.44872885285491226","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/form-field","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.86bde5c06.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0269c4988dd71298804e4121ca3f498ecbc06be","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.86bde5c06.0.tgz","fileCount":33,"integrity":"sha512-bx4WTIEKPunlD5SUclyg0FqZ3fCq6XJIV6w3zyFVNuwXuLEdn78FtUJ3oUKJ08KtWMu9BY8+usXvR5UNlBVr2w==","signatures":[{"sig":"MEQCIB34xwyGMFh5qFbt8GoRK9yxihHkaKp/RsF2DqUVAWEpAiAz0dIWzvS09yC48/8JtbE+OaYWXGJEqIJI9SKtYrsElw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW2hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7pA//bkTmcI385/MrQrkx9TjRvzZH7HyiEnq45gjGPaAIQ61RjHqi\r\nXeRiAxWUGevHXK8a8DbNKgcF4TIeIylQZT75h/L6txE+nRh5GykKWv6/XfMU\r\nYlgebkj5syUlJOE9tbPAv/0TcC6xqoaIFAJXt2kq0ZRj1+GHDVDr/7spp/Kh\r\nSCWpErb2dKkjsWD+YBbztYH5zhKa5SgWz/pSK8+hO9R6uXIJcfWpREldR0E6\r\nNh/NgigUo/QzbWsqv9hkcNbhdEF2uNybP9EuCQKGRAiVn+gOMEgGwWJnKnH2\r\nfTCXylB6DFBiybQ72DJULL/JcxXK+USRhMLzhg8a38kajjiB1oRE0XxXh0Ne\r\nQJAQia7OET8ee5VViqv30Mh9/p30uF25RZ4A1IArcVDTUQVMvR3T7LnVldsE\r\n8R0RHvaL8JxFYdgiwlEIREK0D5RGpzYogOhFOzY3DdcJp0WiJj9LpBuP4WQ9\r\nIZXFAmdYSKSq9GlFUY7OpowEtwNqRHdIUSO4tyIp+s5mybIGqfXjAFpolhZ9\r\nz2KWIEG+012acU8b/0OBeLVN6Atwze4acptuT1WP8fy1RMLL4c80In8JJzYm\r\n2BziohJjEebOXSTzq/3fVLQFdKkGHH5RaMiD0XbkWUgfb0RV1z441AQPJmdP\r\ngMlV56XgXXR7KGZfNp9s8qVojmg6LBOkuOU=\r\n=0TjF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b9cd39d4936a1961536e39eb1df855c5164d5840","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.86bde5c06.0","@material/base":"15.0.0-canary.86bde5c06.0","@material/theme":"15.0.0-canary.86bde5c06.0","@material/ripple":"15.0.0-canary.86bde5c06.0","@material/typography":"15.0.0-canary.86bde5c06.0","@material/feature-targeting":"15.0.0-canary.86bde5c06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.86bde5c06.0_1668640161069_0.1527288310035424","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/form-field","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.bb7751002.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58902e8486409f6d10067f9264a562e6fbfa8d1c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.bb7751002.0.tgz","fileCount":33,"integrity":"sha512-BYmuUny//IgbNLPSnYahZUtBbqgUtd87E1iM83wmgKO2lPhNoe0XRLwBjz/v2HDOezWE9op5A28e6owpwn2XZg==","signatures":[{"sig":"MEYCIQDDvqRQWx5sBxue25Tw6Wy55NyPm+yRTv42yBi/TeSWUwIhAMrelPIGuYf09au7y179U8ZCBXTpdGcIOVXYaTcbEmSF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXmiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmdA//UQxCspfQ8ubQlLtc7zV2RusIqdRCOgSg3bg58cyW2LucPL9t\r\nJompw/Mf1VaaBmGLBiD9tN7+gRQ/YFzDSD/tfw848EXtsR2xISt5jVVWAzvD\r\nGpo9CUhciJLooczdKzxP0T1hhi33DV8KCFaOfeHVdvJmORN0GWjZYZA+0Hxl\r\nefOm3n5eZIMXiSk9aNPqAiDDVFm4uyWw4Z1UcVmxAExEXdfCYV4WRMoAu2op\r\niuqsP4HC8PcmbeR4kI4ihXGJoV4/CKFzF4jFCvbdmxbuDsBYQvEyXZ98nyvJ\r\neVLqvVR153XhQlZVJQ2CxK+UPZaOu7d2Wb1DceAIzrcRL3pSnhwAhQp9QxDC\r\n52douQRIQILrZRIDZts2VqnxjMdnRIuIr/HEAwPTVSn3lzOpV0iydIjeaKn1\r\nojmce+/6js7d7DAPP00QrN8bUCzu8Ka1cMKxLqUEZSOBcWizQ+DUrrfgqcQV\r\nOsvsR95LcoqqZEIbwt1T3ETff0Xz6izj/jHJNX9Cb7dNugU9WpxB7uHV/y/F\r\n1s9Dd/suhBZE088awMgc2v6fKxhqdViz/1IEyJZFetipFth74nH9CcN/tooT\r\nDsnjQ6mS5LbiTVK586sisU5Jkgl30AV/NvJ5wvRP83z56a9xNooRwLheenNm\r\nWgVEshstjcUrGwBD9KJzS+j9O/5z2v3YBik=\r\n=2qq1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f83cadc3a1330a69930926dacdce7fdf10432f98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bb7751002.0","@material/base":"15.0.0-canary.bb7751002.0","@material/theme":"15.0.0-canary.bb7751002.0","@material/ripple":"15.0.0-canary.bb7751002.0","@material/typography":"15.0.0-canary.bb7751002.0","@material/feature-targeting":"15.0.0-canary.bb7751002.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.bb7751002.0_1668643234247_0.5854356106084713","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/form-field","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.63aca9af6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c34732c75766b6c7b7de8b530803fbd4ce496a55","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.63aca9af6.0.tgz","fileCount":33,"integrity":"sha512-BwD/6Bm0sXE0jvzJpTca06UGmTiloMRvDR0RZYhkmTd1WLbkCHCnF2aOm32rTXqSl3HibebJi1pE0xj2CM05/g==","signatures":[{"sig":"MEUCIQCquPsyyeoZfauaElDjT175vWeuodE5ONzZnEBzwIHhrAIgOe+bT8R2X8agLKcFYrRWhFcAmr9GE7o2ZQZlEickfC8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoUGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqwkg/+JbXQTrUSoyRLa9yxKHgEQvzfD5GgiKC7u1QneMUJqhPRelp+\r\nSI18nR9HHCVvp6E5YaaaUbQgYcqOzJzYnCMTDGaSXM8+SKEtQeOcRAlW13C4\r\novBFEncHJNxVMQ+0QQnyvpv1IyIWR/S3byArt291RdbB81vFzxzz9xsYLEjB\r\nBBwoMlKtjXCuTsLhV/RgPU/vxsCAKaYrI7BBLI1AuM00nEwXqBa5b2bOyJ25\r\nzNrlKXd/TS5antm7yRZLGwaOPb+qTTYhtM0teFFUs6jy53P9fW98Fs3CnXSX\r\nJNSL5xJulTl6Op1roOCnyYEy+dZkkxdS/QCJrIV7RWxSSf2iLRVxZx2FK95/\r\nGafG1usJb9axUIuS038Hx+qc2ab82+EeYVEZUK1JARAHPdxojlZtWhfT+2a/\r\nfYjN3qMopdq2fUJlTMU94YnR1Xisyn/1qsrrL//0IkqHJ8CMKTS3MMMzb6sX\r\nWVhuVm4Jng9Moj8RVBXomwP0INJCaekhL0+SclSlQqvw191pZe57C61q9jET\r\nNCH3noREfhfGMYIdNVHg3lOnDpfg+mBZ8oAuZuLPPt0Y5a7VsNJQYZ9VxzhQ\r\nuPvwiNJrteH37LxE1jOS5g1gnLU3f3jFJsXtmoXvADMtJzLcuVCK4u43yazI\r\nmE9vUsK1bQa0l5kgJ5gNHy/nz3anaBJto5w=\r\n=Jcof\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c2c841973403116b6a405bb9aad3ae8476bc028f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.63aca9af6.0","@material/base":"15.0.0-canary.63aca9af6.0","@material/theme":"15.0.0-canary.63aca9af6.0","@material/ripple":"15.0.0-canary.63aca9af6.0","@material/typography":"15.0.0-canary.63aca9af6.0","@material/feature-targeting":"15.0.0-canary.63aca9af6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.63aca9af6.0_1668711686186_0.3171152549483405","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/form-field","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.56482dc2e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3be61ed00c407abeb6dc62080304372256b8fae","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.56482dc2e.0.tgz","fileCount":33,"integrity":"sha512-xsQ5boH7CCkzXlgYU8MRGJauVITJyu1gc+4O7iAbFVTFFXWXprDAniUY3FjgdDpWTiurnh8aIS+3zwLHkVZF2Q==","signatures":[{"sig":"MEYCIQCmfjwOTj0v0QIa6Pu+IhJ3U7SK8akHWFgiELfJqRbj9AIhAIMZxlCJbO42Z1tZ/k9gKNekmIyzIN2XlyYcX6j7bjyZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq3NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3lw/8Dlh5Bb5EVevltPExAiWZ6tQsT73CIdRwKewwtLBK43pYa5bf\r\nLPb47ooMYLEzad0b1RYa9I96B9qgo7sNy0QT5jskCDZ4A+dr4Qzr3szgfmG4\r\n/JAgYfGw6LC7LG5bs/VEcxqcYJz7HRu0QzfXzEmSMNbmOjv2BxQtRmLKu4xc\r\nHu6lIbPBC2LqFFIDumTWIU6//T2nXTpTLxdAnHtVcHQB4JmRod93BjnWGFms\r\nnXcPV5a9sCKePgclyKORn7gPdQuaoW+kw8+HllyHF/AzLXu3+AodiPhEt/Dd\r\nNx+KZG3hK3gDtKdcY/UuhQNud2FgWKRwxQQIZMOjVRsw4ZMJQHcYqNpdSjBr\r\n43p9Pmtl0jEPIg92t2p/i6tRnGS1ijBvPaEPEN+U4UeZq2BgwSwH7bR97TST\r\nSQJqI5/RsH0B0uX5jzIrMw85Tnvz4s0/xq3oP/W8SAa6t80rgeRcQQ7/BhKO\r\nFnAyKJaXYgZ7jw9yneijmOgEu3Nizkp4ZoM/zSxAudLyLHPCPwWU0fORP6Zv\r\nwr8s9Hruvn8CJKuOiwuK83xSngE8uuE03JePvZZBeWNZfWov3RVzUzDKmKZq\r\nWTWAod97M39HLTPC9FlCbSDPbBe1YTl4DWu3aq9lglFbSSfwmMz3Lf9s4Xn4\r\nIp6+8/FMYw/8McFLWpseh4SSFMsaLUecIBA=\r\n=HSGn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c65945fd8948c8e5ada035d0f2538dc2ced7a28f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.56482dc2e.0","@material/base":"15.0.0-canary.56482dc2e.0","@material/theme":"15.0.0-canary.56482dc2e.0","@material/ripple":"15.0.0-canary.56482dc2e.0","@material/typography":"15.0.0-canary.56482dc2e.0","@material/feature-targeting":"15.0.0-canary.56482dc2e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.56482dc2e.0_1668722125425_0.7568149654335028","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/form-field","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.953e689f3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e8a22e46b9078298163ba0ef66e2cb3ff088d72","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.953e689f3.0.tgz","fileCount":33,"integrity":"sha512-dGkJB4ad9yFUjGMbVolW+EHb1fR5itLHLz+G2zF3i6B+dxPJ4Fxh6m/jP5lQqXwq4+qFHAHRavhAnc/+Ww1/wA==","signatures":[{"sig":"MEUCIAGbBePFSgu4LLZxUQ1LX6wnUxYyRAAbDuLh9jnq37JXAiEA9rp5pBX+8EekQ6if1kkwX9LgnlfBYlx7sSJcTLe6fGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdrASACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoh8A/+Py7b6xJ7cMoOEwKmEXU9Snqiv6V/7ggiAQrCL3i+rtSfgruB\r\nPXbJ/pdfbtM6w+Zg2/hFJ0lHJqaBOhAdIjPHGHBMiknHwH82gHBw/AauLIY+\r\nW5fg8a/dKv6bPGj1u5X6+c17qMWFQGw3pnDe2m12yPzRsEz/VTwhbGY9xraU\r\nq0IH0GNjbMgFQfrucD8N2DSXZjLbfhMY7nLHEUCjPfwgM/H+FyMaSQ11BDIH\r\n8gT+cjsjAL34S8r+ULWWMkNJhRbEI79sTUUgeH/EjhvBo13Vr7ktQlhD3aZh\r\nNvHIZrcy2EBPpGjL9syE8FgRIdvG9WWqaszSHgMJPRSBjvjzxbsQ4eD1hM2b\r\nKIBbqQNpRYps46X8aVTxLIeDWdWCO4Pl2CNEDAuOVIZcLIzfOdhMQeH5F6Sv\r\nKIi0aKaIgUyqda/9LJPrScTRbmytt1NQlx0drgRmKEtCfLpr1cR1wJsJo2vP\r\nI7grKn4uTbhvbB7zO+tv340qbprzSurJb2gUPi4O4lHH1GdXK6clk7EA7tXg\r\nyYvQKGk7jcQNdkWXSyNwbq916/1RVbE32esTutrPfENb8dXBVIkaTQ2iGida\r\nlxRoAOg4dFhntPfkb/iOuVhlzF5SqtNl0DQpmxaVzDxbD62V+aZKIITrp7Wx\r\nwkWXWo6wXp1SWgGLX4aCbuaB/nVZ8/ZesKE=\r\n=CeFi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9b9adee0b4f10a2d6d77fc10e9291c3aac8be42c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.953e689f3.0","@material/base":"15.0.0-canary.953e689f3.0","@material/theme":"15.0.0-canary.953e689f3.0","@material/ripple":"15.0.0-canary.953e689f3.0","@material/typography":"15.0.0-canary.953e689f3.0","@material/feature-targeting":"15.0.0-canary.953e689f3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.953e689f3.0_1668722706636_0.07748379842193986","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/form-field","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b5606a793.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0a68ee8abbd0fafd1e559be43616319d7aaaf35","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b5606a793.0.tgz","fileCount":33,"integrity":"sha512-O85AWbc1GltMtzWf7jj7xCN6EkpsnK+e0dF0UzUeQjSrC9ZKltNU3G2CH+enrsVqigKGgGrel4IGXDn2zTxRMA==","signatures":[{"sig":"MEQCIEScrGRYncQqLf4CrUUvim2la448w9YQS2cNx4s3AjAEAiA5oslReNNMq3l28MtY+1t0kAcVIj1Ob98iFDax7Uq4Og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1yvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjRQ/9F31Q10RqgGHwMF+0ZB0Uwu54V78jEMKC4WsxTPSkfEWSnpCq\r\nZROsl/GaXO31p3egx6zSAcPCAKrvSl6sk5nnTMDW1KoSTDreO7HBDXPozyCZ\r\n47gFgb3pH/sSSDZEqPOxkURxzcYTXlTnMoVcMM1Ve7dB2f2rj+eeN5JHzq0R\r\nQInKXQ2ZwyvM9D4m7djvfYvhoa4/PA4asvD0j7AiCTVu725ZdAF9gtD8Bzzx\r\ngv9vcTwO+7sI5inzEk+fPTb9uHDSPTK47Rc0q86ixUk07NoZQAgUqG6+FqR+\r\nYn6G1lAQJiQ9IDfG0IttKtry6Sjog6D2YPdEt1qzO5Za7bN/Dgw3m/bAQM8h\r\n0D/p1cpujZeVtUKit6Yw7SYPo/0+kZvhavw+XTU633XzWlVaV12nMDF9nvv5\r\nMI6i/o03PpWTG9hxuCGqRseWW29+x4beTxYHIFey4I1fA+5IEW7wNFU6XbRR\r\ntigCRJbFMuYPk9JzdfFMZXD4bhj3NWpxRQmLv7bilas6cr9ey2emk7CqlJwB\r\nPEBstRoorFFylr4WACh1+PlX7Us3Emi04TdvQ/8ZiDN2KClr5+y+sCSez8Cm\r\nbwlyQoIlwQV6BF5lBJf/ZdpThWzJyQqYeUtIEv5yAYf9NyF7fnpsCCs7sWOj\r\nX+a+DCnV64dYfJCTB1KjFSFwta60ntJS3Bk=\r\n=a9Lr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"681685532cfc9993a6190aedd85bf5cd1b3f80e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b5606a793.0","@material/base":"15.0.0-canary.b5606a793.0","@material/theme":"15.0.0-canary.b5606a793.0","@material/ripple":"15.0.0-canary.b5606a793.0","@material/typography":"15.0.0-canary.b5606a793.0","@material/feature-targeting":"15.0.0-canary.b5606a793.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b5606a793.0_1668766895712_0.38980560451084023","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/form-field","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.8c5675942.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3ff03e84b8fbe86a2e6fe0d1c8e59e65789f3c0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.8c5675942.0.tgz","fileCount":33,"integrity":"sha512-teu+dbxhdo9WG8JDruPn/roeLn/jDZFGTxYSZIeQKG8egaYhG8VvPiCc66M05LGR5fOx3yOjmk7L85PYpGe3uw==","signatures":[{"sig":"MEQCIAzUhqHMoAqwRy+UKs91n8hkfFcBhDz38TlSXaklTxntAiBTLty2/VVK9vJ8uY3Ukoy28VrwltNZuwRFIkETTl51Ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6HcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmreuw//a++oGjGWOyg6IJAuvzRtjyElP6DxsP7fPYWKcjCFQ+frWFkB\r\nJstJIgO6jAliSkxQiRXKlDMcqyUNMiMHEkZVwOJb+chz3ZIAR4qif5NxUuUR\r\n6F+OB13yQ5K+yMZ3TYWvng18qn43DD1nKH4AcxyxhO8Wp1tHLBIhJhuFYs6M\r\ndDU7ZDu3xh6WTY+2O1dNIfdlefe44XQu9xOa1gi1sqBWgvSf5PrZibeKzkMI\r\nsGdKgYfEy0HT5nMkOYlaVcmDULIY7NgyeMVqM1D8uppdOkNr8mnB1X5lp72r\r\nEfjKfU3RQaC5GKbSMiSuahZDuGi/QIIoWSAKhICz7W/bpr/GOj+Gv+owx5tx\r\nXvM9G1hCnIaEy6aJEdCKDult9h3VewJsmmjThiL9htnp15QSH3w7BJGfPBDO\r\nCJFvkHm1VHRDeX/oQXEzbUeKzf+tfFypL7hCtLSoVA9rYsD74WkACmsIHMWm\r\nkvsNXWgsk4AGfn6Z1LPEdg2EqRrC8xDoEXNfGk88OF31pFHdtfQVQmKtYUCB\r\ntdqZPGhg4m6dJRZm0egBTSp9SbdRyQ9O91RViWqB8RAjBCiSUSGwlMb9ndy1\r\n0sEGkQkC/rqzeiZXhRKLY60EtV6DRJavLviasKwQfGNu/V0bT12nmi5lJ9jT\r\nY8/NdKtTR5b4IzHHiZYpC4X6lr3yqtl4d4k=\r\n=mBju\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"46367ab28a14e7ab75dbddad4b3a00d97443debb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8c5675942.0","@material/base":"15.0.0-canary.8c5675942.0","@material/theme":"15.0.0-canary.8c5675942.0","@material/ripple":"15.0.0-canary.8c5675942.0","@material/typography":"15.0.0-canary.8c5675942.0","@material/feature-targeting":"15.0.0-canary.8c5675942.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.8c5675942.0_1668784604546_0.9591979278385525","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/form-field","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.697fbdebd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b765944dd52a3b116ced3dadb59052d8f2207519","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.697fbdebd.0.tgz","fileCount":33,"integrity":"sha512-/Ilb2Nm4YsKmC4cTgLvJWqlRjGinHIWhoNveITBoFBTlF75Jwec92tWjKoQ0pN1YLD91DaRTcLR4Ns7geowaSQ==","signatures":[{"sig":"MEQCIEfII4CYI+QnSnxKOvIO71SUVuoBFPGMYb0SDYFeTpfrAiB6cRMxFDtMTMRxjTS+85tskJoP0Dvp6ASYbFTZQXQC2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7pbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDDRAAlhbPr2geYYZIOSVwU61Bqfu4sRK9id+4shYZjXOa3V8EXGcH\r\nMKRrRv7iLc1l40RpKbKI74aas5KW61H/RO2XFmIg5bxRj1JjNQqxtimLitXM\r\n2ER2luXuMKs/Vy4c5ITr/cS6ktEikeDs+Jzp4XIwi5ClCCW1CvvBGcYnFV1E\r\ncAKQiPhbXUrYMM+G83IC4XXu85Gf+ienq3J0RycozvkxJaQYb69LLfbb5B4d\r\nyU7uPyXWwvC1kCXHKFn+b4eS+EFGfFwx3tUsNKP6gq30zRCUTIdKU60QMi1V\r\nDLQlso7HM3uFHTA+W+DO5QupZi6NNyrAyDm4GbwCUwECJRvKc//fPsTEDmIz\r\nHZuyEorH3nI+nAV077vmVxvAInCIVaPmISGZjFixlbtSGFOJao6L+v6ig5EA\r\nyIyalZGK5llRJgYyeqFpFEYD6uv9ldjSyEwtDgf3BD/a4BejOU0ISCwcJeDR\r\naR1S2hwW00rCU3xe23b+LSG9Ait7knYw6cbQR1i8scZwJkaZghht1HTXMnNT\r\no4PxlzJ/XGIvdqlvw0J017jKdhpt/6ZfoMgyIp/+ucrvjjYkFErf4ChFnmVz\r\nJpfFFEgvDNhDwzpm6YxoltgHewp3dCSKXGLgk/VB8ckPTxSIOoXhlv17Zi9Z\r\noiLVp9n745eSS5PPqzWhE5dJe+LwvyUTJ2U=\r\n=l0ZE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"633705dd01d68334d80bad5e354eb7e71d9fa30b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.697fbdebd.0","@material/base":"15.0.0-canary.697fbdebd.0","@material/theme":"15.0.0-canary.697fbdebd.0","@material/ripple":"15.0.0-canary.697fbdebd.0","@material/typography":"15.0.0-canary.697fbdebd.0","@material/feature-targeting":"15.0.0-canary.697fbdebd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.697fbdebd.0_1668790874797_0.4942097528694309","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/form-field","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.d58410453.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78fb03a69708718bb6b137ad3cbe15f5e0a32729","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.d58410453.0.tgz","fileCount":33,"integrity":"sha512-upukb2C4tAaBd0uqMkCr6xEOYrhCOiF4tSHp55CAnKzcWmsiLBa++xC+V3ICeYc/Dq/GDk0hOamHJ7wznT/E+A==","signatures":[{"sig":"MEUCIF9QOfm8Co8ZplYrVfIWNH/KQHy/RVosbe0ArjxyuH1HAiEAycjCnhitWYYpFYlwFC0wx1LKREqqMu93xGkeLhJlbw4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9wuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqE1A//WgIqvkPZlWY8toR2zLODVakzBmhmHTN1kg7JAjWj9/n27nya\r\nvN6l/hFYLUBjuFYxyi1CWTQdExZzWdvWWRz5c3i43c6AixkFZi44y4wLFYzB\r\nXRamlWlRZzXFgJf8aQxgaSVQ7j3qspkNMTX4z2ibZT5DtSXvLDkGuuXbTMA5\r\nQmppFk4WSZzil3N/oaLJmCGG1O6pPSqg/eQXXCDiEIv8FSh3K/Qv60keYxjX\r\nMmczepE2eBJVaxCYwZXsp2qvwrt5+9Nh7w/0NXU1G65MjW6tFdC9ECtI58s4\r\nI14jq1Rs0DZ94Ygt1o68Y0ENLFCyw2Mvv5dsywdHNUnCmCkyaLIrigMYydZ+\r\nvmj7HM/60MVYmsyAFNUF+6frS7Wu5CwkDzWjoKOdA24wfPhGzU1H4tjj/R9L\r\nJHbMUudjL7dr6VEyG3IIYu4w7iyHh6dhOLun7i789jw0b7i/tXdTJum64Me+\r\nfmMf5ArvSo0S3+WDVVR0cq4CL08tjsd6TIsp5HHZzK6Jjc+yRY8JL7t3kW0W\r\ntT+QZak51qIvCZgSPE7vOETZXrn6ZoW04ykZoHyTQbb6bjcP6YdMbkCqvCj7\r\nNFeuwwuIch95uXXE91Wi+QOrn3i3m3yI2hZvcy+/PbS9j0Ec+VF3y6H/yoVy\r\nl/anX2fI2ESx68E2iZAl4VlKxDwufW27uys=\r\n=oyoH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"65248afd9a1318b7afdd324f3def6a9c8e67c90b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d58410453.0","@material/base":"15.0.0-canary.d58410453.0","@material/theme":"15.0.0-canary.d58410453.0","@material/ripple":"15.0.0-canary.d58410453.0","@material/typography":"15.0.0-canary.d58410453.0","@material/feature-targeting":"15.0.0-canary.d58410453.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.d58410453.0_1668799533977_0.38448995093825933","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/form-field","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.7971d6ad5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13514b99c5afec61cda40487473461b3124f2585","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.7971d6ad5.0.tgz","fileCount":33,"integrity":"sha512-N0UnlZ7j3GT4DGmMgJYMl9etOh7rsQjCjRRATWSnuAel+ir4a5HvLj9xQUyp0tlYuu9ZizB8ZOwbAz/XCiU94Q==","signatures":[{"sig":"MEYCIQDOJirKhyZC0ABooyxypGXvtPOlU6t5/uamL3X8S1+cIQIhAKrqAfBjP3/sXCNUmBgI4psAvHmEOvcsUsEcbeYRuLan","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJe0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZow//cefurCj4h3xXcWW2T4bf1LK08LSkUgFw5EWk5JGyAvdIX8Iu\r\n3qiChULfAubevPjEkv4aLmLLY7zE11Pb6TqpYxoe/9Hx/dJBGf/8H+paNxcb\r\nsQSd4m5m3wgwxtTcHmHwhmPUUwim6h/N7x1B7V/f4QvYsrymZ4bGtIJsgjxB\r\nOE97g80qcrXKdqLtqiQ4TCnLxsPDN0jvAybcmk/r9RIyd2S4HDToi8oyLDTs\r\nc/xBbWhiniPhNN0A4pWQU2sznDRH7zLWwYtclFz5Giz0uMpJqq4T6t/WagQx\r\n9LXpOuu6zfXAfRd7hOmtPI8NQTMw5FCjltGx7nY4JSRYpew/Espqc60TX89f\r\nOS76QngL6r7zAzFHWjXQOBxV8KW+VcLY+dkHdmU7ZW74GF7YjoCUIvAaoeJ6\r\nEDB2z+yMBpUZgYdALYQkcEhr7PC/DY68PAw3QeFVu7GGGRFXXRJloPk1he5m\r\nFycTv/+885kCHqLS476ZDAkdPTl9Lsweh7sZRvKiz9TYxVFctD2/gLklY3fu\r\nZ2OckpuU/fflJ41EKT0CeLpwBthVuNL59DD4jtoq/BsMpegNdmjFSn45tU/0\r\nNNBIG0iNsyHQW/WihodlFwdlWCUXYVwqjzVS9J/nrLcCL8KJ1RNbvfJfrSZV\r\nxe4E0S6Ka3Y2tl8kCOltZz1V+iBHaIkNlqI=\r\n=TI/f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"caa68cd6e7b5cf4d64e037521bea18e312048e69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7971d6ad5.0","@material/base":"15.0.0-canary.7971d6ad5.0","@material/theme":"15.0.0-canary.7971d6ad5.0","@material/ripple":"15.0.0-canary.7971d6ad5.0","@material/typography":"15.0.0-canary.7971d6ad5.0","@material/feature-targeting":"15.0.0-canary.7971d6ad5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.7971d6ad5.0_1668847540088_0.6660922974293559","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/form-field","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a0ae73b0e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e35ac5aa630f72f14688ae94419d24060ecaa6c8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":33,"integrity":"sha512-zbELKTBqIDHk39DU+IHkpbcqJKK0lbA6irlvpiE9TMylP5/FwJQWxsOrO4jUp7LNV8Ig/juUcb/GuMfhKmQGYg==","signatures":[{"sig":"MEUCIARMNhnYEUwv8GxmMDCWn+bVyLMLL7yzuPNJymRYmQW6AiEA6lTsrtjmlTe9aJMP8jM59mWbfDB8w5H+K5N+vJ4DUCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1jZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+/RAAlGovFxFQj7khrd9XDB2L2O/jvML07rkRVKWUUs6lHft5OLgP\r\n2J1q+8PFo3al6AonBjYgTRe9MerzMx0gqD9O4l+ef/FSUKPMOg3WfNpCONFY\r\nigzyN+Ms3VnlI9yHqLygIBapd7YyPoch+LaQahDylPrlIjonblcWI4I0oUbj\r\n22ikivItyIuB2d48jcVugXjTWg4y3piA/g7GGO6PrkSpeGDwn3pUFj/417wP\r\n6zKt70nqve7BpTq3FT1OmJNZanV6mc+1eVcpqAcivvtdZXNcNHk574xpBdkH\r\n/CiTAeWQRiZ2+hYa61DO4/2zm5NWpKBzigjzZ1iAVZopp8rbWxK63pw0z5n8\r\n6qLjF5UuIxuTT49tAwfmFHlfAR0klo6raEXhCt5fVooe6JtzQvDb1QFlCEMX\r\nS/DXm4FxZSMJffNOrrXifsql/TmoGmHmts8rEweUXZ5Dsth1EK3529fh00r4\r\nwFMtPyb1Oe4NCd6CzRL9aB4zAWSAYuDO0GNxvv6hON0xqs9Uh9gfovxw1iho\r\nTje46A4Y1HMYtSoBBJl9VgfBSKkXrIrp/VQ8xigTFxUApNY6UCwPIyhdHhSa\r\nlM9Dyy8kLl7Uf+mpoD/Hp9X/rhFRZ/tUCfBRtZD6TSF56DJAeevbuOwCQN1T\r\nQ4TznlL3JoigANnJLPer/aFG7UWaTBBjfWY=\r\n=GyT8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"92b496120a9385203165ec42657a2edf41099000","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a0ae73b0e.0","@material/base":"15.0.0-canary.a0ae73b0e.0","@material/theme":"15.0.0-canary.a0ae73b0e.0","@material/ripple":"15.0.0-canary.a0ae73b0e.0","@material/typography":"15.0.0-canary.a0ae73b0e.0","@material/feature-targeting":"15.0.0-canary.a0ae73b0e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a0ae73b0e.0_1669028057292_0.2618240729729113","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/form-field","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.96f472604.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e70432b321f4e068c49c66588fec239179428b0f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.96f472604.0.tgz","fileCount":33,"integrity":"sha512-rU5YzUe1dlxYQ05kDaCrTb6Z5vYQ5jZDbAaZ1a2b7MtDLC6/khg1NKFwtl7Rc+A+P3AexUDkEt/lebkz4oK3lw==","signatures":[{"sig":"MEYCIQD3kAf67KiTatF5k743v/3IiBiB2iy/60IF7BqSh7/G3QIhAIGYYCYb8lYxDRfkPF5l4QlTgxTXgqRh3F7JGYXRUUiz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3S3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmos6g//aZlUnnN+hQ68RQIL+NBBjihCg/zIQVg4ogLkloWkGBdgeE0G\r\n5F8TDdzy9todx4Hh2q3+GTwKqSix99ILS/UcNBzmPjR8oHqY2dMg/0lD97uW\r\nP1cOuv+myPnMFX+fLV749iVPPumjaHQtDye0A1n5dLb5XmIBA9dG9m0Ak915\r\nXQaOKSk9MYEv/Cz9DAIee8vgKd6KaXoXy3z87WuECKyFyk25RTtapkwcVIkm\r\nHywkFNI0rMS9bEWtFWHY5LVVdgvt4R/EBRCZLD2zhQKSWTWtL2TnD1wJLgvN\r\nsTHHxhgjpe5lzgBGt+d4PRFZKOgik0slGcBdCC24QecNCjfRrVPVD5x4RD9R\r\nz/n9VllgoAct9sz7w+VA/AMoCXjexmBSWp9WLNmDGxB28b4rr6z/4nE8K3Qa\r\nI/iPY9LPGPN3w6v5Exh9iMwWS/wINBYIWFKMFw9pfq5p3UZIKj01EF0dwEsJ\r\nOS63k2kActKByvyExycjjFWs19jc/lD3fqrBU27mHN3L+/a12WPWb1PPUFvi\r\nWJtcj5Nhqk1+R/tUv0huYJ/TGuopBVyq15Sb+rPK43nx8pUn2CRfxDVCVaLL\r\nC6KybDdD9Kjfio4qRYsfI8BlA1jVYBeASF0cZnlb06E911WVCH7Vj1yOTn0G\r\nH53eyklpQSKc+TCYBPDtaH5NqpWmutDWH/Q=\r\n=lY8Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"28f313542547c982f69fc57b98811983600931fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.96f472604.0","@material/base":"15.0.0-canary.96f472604.0","@material/theme":"15.0.0-canary.96f472604.0","@material/ripple":"15.0.0-canary.96f472604.0","@material/typography":"15.0.0-canary.96f472604.0","@material/feature-targeting":"15.0.0-canary.96f472604.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.96f472604.0_1669035190887_0.4888556224661005","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/form-field","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.18b8f31e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52bfa5ca4fd130e6d1b1910df0b210cd6e647f6f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.18b8f31e1.0.tgz","fileCount":33,"integrity":"sha512-xIDglQ7bBUryJuyLAr3fam0e4kM2lh0catg8O6RbGi7D/SX5pJE+1x1TDJDtWFxUvT+dRVeNsqF3ocgYbHmzUQ==","signatures":[{"sig":"MEYCIQDkb8wquNt0XsBLkyQliXMb4DMQ42mvwnC9qe1d9/wzkAIhAK60Lw8FHFaqOlw7Ss4hQ+1+aDggjQ8tAD8wFdbddksv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6EuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBwhAAoAW106DZac1brBn8ui79EkaUpxrFdYtA7rB9Nijk1Dhd8oSC\r\n+nyvDo5Cd9eA8ZpZcJhUhYzeVSARJ4R/lgdTxzfXA6ZD8PbaM5B+TM+NQ+Sb\r\nv9eBLu0aVD8KULp36+NkdD6cLnfvphbttUwLipOIZbh7EXPumCwRRqgPBeuo\r\n38MjOQ76513aRpwvLT0PAuTqEK7uKbHx9ggCBURk2qqVELQ6mAylIBew1DQQ\r\nURYsZV6EkcGkCtsdbAxvZ6AXTFMwoaSnMBP86Hy3UeU+nAblebk0cK76FnVl\r\nBe4X/0a7+g3E0+GaZ3W+SZOAPjEsMYdRILFVIRA3ML7hJetmiHQonHVfDj/L\r\nNybA0vSzny+FS/odr/bd1Jf0c9c4bVV9vHsRx/7OBKWJpYQ7MloAgaXenYyD\r\n7DVvDSy0Rr3+uKbV269jZgNXqu5XF6G8gPqGSYGGXX38ZT7TWbO++n46fz2C\r\n96KeD+AsfZx8QvfR7NMc3q91Pbm5vObqRLl6+NLCSRgR+uTluZcs3VeBpS4k\r\nByU7AuuFtn2Xc8TxNmsM2gH1g//5J/wLDUqZ4hXUeBIJADRBNP9uisXMckif\r\nBfQFX3MHPuuGhG6htDynllhQaqK+aIZuCT64NhpwVVR95LRFrTQVbMf7227h\r\nJDzcf53uVUO1OhuftddStwPNM/HH7aBrBYo=\r\n=Gmrh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"99a6c50dcaf8c9db8b49ca9378d7bcc70fa3d276","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.18b8f31e1.0","@material/base":"15.0.0-canary.18b8f31e1.0","@material/theme":"15.0.0-canary.18b8f31e1.0","@material/ripple":"15.0.0-canary.18b8f31e1.0","@material/typography":"15.0.0-canary.18b8f31e1.0","@material/feature-targeting":"15.0.0-canary.18b8f31e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.18b8f31e1.0_1669046574146_0.7233176987991228","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/form-field","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.912f33ce4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a5093624ceff7a461998ac91250db239d44a03f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.912f33ce4.0.tgz","fileCount":33,"integrity":"sha512-qXEKJVOVrlqitFlb543nDB+YVWibTlz0q03bKpteW4hLitP7hx3iW3YywxPRv4Y4dGCYNEpYZ6vZdXKDoc2SOA==","signatures":[{"sig":"MEYCIQD7FAkQKTOf4YuChPZSTWDWaOAjJucXUbIUYZuKpQtULwIhALoCrqugbGpT3eRh6/1HmqDLzdaQ48BIdHg8mcwU7QUP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7tVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTvw/9Ge5K2ZDc9omx4LGZr+Jz4Mu6mEEH2d7YAXrD/UZgNy+rPtR+\r\nCgj8WaV0ETBFJqbZh4fB2vi7GJknsvBniuhBM7n8zyCMwWUtysa/l+5lOxD5\r\nmRqzCYmMyo5yw9tk8KBdYu2TlWlMxvTPJ0EiTJsUvWoRbMHVaNEvP2hzhvI1\r\nu1yFSWq11CCNwJ2Gt3rGnpwvno25tP2fiWHb2lk0RTAdkQc5C1rMNhMCN+I+\r\npfJzzXfNXNCLYpVyF3uQ1pZJSUEi3wRaXPFe3oKWaR749zAYsRTMcskpQrUC\r\n8fLpub/y+Tufq04+ElbSquV1nw4KQJxUdtx3zSYjXmaBO1cS1Hz54HfvRJ3N\r\nnDvJgoOtyofGYt+vxwLnJeaSi32z4dztdnHN6vcsxfqUWV0T9+qPbu3NuArO\r\n3juhzzPT03wqAFK5m8E0CCisu1tlBZRLZFmwTyVUNYNkkv5u0R2tWfIj9NBq\r\nb0sdX8LCbAnwed/TgUHh/naxJzV48KlEqMMavWKwwMH/5odzlds0wWpUOicS\r\ngWYPVj2cMGzUNmf8XZeQjlm7YnlXxgRagaLgtjtDHXmgbtadEr25NzJE1NoI\r\n1bi+Q5jVaPPG69kJfIP9hxirAskKijljNRLo46FjdrCPI361f3mRBdIyrqld\r\nN2JvXlxixRQONTPM3tFzJpLaDdPvlp1CJR4=\r\n=6JOl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cbdf5145fa19b6681004b6c2d5de771b50f5b6f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.912f33ce4.0","@material/base":"15.0.0-canary.912f33ce4.0","@material/theme":"15.0.0-canary.912f33ce4.0","@material/ripple":"15.0.0-canary.912f33ce4.0","@material/typography":"15.0.0-canary.912f33ce4.0","@material/feature-targeting":"15.0.0-canary.912f33ce4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.912f33ce4.0_1669053269695_0.44040233155491015","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/form-field","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.1e1b1c369.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35185038391bfca7e69a9497b727adecd35fa0a5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.1e1b1c369.0.tgz","fileCount":33,"integrity":"sha512-EpT24t12gdHKRjhWrilKcMbgBEoJSCwBqh9TDSOxYMMzi/kcADSfBZWIvbi/jtioEbGFNVQ5PgVTqL5zvs4gTQ==","signatures":[{"sig":"MEUCIFI3e+0WlqGHH8EtvKxfpZYxH4Ga9pcQzuLUN+bT1jRZAiEAtJ76hr3C2bOLNPzP07ADxKtmiHyWALi+r5hdFwUQjl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm3xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEEA/9EryLeLB/xwCENkLkKZTix/o5bW3ka0LagjcWh0WnpyYFF9/k\r\n+68ZEMQRlkNuuXqtiJmNsUgimIOrfslO9comP1uN6fwD0DgeSvOb8QkpLP41\r\nf+8UbwUClwDA++dMmC7tOzK6r3steOYsAG3wO3duzC0sFm38dRerIJQAI/T5\r\nicupjip3w6vsWUA7VaAKxTbhkm5aWcZX5y967iRBYME0qTbYOjMhCOcQD3dl\r\nkcrWlgxL5pWcGJU2Hk6tZa7wLT5gOjOZvfxY4WG6mwIHvgaob9OozCOiAulN\r\nm3JZbsBNPWk8kWuCBngmZtmcCCog467kXo+lHyY2H2aPTERnNEE6SWI0vjjf\r\nzRbL383QA350DkP7yis8hjDRho6km18gq36Ho+XX6RxZbx2EM/x41CINspIq\r\nzobR6PW8UE0f0DHE/P6Mbw4MB/cYKqGrtJoCdUjWZDw/HQlvzS/qhxGtt/Uy\r\nrVtrhjbUnPLocoRIy0vrqERcumG7WeVakqSH5uW8ZlnPODhvyXGUvxdgPzQE\r\n8Mu8NtlHcAyaolIfOBE8nZcD0i7Bx/zE/F6LHX/j6NhsJVrOa7JZe5oghf5+\r\nBaWLzMIPW6C4OxmHPY3Ivi+1/XRbXqyUlVdsNDHwd6s0LnPubh8/WuZXYNZz\r\nP3ulM+yvrdaexHZryOegDUTzoJv8kzbjr9E=\r\n=MbPS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b59baa6ec6a8114401e616de0c9d3675a34e4206","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1e1b1c369.0","@material/base":"15.0.0-canary.1e1b1c369.0","@material/theme":"15.0.0-canary.1e1b1c369.0","@material/ripple":"15.0.0-canary.1e1b1c369.0","@material/typography":"15.0.0-canary.1e1b1c369.0","@material/feature-targeting":"15.0.0-canary.1e1b1c369.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.1e1b1c369.0_1669230065028_0.7735040835559797","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/form-field","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a2ec49244.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4177a38c3627d632734a2d238b067f2e57b59131","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a2ec49244.0.tgz","fileCount":33,"integrity":"sha512-7TEPsfs4GMwxUHMgfiFxlprNkHVIAO8/7xr2RicqYZfNNtIluib5up/hqZN/1S3AgG0EC2dk/4hpQZymscsPYg==","signatures":[{"sig":"MEQCIAct/+mHvjunl7SV3vtdZBJ05AJa2senl1uwu0QaS1EUAiBLXYMeop2hziAJUv36F7i/hDxpFHFNTF9omh6CwoJJTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnUKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqENQ/6A03AClrj+447m7545G+/ROq3/HVEMqF3Ex5bf2l2SKsIWKqP\r\nVzJEggzcMTpLVAEUrkjct0Wb59OQs24vFN4gv1jLsbvYmFUCbmH4RiY/f2ss\r\neSvb7NzdGStywwSofYYuiT/x8UbSzybiTfTJvvSgaimRbMiE4wcyQ43NEMhA\r\n/bIASZQ0y/oiIFAn83uMKohJTKhd+TSo/swrGYhefWfdGWRY6NHR76CIUps1\r\nJOabWCDy+DyNqyu2oLzqj5/oO80QWAREHLbDkVTGE7pSGCEXe0ajIgk0BaF2\r\nnD14uytQprGlxz45sY9V14bzk0GJBlvwatejRK+IbJlb+c7rraHw1Tv9gtMi\r\n7OQ2zHsGG7BgjEaGoFDylN90puvRTS9VfaCuZrF7rc8CTsyLDwQZwGDIPTw6\r\nJbkwz9k/lLgy0HLz7hTm7Vcn/0B4Ctg01xTaYS473xU0ryWn9HGQP9nhOGq0\r\nWnOtFsZNixIry8dO5wbMZnGxx1x9ntLspQI7pQMARjDtksB46CZVcoexdFbk\r\n9scK6ySGGq2o1y1xOww6WU0CENNkQRVuDMOLS9ecFlsTW4zMhVvQSnMJe0ZE\r\n57PL1sVJ+wq0e83I0GmHHUHcOC2yU+U27d9G/8hcIXsolrZMVT1Zr1RHUYWH\r\nq1F+FGcaY2g+LUnY02yGwAG1KA5wXZzMLk8=\r\n=m4Bx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fc59d471222d0010e05a636e8c3a9a5a9abe2b3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a2ec49244.0","@material/base":"15.0.0-canary.a2ec49244.0","@material/theme":"15.0.0-canary.a2ec49244.0","@material/ripple":"15.0.0-canary.a2ec49244.0","@material/typography":"15.0.0-canary.a2ec49244.0","@material/feature-targeting":"15.0.0-canary.a2ec49244.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a2ec49244.0_1669231882181_0.19810481119580348","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/form-field","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a7458ba0b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a97bdf63f4b1f48c02e235255d5e62f89c84f0a6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a7458ba0b.0.tgz","fileCount":33,"integrity":"sha512-BRhyshld3mYwZFJPi4rejkYHzqKocx2Q5oCvhjjx/+MlQGDZxcXH8v/sPQc6EpkNiG3Jx6ZkIFwv/48K9fPOKQ==","signatures":[{"sig":"MEUCIQDRlHSGSj9F5QcQhZ7R2MKVfGgrac0SPto+f/i0wVh2gQIgIGXLOqD3PxL3AvyehEvJQ6MaaBdkK7qUxIOlyyUPBOI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn+1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruaQ//bQ44ublNndVIiZJMYuKYaAvkFVzu0tg5CkE1B6o/e9IOTEg6\r\noToiBHkC1tT7vjTH6GDc3k6ZsZx4Fw9mP6RKEI/fUqUMoNsKKch9zM+/2w59\r\nZ0jM7gRkNj+k3uMJBdgnTXqaYqhlCFInrKxSXVHaXToyR1SuNYSvSJT/5h75\r\nBWrO1DMNkcYSinZ2s1SHg/MyinhMd4EmMLdLMERWHdKqHZ1ft9B5Z3VOlTiK\r\nAFNKq+1fLrhE8JNOdWsbZfnCo/ny7onBgOFqECRK7tjk3wmscxYudeADrHOb\r\nWL/Bk8/KExIdPrp7Rdx8BWKV5nPnSMNXzyM5SZ8wOpoavKGY38Jp/Dt3emk0\r\n6BjG/1NAxSjYr8LTurApqWWZmR5xISSXc/8ud5WnrI5kaf46Ma5dzhPjFMD6\r\nSFJfte2eEegXg9TlNols8fwHPD1pbIlC44LAX53eFTwSWXUimQx5q5GWyR/q\r\nOOPVCaj+Aqiz4+7MyDcuNeOckyIG8smI4UQen8XCNWf5uCvCt9oAUJbpvInu\r\nIScun/irxKkKL54L8TR+Oco9iItMzD/2brt4aUHSzTr4AsRxCyeOh0Lc6Ulk\r\nhledOPEDXVse5W/qH5JXXeaWH932W/gZYc/GzqZPS4rf0FsRWAQMgObeFLlC\r\nI9c+GigiijAdfoXceZA5/SphdC9Skqo6lO8=\r\n=G2Ze\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"62e6a15e0784982b77df0a1d824f81d5a15cb6f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a7458ba0b.0","@material/base":"15.0.0-canary.a7458ba0b.0","@material/theme":"15.0.0-canary.a7458ba0b.0","@material/ripple":"15.0.0-canary.a7458ba0b.0","@material/typography":"15.0.0-canary.a7458ba0b.0","@material/feature-targeting":"15.0.0-canary.a7458ba0b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a7458ba0b.0_1669234613237_0.6533047365019946","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/form-field","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.7c35e5036.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8957b55ee9414e1e4e7d8c1cab2ec945d11e0255","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.7c35e5036.0.tgz","fileCount":33,"integrity":"sha512-+iggo3gTztbN5zpLJHQcSGRuPqJ5afM83KgQqW5zZ+wPKETmdNZwaLaASE0xf2GpcKlt8B1FiZPaCi1q+VSIlA==","signatures":[{"sig":"MEUCIAbYflbpzzo/LpYY5dQnfPb85siJn9uc52iEZOy+kCcoAiEApwF4XfNg1gq1wJnjopM2fZK4284V/FBW4fk89o4lvc4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy3ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6GQ/+IwkTngtOauLDn7Yekqe1Cp5jY55Z40tPaWzzWc/d+MQxtpza\r\n/b/iBvrdf21Fa4hgok7sNPpz09otx9M/DFUNCWznmKjY3zFXKmLWB+Xxlyir\r\n7duYzn3mIJGwe9bitX8WIL56I5EKlUBVrB+cfuLy1hBxY5QO1+EDKFBPPcG/\r\na81WhitMBdsTVvlf8nxNRALowjTjjYb8Uy0gq6CH3mqQ/k+K74363yqN3IhP\r\noIH7MsTqtDksJspOwLwOXyUUIIh94XOc86J4jGosnN1UGmMKbPd5sjGxARtc\r\nqJ+oCNAQgghyDa7AGlPyjrN3YxzVpz1US1PcGR+xKqzncgtt/QTj11VxrjuW\r\nynSoyJ8mC2ImduVqL3JrejC3xXppTyDX+CwGdwN6I/uEgAdiZrSj6JusOtYS\r\nHBv4+zo9uKUiCJVX+txEwkpaiKT/Qlp4tr0YTaE6gUVWmIAStSIsFxwTytYh\r\nNffh+a2RWYWALA+OGHCMQT5WT3wLBqmhI0EoPchZQ8Zhpwz6xMBH2q69/IpH\r\n65yVOLXq2Tcw4tgED0nuUOJCMM528Qdc9iWPcjCO8SrL4hhsoVUoNE/XGln0\r\nTUBOAZ8JKEXUQdtIRPa+UcUt2ZyLh7RKSfj8f9gvEqMf/ovupoPM/shXVCf4\r\nDN9/lTSqHOwggttFg++mpOtMfbJl1igJZLA=\r\n=HdlE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bb1e9aff747feef28ef92f415776fe33dc1216c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7c35e5036.0","@material/base":"15.0.0-canary.7c35e5036.0","@material/theme":"15.0.0-canary.7c35e5036.0","@material/ripple":"15.0.0-canary.7c35e5036.0","@material/typography":"15.0.0-canary.7c35e5036.0","@material/feature-targeting":"15.0.0-canary.7c35e5036.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.7c35e5036.0_1669279193670_0.7828175628671201","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/form-field","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.4356e05c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0539689b96d60558b69681c54d15cca660c58a62","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.4356e05c5.0.tgz","fileCount":33,"integrity":"sha512-H7zPg+3eruKB2lIwEfu5txSanvyfxLPUCLfIOEFSDT2xzIHcrj9xNg+zDDVGX8DUrPVbsmT6Udh6VLlSWcBE/A==","signatures":[{"sig":"MEUCIFg+Stxy80T2kpDXStF8UVLDdlQt6e20n8mL4awEzv/FAiEAx9fZSsZKIA9veE0FMAoeocIYhCXcKj3XqNp63GurLBg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfz/7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2nw/9HQ6wLtam6dyzR6t6gefnUwhOzQBHdt7Uj2e6q3NBMECHVZrm\r\n80jNMsvb9yjoZhy4o6oheRlFAJfquAwWHQLhXsnSrF7p1hYk0peqVjucKAH/\r\nHI/tAsRd/JDgriwoB25WqdJoMPjp3AhcBxzKoDIUVf6pdKWFvy2XI2Lkh7kS\r\nh+L58V1CFZkD5EAbdtOvIcxcHjS8ltiBXyAbG7raqOO/H1VeIDjgfD1MOwNp\r\n0Q6Anqki4rYr3mLnWRn2pmiEZ21/kBx0CE37Zx2fYchYSI8rJlf4coq/3JrV\r\np/PnYMGpzl5lL8RF/G7g+J5LA1Etb39eDargFP/i5R8iUWWoByrs5v3vpMvw\r\nhq3d1638zpPjVrPAEbs0MYTf5zaIqpL0PGSxiKhVUnvuPoxiUtHqj/ePa5az\r\nHRgxmWZTrvabXTcNgTXPjhlzNpctBSanywzwzfCJqobYeGju52gN67hYPGN/\r\nP0trEwlEZEW9orORxfdmPTLTQF8OUovdOS8eXZfNWj7OuHKuokT0ZrVygbB8\r\na2XZyaUhxsMwEKumgvtZuVVdOBKZSbC5mVxWRA+x4tV+lzh+9/k+r1UZcnAJ\r\n8sXycg/RZUp0Gir0J/OMy/kuzSu55+J8bsr1Kt3PLA1kScVCfClr89hFZP/b\r\nCYVGftIZstK9SlpF768sNG6r9/9ZXB3MZ1c=\r\n=3xdd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8f21a6abb8b52fe9aa5804b940eac0cd94256fd9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4356e05c5.0","@material/base":"15.0.0-canary.4356e05c5.0","@material/theme":"15.0.0-canary.4356e05c5.0","@material/ripple":"15.0.0-canary.4356e05c5.0","@material/typography":"15.0.0-canary.4356e05c5.0","@material/feature-targeting":"15.0.0-canary.4356e05c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.4356e05c5.0_1669283835684_0.6617191803894451","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/form-field","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.cb605f8af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6df8071cc9fb79c696622ad07b149ee2cf2e21f4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.cb605f8af.0.tgz","fileCount":33,"integrity":"sha512-U2ZAhSQ0ms/Ec8IKMa4wOCFO08i8ceUwNH4sLlYmiCQzDsM5MBkH+sLVSF83Qnu+kujvz8XhrlhkKXWeKJRdxA==","signatures":[{"sig":"MEYCIQCbGWrR/JQZe0/tHrD/he9e/NoKLyr6IFjnxA8Z/ooxgQIhAKN7wHaGPsZvKfjjT0NigYzv9s35NZRvkk8fBrfMw8Vc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0RuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDkw//cCB06P0E50y9aBIDEb084hcfN0O6C9H3PBTuL/dWfI9mcQZd\r\n472I1Qi7x8z/vwmLlJCKErjArhVMnjhL2ANAw1cdkEjFvjYjYR79Eu0qTLKU\r\nLEqRU6ejrpxTP7F9TYI4huep98JLfGpAGInLFrMJnuKboDWv6ehOQvK7wi4U\r\n+b5A4SfcMIKeqpu8wq+T/dXWqAU9ds2AXbCg+8rKAQ96GviqFoJlu39l2jLC\r\nqjEoTIq/vq2tdMpfYJa7bQrbG3Wwd5hAixLm+ObaIFTKnWkmlrzDGTNEXwsq\r\nsP6x02pTktqa92hXZRndY+foyvrb4e3NVFc/cSDlz6x/Mq9AmPp6ioKa2V+9\r\ndHeeFRKa3TFH1adUrLATQ6u+M1EOPXKGZn3VR7D50+gNBBd0yo3z1ZyyqWzP\r\nJAayAKGAS+HjESTaEX55yaAs2UX1belkgaaKxWaUd+1/L+iU+j/vrkaA1bcL\r\n7Hg6x8lXMrF23zekQyTY6QnOd1uX1rmvBf10ZjWmJ4r3sguVmWtbeg72LD5f\r\nz1EC4OT3XcUlR9BMqHmEc8E/3qcukmfAHljTLsekuX7gQshI9uZPJlC0jLUY\r\nPwqdP2PZ/TLKZbflWaDMXV7LxtO7KHpDUcVM2dKhJP/B1WD8gG0ezr9m7bkZ\r\ng5/6w+fhv6aTSHiNTTu1M0RaNKSj95sNHiA=\r\n=N5hM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9d617d11bc1506bf595e8a4f05413067775d3880","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cb605f8af.0","@material/base":"15.0.0-canary.cb605f8af.0","@material/theme":"15.0.0-canary.cb605f8af.0","@material/ripple":"15.0.0-canary.cb605f8af.0","@material/typography":"15.0.0-canary.cb605f8af.0","@material/feature-targeting":"15.0.0-canary.cb605f8af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.cb605f8af.0_1669284974689_0.5745339474233122","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/form-field","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.05fb07f9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbc7b31391e55a52035e0be8b20f1f0c50d69d67","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.05fb07f9f.0.tgz","fileCount":33,"integrity":"sha512-dBH+oe8xbe+DaOnNygCHvHfyqKd6QAqsrlb/yuqTkGWPGzEmGoceHhpx6rrXM4DbjvZ8qGgBJ3dywEnWITR6+A==","signatures":[{"sig":"MEUCIDJ3TB+7bWBEyo4hLCwUTBjCyNBHgLRjXxZzqI7kqXCrAiEA4CN/sdvL7ZqVkDCA5WHDxLMSvxkVs3dXnkGyGu6OYI4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6ZlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpS4A/9GuPbrkeHJUWsUMFGJlU90fnLJdQiFqHlQvVUFuVOCDvzX/k8\r\nNp7oitql2I2DDnfzVlKfWkHKh6k/IYHnDjjjGqRaE6XHrcstom0S6dSMKk0u\r\nDCh+xJpX5yk960xLs4I/G+lSeCJPh2A1p2qBUgIvb4n4eS76Rw70x0OyDWT6\r\nXIGQ/l044bJKAdVVK37cnJttxFWvwj9rg752ggvpcsVz1fIb02nxEWzbDaS+\r\n9byWI2vEXh9+cOXlmXDLJe1HjO0dUGmuEgEq4X9vEBtAcKDoUo8Lh/sj64wU\r\nxoO5ZJpBv3HUpf5xC3mUfOFr1EUWWEVG5TBHnfSPaK/jGTvcGstzjRdHyCRd\r\nC9Op0VOwjIrzkpTD0TP+ie3d3b3JeyPxfbLVymJ39qVH7huEaN8Gjj6wf5zB\r\naMhk1Y+r/TPtfqc2PI8SvYq66ukhzpntwUXny1ulAvpBqukjL/GmyHBxYqbr\r\nuGl52xrlrHVZpFUsL3UeXmC6UxlHabTvcbK2DZXSowLwVl3pVOFKrgS6vMRG\r\nxQrIf2JgTDmdc4W6qOJ7FnjwOwFWHjhTOE6VTKfNoKnFK7bAYn8fJXfDBKvY\r\nfgtfUMxgj24B73dIw74V0RtNpOaNVDdVukMk8aBx4NtER/rASethhXwSFSEg\r\nc28SJcMvcy7OlKNKzYkCx+ZPzXJmgxnnS20=\r\n=/MpD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fbbdaff1715be513be46d4628f7aff9d8f7e27fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.05fb07f9f.0","@material/base":"15.0.0-canary.05fb07f9f.0","@material/theme":"15.0.0-canary.05fb07f9f.0","@material/ripple":"15.0.0-canary.05fb07f9f.0","@material/typography":"15.0.0-canary.05fb07f9f.0","@material/feature-targeting":"15.0.0-canary.05fb07f9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.05fb07f9f.0_1669310053114_0.770158223735766","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/form-field","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a911b386b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a83376d643cfe038d381895078ebdbd3b2e54ed","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a911b386b.0.tgz","fileCount":33,"integrity":"sha512-tNFMP5EFHMbczSHnfWXfkidZ1kuZxoR0FuJrqxNO3DDGmwEiZ3oakma1OYoEBqkSi7unxOWlClr8opBHD7PQSQ==","signatures":[{"sig":"MEUCIQCCnag9p3sigYEfLPXZcN1J/i5liyn8Jq9NHbirPWjmNwIgbEPD6IIaGFmIsL/Nej2sbFNhbYfUxdjfH2ZUB5sa4pA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOY5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrnQ/9ENGt5vi6+y6yHLOw25cQo2GAdjSVH8QsTFPjybIszwqC2jz5\r\nWo5iM1DMBYIPfb9Cuc1y5TSihEAuPbxScOhop8y0RUwxoZ59vNdpOg+gOlUV\r\nzxDA1I1Y+rtZXoRwpa3EKLjPzTo/nu4eV2c2g/9Hl9gQT4C2oxkXFbST+Svm\r\nap2VBLUOh2gQinuk4Vbnr2WAvZ/yiwuHxk9oOpzvNaKoTr8TcszB8P43rD/E\r\nV/An8u4UHdJoav5d8e/LlifEB9JZgcufVcLUTv3FahszOwLqzmTL663TbBkF\r\nVtbNB+Ifwdi4Bw4XSQUk9byEOZ8NYq8TJW6+jerTwvwBLn12NVVsRtbxb6pG\r\nipT3vbmElzyAAHw2l6p8uRhBbvdHKLPu9ObciVb8d4VX0+nCY2QIPrSu1Zoi\r\nG5ENHjpc+XLva/dvpV4e36ncmLDUuqwY6U80Y+d64X8FfkXxlKYt5FYwMuHo\r\nWeC1hh96/dqnhWyWXBN2VZZV19NNn+lvpsiQIUZgG3yh+hS2j2NXdsG5GcGC\r\ndhV5Un2mwfV0oHLV8x5ZKt/qElgby9w1ct6fMGxpIl6yUXGIT/CG6/M/4p3j\r\n0O35xv32BMMzDsQhYf/2K2FmLJeq/N/4f0UqYsfWp0rEzLMBJ6glpPno588D\r\nQl2LJzcMs9c+U0N9ouMhh4UbtA4YzwbfBJ0=\r\n=NQPG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2487492bf1103f4c82913b328eb64ca5b71b9f5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a911b386b.0","@material/base":"15.0.0-canary.a911b386b.0","@material/theme":"15.0.0-canary.a911b386b.0","@material/ripple":"15.0.0-canary.a911b386b.0","@material/typography":"15.0.0-canary.a911b386b.0","@material/feature-targeting":"15.0.0-canary.a911b386b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a911b386b.0_1669654073401_0.28738563212857593","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/form-field","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.2aa8050b4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22ef72df4e376a320a39431f3bbc1e557159c2e3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.2aa8050b4.0.tgz","fileCount":33,"integrity":"sha512-T2WIjCcCDBIPTiqfGBrKzi11QBdayM3C/rcf/FhqEBF++Ku8vOSSWb5Z+z9o1WslKbFzqTh3LxZv3t+RsMEVig==","signatures":[{"sig":"MEUCIQDXfzHsvPlqiJUX0vGSNjcdOXdLDrLx8eDTK3HEfijQUAIgDWswt2MhDUQ0p5VdO3+MWGn5C8RNcW03EmqJM7mfWmI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQgEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo08RAAghPcO85sXQYBibIM3YZnvGkYtFoO02A0bI3o42VGtqfDx8Xj\r\nnpeeTOpxgyK4uiRGJJam0FHe2s9dcEyuCrNopZnXeDYSr7U3/2GJ/AfBcyRh\r\nqMPzsZXuqfhZ/NPQ5rioaBP3odaEWUzPH4O2JrvfcBRBF89kHZZ8rh4DJLJ5\r\nN/0MIzOQQp2yd0eBHRn4wz1qQW32WhSFfmRuQHItjlUJhu1BrGxRfDF74LFl\r\n47+zG9gdmZmmCEDdczylVqOX7Pr+M3mvx8OLuSZiseP31B7EWh1XKtOipjbu\r\nbzBAorA9DbQfzGvKULP1ueENnZpUQ62MiqPvgPzAuOKAWvb9B1IcdurBtrw8\r\nQ06VwLzKfESf8w9oXXzs6fLN1x7Te4+dySKDhg9gG4Ihhu76hX9vxAPCBuah\r\nBLWEcbs7l/CO5BoANNAjO5BKrrkropDp2O1T+INqErl91ZCtkPa+uVhU5BG6\r\nruoswVTUjit01cnMdvMnPtJT+NCxJr03pji7GqfuEeUquzqJoicB0afgdyWf\r\nx6x4+xXzmJ9pt5KWkl3dAz4KN4kyIA4bSsVndx37eBn1GUNr0X2BaLCy7NeA\r\nwQWfKKyduJQYz8agQiADbTfrjrwS1sxsFpnwfvvX0zfhkOz0qXn0pflqHnBR\r\nFtATAd6VA2OoAruGYxExjq2190DMjRGKPQs=\r\n=yrkZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7ea9b47d90d470adeb6f1cbc0c1c98b88392e56b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2aa8050b4.0","@material/base":"15.0.0-canary.2aa8050b4.0","@material/theme":"15.0.0-canary.2aa8050b4.0","@material/ripple":"15.0.0-canary.2aa8050b4.0","@material/typography":"15.0.0-canary.2aa8050b4.0","@material/feature-targeting":"15.0.0-canary.2aa8050b4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.2aa8050b4.0_1669662724170_0.6356588312193934","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/form-field","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.323904a9f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5acfd4d75ecdc221abba2f7c9a4b008e28fddbe4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.323904a9f.0.tgz","fileCount":33,"integrity":"sha512-voTDWnma3RsYHBm6qyMAWp118OsLk//s/quVwl6MpREce534w0WxHe4mThvkIXxszdO2oMksji/RbhoB44dJBA==","signatures":[{"sig":"MEUCIA0T1pctF63iYIkEuCiG1Bqv7MkpPExznB5Znf2b1KClAiEAzTUXwnI1umCWuS56+FEdxdBsXkEl8E/VbIhdgnVGHOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiZwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOxQ/+MdSLy7pIs51OKuoCw2Uys/jVPatTH39aTBxiiQkLimsQkO/Q\r\nc9YMA7oHCHy1t4iAUUJGY1IOAkDOjYESxOPMMFhXwsFKwDNUDi7rafa/c+Ep\r\nGPofTWMz8GM2gDywb8cdHJ2QBZr/xL1dqq7RYGFIl3Y0L6YkRoxckKp9L/qs\r\ndcknOsYfHEBITyrBha/RAxEap2GbZvX+U69OSU9LJKRaJBL1roYo32fkHO8I\r\nG6/6tmdkZI0k/3lJrhueJob7wr/m2yTbcMxJaUjeb8ReWBzExjYWm/19FiQB\r\n/F0hx7jk4pTvcR1i09gz3bVrHoBbYXsdKyY3oP/+q7UolxD+cC94URdxx4x5\r\nMMzmOIAJvJH6XzHgKlVLEQkVHpZg4tXdVecckqtMYBfxbfqa0wlI90CscuIA\r\n5/TZ2I7CBGq1AtqhoTFi+wit9+WinpJhSGaHnJQODPt+OIrypC2+7Toj98EJ\r\nJph20XPlsQz1dQbQ27IdeVEYEhIAniRJt1oKAaDpVn7WrO7KtPATi6qdh0d8\r\nMqzf+qMn0hgaF2ImC39/9TMyg4g//m7khwrscKUZXnETeIebcz0seYYDszjr\r\nBi2/zvxTdhLpeb7tlxMEXvaghAFrr+f8ZH8wn4CF5K82xWT3VqkdsPeQmxvX\r\ntOH6j/UWsAkDB4iebwxtjgZdb8NB3md23bg=\r\n=FV08\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a69fa8c7160aaa07d868f5bc365076bdb159bf99","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.323904a9f.0","@material/base":"15.0.0-canary.323904a9f.0","@material/theme":"15.0.0-canary.323904a9f.0","@material/ripple":"15.0.0-canary.323904a9f.0","@material/typography":"15.0.0-canary.323904a9f.0","@material/feature-targeting":"15.0.0-canary.323904a9f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.323904a9f.0_1669736048246_0.8449527273158262","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/form-field","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.168a629a4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa840c2a8002baa69d3fc9aa4bb39a0002990d1a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.168a629a4.0.tgz","fileCount":33,"integrity":"sha512-uzJFK8ExGpp0eSFi/68+BMPbhmNeAZMGPhNJLDY1T2fiExmLjjUVmYlD18459DEVVYSIlyro/SxbEW9Llwbf8A==","signatures":[{"sig":"MEYCIQDouoFcI+4Pv6K3tGFiLaD/b9cQyEPIM741NHUmofMmxAIhAJFys2l6haO0owmxATVR+xOQ8zn+cfk4Uyyd8uMl2X0B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjgHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqM6w/9H53/UzNx9FahyWPnfAY7jMRSrIBesZZFkhNs7HZiP6UMErVu\r\n9EKnQ9L0kU+tr7d9/HKaQvP712YPEmZlLhNuce5ve2LnsDSuBUS1wsCA0Ozx\r\ndYAt/dZHstxZVYanKwa6gTQBxZIGn+sroIhhhRfi8Ml8Al1UsARQ3Xs6QedE\r\np7xMnjdtYLqekvt2PuCXo0rBSMmZVLBUd8cxtnobJmm/56FcR1e9Pq8uSh1+\r\nKxXOZmqN0kFwyn+SEUeLgBzjSEvXQRUWjF843pcCsPP2DWhS8R0TdGrRy/9H\r\n8XMxYnxmfFcQDLwPiup6nzKRWvHzcWyO0YS8ZyP4OyJXJP+nVQaPA8BuVk0y\r\nS2DUHWomjbxfOYoaoZaCD5kAOPuADz/8tD3+O681uJswfpvRpsQBdMKa0SGj\r\n4v3lvcQ5cs/6vanJI21iNftxrdoIFguAp7knUjlWbY/7y86jbJUSyQpDQ7FW\r\n6OW2rti1HSxRBgUsO0TMqL9G4Jl/xAO6KAZIvshw2Z8ItmYsK1HY30evFU/E\r\n0Ilkak9bg1sUh8di9T736iigWpnVY9tDmDPKhJ0XbhKOBtDlL/gGYNy6dFWf\r\nD9GKERbV0wzXnLAVkjABRC0vXPnxDvi9WyoqKufYu6y1gPxen6wTn+HBA1NT\r\nE3dZ7SbUrQOtuxw10XO7nZmdJgUa3DATNNg=\r\n=3v+n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3091b344799132cce493f92839da8e544fec7c05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.168a629a4.0","@material/base":"15.0.0-canary.168a629a4.0","@material/theme":"15.0.0-canary.168a629a4.0","@material/ripple":"15.0.0-canary.168a629a4.0","@material/typography":"15.0.0-canary.168a629a4.0","@material/feature-targeting":"15.0.0-canary.168a629a4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.168a629a4.0_1669740551590_0.9594371546253941","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/form-field","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.65c411674.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c002e48a722e7962e437f91c07943056dc4fcec0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.65c411674.0.tgz","fileCount":33,"integrity":"sha512-tkbqEYIwa9zTfEQLnAFIjHXAHXQq3fptgbN6u2KUXBx+EmOjU7gkqV1IIMMkOLWy5DMLHTjqjuwd+sa2WDH4Kw==","signatures":[{"sig":"MEYCIQCOtQjuW2g7qyV87NErwALLKftAHsEHM2T27++hR4WzOwIhAL9rtkYmxvB/YCY42AfA6DQVFT2jGftbeHV6mAibq8dB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkOzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJAg/+OGM2cHVTMWYfrlLYmPagxcRu5SMxPB4CvMvpJn0aIAhiJFm8\r\nZdXU7/BoYKccGkQQWus9HXcy8NqvpTwC9O4qHbRk7UQ0fL7kw2GigjTrolWo\r\npScqt2s0GNaT0y9pehNi5DRGuVXGFaET7WlGN0c59FgO8AxnTvOsxHAytwYx\r\npwM59zBfeCjW4IW96yGHe/0HYk3Mqhfsz5xG/1VE2SnoPMy55FuwD33V9Y0c\r\nX19jLQrwm0jE1h/04jiaQ4GfRoy+CgNLq2gkmwb0mcNk2Mf45m5uAwtqgaUr\r\n6IxjQa6mXrN5565nQpKMl+dGj0Fhzw0odt7/NhcczWUjx+kBDclkOSRyVMlY\r\nCyGpQ4xpEpxf3gGOTyi5j2ZaJETaWAeNtzSGaHsii6lV65bWMM2jknXuPg8r\r\n5aQQ/bsnoflOMX0bMAxLzEleOPMMactee5UUNUMydkxYdWaSv0QLhN1QU8vX\r\nOSgNuusOQF50wFBwdedzA/wM2jKi2y8NI7SOdZqsf5y3gUdmXpncO0BY/3ob\r\n/zWozM/+rEuZht5eRHx3rn/Ts+9IEOUmuL1wtG02LSmPEnFTEVNeZs0YcJIV\r\nmIM5HzFTqglUFP/u6fDRdA0tHoQBDxuiYDOefPjHTQGXHw0Y3NjIFNIPHtvW\r\nVZFcaEnq66tB8w0gDXA9zDeiHa2i30dts6o=\r\n=n4oI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d80879a8c467caf0f52227ec97481bf5b7f2cb16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.65c411674.0","@material/base":"15.0.0-canary.65c411674.0","@material/theme":"15.0.0-canary.65c411674.0","@material/ripple":"15.0.0-canary.65c411674.0","@material/typography":"15.0.0-canary.65c411674.0","@material/feature-targeting":"15.0.0-canary.65c411674.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.65c411674.0_1669743539646_0.5422004547628201","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/form-field","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a86d36fd2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e56e298c2194da818c01491dd44f7f232afc98c2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a86d36fd2.0.tgz","fileCount":33,"integrity":"sha512-g41E/hTHqXdJe4fsgMsAHOr4JRKQ5AAtcc59NempnXjQ29VzjF0EDhnZBdccI1tJhOXqF4VH3z/WgMIS58ry8w==","signatures":[{"sig":"MEQCID38TCY7BeYgpPhuDIsWEhyFzlDCAOliipfepdWu/HNZAiAEaYuFENdYeDh5FaSItrNI7R1bZRpMpeyYOkIgxRajOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhryUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLpQ//Vaw7k3yx2Cs05uE53J9/ZqakrDrRryl8hygybO2w34KDh78D\r\nwYeKpVgIYAlRx9dIpll1/297ymxdJsH0SK7hLWVjNOHr6rCKpgIGEf0vU1GJ\r\npLNSeOBhLlqGOWZw7KxKTu0MxAVsoYfqQ0nJsFnkNDKOITf+8HPnX6GBet3j\r\nYO87DQZ4XVQ/cc0yoUN0dC6TXdUFbzRpSKRsgt0FWB/vsAJ/ElPViV3MjcpO\r\n+aKxLoyJKtSew/RiDWLrzfCr2C1eIvCfRveSStPDwIvxe1tiQ8i8Sn/BJfw8\r\nw0bAd+01GaN6gRc3f0IfIG+53UotSj9JfBpothQ71hrx+tahIP/QHHEs0lqN\r\nYVx9irtbsC+KN2hOCvMljds/fxBmaOCQZ9ZUzJ1SIdwD7c8T8lfllDkEhrcg\r\nqv52YtOuyLfa3vzdkoAx5hjn8G2AOpxTkGqNB/DWoytMv4M1AX1wgrk1yefe\r\nmpvTXlMFLsJ3mNZILOtw6z9LoNdGtazXyjV17XJ4k2IgBu4VrIFC9x0huqC+\r\nIE49LHGWtbPMvu/NWVAo4e3OGrNXtQ21R5CYSBWDMvZLSUrRZLboof0ybuUS\r\nmzq1eKw7VK7tSKb4Lgej26VruF84HK+pjQ2za/C9hFTv0jw76M6Isp6T9dZk\r\n3PIHx7wi0sOpadG2kPui1e56RX2CwAAWWFM=\r\n=sPyj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"85d3ff6d42516ecc839fe336441543c8df62326b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a86d36fd2.0","@material/base":"15.0.0-canary.a86d36fd2.0","@material/theme":"15.0.0-canary.a86d36fd2.0","@material/ripple":"15.0.0-canary.a86d36fd2.0","@material/typography":"15.0.0-canary.a86d36fd2.0","@material/feature-targeting":"15.0.0-canary.a86d36fd2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a86d36fd2.0_1669774484068_0.21970422019018598","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/form-field","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.3a1f46c66.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72bb7c907da6201a6b89809f6829a549d6078997","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.3a1f46c66.0.tgz","fileCount":33,"integrity":"sha512-Les1xartTSMgkt3q3ikpxNokeAaBJ86AIUcdO95wR06ynYy2UtJvFGD6/G8gB0K5RB2CdPokPgO136Z5QOGSBA==","signatures":[{"sig":"MEQCIQDj9TuJjpTYp+6y37ZwMU8YPHIlUyuUPx+yBAGfCwQqlAIfeiFuA92QK8hSpoxCwZ4SD2tb+gpsGSaEEEiQ64qUPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0efACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQuw/8D9IfXKgY/IqP+xS3+cqcQW+d2BCjV2XYomPF0W1hvx34CJ7R\r\nUoNG6/oMD9No49LJ18DVmYYkHJP2g69NYCSL08WHUXYfZaQCDQNf3HWnhuvR\r\nKc8M7rsswWw07wREWY1XC0eVMLHH/+K66QnMSfowMp6LJD06kh53vETsX1Fu\r\nfovOzeQdXKjzfgysEGpWyk1ESdHqYv4eSvk74FTX9ATqfiVry0dAN4qwx4Ik\r\nOkntBVRBYmVu+D85Brd4w0PBONcEPYW0DyA9PfNaAXLK+omzgr0HDaGQnNvu\r\nhIaK+9OIfHFN8zI8soYyiqQ0QXUaoez/CoM8bn07/fxyZix56IjlWRyhtwel\r\nmuOhJLqoBZGVcZXUO2nhYV8h6+o/kNBS3kSIUKx9HWgyl5nnijcVUNH13vPe\r\nq9w2akcB+nh1IF9k2Ehxq+5lXr3mS1GCIqISFSRssgnFoU37STJARL/TEPdb\r\nQE6xsUCB+fVZUwsU5eF88Vt6vKoZdyIPze+xQwlYjPlWY94TrHdL8AYPryxq\r\ngh4WJ7Cu5jUxObRCUbg/Eao+x0STE2JQJoaKd4UJTE2XA7ZbdMhmdpMc9c8J\r\nIZvuM7jIPLRZ8YDtbjik5y3JydtFMxP5bIxRjzbVqn3sYyLQZWUNPoHe6eAk\r\nEkMKtWG4Oq/9cMoh2lLG8ZB11weW4025rLg=\r\n=scm/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c3f9c47a1b8fbcf554e1fce6da44837b6d412e2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3a1f46c66.0","@material/base":"15.0.0-canary.3a1f46c66.0","@material/theme":"15.0.0-canary.3a1f46c66.0","@material/ripple":"15.0.0-canary.3a1f46c66.0","@material/typography":"15.0.0-canary.3a1f46c66.0","@material/feature-targeting":"15.0.0-canary.3a1f46c66.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.3a1f46c66.0_1669810079489_0.6216106425575689","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/form-field","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.32d8a9648.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e91bf4bb337ea4f791d9e6f4fdfad614f6435c9a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.32d8a9648.0.tgz","fileCount":33,"integrity":"sha512-y57YhuICdBAuFBny8cbHYi1PdcCck//p6FbsgxbK8LA6dU4aFTbFnMkPTik03uRFztDHdSgsbFyfl7PKX8ORrg==","signatures":[{"sig":"MEUCIQCd2AvlLdiIWotXDyvSmWTXx7h65gMNYAH8LXDGHvs0ogIgTyqV57yYckVVDNlpoLD6eJ08G5GVmBlT8+1tlGa7NS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOSJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcNQ/+LztmOWGXIe0qy6hjzFWxWCEidjHOXnY+0WBUdfnrJMia1c1d\r\nlAJj5IfTtsVsz06D0tzcssSNYAwGPXPP4vKnFntP9H6moNFRvHDDKr1q95+z\r\n5ihKWsn4L+Lb9HlmSVcCnuC9V9EiTx04Onva5LyODfpGjclrNNdd+Iye7eqo\r\nrdh1KxYc181AlPa4N0LsXpBPJ0bkWXFO8oKtHHQSCnfbhQPKj94WTeKFHsmY\r\ndXU1HjjgPX/KNakrrLeevPhU39hqmd26VoYUXcC0MeSXQSQHFRWobOsd3BOg\r\nU9nKZmjO76m/hsbZwoSPYpSSOMtToHa1RSzYxBb6k89gd5ThcCvw24g7Usql\r\nqX2Xog8oTp91oWuV4P+JfbTwn17hJfXR2aMII66XeflVTbHdz34guROAssh7\r\nXDWjnnkSHSit8vfQvd6WbJv81yNtukSnxQSJlrZLcY6Qd3zN7eriNYxV0AB5\r\nd8CWWjrelOc2ZWiJnhRtHA/tOCiiy6PH5fHriPZpGCSswrdk8gbI7hGqvvYF\r\nj6CWUPpWQ7dv+D784jhdXEfsdoA91MXuTz+cVrZfTrKEk+Fw/5P2V37ejJKm\r\nzjaNmMUVOJUDhYV2MjlFXfU9Y+gnMCuqMNDXBKVgoJ6tUdHD7+raQTzExxPd\r\nqCPbaL2uW29QmphFc8RMjRIMogOmsuscJ0E=\r\n=+0eg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5833a540d2f362be3d86a707323bbeb6cee2c627","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.32d8a9648.0","@material/base":"15.0.0-canary.32d8a9648.0","@material/theme":"15.0.0-canary.32d8a9648.0","@material/ripple":"15.0.0-canary.32d8a9648.0","@material/typography":"15.0.0-canary.32d8a9648.0","@material/feature-targeting":"15.0.0-canary.32d8a9648.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.32d8a9648.0_1669915784946_0.21955995277433593","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/form-field","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.03618ab70.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a323997d1d2a02348f7937f3813182ec877dddc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.03618ab70.0.tgz","fileCount":33,"integrity":"sha512-588IwvgEB5t7Qx6bonQbXkmG9QUZSrmwN7AQC5QwUDIzxULnQDkl5xpjfu9jRYa6eqjHy70kBp01/PI19/Rmjw==","signatures":[{"sig":"MEYCIQDvJrR90D9EAhsWGAl3svyfj1Chpq+XJ1eKPITLN7qdEwIhANr4I7HCtmVZbFcc1OuyOxFdRrHGQegDuyaIemLKQz6Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRSfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAVw//fQ69yzAmWNPAofCbD0PRQ1GLG9ozmgc3m+GPCOm2pH6fczXq\r\nHnjlwFqFNjiYWX0kL+kVhoceVbDK+tBvq9lqswI7mzVQI1FN60W3WPzE+iuS\r\nJNOA+QzLxEPNRj7MH0K9CjYrAe8is2iP7R+u85UZjhrQvrXvy/Glr2TxjIru\r\ni+Zr8NXPMHUsuUK6VrzTBf65n2LD5Qq7E1LFnw/37UTseChYZPPVrJC/PTsG\r\ngETw6CpkBciv88mbbUpygReq1eJvlP7HPTmq74HZaqRoYOogHFGVQuvCYvde\r\nsXUfuZujFsuqEZh7IV8NwhoNt3ZLie1RPkBE7zrwTCoQ5/8AJQoYdwAx7VNi\r\nvdA6WJVtZCyoBydVtJnbO8dPFJA4WSjvlePeIXuHqQAwFl5skLOhDTj2xg3j\r\n2Aq2kRUDG+G+TICz3aSQTkLBYbZbAXq0F/WjiknDgp06pCqNloMMWnriL6L/\r\nzM506DjOTC3m5kSMmDdUDTwgpHUnde0hd7f/64/bNvS9Y0Kudrw7Ol1WfSwe\r\nMKbgpIkkTwgs3zR+AU63jQxhXimzwBueyW8RfykVXMEV5PZkCzpYQr63gY4E\r\n3ildJc37CO6yq3hCc2gyVXiprTJdavFXVdCXw5ev/uO7TK4n//BZ1ZTmW1ol\r\nVGdlmQggTQrqTatDGrAUzwwjPFOYEdyygMU=\r\n=iVOQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b7755627c14a2cf095b6ee87d1ad15c14430ebad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.03618ab70.0","@material/base":"15.0.0-canary.03618ab70.0","@material/theme":"15.0.0-canary.03618ab70.0","@material/ripple":"15.0.0-canary.03618ab70.0","@material/typography":"15.0.0-canary.03618ab70.0","@material/feature-targeting":"15.0.0-canary.03618ab70.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.03618ab70.0_1669928095740_0.47083921716602606","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/form-field","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.68aaed940.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9364d5ccfc03bc65e32136da99fc08e30b654a59","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.68aaed940.0.tgz","fileCount":33,"integrity":"sha512-r2tzfU05n53s+9x/kL2ImCRu8tCYsoIPqn3s3yiMfXQpsAcCIlUxnNUAmfFpT7SQXIhg85pBmqP8SpDRo8LAZw==","signatures":[{"sig":"MEQCIFvo2w9W3kIKgeGnevz6mOCng5FI9i7XyPgMTZ6UH5yrAiALjOClufqoK6WBAGuZ8QG7zEpGzQjgrZ3KVIF41BBulA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRuXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQTQ/+Pz4VgeOsjd+5VG/r35Lyc+4UHxlqX9mlTd+IjfglAYx9pn2Y\r\nmw2Szixr/CG/PMphoclX5BZZc8a1s73wEvTXyJ/TdaVERRyLF7pLbS97zK47\r\nPEnVMf+60+IdDwxR41mjNSt77ZQcXFf+aPEMEaAdzyuy46fATbelRzv/zmAB\r\nwV+GACLz8876Ql+Vh4pevbdr36vl2F4j0hMHzt5xebZe83MXNbzJsQq0yD3g\r\nV8cmfRicDvIBhHqfxJ+xVsDPKsKBMazRLDBq0MLPEGmJdVI9QHZUvF2QQ6zY\r\nqTufVu7b/tSWTAJCMODd5NQxJSDcR4Wk0WbbldMmaffuodzz5S0bpXjuV7Hq\r\nefqLYVV2MBzqkqLUcYoAm0sm6UHA6Wr/PN52cwURkWhVvELfpNJ/GScg+cdK\r\nc0IeWIh6mv8ZZd0scZHYqV6z7nytyJrqEQe5oHn/CrA0ICJ5IFqVfc/cqLK6\r\nOwdZBXnAomnX/v6y9uX6KcvZZMGpG07paz0K3nLFQ1WxD9GIVh7FwVX0OGk3\r\nlcwbXHCfVF/miPlAAMNdQ7VujP2LSgR+36lOf6ao8VSGrm6Qi/5953b4vSNH\r\nizWE2VrcMy3zhWEj/helNmUuvNxr7BWUqh6XHjfsb7lqDVr1CDqGdW6Vlktg\r\nMWsYwHzCZ4TTl/dROmcc5W081xtkBrpDDc8=\r\n=ZeWr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6092c4f3bcdf41ae7f55d37c6ad51793eb8f040d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.68aaed940.0","@material/base":"15.0.0-canary.68aaed940.0","@material/theme":"15.0.0-canary.68aaed940.0","@material/ripple":"15.0.0-canary.68aaed940.0","@material/typography":"15.0.0-canary.68aaed940.0","@material/feature-targeting":"15.0.0-canary.68aaed940.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.68aaed940.0_1669929878793_0.8099916048256024","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/form-field","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.f0a0bbc75.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76d13b0a4eedaa59c702fa45fbbd8c2bbd66ebc2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":33,"integrity":"sha512-vBfH7UtA4RIDpiSkuzWVYJEz90Oxev5C4nY7aGMpZyn2ycLkyRXrlMGh7hpbIa3jmeUiUgip12aITkJ951cWjg==","signatures":[{"sig":"MEQCIH7tuSHNwe3GoojKuJvL3VSBKdtWwp/FhiPfyqT3C47oAiARXRCBJLKK+Rvfp06ARu/d47IWa0vK79frkMCKxE3kaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib8OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXQQ//fptHZVNL/XJPZJf+aKuORff06OKcM3Grji1JpPtKqfuxT+cR\r\nS4nXrXG238nL4iEDv4z6e0Ds6dscA4EvO14o2zNqDddGGYce8mm2Yu79n24K\r\nrhbGiVy3t3Lqj2pEEHHTdVOcvN9P5woG8syxlwKGD5CYHamuJAHQ+n3gl+x+\r\n6uRFElQ+oOIUDCBNd3GGaNGj7jTTtzuOyE/4AjhtklgzSzrhrpGFQc55W7tJ\r\nqL+8DXCBE4FOsokDlJj7YBBMoXC0+ZjnFHFgAFAOs/gUqIORujjnDcwNM47P\r\nm/Fkxs8hR18i8DJaFYPmcf7aUl656ARX80KaMc/HoSeIUG1x0mRCR5bZO1KE\r\nhQl+1ivpOa2RtReOTCPMmLI2bJ6UuABvdmuAXTU3ci9ZphBEJe2rKA+jS/4B\r\nt0boY5LnZS7PKwxbVayo3obpk7klQIGql1d6xO/QqM1E+X5pm9ccy2qAOIUI\r\n5bepxfYfM3mGh/S6hvzfG/XMWnPdnRAcIh/JTnTeuQkC4VwxhXCRiey9/vHj\r\ndM7qeF56Uwts7OcgCMa29wZfPJmOR9lHDBegVF7JqayucsXcyrO1AyLUIqlr\r\nVAe9UyR8xwA9Rq/2kZ3If369O/3Pb4BeYmmfN/eTNeAQ958uLXNWHC4b39FZ\r\nPnMiCTXTxHtaztTpLHGTmNVjwwJTwUdVQoM=\r\n=MNgM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5111125522be9e3847929d9bbaf323f31e9057c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f0a0bbc75.0","@material/base":"15.0.0-canary.f0a0bbc75.0","@material/theme":"15.0.0-canary.f0a0bbc75.0","@material/ripple":"15.0.0-canary.f0a0bbc75.0","@material/typography":"15.0.0-canary.f0a0bbc75.0","@material/feature-targeting":"15.0.0-canary.f0a0bbc75.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.f0a0bbc75.0_1669971726338_0.08780515231549191","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/form-field","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.dd99c8764.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ca2e5f52911379a1c242e03018c43a71c60f934","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.dd99c8764.0.tgz","fileCount":33,"integrity":"sha512-415ulrjAQ1J/wjfUXvu52OLOb2wTyjh/pcdB2oKLjLUhmsNWbvIfNIwk0hDGPnSHLJmLoq1P2irkSWtgWPa/Nw==","signatures":[{"sig":"MEUCIQDGtB7tAovajVyYJVM88x4zQRJp5Pn/IBLhQvaD49WQ8gIgBSbTduitbcfLcS1LawvHBjoF5aYPRexAU3JYcAERjDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigU8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0QRAAhOQsd63PdDaK4SM5IySgW26+by7xQh7PMOrMpaZcK5H89O1v\r\nBzIDhkx4HxIb/szL4Pr7UJohu9HMCXQpkiMLNGs61weeOFpCt29W2Dp09FV0\r\nc6+uHGHnBtJPd4Ql50kDIvyet9kDLKuzjZB1cnvJ6iwMibfTeL4uIZ3vxkxf\r\nKpWbtrGOwlc7r7/JOUQl+RXng4DCLCns3sHU9HxqFqgPJCAgV/nKpqulOSg4\r\njPqv0wCC84yXj+x9bZoAJ1oGw1rvtoXe8+mQUE+MFvgr5ranCyphBKhkOyPU\r\n2eJShibhgZyaqLrNufp6Mg1Ekt3ktCSNLnXn/W8FXe6WIeL9zWNxVOiZNkX0\r\nnRZOMRNwUcXDngyWMaY5om3M6VlAyL+vXZM+wy1VfXUU96oOlBmGQLoCG3TQ\r\nhNdbLIrq2cgHatvkrB6TI5qPCbZjGT/+FJo5abALBOVPQKWVV3WoIizU42rE\r\nJBErRyKV5MkPwXRBOQwS5YwMk8w8//cn0755xyk4UjzWRP+VN5B3l4ei8wMm\r\nYAK3mhc1wCqb+ErIm/nMU/BA98qF5XpH5hyrxKj31PIqn84pdSbNqp8dAzCJ\r\nJbqG40xStn7pDH/KL3NletBfjTKC2R9dTin/UgONcB9+sJVQZXvGShttg0Bk\r\nt/8Qi+kctbmjF6qLyRT/M3Wz0t1LKl4CrcE=\r\n=uowr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a9ff7973c7dab53b620d5be8d56e0c491cc5e7ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.dd99c8764.0","@material/base":"15.0.0-canary.dd99c8764.0","@material/theme":"15.0.0-canary.dd99c8764.0","@material/ripple":"15.0.0-canary.dd99c8764.0","@material/typography":"15.0.0-canary.dd99c8764.0","@material/feature-targeting":"15.0.0-canary.dd99c8764.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.dd99c8764.0_1669989692587_0.6557340941713246","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/form-field","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.fabdcca3a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0e6674268e1e68f52f7e8e9814f20625d0f50ca","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.fabdcca3a.0.tgz","fileCount":33,"integrity":"sha512-XblRaHGskTlFZ8u7D6I4j46bPjtMNd+WfT0h8+P/hIiZ+CvnK4RVOiqq6AODQNw4GUEh+Ln6oXhjwun+LMpslg==","signatures":[{"sig":"MEYCIQDOQV+yEdCco/pzFXWhOwtGLxpj0JPY1aOQG3brTX4u2QIhAIrBuoV5ePTj5EIYXogU8JpMFJ4VqKAmIbKU/LNxzwbz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihSsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolgA/+LpzkHwB+IQey6PWGr6UmGTOUl3fR7MUmdfap8XupXKKSYn5i\r\nzKY1Px5sgvVsjKM/LWXDkq/FW5Fh3JHQutChMzkjdvW6q3MNooI55Rxemzqk\r\nIsP5AbxePqxl8PmbXKipqxjZxQXRhBFHA0F2rNRAx69fAemyCgkgniUz888b\r\n6NFUZrfnpHKw9CD+dG4t6h9jV3GrLCokotsuogRra/8ERU2IGX5axewZb/ql\r\nCQnTQgkSQDWk6q0xC5pWqk3HlSybQXoAzoLTxjc4AOs+p7z6kauPcxQo77rn\r\nHVNIN+LMiyrxhXSUVONsxHZ+LtluGJN9FiWwZ+EweOvn9GITO6h1y5Poyelb\r\n4faX2VRJv5lIOsdmvVNIu05sVDdrdn3VcGANrr4JUTHeRI1eaJmWr4/hWSjt\r\nqrJBJ1SUHNBubY7oFPeq1uhBGxeSzm4lEBTYa4KK+/GJNx4PwSpcCHVq/+Nv\r\nWLDuLrBJ75vRBdU0FAeQxZUh9dbVEYq4nbpXkUUnGIuSgh9gDGwMFVEEdp6C\r\nNL5GkoJCPvFfKXxKvDIcLZeCEFyDoIE3A3Xega3LhRCn81yYoMYhzD7uniP/\r\nANPQTaSjujcrZL4Huu6Tr1eASoZXwMDO/smue0phLYHs31wZXpJk7OzzTeMY\r\n5UPKcuYb/qdQ4TYUav2JOsaGFC+duzN2hYA=\r\n=1XP5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"18ea36a1261419acae3218fc917dab4ca111bb9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fabdcca3a.0","@material/base":"15.0.0-canary.fabdcca3a.0","@material/theme":"15.0.0-canary.fabdcca3a.0","@material/ripple":"15.0.0-canary.fabdcca3a.0","@material/typography":"15.0.0-canary.fabdcca3a.0","@material/feature-targeting":"15.0.0-canary.fabdcca3a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.fabdcca3a.0_1669993644420_0.5661732868185785","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/form-field","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.2d26722d2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5261df2ef609410ebc8722f3ead9c4aba07f5e5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.2d26722d2.0.tgz","fileCount":33,"integrity":"sha512-V8XbeOWAnxQ9huUHZ1+LchVIZ16Af6ZYp9qZexL9lxLaRATrcpvk40osDjGkFbbsg5oH1hPtPcxDZl0+KJTKjg==","signatures":[{"sig":"MEUCIQCTWW9M8W+eYmSiUGsbqXZxlHF/l7uy1hixQuEB042OogIgQeIDGxAeEX3sIv9H/KlYTSaRi04f0C18Z/Jh5fu56MA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiidZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPJhAAjPQUzbDz/qnnlYQL9qjIibF1g1l7L0FIWiQ/xez/wGXJ4kwy\r\nvcblh/kbMiqK0yGedr0VV/eUOMIQMKudZQtVdkEk/SbwNHJ1hWvuA87fsbew\r\n4IHurTCoxaYGN/R1cMPSSjnDxy/QicqbOEWIY1bJIqMtOXlvzuMFPEK/dzR4\r\nDG/HvSUWW2dLDNpvRvP5tKCLCrBy2c5sFfTqRLbJpXZgEvfrDODFZLf7XhUY\r\nTM6ZbPmBwjDOZ0JN0z5VhkQHPfIu9fxEFMS6L+WF0KEqETaA67YqjN0h+433\r\nOVtXqLCPOWSereoGfeOkyPyMB6z+hOce3uiNj61R5Jnke/XF8w2JvtognUNE\r\n/5kWqE5Y9zwVzcrXwJziOiqfv2Hwef+qexg7I4YN/CfwHSsBhdWNYFzqWOzR\r\ncoRV8CWRD8Xol1J3TeUcyenV+7M+c2B+AkOthablAtzTgfGR0NFczHUwlnzF\r\nuCI1Z6wFmXz3lLLioodzxCg134slhYjSCuSeV4YVjGw987mDm9UJLybV0r1b\r\n/zfPSFJ7lnd7WDN3BTW6hJw5PQ+OmK8t0wo14auEt2UjrKXaQwJtSwlJGcm1\r\nDzxvXtLTaFvis/o1HtznSGzS1+ZQH3jRBCVUUlkH+Y5MySNAtLpnFuEn/TYm\r\n/3KGr4bR49J/AOb7gSUexrOUanuqvICMRKY=\r\n=VZUD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"76df2659d7f71f74a86512b38245422ca356fe12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2d26722d2.0","@material/base":"15.0.0-canary.2d26722d2.0","@material/theme":"15.0.0-canary.2d26722d2.0","@material/ripple":"15.0.0-canary.2d26722d2.0","@material/typography":"15.0.0-canary.2d26722d2.0","@material/feature-targeting":"15.0.0-canary.2d26722d2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.2d26722d2.0_1669998425295_0.9002849209466635","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/form-field","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.eaa0c3a86.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0076a505591945afb52e559996e76c3dc00ad634","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":33,"integrity":"sha512-BNhS97ycTzHIwpeMu0nukkN9fUO3jTDowpfdr5nsW2WhgGt9cn8FFBaYvgeBhl1CmoCSGHXV7WYQBWYbu+kHWA==","signatures":[{"sig":"MEYCIQCsCv50OjyF0SswiWuVxMe4qSHOwcJkDbvkY+I1oHhf/AIhAN3qDJanJywbdb/TSCpWem7+6+5ZmAlY7Y9Z4oYBYkyP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijktACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUGg/+Myd7xpYMyAYR6d1KeqD5TlL37w/Kn8vCEHWlwqrXXiGg2Zpb\r\naJ/iWZ05dq0eQ2Rc5JkGluEZ4IrJb43qDpNH4CgCqoXZnW2u6AdKT5Rh4i3u\r\nLSr4qLqKu1pok5Sd84EO+sdFGLPKy6brCXlfiMXnSz1kocO8TbtngjbLoPsn\r\n0P/Cssg98npbPlWAZCU+bfIbn3xSPoIp9uRIkLaRcX4VL+M9iSQBPAUwymEh\r\nrSvfAu/LBcDxCMg4U22mODtG29sqwF5S0dsNAW5y0BiN8RL/nqHfDsC+3A2j\r\nDJJtDAvf0CWq1BBnd6rjXB8G+u9RTEOiHIoGKdr4GOhEjdozAvqOEYL7Nx74\r\nHnvQfFinTqlyZFj8XhDraIS24qbCcRfHNiCmpeJcRO27YIZWLUCMR9J2SxI0\r\nlqwmcfGTOjpUHqhTz7MEfPQCHO2e3Wli8L6faXxnTwvKeL3REBUmMheWkI8g\r\ncRZaqeW3eK3NbgbVjBPuh3XIGd4KhT1+Az9u4xuEwbGaWwAqK6wo+bG8iRhE\r\nvbXeKa5CEL4M6PSQdbh7u9YJ12UgMyIse/VtL/ry4XaD6rmSZ6WomURGURzz\r\nwC9nvUzdx7PurwlmjkO1JfInUuzDO4Ngbxf5UTeBf3Oc6Aoe4MX3AWQ+ylWO\r\nvKuiYd1awZc78voPMcNgVIUr7+YJP0Bxte8=\r\n=naDB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c54316c7c60bacf8254758124c9235dc48d44064","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.eaa0c3a86.0","@material/base":"15.0.0-canary.eaa0c3a86.0","@material/theme":"15.0.0-canary.eaa0c3a86.0","@material/ripple":"15.0.0-canary.eaa0c3a86.0","@material/typography":"15.0.0-canary.eaa0c3a86.0","@material/feature-targeting":"15.0.0-canary.eaa0c3a86.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.eaa0c3a86.0_1670002988786_0.15740602039702223","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/form-field","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.79a613bbd.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10b7253eeb7b7f22f826eb520f805241f036b9a8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.79a613bbd.0.tgz","fileCount":33,"integrity":"sha512-KCEWvPQHNZ4Fiq4G7meIov5gYteYiiOebD7UwIShx3vL/dwr1EwxJDNjj7PcS/61W6vpefMol0nbLTw3p17f1Q==","signatures":[{"sig":"MEUCIDqqloJJVywa4wAUy5qtYDToPUg9fDgWjg7NN0a/odi4AiEA7kXyBafc3NOinTMe6CZhiYJOA7+rHekLvx8SbKxsh+k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1D1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeTw//aCKiFKPtag64F6NcD+7SSklPGEJ8DNth4Ofsp1b52dxORctC\r\n8mGcWHCTnnQRVtDvpJka3NQ9ewrpuFmqX2j6Z6aUexBQke++4qHRiEU1xMwi\r\ncuAX0VLFwKQzYeBnKvXTAmeDnoI8D3vweO6khurb/aF20Lmo1YTGocBNSFla\r\n4uiW0GUiXMzuDX/maWXifhOS4RI3ndTcNfrDUR4Dkj+n7KM1sNrSndw16rNy\r\nklv9sXsiw5oz/ClTwOfb+Jx+8mnA7G21dJFMjQrzP44s0mEHM/r8JBLe1MnA\r\nw53361U0/8Cfs6+sxTLWNmooU9/Nt73iWVAryALieMqoCCqgh3max7o868mN\r\nLeDzPEKCEDYTkyprl0yI/AYTmM9xeKsfEq4fKtirn361ZA+vIzYwH0Zxal2K\r\n4Vgky6qX4sPaC7doefqK5lNoMYd5A5AU6hiqiBFKhXAloFKXdryKoRBG5/OP\r\nPGZvcEyyC3HnmaluUfpps4+Aioskejn0QTC6WDq023QtX+a/6dYxO5Soney7\r\nqZVFYpAs7QyUhc7hJ8MOoRP4wAlZZUBq3PxkI9oyM5o4N0pNm3cqBXvQQ+Fd\r\nklXeK1jhEZN4UH0rPlG6trUYmCIesQIdKcsgrJPXcReJRQVEJXaBwyFWNSq2\r\nmwH6oNtNdlJJuihNWOkCd5IBRwgimGdaazs=\r\n=7dHu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"755ec1ef0b2cccdcb0c8b888d199b4748e3ba10a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.79a613bbd.0","@material/base":"15.0.0-canary.79a613bbd.0","@material/theme":"15.0.0-canary.79a613bbd.0","@material/ripple":"15.0.0-canary.79a613bbd.0","@material/typography":"15.0.0-canary.79a613bbd.0","@material/feature-targeting":"15.0.0-canary.79a613bbd.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.79a613bbd.0_1670336756945_0.9153181928082772","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/form-field","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.c871fe61e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d8a1f4d1ec75f50cc8698cc4532f96987b66e11","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.c871fe61e.0.tgz","fileCount":33,"integrity":"sha512-HjoGrWRy9v4L6HY8Mu6DdT1LgpHmFlSefKzO53FFKufASbk6/aw2lJvcXVOSVBBupZM2n82EPpgs67/08/ErvA==","signatures":[{"sig":"MEUCIG4PXezqxE6t/t6RbI9ipOkHCCgefAaxMJ5MfMzavkVSAiEA/10lZBmZK1mEqA9BFQ4uAjLbO8amE+0TQPOYoxGyxDI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEY6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgRQ//eAvLXuggoNeRAZeukzBlznYeYplI0pmha1CsxalbvEQhfjUL\r\niEjMJDtwHEHARtfbb9q7NWbh+PzqFyXk38zk4CsfmyzJcgCgbeo3lS2tImQm\r\n7ikhn3s2mlDZQun7m95JjmkE/qAlBrMUCLqLfLDY0DB181v07/if48FeY7ba\r\n+QAAzEhwrc7MqmVN7S+ZyGMNd4t15eyNBf2QaDQFDOEGd2RpfR3fbLG/PwSR\r\nD5391Ddt2VSiRVeTIp3QOVwH8lZtG1lmFBQc5ivAD3lkeWXQhznrkJpRNCHj\r\nOTTk+Rt70N+pHqAPQRwclhjbblF0HpnG1vAp6bAEn0kehLuWsuZd1CVfNi1G\r\nQcPsYYKI4MueqxCFJPS/T5GbkgRRHni32bBCx0Tlc0THUn3CfZA5aAwf+hYG\r\nFwh1TMgsU8qPvxN72H7zx3YPvD7HGyb6qGqDMZ1AUQZkepe/tLKEHlFpFWGS\r\nBaR0iNVzuaVxupZNfXGvUfr9AmKnjRvPLie3PzffR3/1alW+is5paFGHOn+7\r\nf3k9wtRLu+P8k4xL46H9pTtjb+Y2WN1n0jO82n8peMfkNtr68BdKW7k2sLLa\r\nMiqj2H8uuMvtB6brhfyb05hsvMsrVtc4i5/ldsUFnlaC/t0Ld/1pLViXwsY3\r\nzO79/wZwaCzgtysT5JxuoXbCrdrkBYSTXcM=\r\n=uOmY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e69be4936d1304c30ff7b83af8488b43c0ad5fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c871fe61e.0","@material/base":"15.0.0-canary.c871fe61e.0","@material/theme":"15.0.0-canary.c871fe61e.0","@material/ripple":"15.0.0-canary.c871fe61e.0","@material/typography":"15.0.0-canary.c871fe61e.0","@material/feature-targeting":"15.0.0-canary.c871fe61e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.c871fe61e.0_1670399545791_0.3910089475421441","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/form-field","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.9eaee7936.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a973b6018a100eb7214770cbf34539850a74ebe","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.9eaee7936.0.tgz","fileCount":33,"integrity":"sha512-wgE5zMOaJxLm+WiAW2E1y5+XBKRDs1gNdY6btnI/jLIBcTChi1OS1OJ+8iJHe4+UXcBRx8xHxIGjrnLKail9hw==","signatures":[{"sig":"MEYCIQC39+K9Y9IdKKKOeiU7aumD3n2cYPqQDgND3T4J5DBUMgIhAOk4IiS8Rc9ky6M1X/HabM5Z9b3PV+9/PdJAOuMXuIp8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPGTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNlw//VryeJnq317aw+XyLWzmc9kjYFZy3tymPTxQ5dzTelwsZEIl7\r\nQ7NHCh3gyrSM3FNQVdRn3Qb1NvHlC3WoIF5jwTPqsr0uLR9Si95gsfP0c0GH\r\ntqbS1tE/v0grc7HRbBahWXqjhXJkkXWiVcFd3e6tt7A3mCAaJhBNSYi/80ws\r\nCNAnJJhhSKGLg4VSV24WpJ3hyWU9QZ8yga9IR0JzAJays9/em4PgoEZ1vMRI\r\nJ8CI5XX9lVo4DcS6Rjni3SnLAhQFxP0HlzR7ueKokNQJNsFBS2Po38PXDvUj\r\nlfHt+Q7PcIExt39tG70ZuuhMXZH/z8PbDatUSD00ZgGoquYqHOsGUzGXc5hp\r\nXFfY70AlApWJtdVHOYi2NH0kBkmD15LGhZUj5A5Wbx9EqWeuoPLg63gKZPq7\r\nZxWmZnzNqV1Fmq63zWoWN258+EcsKR2chrqGYlZ9aB9ZiFTB2oabpCm5I4vp\r\nG4IriRT0hJfpFOIx2y3/CmUntzlPrWSbfOIwPTPMZMhCLaQFbJ4CzVgcmywO\r\nZhthfYtSrYY09okTeSiQ+oD1TswTzO6JvvOwezk+O09xJmmGbcvlZ9k+6nk7\r\nYNHI+gI4McF7OncjUqUzipJ3KdQJsZUC5Qfdyjf1GBP/n3suQTrMThkm5JTd\r\noGy2Fp86GFQmTlgovIfCLOYBAnIbRsjmBDw=\r\n=zzD6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b1b576e68a716d1a80dcdbde7a572c11ca937fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9eaee7936.0","@material/base":"15.0.0-canary.9eaee7936.0","@material/theme":"15.0.0-canary.9eaee7936.0","@material/ripple":"15.0.0-canary.9eaee7936.0","@material/typography":"15.0.0-canary.9eaee7936.0","@material/feature-targeting":"15.0.0-canary.9eaee7936.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.9eaee7936.0_1670443410979_0.1379960102485518","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/form-field","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.1d37bf601.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0e5bb0ddb90cfc818fb13cb99bcbcc8619237ba","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.1d37bf601.0.tgz","fileCount":33,"integrity":"sha512-QqDIaK4+8Equ99FEkeW5I/3YiJKcgqIR+7eMSrbJLWMsOYx621j/nYO6OM1CvF8sNaed0UnMv28uDkE454Pccw==","signatures":[{"sig":"MEYCIQCdxSkW/gIHF62YG3lqdhFt29FFbWBit+SDfvcRL6ipYwIhAIENHVe3c+RwZdZoV2vC8ltYe31BbCtURMrMki/ncv96","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPqNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4YRAAiyAa3hz3J/guKL1Euu0KTqbxwLGTjUGACdygLssJOcFT/u+1\r\nhFYb2fic9+y1q0/q81+WKOZR6dy+zWJBhBZojPTg8HJ68lTZujMAz9PV3XUE\r\niWariP9LvZt9x+YdaJ5J7aVV25AmhRrSQQ6GhBT9pnZsQzWywGXjxqELL8k7\r\n2WmB1QAQBPY+Tc5DRr0SmXfBUHjc6wwkGdrnw83m/Uc+xvVTGKvLF8eqYwcY\r\nBO2v6RZT1dgpyhLUo/M/Z2IQPThNe4q0l6X3pnAPqvqQSJwMKS8gdoGi2oe3\r\ntHGr9U/aAi6HgLMzp4RF9P8GM2lA9oyM2C5DDbeT7tJktRlPTcuJhEEYVFfL\r\nSp6UoXFtGTxxCl3BmEi1lmhM8SwZZmbhHv76wnsxZQ2N6ofbAu+B9an86OO5\r\nWIylJ44uqdn66MCpvva71Dl9c/KvWhuvBIUEkgCUIPkDwXJdcJXSF+DzLjVE\r\n9EGAN8VMSLMOs58UNEluFm3xHjJoShHVpDJvsAXPHG8N7J+gX+PihnDgkdKC\r\n3AL7QLw7T5YX77K8u3deS0iEHrR6MA/ksztFqoYu/ERhZhP9h9kBcIkjebP1\r\nnFgvG3sJ2ezyaBzF7V44hh6cGgiA+50epi1u6khjg3uDG1TGYlljz1vJafKr\r\nLjisNqC3Q+UYvGeQSmDwMA3RTf2yhhpjXSk=\r\n=Zkom\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"747a03f19fc88f7a2358a382989e729013e06df4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1d37bf601.0","@material/base":"15.0.0-canary.1d37bf601.0","@material/theme":"15.0.0-canary.1d37bf601.0","@material/ripple":"15.0.0-canary.1d37bf601.0","@material/typography":"15.0.0-canary.1d37bf601.0","@material/feature-targeting":"15.0.0-canary.1d37bf601.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.1d37bf601.0_1670445709154_0.5868834664705329","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/form-field","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a5fe069d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21ac217d26333357e03d77d6bd9019e6d0910408","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a5fe069d5.0.tgz","fileCount":33,"integrity":"sha512-4l+ct+aSzjGiWX9pURJ8W3dIRIoVygDWarSgVzN9eLw+9pTKPk9HT0dQLx7PljIt8R2dnPmNcDt1kiagIbvwzQ==","signatures":[{"sig":"MEYCIQCurtbDbD2U+8SM1eJJAN/OzWb8QQBhvzP6k+eKCeN+VAIhAOgnL0kwONyej8Y0QP1/y0W3RA0822CW0B/kIRftWgSr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4ImACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqo2w//YhNXt6gqcoPz8E2YXEG4ky+tc65sB88EstKsn6Gqk25wtPGe\r\n06WcNodh6pAXXPEmVv/hsqpve9AIl2vrli4ECNVz4lL3met+zU2tvOU5qHNh\r\npLI+jt8Jq8W5BlFPFYXIVuGlEoGehqPez4wl2oxB6jOf99VYs+JZrRA7s/6L\r\nIhrVqAc4B+dKQd1nq4mwfqwLKxcRYllD0VxtgduhrYE5e5NpCBJypDWw3uL5\r\nlGCKsheYRMcLddtHx6V+fTdlt5tmjChtBEblXpcbjgJgKfhk/t5ATb6Jx7/e\r\ndH7Ya0Q+kREIsfJlYKtsE1yJxgGsLgi/bw8FQfHc6vcEA7SsBS2iLpKuIM3K\r\n4xsQtEZmCQlcCilNf+r6hZ+xW6Kd+fULUW97qs0Oi4mn+jJs5nvw6uUBswxP\r\nlqjqowApX+wskjVsUyE3hZ26m+JKrlPh2GZG58e+KzeJI8Qccwzx1PyWk5uh\r\n2oFKzPA7WoiBaePrmRvIKoS3yhCkJw8wHvmsx9T43il4SKzW1H0HsPhkCFsm\r\nu20o6zl5oYqo/UgLXEw8hHI5AF7tEDu3QfCSVdyMrsBjSqpLXHfziZbrr20M\r\nj7pmcS1gs4VHxEy01E4oLrl6lrTogou987C2EewwKIOifdapAhz2Wt+WmKg5\r\nTTqsvoPjoj3O3H5i+RqiSIDrL4sV7aueHlY=\r\n=BZ9c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c41dbe93704a7d03ea10d8f1b4de13fb8c6e19ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a5fe069d5.0","@material/base":"15.0.0-canary.a5fe069d5.0","@material/theme":"15.0.0-canary.a5fe069d5.0","@material/ripple":"15.0.0-canary.a5fe069d5.0","@material/typography":"15.0.0-canary.a5fe069d5.0","@material/feature-targeting":"15.0.0-canary.a5fe069d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a5fe069d5.0_1670611493797_0.6083394317670263","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/form-field","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.ce8b5326f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"951e9e95bba5749e3c27e63c753c31eb6f3e39c3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.ce8b5326f.0.tgz","fileCount":33,"integrity":"sha512-ZVfPDuKsUtifq3KsAICAPByuCgrX4pFZK7e6zyh+pfLPZ4I8yulNxhGbfh3ZFI3GQXCW33DH0Ev61db7QMm3cg==","signatures":[{"sig":"MEYCIQC4gDBi0NEMqq4LvsXH0y7fPYqSP3StiRtDL5cPNWoKAAIhAInWpDYHi3T8k9fDbS4jHd3ffA0RRyHvmfWy2KwiQycv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8VHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfaQ//TZ/nkcmJehuj5PBi704mNGOjTXij4tMh5YouQkM4THJYGYxv\r\n70xqiLWnVmo6WmJa1tRHHLHqf6je0z//RpxMPENQxECVPF91dEWOPHhsEMbd\r\nkUkRTgLvd6p+e7F5FGOA38ug8qfIpX1lrWZp9y0M/xucjrCd7u2h6GIn/+IO\r\n2trpWnl2yb7sn+cyf7COEcR7X8ZfS3Ta5ANGdh6pexq35FJ5pzyWVd1Punl/\r\n74Nk8Sq0RHMtm2Zc1tS91lgFbfG9r6zwI8i/fYJEJlnh9b4RAI0LhC0IUevo\r\nh2isn9KVp8in4qlu4pOCouSVqVn2ojzRuWBgw6w9RMO0O46ZM+Cxzfh+i1l2\r\nvAuSZTB68vLHrwQyi/gHXY0B7NVC5BGQOVTX+YV5IkGOu3w2VGm1uhsD7yax\r\nthSJIt30i9Uq5FyNpmFrVhLS4fbLyLI6aCM+C+fyp5+BT07ql6oTflmGHITk\r\ns7lVHcqx2bp0kzrR4NN9HISpAngP+v7ih81HVTJ8UqpwCkp7idJTvm0B8pbr\r\n9tF0ZPZbVLV+iMNhgNWwMAdbeVrvVW8oxAr+jaC6/xHggg5IGktdd3r3xQ4c\r\nMXxbUTQYVkW07G07dfS3PycH/LXFgbZ3yiM5DobGZM/stXS+MjXyohyQZcxm\r\n+ozAniqDfbqlLfx6u2l9yPaTTi0pNzsmqQI=\r\n=ViWC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8ff7f9974a16b8178376e943748356193d364587","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ce8b5326f.0","@material/base":"15.0.0-canary.ce8b5326f.0","@material/theme":"15.0.0-canary.ce8b5326f.0","@material/ripple":"15.0.0-canary.ce8b5326f.0","@material/typography":"15.0.0-canary.ce8b5326f.0","@material/feature-targeting":"15.0.0-canary.ce8b5326f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.ce8b5326f.0_1670628679594_0.5363183882086024","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/form-field","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.43f5323bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58d58cb4fc774f0c21d5f1f93ca509f547336896","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.43f5323bc.0.tgz","fileCount":33,"integrity":"sha512-QXG/97AYvKqeB0ZZUaAx3Al4PTuxWvCHu1+JLzH5yRofzVIiKIw/LbtjkdpWXTYChDIOpqEGpBoHsHl8vMGvJg==","signatures":[{"sig":"MEYCIQCSmDXpXDRMZGeA7wSwSaPHJXUCULU8DnzM00bv/jJaSwIhAKLu201yy+AoOCrUiMOqJw1rD0uD4mv6gQBJnPtht5Y1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1rnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorHg/7B/1/IO+utViNuepMt1Hg2zkGeZ6MUjUqQMZ//8eEE1uHWZ9J\r\nfvlJwu+mGa6n7OwiTVxIK64s7LJC7VR1RrYtpUg7XRpiHtZe2clEGVtrxI3B\r\nF+NFLY33u9fNOC180R7hYCTZIhTH+oV90wsidl3VaEmkA4AuRxOoGBRHfA2A\r\nsV2zKRpe+Wj3RSFVh7+QdBbPgivNiH/NXSaPuBxJvkuxXYf22HZPwPcKlUqf\r\n7K6/ewuyWAiHsIYlhGCaYX6CnUCr/SoFG50XfJpYDqaZjiGmVFyZ8h9o38xS\r\nXSCRa4WJ/48eIPJFrQXfOkrkuveIIfOsmqyKALlCtGy/2FJW0YvXmp8yCAlu\r\nw4Mexb+Thq2jfU2l+DcKHRZkmIh0obNK8X9vY/uOuh+HNJ5al6BRBK2FWXaO\r\n0SNqp5EChHAI0uNwfgBUTNXiXrjThor7A9CSxaVskf2y/WEg+P5yavA4hmoa\r\nzOJXEeC2VC2IXkMSgLErQJ3EBqOlC9Z9cGCuUnVqCDG/jSkLwub/+0rCW2Sv\r\nD9mRUhWevhBc3aQ4KQBsNJItXGgmM14ddPp6kwgSnaPhbvh7WFgTT7mfVuY5\r\nxHF5nyd/dfHIzzUSacS3Px5qJjGhfkCjlKB8dAak43eUAij5AxQWgZ7FIasg\r\nwUqnHC8GFp8midX1FX/3aa/00tVva0BdWOI=\r\n=/N0J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"00be798d56184d5daa74ad6f53d4992db90688bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.43f5323bc.0","@material/base":"15.0.0-canary.43f5323bc.0","@material/theme":"15.0.0-canary.43f5323bc.0","@material/ripple":"15.0.0-canary.43f5323bc.0","@material/typography":"15.0.0-canary.43f5323bc.0","@material/feature-targeting":"15.0.0-canary.43f5323bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.43f5323bc.0_1670863591678_0.6343309699212365","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/form-field","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.5490e32e7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7498b0e98401229de124ae699de6b8cb0689f082","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.5490e32e7.0.tgz","fileCount":33,"integrity":"sha512-DRpGj5moHIgPi+qC4518AOBqcJCQi0K/IbCZHog/fiMO+Yp7GhuDk6HIxBdtrTUTpfSnFhz0VQyk135EJkJy2g==","signatures":[{"sig":"MEYCIQD2YOQ7b4nCtH6MaUO8MOqR0QI6RGYL3JnqOC4vgGUGPAIhAJV0a8+f+mDD6q5czyeXqHGJGrZ5a6pwnDh4yfaGz6Pq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl161ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQpg//Xdj+IMYISrTNUgVuDyzA59vJ3qqvdXdlz1R7XwcREUv10szj\r\n/SpTN5re7ETgy4iLN4HOlNpxQNqLuzh/yk2FiU2OyzZ23ge6ApPhzNZc5e+h\r\naPYv2dZ7dvocNDVP82F81g3nhiWpPGcyQRUJnvXvgdnCYVKu5Snp7ZZ8+8ZA\r\nSkodsU3xMfXdXLlKhi2/0QMZZy42CiY46bgOblxR1eJF9SEjVgte1jBcA0QL\r\nQlZWGwW1QMEK5imG3dkPmozZ8r94JKCQyLv/RtY3hD28YV9Tur0i9GvSdWwz\r\n7bHGtG35ToO95RYAigOv7kfhPowZCJ+jCd6xVERlVFr+AkgerYfN5/asijkL\r\nc/hL/VAlAKIn05h2gKeN1dGZpzl8Rt7r4foNypQhyLqjWl+50fb48K4ATbYu\r\nyG9ectAJXsfcak5z+Ob9i81VD/83FonH+BuHAYt7/xwsYVxe0mHkQtVMyQbF\r\nPQXCWar4skk/IxiY6orFGqh37Ii/WvXlyyETkj7xq8O4dTjfPh+Wehg4UvpJ\r\ngob+k9PqTc101oZThqBfzmgklBUh2Zuov/RR+ITbkjjvvL3RZ92wafS2h1tD\r\nXubUEWsvMbJ4YVfUX/BSTagsFWNiKJMOC/+gB0pgY/uAj3Jv7HEb7HrxSm0+\r\n15k/lvHzRZYBaNHCcIBBbz/DyxKKFnq7BeY=\r\n=E6y8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"968b84204c7a8626355569e2b90063abd574f7a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5490e32e7.0","@material/base":"15.0.0-canary.5490e32e7.0","@material/theme":"15.0.0-canary.5490e32e7.0","@material/ripple":"15.0.0-canary.5490e32e7.0","@material/typography":"15.0.0-canary.5490e32e7.0","@material/feature-targeting":"15.0.0-canary.5490e32e7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.5490e32e7.0_1670864564920_0.8502273807406069","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/form-field","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.817002c29.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"632c11c62130ad4d3247346b39b7251ad9e41169","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.817002c29.0.tgz","fileCount":33,"integrity":"sha512-zTKGce72dXUmDJBRjp5UIQjECVVULbyZlBO0FUP+j2YoTAaOR5xnucl4BGRXvLjlqea/5tvHhyXIcaFnQOrEeA==","signatures":[{"sig":"MEYCIQClD1BNcTgVElUqF0XkuIScV39zhy0LgcLWdhxrs1KybAIhALhit1TmLyBCRmiuEty2JMXx3V1RiAt226hhMmqYjMxa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPSfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZDg//eUW0dcafENEcNoZu6IxDaH5HS8udA973aK08AaIdxLm4jTPl\r\nEG9imds+F3pzRpcxaxm83ve+DnkcGy+V56EChPwias9M/inIA1foKAuziQRW\r\nRPrSWMVKXHs43HyiqyibqmB5Q2yvK7EHxuLBt1S4LVMBVnqGDOpWfJmIBXlG\r\nONlgCEasQ70YZT2vFVKm1giiPs3VvVgeJ4A+SmuiarGNeoKBDwOgUoxw0X3v\r\nHBjBJ6HtowNnL1oSUTqlChUXHBqeQioVSNjiJGDZijYOLODfwbYP6oskydsc\r\n9KzJvHyimd5Rhvznkz6avUxexs6nhGTNwdaV4zGCYTn7Noosa/3kDJ0d7PGh\r\naEpouHX5oFnbwSvIRchBUdsH7r85UB33HhQvaJiyBjYy6ciIj9Hgeb5HbLl9\r\nwQbMwJ10+iU7A5j19pgZ0z/ifyIHeHsmfrW4mx9pZOuHjof60t8u2ehHSACy\r\nl5yDvc0ecORd+zVjF8OWkj9HCEcraL7KFLGJ0FL3v4+nOSlyD7oqlUQ8c77W\r\nVFxINvF/BzaychWXvVBMLniQ6aM5oy+KouJ6jj2adFP25QHf560vvMRtrqUu\r\nwB7NCXb6+/fSutbEo8TPwjysDbbv+TdQDmCFLsaqgdBAfDv9av3MF7BTt92A\r\nJJ6mUfM00OgEQejuQS4R7vj81EVk9CFdsmk=\r\n=q6B3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8a85122d0f4bac7142c66fa54e2fe9a569e7c4a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.817002c29.0","@material/base":"15.0.0-canary.817002c29.0","@material/theme":"15.0.0-canary.817002c29.0","@material/ripple":"15.0.0-canary.817002c29.0","@material/typography":"15.0.0-canary.817002c29.0","@material/feature-targeting":"15.0.0-canary.817002c29.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.817002c29.0_1670968479132_0.29667718482509065","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/form-field","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.313a1326a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"386131acade8f57b23a456bf6d8eaac80ef729ca","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.313a1326a.0.tgz","fileCount":33,"integrity":"sha512-2jvWCUEOVo6U5z8E/Ac0kM7U73F8bFQafJNZXuUkZQ0GNlGiX/TqrkIstIakxGfK4xXQ0fu1zSoeoFyZHXtEEg==","signatures":[{"sig":"MEUCIQCWjAGzJTrC3Qp0TYkRVVSr4x9+MyX01Y8t66DHDQOsxQIgIl56ImMCyNScTcsmLgJNRzFodRge0QPHLOkmaspxbgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaWBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQ1hAAh7dbtidQJ5fTw/QmrGGaEv2XaLurjXHXxWcm1itc4/dVthV1\r\nP6ST1V/emGTDMiS/NVNLmERKPtX2hJkVfPqkrw/rju3Y9n8XjxXMC0YiSU6k\r\nkUskWsr28SSX/PJrVFmDxEEIo5m04FSx3r7n0OxBReJCgI5rMVhAAmIlThjD\r\nXPEFbHG9v98RGirN5AZphcvriy0q8tGjo9dvLpDfvCKlRXiiqH5ksPxwVKV8\r\npn7yh4ngQ2bzMYTRKI3h8OnUlVAQSCDDMG4hZ+FrYQKizky6vpKezUzipAm5\r\nQAYrdrXNLoQmkt0MvMHjaaJN3PxTqDo/X+Zg174CR3up5QXbQc6HXe7lnkE0\r\nER5xZb5ROuO3yTFIn4nHI14q7mHjdP5yETWQ/92JuNxG4fyDL6fzZcpunjBb\r\nYGOnQUP0VTcRavrQ0iW7G4ijxUiQD8OxV7KmGIozdFrRIRIynya/vLZEMqky\r\nLEew+82IYAysoS2YdiFyGXW3Ut3sMpuwnwroHj3fhM6Vd+k5qmb6u+KwV8UI\r\nqEJUoCemq3PVHBU91cboWoed6u1a8YdLNvaLJqRYyNLOf9Y4legg7SZvPM5B\r\nja5L6Y6SFMTZRodnrcXFOeDPssK0ckCYpEbvjtU7Hi7PWPvlkdgkZeX0gHvK\r\n9eRq/IECKBwpaKhSBhClLqoq9l8/JdfBegQ=\r\n=RRSl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"899522d523dc8a23968f530bb4de8698a5b0e78a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.313a1326a.0","@material/base":"15.0.0-canary.313a1326a.0","@material/theme":"15.0.0-canary.313a1326a.0","@material/ripple":"15.0.0-canary.313a1326a.0","@material/typography":"15.0.0-canary.313a1326a.0","@material/feature-targeting":"15.0.0-canary.313a1326a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.313a1326a.0_1671013761245_0.12477270555562847","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/form-field","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a69c14e10.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"445c3b750b636a3585c16dd7b3ddc0ca8cf58ba6","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a69c14e10.0.tgz","fileCount":33,"integrity":"sha512-CX1c8z46XvZnGxeYu39ReEQqVnU6qZWxLLgOXoXWauz2R66FCDxdGC0k4gHmz/0e8HlLmHmV9tMVxqjOdQ3iYg==","signatures":[{"sig":"MEYCIQDQ3/xumVttbIpagQke4QsI9jqeR19G6YbICrhA3pbGRQIhAJitCWAsChhEjWF6d27Jxbpif1pc1YkGKmBX4cDAYT1m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbE5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrR/A//cGR6LTalcEIg8IveaPtXizC7M8BGNsJmbeJNh6zBTK86L5us\r\numR89MEiV9kCF/+VSYEKQSUnryHlO8ci5qICZVBylHBrgoGr1OHnqhV6M9nu\r\nov9AbJbNXGzRQVK3i2q+fOLXM3X45/hqDgaUY0R5LJpcQk91wBvV+CfTETSG\r\nauSF/XedQIhFK9IWNDra5i6yttATzATNQxew0AcJzjhNBjo862mVUgrAOeCa\r\n+wvUmkO7MBiMOam87CDGJK5F0CDdnKvV1MpOIMKCnFSMZVfCn3d9kRMmOPyB\r\n+95rkLCqeJz+9ij5jkn0JU2gj/gAu4iw6aSvmWcdP+vZG9gx+MMVphozWnyG\r\n8DvvoQ1KsBR98dLRyfey2sFR6fB+PjqjoQp/QxGO8rJG+w41sxFd0xGFV/Ya\r\nPbCwu6vU+nXGs1hyTvViWCiModvWM/a46bSnVAuWRakyDhB7bpR0wD22qRiU\r\nhqWYPhUEYeNIsXPMkVmkNwYH3XZappR/VKLzcQ3JRSXnAHpfaW/Oy52czI7t\r\nHJn1lVa0MWKXPOl9CVBs3W2NKMogWHeK5casJ7xxa03mh9+1VMLAk+/sQQJK\r\nYelUXG0HtChT9E8YGw/++D6DBVoCwPBxm+vCFeV1XDPcfcQQzHe6Ne1rhVpL\r\nq6CHf/uXdXuZM/F/gNkOwdT7eWl+7mp8u58=\r\n=dC8Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"39b456415cb22d1c1b4de3d505f0e2412c1f5316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a69c14e10.0","@material/base":"15.0.0-canary.a69c14e10.0","@material/theme":"15.0.0-canary.a69c14e10.0","@material/ripple":"15.0.0-canary.a69c14e10.0","@material/typography":"15.0.0-canary.a69c14e10.0","@material/feature-targeting":"15.0.0-canary.a69c14e10.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a69c14e10.0_1671016761737_0.4075216275013369","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/form-field","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.f43e0ceb5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"369f18a0705ce5763f02144efec11353ecfab878","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":33,"integrity":"sha512-sPJmvOtsMViV2WeDq4cFGA4S7S7c45bWoocy9aKCModR53y/GJ82NyzUwclXJ2DZlvcA9Y9UQDZdOWgAHApMMg==","signatures":[{"sig":"MEUCIE70ZXvYX4wLhsfhY8jo+Lqg8avEorh/DOSs/LKZzgXOAiEAowyYh6OQcA3f19/dJhXpPsQVq+xgkBlSCVx0n2xxU2Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf2nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo26BAAouVaal2e/WpMZLk+2bo/EXzT3FyUIiYXrt+7DEwCx6vonTFa\r\nEwjEXEkzata0W0aeUNZT30h85ROB54Lx7ebWOfl2P36MqMTCBEDNl5mZgbl8\r\nxuGajT3IjOOPF9WHtYxGAaK6v0CZ8Dn70zrvwdAfJPh61zrcnTJaL/JNi+WM\r\nwetXlWE3CpBX4SJWF3BSQ5t5/LK4a7e11vTXHh9XBQ5eDfCq53otaR5n2x+M\r\nDnyFSBTI8guSMlaIA4peUrHrQHvCnGITsBp6nKzV9Y21bHDhwDEVltOE3i1Z\r\ntxs+hYhH7aTdcXRvzuoG0QSPRbqgMkfQoXLocXaYnZgUSkdkVzaLNE6ftuEs\r\nksXYX2Px+yhuzxJuBgkt03Y/H8gY3fhM1s+bbbcMjCjU7eMkdjLEhwpzK/0C\r\n99JJvQYFPnJN0WMY2nNtRkaCWX0hmQEFBtNjiguQMdMMBI+feoB9/vR6Gaw3\r\n7pV0ZEH7h8J0+ObkyRtQqxVIeVx2YuLdPNB1wpIalZYz9sh78x42Fg9bBgDs\r\nt58K7dn5j5zUYMQAkIsI5nDawTre5O1zS+rUOLAQrXWDd1AYHHMBl1JajNGj\r\nVArbdrXK9UHYbcKg+RfmZ9gzevRFFSLE/smvbCucXavGf1MyyK7MjqLuUjnp\r\nwgP/UCkofkCAqTm6FE7QjPy/qj3ZoVXq+34=\r\n=+6uE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"35662ba23c37e102fa09f72d61e38e5ce3b10881","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f43e0ceb5.0","@material/base":"15.0.0-canary.f43e0ceb5.0","@material/theme":"15.0.0-canary.f43e0ceb5.0","@material/ripple":"15.0.0-canary.f43e0ceb5.0","@material/typography":"15.0.0-canary.f43e0ceb5.0","@material/feature-targeting":"15.0.0-canary.f43e0ceb5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.f43e0ceb5.0_1671036327044_0.6044875708434323","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/form-field","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.34767110.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3713d9c33a87982e456c8d266991b4b6434be75f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.34767110.0.tgz","fileCount":33,"integrity":"sha512-lcUyHdH+eCq3Qz0H8Qo7rU5UPdPzfzS+K7KzJQyP7HZLOoLgJGmAZLxPn4Z6XlbJvLShqVqn3Bl8oBqEsyVHkw==","signatures":[{"sig":"MEQCIAbaG39gQvTcJBCNsw1OiFg4pZgcdi9x1+Jl2+hbzeA/AiBer35cWwzs0/oliobE/qONIK0/21WZSVn/kDbN0kjerA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgX2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiZw//T6JABUfXBjcnyhYOphLUdAkpEImLSJ3vnioU1VW17oV12cFf\r\n8V9iYbdk+LkyM4NzxjECopLqwLLOKAnBrZNIKmES4tBdNlVBlVX4lFhFyRkC\r\nkO1Gc93n2jywx2nWaiUHLfteZ20HGgdbGFPVSC9M4NZrBBOeqnQAYgFsd09A\r\nwU2vxr1svdMQ43QuHKlRYoJe5KNhu5H8idUly3n4w0ztHPuVtAvIRkbhIQGc\r\nRaFqhPz8iTfJVB9C8UOmPnNlL4+JtwHGVv+aCGCCBKBxj1AVeWfLmHPlhKut\r\nzc120cK/gJ1nnRo7Ngn2QOQLV0wJF2V3gaznB5FYtjNLlt3NbJZfy+hzVDJN\r\nT7IzbyTdlbVGOZMRNkMzEnySyt58ZfP6UpJAPbrL2NqFpLh25GRY/nABJV9b\r\n6mlP+VknqkpF3CTKp5hnQ0VyJmnmTDpiNCjdNnUxJwoNWbgrSuUvmfJRVqs+\r\nSXuZrL9Ksu3Hf5EDm+ynV1/Z0JPeGs/wuKm36ERQAoZCXd3R/CNqI/xdEF/L\r\nTuvQB20mt+kUi2lEMsnz/iBGrw86uGUnqCZ5Q0x0F4dN985C75mqTuP9gZ9b\r\nxfMaO8zQrCOuHJbtaxH+/c9Qm3fQVVdP4e3FHBuYzAammBVM69K7g7B6w8G6\r\no1kfWmPZXWfHkOmYofK7jJyl8W6q76yo0Ko=\r\n=JDiu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ed8adbbccdff96503e43dbe6291e95b5d2bca2c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.034767110.0","@material/base":"15.0.0-canary.034767110.0","@material/theme":"15.0.0-canary.034767110.0","@material/ripple":"15.0.0-canary.034767110.0","@material/typography":"15.0.0-canary.034767110.0","@material/feature-targeting":"15.0.0-canary.034767110.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.34767110.0_1671038454650_0.7689997926091923","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/form-field","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.1f99f3c50.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66bee8204bc43e015e4fdc05f22aadb915098fc9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.1f99f3c50.0.tgz","fileCount":33,"integrity":"sha512-Y3OolQ6lx01VcE1aB/6kA+iC5oXvkyhZh2DnSuaCWpokglhlLnF18AeA0YZC9GNjKUthpfNII3X0NOLriEvutg==","signatures":[{"sig":"MEQCIGZNB20mBI726aq1UG460h0QhJncWjzSDDQROUCiGZSbAiAzSMdFjxVMOAbBhdB3ELfVBlTswedjZ3+7t5GfMa98Sw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy6AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojDQ//VyZUirq16JK4jrie/4l2iBhRoJ2nYS7stvS2wjieeylhQD3r\r\nY2JD/V3zGLdvlLqLnESlw8Yts/n2LYRYVVPWuVrwB9Ot3Rf5HehLQzi3lOZz\r\noH/DI7GjLTbe3f2sraurs0pVy0pJekYiFOXr337j+IJvVSqFLZFgkjnentEk\r\nDpSawmSQQvgJ+P/1iGLi6VTR/Xcc0cbBMTuDAEOVVMqwbQJsYpOXO4CCtfYc\r\nZD3RXehmad+gKoxg3GwW+K9n/h+TSgNGoxCEJyRdysOarJJxnjrz4Fk0h3Ir\r\nG2B8Mkzs9Z3REth7cbDaKUjeGLubJmqUDg0ijEXalQONKjx8l7qqR/Q8L/3y\r\nefWAFP0K7jrEo70o7Um/K8N4a6Bkn+1Dd1xy/rPciOg0y8pZtVZHUyup+UVe\r\n8PSQSAfCQYV3P7kmak3Q3EB819vfS078Trir+If6Za5q2Urwj8pJ9ZFB7AwW\r\nKDCjoRH7s/tSYAGk5h9eNV6rPwy6ogcKGXO20zV0qi2D1IbRKYyp+33dVc90\r\nZBatn9SdjnhUgVscDGmxaiKZBYoliwrK+A0WvE/6q/X6vuhEvTm/D6fgSR82\r\n+jmVFJJ+9Ct9x0UcfSC21R0utodTgaIE5lVjNdn2w47OSFOc/RoKyCzcsrjO\r\nOD8A2+TKMMKpJbPrMreL8Zx34hroomLHZTU=\r\n=pynX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c9094e8faca1eaab158d26f7ca8ee4b42fb54bdb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1f99f3c50.0","@material/base":"15.0.0-canary.1f99f3c50.0","@material/theme":"15.0.0-canary.1f99f3c50.0","@material/ripple":"15.0.0-canary.1f99f3c50.0","@material/typography":"15.0.0-canary.1f99f3c50.0","@material/feature-targeting":"15.0.0-canary.1f99f3c50.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.1f99f3c50.0_1671114368199_0.703190881804189","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/form-field","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.cfd69490f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2ffb53b49e1ff4b4154f004e03b33584122da88","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.cfd69490f.0.tgz","fileCount":33,"integrity":"sha512-Hihobld/S/EVyILH9+A5rawkyzQxjQPZ3Il8NSwZd2rne6ML6TE9VKfWD5AhgrwCROBZByAjenVu+RWMAj39eQ==","signatures":[{"sig":"MEQCIEfd88hjF88UCIRMbluQf6z1zazrYMAsfb8H+7UrdvhRAiARJP/fk/G4ZZnHjJG+hOnrTsxgdt7mY9LKQYro/+hOrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNBlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMqw/+MFfPtw2kIu5Wc5N75UWP2olLAeThAeVPRQ4bypw5nS0sGIKo\r\nNsCT1RUu5DvP+Z+9BC3bSjw+LaUs1v3hXDsFadll7KvVZvT8xSWSHXfOxHup\r\njX4BLW6pMwRYBcqGhtix06RsHyna2up0ieE+fEG2jrg0a67Xihp6QmzU2TjN\r\n3zoTEi7iW3re+bJrijokIM7KoIIwRnl20y6cL7v3IEtwY0A/bCe0yo6v8nMh\r\nA0mr2Gv3Xm/k4D1Jsmqeju4mTMuNMFpu/qOZo0hpMAVHsj7RgD3wePaGd7XZ\r\nJKKPs+urYf8AOf5hEoGwDTyb+U3FSdWn/qhENdtdfXFIF07iPOuKVsgiwwQm\r\nHK7G+9YAY3T9iv3+5prGzWDXW+2+RoYcZpsSz4Qq2lCo/fcJKGCLKpcXdxKT\r\nKCjAGtsLT1zF+aO8KZ+ckCY8FV3/Hb5xQGfNrjMrL1ui6EUkxRQF7h7zPxjv\r\nRDP36ErN2vsPg5pbpsOoTzmrdCPoEpSEroO3sok7yzllGSb87e7c3AE5mD5i\r\ncHtS6Tmn4FBzYnOy3d1DLCMmNRwhoABSA0fr8bqIxb4Hcf/n0sU0HtTbPngG\r\nfEkCf8TS7A/p+k6whEoaUSYR8oN188quOyRvpc9lcHc0+NqrUKz4oCxavpd2\r\nQ5QhRsdqYqjTPP4W+pxASaT5kHTeIJPbMag=\r\n=AX9d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a7b9218e1ea7572b08b54629159e6f3a98970096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cfd69490f.0","@material/base":"15.0.0-canary.cfd69490f.0","@material/theme":"15.0.0-canary.cfd69490f.0","@material/ripple":"15.0.0-canary.cfd69490f.0","@material/typography":"15.0.0-canary.cfd69490f.0","@material/feature-targeting":"15.0.0-canary.cfd69490f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.cfd69490f.0_1671221348801_0.896395549293981","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/form-field","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.94ad8d986.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4447760e7e8a28af73fc7bea83a7d349bcf390c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.94ad8d986.0.tgz","fileCount":33,"integrity":"sha512-PUV9PZ48ueHQni7z8f5EI0HtE09s5oaMhvkP2Yu5A0uVG6rYZYWzZGI/Zl+wslK/G4sny1DI0YiUW7NOH6BI+A==","signatures":[{"sig":"MEQCIAUv4mUep99T22dsjYaUb8f8LPVIS9npWmB1qHZKadNNAiBqCon5JWyennn6dnWC/osaUryadNSaEHqDFG4Vjt+uIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLssACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9hRAAhnzw144U7Q4tOxOcvQvw/s9RrEqfiJo+jrj8PqiwS4BJODLp\r\nd1JPKvuXya5SFjYSu/uEWsN0oKTtbIZ6pvicCFSZEoRxJ8l28IckIWsrT9uu\r\ncfl8urgrlpWqOa0imHC2z+MSEwFaScNbGQDtMzItBhZFEGavbk2oG/RFV0j5\r\njFZGQhY7HpG2I1LBgI2iQDrbtm4GTPUzF9wHLCRpNFE50MQkmeJDiVtCA5Je\r\nFEFziLJaBDZN4Iv81RJDcs4PjYXJkeKiqLTUbLdzAB2VJyVqGktbbz/SB7U3\r\n0ERI9RK/EmMugvQtdXJiwBrlzukB3yqbkXb4akjAeSbu20MWHmP25iG27q3o\r\nMqHRNbBM3q7p9f+45HhOf3szkAem24gHtHGrEdmyawr2//TVkTu+UAQHU/FN\r\naezXoeVSQi1X1oIfyT/ibiuCp8NbQcIdZksGNf1VhxWCDwsigJd1VavgSMrA\r\nbc3jnmWrZ0DA+/JDz+HJGXgGTBpyNsW1qwYBjvveRJkW59a5cjDQyxaZwrIV\r\nn19vsuK8xse/yDMH6JFGWnVPyPlsRSwjgHcxzuT49ESu6vVg/rx8wdOCvdl9\r\n1+NHKEwBCDKkG+jIu3WJY7XWaa14MZHaC+HZYachPGDoi6hoXBPf1kHApmP0\r\n/JMOxSlCVk3Pmjry3DvBBGR1cgBli2hAcnA=\r\n=bUjh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8e8a69afb313ffa8badca57ca15ad4a464b9f718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.94ad8d986.0","@material/base":"15.0.0-canary.94ad8d986.0","@material/theme":"15.0.0-canary.94ad8d986.0","@material/ripple":"15.0.0-canary.94ad8d986.0","@material/typography":"15.0.0-canary.94ad8d986.0","@material/feature-targeting":"15.0.0-canary.94ad8d986.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.94ad8d986.0_1671478060713_0.29887409882834515","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/form-field","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.604264203.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09e762d5b59862d90723e95c2aaeed61d35c7d03","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.604264203.0.tgz","fileCount":33,"integrity":"sha512-nQ9fz/kvu6R+aa1e/NAt9ZOLv/yJl/C2fiZOI0kzJk+31f3x94XZx4Ho+67/lFtgMzyc2STDk/r1pkdPqzISiA==","signatures":[{"sig":"MEUCIQDtmHf9Ti2cl69JxVTnH/8ib8ZXVNfe2TSVuBy6C3lj3QIgfN8Ot/ejl3aBAQzhE1P1ms0D5VH7GezAqSPkVSZnzUU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo32CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0QRAAk2j7w7TxD/2uNAIOlr/2FsnTViJUNUQsBx05/T9/7q9L9l72\r\ntaQ+1MhOB2AneUJzVrI8OopXuASs+h80EIF902qbaSeUTRs4CLjFYiuSp6r+\r\nDxdjj3YBLpY2zSXL4/BskrAhlKYzhsmge5fZSvQPGc8qW2by0A0MzT78Ul1w\r\n3c5+ox0IPSfKeoC8Y3NAHykJ812E7yrWBLOSgHsqgFwMuBe+29C9jdxDWuU9\r\nXgzmyfoO4fxwBYCYf71SjJG1whGr375yOMHaJmmla8oStcOwh+RMp5dXutRw\r\n34M0MEV9Zh1xA3vLjLMDMkWMV7qveHTRYz8zYybtlj1UtRQO9G0LNx6nh4Zj\r\nglNzE1aUhTmjzEZfnMafvVl4kzPU9CIHe/8X5yRPIbRaiC3AjkbD5YDCROQB\r\np9a5SJQxjQSVmuus19REMla+iZEY6BJR1GSJdRS91dt3ykZBHxoqiscWUnFH\r\nIGPL2/LFtqUU/92LpHhJ978ao9e3jkvrBqJtoFxKKihJZHH0rQToWJh2Ffac\r\nStO3JGW2dRZheZUi1NNnanhvzsGI5e6CXmKUXfLlKu3hNfSRs+W6B3/dtLKE\r\nlQehkoXqetTKks2D1wOOxGHmJ9EkCMTDGTWGO/nho/wKx/03HWyEmsxcQJLX\r\n+fYdbp1TmQlxlvTSnWoOOkS/HErPc0caRUo=\r\n=GAmq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e37bb80002397246ad3ebd1bf11a465b2eb763e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.604264203.0","@material/base":"15.0.0-canary.604264203.0","@material/theme":"15.0.0-canary.604264203.0","@material/ripple":"15.0.0-canary.604264203.0","@material/typography":"15.0.0-canary.604264203.0","@material/feature-targeting":"15.0.0-canary.604264203.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.604264203.0_1671658882024_0.2547737892394961","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/form-field","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.85bcff6af.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65185d70c3ddd427b763f07fd6c62652e74be834","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.85bcff6af.0.tgz","fileCount":33,"integrity":"sha512-p9ZnUpwWhsutofAJsc2suukvpOrq5KpJ5sZFZqVdXu3oFRh+e/tIGKZH4GHfskDbLGVcW5OWq3T7sfabk4K50w==","signatures":[{"sig":"MEQCIFtAVYNVQXoQ3SP6dcZIr2j84DOA3mKvGx9CD0TFblorAiAxNgaZQ9I5BxDbfP7w0iiAMhkkKv9yRnTr6pdD4ZAzlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDCkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9JQ//Z8zEBFJWuJgE0gdbYUOJL8a91LhinnNokHcdirYhwFAcAzMV\r\nJl1avoA3TN5AoTMkoC3JQLcmNsLDbuTbX1FmVxWHJmPIYtCvuMIrKffUaYHX\r\n2LCupmpQIBNfWTmLwO53+1jbRAjwW42I1uju8VQ3/LavTIydHOOhqplG3d25\r\nJwUmZcoEhHv3MpRSnCPA5288wTIKAUYSGFbNc/g3uEFC+kI9Flo+sIcR8cZo\r\nIMdWePw0fW7vNJkvlQ2p/snhb/0NhdwbfrRlCDui5d6agEbm5x/qj8iafylU\r\nrr1g7gpphxiBLiBvDImEo2HUs2VUJFZN/CTj8BBQ9cJylt+V3NPzzmz45Shc\r\nRGg4szjzRcEKrZlNba/oWNM8rHeidhQ8qdY7tRkx2iEBKdhGTsvxV8sfgUnF\r\nS2ntlM8cXwg1VDMLSdEPN3NjIKWVULjRmJEp42sKootE4KAbQi+T4SO1WWXW\r\nLbEKqkEPa31dJxOt6RFFnGJgiC/K3G1UZiASnPg5cNIAk7bXNXuEzONohV/+\r\nr9i9jy02gILxXmhvM9kXxSMldwRnxmgVtigVD3TAbleLyK6EzlcgDg00kKQ2\r\nOi1gdzzzBKN+H2lwCY0eUYqagyHjagwug9nMNKEAjWZefcFUTmo4U1EP6LuO\r\nOwdia1x+5P4qTj9hk8i8R2WQabqj3JRO3fQ=\r\n=2i/p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ccd1f76fc7f93266cd894275969c05a833a002b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.85bcff6af.0","@material/base":"15.0.0-canary.85bcff6af.0","@material/theme":"15.0.0-canary.85bcff6af.0","@material/ripple":"15.0.0-canary.85bcff6af.0","@material/typography":"15.0.0-canary.85bcff6af.0","@material/feature-targeting":"15.0.0-canary.85bcff6af.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.85bcff6af.0_1671704740643_0.1745830072948953","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/form-field","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.ece3e8d21.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f5906102a2c7eb9776b358456e21ac96f1ea100","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.ece3e8d21.0.tgz","fileCount":33,"integrity":"sha512-xIdm+WrnkFeLr6dcK0iLmq/nJP+C4O3Jhd7kQZHQjcW91X8Tw9dHfaWwcEhwO2nsftxEeFGDyul7sZI3nUFoBg==","signatures":[{"sig":"MEUCIECRQia1WYahy7ue/IK46pqgI1KfhjEUKu9pTYAlBkAdAiEAzz6cR7wBKBvOi+k6rumnzjvxvzlkry4OX4at7mzB9Oo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpJASACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCAhAAotViqFUGUKQBJ4ovLmFNPjQ3V9u6w/4eLCwK/FYlkYw8DVgD\r\nGe6aWsihfCKPyNKM4/eU/8ECeJAPsokwzFLk+ZszsBdMnJ4VJS8yqBD7BCCB\r\nGY3WmZXmNGvdQBHQYCMzLE4I/ZCdqaKg2DxysDVQXjVpEKjkDuebUgqXXDga\r\nra96yLOdfHmfe0VJI3fikFuEfJSSwiBSPF6r3Q/lHk6JvCNulkm6h0vUMRVD\r\nksq0bRY9a4gxfGkWeshvczr3wVVFIIzl0V+m51pLe0yFTJehmPNKlRfOeUxg\r\nR47Zt7llRB93gwUNNJnwRfFcFm4MxfMDh8ZqHdhQMNjt2EDhalxIfSpYDTfq\r\nD1nkfs5kESlDyw0fimSNMC/qiKZRielcQ0G2kVu5VsUtmfaryZuEQv1AkT4o\r\nX5gDCoIRPYXsQ+pirYdSNgwUHdocGHRm11uxliom5K5kMFr4AWE7qepFnEhJ\r\nO1Ss2EEU7cE7yxM3r/Le6CD7TKitnoF969HjRiTZufulSVtanT+CO7WFCfRM\r\nZaQzlUJtf1I5bJYTYsywHfUGhjLZuNPif6pDxjjQpZhMAUCiu3kO6e+TXglI\r\nBcEKmalOjbPqU4zpMJ/nklSRy8ufQCZn7Y7addjTW4edDmaJzaix7sW538DG\r\ndpfVRHu+kQRH4ZJj36PX8w0ljdveAzcJsSk=\r\n=XFo9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1a4efd7042befb584384fcbb35f1ca445adaf1d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ece3e8d21.0","@material/base":"15.0.0-canary.ece3e8d21.0","@material/theme":"15.0.0-canary.ece3e8d21.0","@material/ripple":"15.0.0-canary.ece3e8d21.0","@material/typography":"15.0.0-canary.ece3e8d21.0","@material/feature-targeting":"15.0.0-canary.ece3e8d21.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.ece3e8d21.0_1671729170501_0.8675381056902141","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/form-field","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.278ad53d1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d20a7f61ef61c5020861a8567c6c283be1cbdfd7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.278ad53d1.0.tgz","fileCount":33,"integrity":"sha512-A6/xYsp0JhqnkqQvyK1xHC77eg6PVcPcsgdlTQBPioI4GHnABk2eEqXVqnkrxYsUQv7z13bJF4vzY2oZAKhZ8w==","signatures":[{"sig":"MEUCIGaYjxh4+dTXqxy08Onm3Z26N71/QySY3R+kTJ4zKmF9AiEArifoZ7qlO90Xfyd+2iAgfSr99R0QIQhM4MDUEbrD+NI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyXlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrV2xAAhePF/tygGiaoQLwVBjuDGsPNFQDOGG9pMTe+NZlId1XLhKMO\r\nP5AlIFdLKTd59Nl7+ngEe45NRbHEaQ48NS7OJiHGrF8o6dh1nU+gmxaGFIje\r\na6T65mKE00ovu5RpNGIYuJqepvZZ6GFrA+rnBUon3e7IhplCzluNw6mf8mGC\r\nglHxsNxvnKb6i6i3z88+CDDJ7GG6pUPvF5W3NT6/y97UpsvwpL9FuPHA7Pgy\r\n6KpG/shgz3dSgDZi5pgmPeYUk1ptqVHPo/lNlxWiids4qjE5l3GxkuEOoZzy\r\nzT5oK/5dwekXpBBa1KUdJIV3+tfFHV5s/KHj/nXnrjFMw1D5ZK8VkISlum2T\r\nOyOLtZP8iPcltWAr/Qpsx7AnT9zDm9uP+ZDXkqYoD7MjLyT/DLeVWGkQ8cwr\r\ni81yoockIM3u1kQvQzRJgFs9429l9DdJTkW2+4SgTqRV87G8ZPDEqboJG1LL\r\nLQmcx4i20xm9vXs4L5Wp5bYlsSiq0cOIu6j4/L0TFBpHvda+NuQ9ouYwItFO\r\nGIMO5J0uc3E2myMMTgJ1vc6afGEldblS1d8VHI690wkChGs1HqD4lgOzBjQQ\r\n0fiaWPOWNAIGvtc8K4No9F1a0VhLMDRRntXxVt41l21d+iX0G5rXbEwxHUIA\r\nYsb0MCya3KEWzJXAT/NmoEW9M6YN5eVSGxE=\r\n=pNfr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"967cf83d2b9fa8a3e6bd992aa107c66182e0c65b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.278ad53d1.0","@material/base":"15.0.0-canary.278ad53d1.0","@material/theme":"15.0.0-canary.278ad53d1.0","@material/ripple":"15.0.0-canary.278ad53d1.0","@material/typography":"15.0.0-canary.278ad53d1.0","@material/feature-targeting":"15.0.0-canary.278ad53d1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.278ad53d1.0_1672160741619_0.519712912702565","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/form-field","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a7d8389e1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b416a4080dab5a1fbcb9b01a765e71c21f350dd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a7d8389e1.0.tgz","fileCount":33,"integrity":"sha512-iAh1y8fzY7oaLS04LTYZ37o1eXD8L3xMqw4Zze9hY6sJERMsmNcfiou+LP1HMWQwaEuUDaxaUXqZ2KStLuBkzg==","signatures":[{"sig":"MEYCIQDqlEHvN6ZLHwdR+dnUGVWq+yigJeRlH0I/AFXIVypPiAIhAJRxe2Sg+N40F8ixKgY602Ed25N3vSrla89XLxagZxRr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0HAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqG2g//XcF3giAgMfSJ4BijYVsp0HUIXBB4dfm9kskk/r0W1fjSgdLQ\r\nk8ez/BDb8C4niNVXS0O/JxoXkdYRv50kARC1/3wNVFPV/K82f11LhY0/hGXj\r\nGRVkj4SRqov/g5htM+E/TFDQhgrrLyJWUNBifu0DjNRxTdEaT5vIbk2oXByo\r\nIrOJdnHe9eietQfpv6bvYXhv4/PWswYsABC5HpMNTDcEMZlDTTDLOzV+3jrW\r\nSjCrD2pt27lMpEpi9pKivR/7uUCJYCGw1CCFtwGrkzYzFw5Joo5JPA8/Cvfc\r\nEDsyxhqk6CPDMMVthYPaDA/aNn9Vv0iFjC6UyM4uNPipOB/WOy4c3pWOHxqV\r\nJCNZr9COR19A7CJDDme1X1Ug9zg7Fhy818Y/oY5zRh0Y0FEC6anaPeoqUn2c\r\nAmWBvmozX6A2807Zg204aueLMZo4YOFNZk3r4K9Dqm5HSqeC+6tYL1wixOxO\r\nvVsTmPmxnqL/gks02LdMkrrmmpWU3iTe9tgld+qfvZVn3LG8mTekYD42pHzk\r\nmtHr8BSTLshKVTqexzTkl44Vpa86pDufg5Iy12Si/cLmWuWKOG5cSG60Yanm\r\nVM5TyvPmkvCPYzxicTUiJQFbUpZDKBuDZmSK8pYGgoM60AfJ1H0bnSNI95cq\r\noS+2w/YdbHba47SVIUiYmQ0QUcXmPDBuWjA=\r\n=Ac7E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f9b27084bc44ecd4530cd2252389b0dd8116709e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a7d8389e1.0","@material/base":"15.0.0-canary.a7d8389e1.0","@material/theme":"15.0.0-canary.a7d8389e1.0","@material/ripple":"15.0.0-canary.a7d8389e1.0","@material/typography":"15.0.0-canary.a7d8389e1.0","@material/feature-targeting":"15.0.0-canary.a7d8389e1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a7d8389e1.0_1672167871841_0.14490690037908638","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/form-field","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.8175d5eff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d58f206be249ca4601eec879ca9d596ea78d7d1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.8175d5eff.0.tgz","fileCount":33,"integrity":"sha512-HUXmHdNANBrDNmJRNJfohD+KHvLxlz74GGjI5qEOTUsiojjUhThRi7vTEBQSddvezZb7JIsJNe2YZ1WxzXFknA==","signatures":[{"sig":"MEUCIBOi+kDdZI+X22a833rbR8mKSXGpFmUC5hNjxp3f9KiNAiEAsXAtExxrnrPM/EXMurNiuEoSdu8LQ+8/7wxRdzN0sGE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":191931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6FNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzTw/8CcIOXd/sM0ixiK15TDzmStEwGlzpVTCm+q3hzixuMJMA1+9s\r\nFZR9bBKYPSgr+hprpEgTdAinMsg6JuERLkb+MhhLTuNlQA5HhbKVfPH9DH83\r\nEzPVJsPqTP2MDX9BDCw/iM2DvmjWgzSE46uXQmopPd5hX9f1PevfZ5eMt4kK\r\nriFB+55zy7Z+LUrRBJqptW16szVVqVsc0zPWAdpfTQs5WZbTR7iwp8FN05Tg\r\nc5++68afTe7ZvyJDEfswkYp6v9/Po/mXIT2fSNOcR8eojuiGx11bcTfsAcP4\r\nTpox5lcYIPqi5xmDExBGLjl1fBxQ+0Q+K+OU7mu2xE4NEhE5dhUr1mg0fUhv\r\n5f1m2oO06Jxjvb3PZf9cIE8HEtfAHceUPKqwGsjqkja+1C8U9WhMhcyKsMD2\r\nHYN/e6PQ5eZDTSO9mMV4On2cu1779v4/6fcCEXZPDg7u/ES0jcXWFAUkHruX\r\nyxFYnzqmnvuaiMToaCcbR7EayKk9OP/OQf2jyYKVcwLlk3x4ttpZ9Oo3bgt9\r\na7daCdrswI0Qyu2AvSwSLdGZnAMqnZLnnJOf5haqoRF56o0la7XtLkXzAzOu\r\n2ZX7dsxG7rg3vsh5BK5tBHsvMaL18FXLXB9yp0uK9b+XISh30unUjBSj6Vxw\r\nSX3VrDxKkHzdhewbrDzikJ8LWZhOUn4SlFY=\r\n=kxpE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c3bb551a6b32480853dcc8e29f7f8513d62154a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8175d5eff.0","@material/base":"15.0.0-canary.8175d5eff.0","@material/theme":"15.0.0-canary.8175d5eff.0","@material/ripple":"15.0.0-canary.8175d5eff.0","@material/typography":"15.0.0-canary.8175d5eff.0","@material/feature-targeting":"15.0.0-canary.8175d5eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.8175d5eff.0_1672192333636_0.3334190151748304","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/form-field","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.e21dcb86d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9244ca75639a6065e219592a081edd39bbc495f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.e21dcb86d.0.tgz","fileCount":33,"integrity":"sha512-rtc4F0fP8GS+TIzOW4t9NoNEt7YTyjRyt+QMOQfaRAF7Dh65QYEAy1QxLFBYcbgco9RmU4ZixfAg84CKi2fkeg==","signatures":[{"sig":"MEQCIE/WEyYZLjI0OR2xAr32UCgTprK0XojO/Sb8ti+zKDYQAiBrf9ubpAV7X0ixyjH7DyJkEXyQOAmiAzSzrLDdhX5T7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ4IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNHRAAmHNnt4jTRy0VkaP8+VGeD51gH2coA8tluQqqO1Xl0qDrz1FF\r\nikR/7nSUDh/rpxIS50wmaAhzRjAyVj9ySIxWJO4nK31IpFNtUE6Y7jp++GIq\r\nGmeTxX2PqAqfs8XQ/Uvj4pQST6tnZShHqQhBTmf8us5ap3rMvRPgooFZ38zT\r\nPyEdDPZTkJLhxbwPzP6Z41Q17qSdU5AnTJC6c0GPjBOlXnj9/OhZlemEYSrA\r\nsZoFGcJCbxGZb8V0nZHSrQ4dJ41QgmoPxh1USchJNQZsQ3S2csOPf8VRFXXp\r\nwjk85XpoRWnMoU4p31zKCucZTnO9R+Wmv3eOFh1ronlzqM0XHWbiqeoRtUqy\r\ntzhQJ+5V3KdjMzFF3Q9JgDa6YIPd/d5X4sv8upMobygfBJ7vrqZwbKSt+aTP\r\n/3Dfcioi93h+4pqy1T/kn3Kkl2KA7DTXCcKi2umzBlpmJTKTwsH42kRS74YJ\r\nqHpaQSFiJfLEgmWMon7T4T9iMgGyTflGeigsJUr9cA0/++i97ihRs749gfsl\r\n8kINuHZWH/7Saepcuq22v/0ibqHrk1bH2U4ddT1PER2JORRNd9J6F0WgOf5k\r\nRGdKzbnSAveaOsfHePz0aPjU+rtD64gYoAC9TwO3m7u2BuRrO7+zvm+3Jhfz\r\neqxEuxk7pWp/nlGqa1W6YxK31FQcwep6LbQ=\r\n=OFKg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a32b4ac6d2bad60870533296fbc4acf050735b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e21dcb86d.0","@material/base":"15.0.0-canary.e21dcb86d.0","@material/theme":"15.0.0-canary.e21dcb86d.0","@material/ripple":"15.0.0-canary.e21dcb86d.0","@material/typography":"15.0.0-canary.e21dcb86d.0","@material/feature-targeting":"15.0.0-canary.e21dcb86d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.e21dcb86d.0_1672322567981_0.46626379599992274","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/form-field","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.20ab6f5a8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7618830584714d4c0e052a6d5300485635854349","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":33,"integrity":"sha512-WlttFBIayAa8OxgV8ubmr7gEhA3XI+ydt4DiUmtmqfIY7KHMdLoBXbC1WFNC6as2OS+w+FxRxl/5grvjTDv6AQ==","signatures":[{"sig":"MEUCIGvRz7e5HdZRYswfEkY2398tS7E2Io3j3pmPgEndKricAiEAl6SUhJjC13GCYS3DXn/56Ch5m6Tz8u8ZdkQBNv+ie0E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre1sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouWA//bSpOR9U+y/i1FOOTJTSnwWbq5lRnLPMCXYDPcqeS1C7re3CX\r\nucGam+ndw2Jfw/nC7pIdu9WyJDYjotvmWwZ9fB2i6eE1ulc5LEZFBuO/0UgL\r\nXDoe2NZ1ca1Ltxqcp/XC69JQBYNQokOZhj8JM8QKWpVgJ7iQ+Sup2FXlMRNY\r\nx/qRGvJhbOJcRvunmNs5lsSD5AZz4EQ52IG+FP6tAPunu751UoOXrpJpMxGO\r\nmE0riL8L3wwzv112JKD7DH7mg+tn7ejXxIQL8QmsfPHQoojcTnAp82MCTZYZ\r\nkq64cJt+CdI6/judf/kh2fYb1wEhlrf/tokHBMXG/tOP6tBpj39hQvwzZCHg\r\n/iD5Gn1L9JcaLHslqHwTy9C+xTPG9z+WVZUX6qMA2CaPhmJJCEqwpFGBf3H4\r\nkObohdFqx2jbGkq/MEhtU9nlRgPefVZdZNM5RSlAIpKkZR5D/oEgBPNB02CB\r\nezwebsgt6VQT1R511dXEsgeUB8D+9ic1EWpQcS7JkOmdudjWchpvOYQukf2I\r\ntiagGMGqLr8598EFV2gRwGJQ0BEvRIVlpgcmYRohuTvWeaxWPy8eNexTb/+8\r\nF9t7sIp7FpN7YJBwoNUTAwITUVdtegMnfJUD5VlO3pPnBj3GrI+iDDjQlgki\r\nNawVRRpzO+1YoChF43xofGRqZOdzBKuUbmc=\r\n=Hofn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"abf2135af6e71ea44b6e6a4de17493e5923f7255","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.20ab6f5a8.0","@material/base":"15.0.0-canary.20ab6f5a8.0","@material/theme":"15.0.0-canary.20ab6f5a8.0","@material/ripple":"15.0.0-canary.20ab6f5a8.0","@material/typography":"15.0.0-canary.20ab6f5a8.0","@material/feature-targeting":"15.0.0-canary.20ab6f5a8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.20ab6f5a8.0_1672342891980_0.8117894040352769","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/form-field","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b9806f623.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f97c1beacd3b0bde3406913c7f7db6889e2582a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b9806f623.0.tgz","fileCount":33,"integrity":"sha512-3k/zuCsQ7U1Ycu5vBnNQr6rD87gHXOsOi09Mll4CogPjCWJ+XcImgKu9xjdfGwrclBBloTHBOc56OBz3AX5Vhg==","signatures":[{"sig":"MEYCIQDIyGcJ7VzOUJLLUoUY73fNipB4q0Hq8Ve4G7uecSI0RgIhAKn4ILUCJ0WAyOlPXeorb7Zq3lLTxnaCbb3505u+W4wU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh10ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLTA//Sx505Olgopgnw6SWtpqlaMB5pbEQhYGrbKIF6RdEFkqyRdTO\r\nCwqgAmtZ8j0FXhmckhRup+biicx3Pw97J18zGvbzx6BMVBX3L6knE9xaaTkw\r\nQurksLqyHaDdPgyTeXE8AyQAcLXgJoJV+yrpc9Rpk3se4dtvuahpAxHa7Div\r\nhtHWit8tYjRmVSWEyKObYmK8T3zCIHpcZIaMmkGpmfcIWwUPL+A34GCQCu+/\r\nhyeSLsiinvXLH04WLUAbqCVosNv1sCxVEhvNV9t1DiL8a1qLuxH4omewgJ1L\r\no9NAmXtlPuUrdcp+4tnXSxJq5BCpe/VYLiZVlCNyen1QbOgB2inUrDJfLS5t\r\nPM4P0lJamjOZUnCXlaIHx73AEfHFuqQH7j1sey6zbazLz9bsxLOH9V7Et0n0\r\nt49p2jYo+z3bSyiw9e921IRPvCZNrrkQlCRrUkAt3SoR96ZefWqE7gplCeoo\r\nOAMzxgO0d+Fmy0wlBdPZS1SRi+DK4aZwX2P+dGObqtnPZE7GbMaxczHQZVLk\r\nvAXCGRJHTnNcDGR1ilfu0t1c4sNTM4iwo0VJR20PE+mmT/wW295LHJsXiDmu\r\nW7JqayrN2Cuhyd6CoTawOeJdJusX8HfmJQbsvb8FZFaaLR1jqqur2L9PjpKA\r\nJvsJho2H2GJbdlsiD+QS2Ffks0k14g5OMds=\r\n=68Fe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0eb4b8fcbfba4d68dffe3a2b5c7478e69e2e2eb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b9806f623.0","@material/base":"15.0.0-canary.b9806f623.0","@material/theme":"15.0.0-canary.b9806f623.0","@material/ripple":"15.0.0-canary.b9806f623.0","@material/typography":"15.0.0-canary.b9806f623.0","@material/feature-targeting":"15.0.0-canary.b9806f623.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b9806f623.0_1672355188190_0.7504443851687983","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/form-field","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.50c9f550e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb5edd6a24855a39019da496f44709d727686c66","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.50c9f550e.0.tgz","fileCount":33,"integrity":"sha512-KyITq79n4vKwJVRWBae3w09GzOcLCik+5dK47Ct1CUI6aoIwjIMbbbrkvTvUTq+TB+HCryi9Afyg04MaKljtMw==","signatures":[{"sig":"MEYCIQCGD1+2EeJDlehUhcseWTYohyJfWuvaAR6vJt6WiEB2/QIhAPk/FFYMRLhzrNoD7881mC/ooLgah0mwxmZNANTeKm0U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE5AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCoQ//anTR3fBtO38oGAMqPqB+5fUV1t1ljZGppPohP2Mw/rw9sebB\r\noXdjNRYiz0BPJAwqAPgBzqqI8sWcUbYN1ike5pFJXzYPzYuD2JwvTZxMwSys\r\nuTyjssFFncXLlx5qIjdQBPNDNLL+IVOCyQZwrDzP7UsgdW1u3UJPCBqZP5oi\r\n2MKzMl3VgT+ni58/2W2YaI7y2wZzk8A8oiYlBMP30XMQDHAZArge2aBCp4hx\r\naOJfmQca21UWYCP1MP/7SBniFluEP+gu+kExYOAl6KOMDe6XT8sK3/aqd2G7\r\nv5ZwuwO1zXYCVA9KFxtBlmaX6N/bxyRYY1sptpEGuVanC/jPLKsoebW5iCSH\r\n6Grc/pyxUyXuAOmevDiPtSH3Kb0X8XFm74eZaAYkEqzrNVaWlVF83s2kdFo5\r\nvDdWIlKdyhy3Myj9qGKeP39diAWVAI17aYcLmwSk44kLS6rSpUNp3wDxU+bU\r\nx2HWlKIFwesDMfQsbwt4wPtHvwEd139D6ZB4Bjzs712Oe8HbAfO6RbhjQR6Q\r\nn8cUY4P+Ksmt8EQlmP/+vFzx1WUyYKdsUmEDN54xMD1nq7bBiEpJKgvqb5ko\r\n1IEBxzaOYBFUE+RsPorCvgmmJexPtbklnJa7zsi9idWQd+S06rRdlInghmqp\r\n/w99hDOEJvX7K6zYBitDq7cUmkEMwLR3cB8=\r\n=Xx8o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d020b19d0ab5525ccca1f803a00e184efafb15e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.50c9f550e.0","@material/base":"15.0.0-canary.50c9f550e.0","@material/theme":"15.0.0-canary.50c9f550e.0","@material/ripple":"15.0.0-canary.50c9f550e.0","@material/typography":"15.0.0-canary.50c9f550e.0","@material/feature-targeting":"15.0.0-canary.50c9f550e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.50c9f550e.0_1672760896349_0.5657542832007654","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/form-field","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.af490a848.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a97dae5ce613603c9ac354152c486acf210acf9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.af490a848.0.tgz","fileCount":33,"integrity":"sha512-8XcFI3KANvTRVKMIO7QAFGVJnhtd/U+L53vOPDpLqHmsgqWr4YZ9UXHpe0oIiKYtTjqvsLckSNdP8lsjeVU7MA==","signatures":[{"sig":"MEYCIQDxRfcWwp3lxIh91sAlOlMYNXI95HdO30PZeNFLY+Li2AIhAKadb8JR0Z1t+WmFNjqdf0khkpVn5/yz4WnUnyXeOAj3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFCMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxYw/+NvKw9QE+3b/ET/BuSc/fF+4SGws8TuYS/A5ZR5Z8vv3WuKu9\r\nYlsguhTtRKiwy8UIWgv4pHxqVLqaY1X8kNOd1TwzXUKdiNXs3dFl1Y+F7RJK\r\nWjISuZ32sIJ3tYlLM+Z9dD8xcBh5MB2vTqkspdm8kvKHch43mTcq+Sm1+C+A\r\naIlyV16RKkG55gadaGSpWe1rvF7ECvwkbMsO6SHVarj41iYatFyZfLrzoLgF\r\nPJ9ORB1pWZ+jAB8xnsefcdhNi4XFwDDQCRYsblLhKx6zY+HwfeXhLUsPkE3z\r\n7LUvc7t0kfulE6aoaZnt5tc8Z8YnV80hb4tTari6YfXT96P0DgltXKE4a6rj\r\n8YpqYNFWre0/2NoL6b+aEms+LDU03prKLdUnk+0VToRjo8UhFiqOHZ6nQbDY\r\nUTb1XCO+2gw4jvNtCo/7TmVHzlBF0r7CiYKZ+XH0DiqRxp5gzHJBnLDjLk0H\r\nhlDaKrOCTijFOlwUh2eS2cZErEThd/6U4HtSDwVFSMNB3/027GcldSpbBm2T\r\nexb1ueblWHCcLmQmck5ZrkywXpZe075XHbcXb1D9r7BfF2d7nfeJnUmBB3KV\r\nPDZ7g6s1aQK3dTdZlhJ7Y7DWW2LaOfdkFFD7v+QJ6fdebVTKZT2PQa8BpQv8\r\nsrG6CC53yUFEKuSzoX7gV7a5/eQ4VKxFd/0=\r\n=QKY2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"95f5499a3dea1763e53574fb3b884e8e45cc974e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.af490a848.0","@material/base":"15.0.0-canary.af490a848.0","@material/theme":"15.0.0-canary.af490a848.0","@material/ripple":"15.0.0-canary.af490a848.0","@material/typography":"15.0.0-canary.af490a848.0","@material/feature-targeting":"15.0.0-canary.af490a848.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.af490a848.0_1672761483835_0.7810526706746224","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/form-field","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.7cf487c98.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10c13dc34b6dec28331a14d33153d90a4e6fecfe","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.7cf487c98.0.tgz","fileCount":33,"integrity":"sha512-Ant0v9tBUl8eSKM6UUlaG4SIGC9dd0itriJPEAJhLA6oq2bxTTAtm4hGOX9AGM8L1wPHH9rgbrXcelngmDIOJw==","signatures":[{"sig":"MEYCIQC09qpdmt05Q39jwIzyuCmbN+bkwjWEmRQe1i0zYPQ/3QIhAJBdY3ZvvkcmYbBf7UUZcXgm2T0yGd61aVHk9h35opY3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":192338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGhKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5pA/9GBey52LfhpBScb3Pf0+JcCSfhfLYzG4XmL+BeTGJAutfr8z/\r\n8gChy61VVrNqZMOUMiRVJKGClwapMAphi9KUSVQPslFwXzHJq1uN1lX0Z+xn\r\noC4bERDIcei8w9IGqHAMCsMYsMOlDYC3TfSOM7LcLqIn/L5NBy82e5sm6AQ1\r\nuFeyKaDoGCe/8PTbat2aHKKBy6e3SWqEkzcIGfxHgDpd4MlE5Fbq7LcuysON\r\nGLOXSTJpHzKvrT0AVE+HcX16NNz7r+rh79NGK10416tkXutHYszPQvSyaSF+\r\n6c8xghCLlr7KfTcGcMuBeOFkA4Y82b0gZDVo5xkBF0S+72Wx1/NHVb5FaSCt\r\nqhzPH9AZY7wVVyH5EDc1lIrMNcwe4KyZb7ltiJ/7PTyNPu/H8I5f0rLUxEmz\r\nbv3fbiCbdJvODLQuGRTFIL6YS5dH4uU2TXHFAymMtIAlHo5D6fDG5x9Wa/vS\r\ngpBFWpqCGeeyfTpVsSeCqFcrbNTaZ0gd461KO7YVvn+cPI0LVTInMLPgVL+b\r\nRUWfhwpjcYbhAt59Pr034YPHClqfaZyWsWi9/6YXoI+pYf5Hxp89sH67nJrx\r\n88hB7FKxQ31QTRNDhuZS8J2k3zU7iaL8KUsxlvcJVGtIGhsWE0JV57on3U53\r\nrvx+N2zUpQY27T6X1pElr86Wqba/kzN0rI8=\r\n=OaQp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8d246270c785ca072651213aa63882309c7cd5ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7cf487c98.0","@material/base":"15.0.0-canary.7cf487c98.0","@material/theme":"15.0.0-canary.7cf487c98.0","@material/ripple":"15.0.0-canary.7cf487c98.0","@material/typography":"15.0.0-canary.7cf487c98.0","@material/feature-targeting":"15.0.0-canary.7cf487c98.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.7cf487c98.0_1672767562405_0.8821547528063627","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/form-field","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a52be2d5e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33f88cc3824183e49c14bf655a021b99b4add2d1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a52be2d5e.0.tgz","fileCount":33,"integrity":"sha512-WqPLNC9G4ATPM4W//N1EZphQwAAnyCOx5HS/BVoQxq2iOMbEN4TIlrVMiGUHc5vk4m4iFw9YVbKT3AC8XO47+Q==","signatures":[{"sig":"MEUCIFL1/63eemA7YgtJs301TpGnRaMVGKmmrB2N3SCef1T+AiEA4u9aDd4PMxoyOo8yANCh+e7W8tmlvR6kYNCqn8Wg+h8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":530295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH5oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4CQ/9FG/wAf0wIXZMxWkCB1W13LoIdwLa7en+8lBypDhNvlcWyVbD\r\nwoJrqlo3CBBfBd2uE/ixOh6g1BBVF6tNMgWDhWk0N1JLk3oVwW9ObHQJXJuw\r\n7te1gUKFPquyexv+y4am8dEn+rTjW0XFEn+wQcUB34P/W18MohQdv4VyvVX7\r\nNjY7nzyIqzxpADNzg7EqoqwKPSUc2KFVR+d7Qu7743ApwSyhO+obc95iJYrw\r\nuloFJSMGxAJy2oKaq2vv6SMm7+jCilvp1hcGhu14sWljYMlhO7cerA6YPRXP\r\nrybMpy/ATFrmi1odIYn9MSbMkDzja4W6sjMGr8y0yaAcjkN7XlGKG2V+L2WK\r\nig10obIarH+qGDCcAAX2kSbD40BngGynLv3jLiBL7hP348jldzm/Jap7OMnX\r\nluChZ7d2Jhp6ejrbR2S6oWVrk9C93iaXIzVLJbMJtXFKR/6+kZjzmhRheivK\r\nVdGePBUx3yTl0hYg3eRmt407JowQeNQ61d7YFadNHEjsDgXLS6BPa9WnmQCv\r\nJF8aLU6KLdTeFThWY/wfUAy3pltWFGwfpPzrQ/4KvI5Fquw22ys43GdYkMOB\r\nWmWxlatHZdxsCAiy5gHMFTFd5kmlNI804jHa5FCxt8xCidcZqsUY9Dh5+a4g\r\nlwjMFulOlxw95/LKFvqBDzSU8qpAaKG9NcI=\r\n=vwzq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6c2c2b2b16d0188fcfc620c5bd95622d34ab600e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a52be2d5e.0","@material/base":"15.0.0-canary.a52be2d5e.0","@material/theme":"15.0.0-canary.a52be2d5e.0","@material/ripple":"15.0.0-canary.a52be2d5e.0","@material/typography":"15.0.0-canary.a52be2d5e.0","@material/feature-targeting":"15.0.0-canary.a52be2d5e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a52be2d5e.0_1672773223954_0.059176019883722564","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/form-field","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.e38ba17c5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"870eb49633818dd56faae8896c80e7397f0ed7d4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.e38ba17c5.0.tgz","fileCount":33,"integrity":"sha512-8x2CjnOXlmHT09AsHpy/dkuTb+Q5DmRsjttzAUGXXkWaR/yuTYyFf9e+QxjCFhBHyIFrUUUxFSgKX0b/PjD3OA==","signatures":[{"sig":"MEUCIE9DnMcKOhQQEqgslV6NCDgG9ybdMk8cg/nJ0CngvicHAiEAscs8g0oD3KY4cCMyiwjTDAHl76AxVSBgMMmuP0fzcVA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtK0TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYrw//ex6hLCAjNVZnJTPSEMFBqrTMIOl4+KFLfM/c5n4ATV+4+FgK\r\nqR83JIavXxLzIJAe4AtEOtbS9kZUTdQL+1ffvK2guQoWP1DWbn3TIpGQeDRT\r\nb/tlO6Yl+cq9FCZKh4umPcPjqMc1KIfj3fwvnD54HAFQ/2gJHon4SkqIT94+\r\nzTWP0et/i44rGmFz+WGjqlI4BFDo/dturz2RXelC+V3x5sXmYbLAcZLC/cSM\r\nBiLYk2HMOzU3NRQRvgnRoH1Wwmq84IWsqVJkG/Xam4b8mqjbMS0mNFizIso+\r\nO2uNpz8BLrhDwhhNFysgZCV36jJoUQC7Fp2W/AGMUD7AkUC5MD8Zg9Yd0Gfw\r\nUSJGqQecRsxlWSnu98+0RBcBrMJIe5PwZMh2RNh1jdwP4032Yog3pNaQ4KPH\r\nVxV3gBwqHSuzV1HRuuaP0bSMDZu4I33w6v6qG+LvbNW+aIkHd+o14zmBy6wa\r\nq0J7CPzzD50jqnwvuniZiZKcKlJZWZwunvDxvmLAWJHEZbTldY+HBteoIKU1\r\n325TRE0HH7nh3MFM6zxOPqHqBEYqTilbBza2Wn3CGxbU0QR8xR9uV9XRmi1y\r\ngb/Hm13lcDSVFUheMitCKEKSr1Itw2qlOhOZCIRDLCJmnu602vzMKKkEEaO2\r\nPLv+S49l2RkXw4RjrJDZKnAimv+S6asKeiI=\r\n=8Rgo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d44100693c450240b468ed28efc3841fdde62da4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e38ba17c5.0","@material/base":"15.0.0-canary.e38ba17c5.0","@material/theme":"15.0.0-canary.e38ba17c5.0","@material/ripple":"15.0.0-canary.e38ba17c5.0","@material/typography":"15.0.0-canary.e38ba17c5.0","@material/feature-targeting":"15.0.0-canary.e38ba17c5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.e38ba17c5.0_1672785170950_0.45744109230001184","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/form-field","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.49041a6c3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3224a0b052d2c0c0cacc9a9750a010f95103e4fe","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.49041a6c3.0.tgz","fileCount":33,"integrity":"sha512-NO4wRP5V33HeTYF3uHEl6PypNb3mnwgApML9OuWI3cKw7a6ffhGjV9o/mlURmwPA5obM2FEUatmPF3VZIRgSYA==","signatures":[{"sig":"MEUCIQCGQI6L8THrct2TVJOcmXKfJxhiWZujqmKKZ/mzRnk2tAIgZT7tkhXICXwY35xC169d9k/GKjWbVq0yCOPX8sjjdeQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZi7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqX1xAAnKRziJ4HyVRHq9Lp0HB7SYkc32JGkXKqvY6am3RRMZmY6obp\r\n6XwumUeeJSpwFpiRuAEhcUBSqdYPHJVYOjiBPen6TVeqzG5ZPAXi1v8lxxkI\r\nTsWPGOI90PkwBCHt3ME/V3wRvdsY77luiMCOYswf8kBM02pjhReFzCHjj+VP\r\ngDCfL65pDY0bLTny/tNVE04g9OmVQYRte6vqJt+3kScImY6Jh4NG+zMaZLcf\r\nzqOlk+Rb8Bjh9c9tfKzhYrQTi8gGzRcTMBSNDihSP5n/WypIIuRkcxfQtO9W\r\nE2T5eJnJOuOEFjZDPNCbExhRzxf7uIbEVK17+Nv02Z/vnmIYWJHirNEiaWXS\r\nQUZbmxC22/VbZ8ocX2iDh7w4KqfadUft8moc4ZpIKGzOcEd8LtL6SKu949qs\r\nzWAINI0CLFHjCI7Lnvlsmhw8dY6G5ppdoISOELgj+9PEM4hmO3c4Da/hgpaT\r\nmxZPlOyUhsEz0l1NRH5RX1FdV7SyLMt0Dpb+X7qv62zWi5UzKZ/ruZpmVMNH\r\nJw4iQkGQDnCduQ/gQpgJoKTwZGNxeWy9CE5V3IedBZ9inNYc4QexxtDuN7jD\r\nZmo2lfcuoLnmj66h2ZUcaDAGkdHScvyJXliCsUKPN1ftSIgQbtmkZW1hCUkA\r\nfSMfFy5oX9RH+1EzRLiSfHXEWCEnqWpXLR8=\r\n=XAOA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f012497ba1285ac3de691b5e25afe7a21ff62bdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.49041a6c3.0","@material/base":"15.0.0-canary.49041a6c3.0","@material/theme":"15.0.0-canary.49041a6c3.0","@material/ripple":"15.0.0-canary.49041a6c3.0","@material/typography":"15.0.0-canary.49041a6c3.0","@material/feature-targeting":"15.0.0-canary.49041a6c3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.49041a6c3.0_1672845499439_0.8958579648089116","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/form-field","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.c492898c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8114e50bd780f2e9a21a928400d62fe815ecfff9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.c492898c2.0.tgz","fileCount":33,"integrity":"sha512-16NEwbpQVkU/2mCF6m43B9kwLYLK+Op79vbWtTQipJyRiHR2fZa6ZZ3xgJil1eNcIeRdRUMq7ccLgDiBUYw7Og==","signatures":[{"sig":"MEUCICI0Zx+LJprkQzEFcJBNRfSjih0r5T4Yk9jstR6G9KWWAiEA9xp+CFLlps2ZjkO1B9+61t5ybEtdsuz62yAxTiDGNDo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtblhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrInRAAjsxFeSLxYRoMIaD9lyX5czFJNWWzcJ2PV/KEQJ6i77kBK9L1\r\n2kRlD4rvD+YxMHSnKEP8AEHV7M4KwrKjENSSiDcBM0RmdkiRHf2B383uOgAL\r\nCvxhXqVYo66lnyHrB1S4S83zTIo4O97C4mp4zLuSq//eR/M3AycGwVHwHeFb\r\nfCqefaOl2IKnnDTwa2HrMF3GONsZ7XFa9DdXiIeQCBbQLJsuZ8q1RcryOV8+\r\nIydZb4c+6tqwGvXoXDxWNvNEOLEebZb+7aZdwfS3z7ZDzkrwRxu3ZXH9bJby\r\nI3L7a9njtbE3mx7y+/uezkYDt8wTgoK8tpb5fXfIGMzEo2+AZc/FnJqjK1Ju\r\n8wIOkd34t/gx2PRZSCMMkZxEfPpNor852+L7fZpZXzW7F/qQoWk4oOGvsRrH\r\nniFmTT3WrVolIlHT24gPwayokw0yIrgvw7SFgsYbX0QFQjkaOPnA1zr6AoL6\r\nUyWRmk5UaoWVOQD6d29QNXMvFEszYPGRefGP2VvVZLZHEKCNzUaX+QNnYjgS\r\nwxSpRhl/bIMb4p0mbSVbTt+EG4hp5du89K8sqj3n5rEnYSHxH5AC+sVvr4l9\r\nJwRIYmHi1z0tP8rj6m0jgDjiIegHfyNRkefheEXPn4RsU3oHSh+9AxZDEaBa\r\nKn/mWecAQOk/eDxCdTwCMXmrdtxJH4lGp2Y=\r\n=FXeh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8f57d41cc546a15258de2fac7e4ddca48b2987ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c492898c2.0","@material/base":"15.0.0-canary.c492898c2.0","@material/theme":"15.0.0-canary.c492898c2.0","@material/ripple":"15.0.0-canary.c492898c2.0","@material/typography":"15.0.0-canary.c492898c2.0","@material/feature-targeting":"15.0.0-canary.c492898c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.c492898c2.0_1672853856752_0.8108344487269816","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/form-field","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.d7a2277de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65307b9c01142fcf0d21fbaf532ca4f838bdcdbe","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.d7a2277de.0.tgz","fileCount":33,"integrity":"sha512-uyoGBeVNvwloBXpmFMDBNrLPWz93WTIV/GEL9kT1LkNCXDBtJVUkpNDVhZi84X8Et/C7lup/kUH69EJcanXBMA==","signatures":[{"sig":"MEYCIQCgE0/TU5pud+xU3v2SHjJB/pKkXH/aGffWmkujZZh15AIhAIExEmdr4V3d6UyOrkFhQKnK7BSswPPQezehw0wACzVH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfFSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcoRAAlyRCU+KRmfBJOMq1SNBo+xB1rJomXflsLOkR2nGbQYjAOebQ\r\nJSC8v8i4wMoQ/Q2hcacFUmi3K06sF92T93laqDSMspELZxE++zbU/7LYisO/\r\nzQRQPhLvS75JE4YdM4q5qYglM8i4a5p77GyqW12aqCN7++O5k1+vRthV2L+1\r\ntEyc9c3DA9x5keCzZQy7GnOQXJQdIQmPLP5FjqVvVcHI5WaOpYRp+BiQWSZb\r\nmClKuxEFMr5hLkjfU0lhWWvR13UoyHiGgQwnw9egob5ndChbYLtlAvV3d70n\r\npAU6GPQ9mAgXPKxmLyqlOZjBZ9ET6vDjl6VHEzbnbPiy1Fj0rZTX013bwv96\r\nYbHmy1nPzYCmuHaGK24BR6peC8ErsAnjlDvWR5HI/NiHX/4dXae1fmkBEAIv\r\nVRxPc2JEaX7ygg/F91kIy3LNlCOlZLGe0WhKoF3jRlB4BAsYEPr7Wkupbms9\r\n8XXJiwhI6vIMsjcJkqvSdEN7kVSX3JGui+5MAlgcCw6cv0DVAquzlMH4LOnu\r\nl2SCOhicjPy+2Yd9B1DeLvfn1ly6y2imss8aDXG+x0F7fUf9wE1veGSAM7K+\r\n4rVvL/U5fMfE/oSCvO5atzC6tKNSGQgq8lVNAWoSeh3CQsbyRF9LEXn5zZRf\r\ndE2w7e5lvTtCAm2L1Gpfyz29q9gUayTLliM=\r\n=a760\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f9c71e947019fdd0ca8837669de0401f3752d1f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d7a2277de.0","@material/base":"15.0.0-canary.d7a2277de.0","@material/theme":"15.0.0-canary.d7a2277de.0","@material/ripple":"15.0.0-canary.d7a2277de.0","@material/typography":"15.0.0-canary.d7a2277de.0","@material/feature-targeting":"15.0.0-canary.d7a2277de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.d7a2277de.0_1672868178631_0.153519015757819","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/form-field","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.fd95ca7ef.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d950cecf861af80e15cb965efdfb8032db89df35","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":33,"integrity":"sha512-sWXmwxjfihJbv+O43dseY5Tp/i5IAa9l7D2W6guqavrdkUvUgPO4sHXqyBpd3IGaUgtI0wxgWc7kdShbjeyblw==","signatures":[{"sig":"MEUCIQDWUjzaog/gmjPScsN6ecRQfnWHq0sOsD2Td5AmJgUUDwIgReNF5zNrxgxdjhQ/R7dwbEEIMMhR0kNHe0tNhNSZIyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiHZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCZg/+ITEsl8YEuRpl585bRfiy9QTGY9HPaPx16jsUtwzP7RPQXwCc\r\nLpTwXEFgmzbEi/nMmeRyTc6CeReNrDIIOZqQToiybqp6hQhYSGrE9RfmNLgk\r\nJt8Syd3E3/MdVtt3j7dPQMbSdkthQmc6mCPe20AsJYdpPu8s/bpDvkDfas+U\r\nj2HcDZt3T9uinJgACvl/otudM7sRERVur6hWGOJk+X0uDsofv56Tc8wDEtJu\r\nPthA6BcwGmC9kItN9Sml+84qoClDkatarngGLPjJLqEfX4lXRhSScI1dMFQ3\r\nRTdXN0Pnxro8vlj8bx3+YOA36zEz7bC7fW3A58nmI+7vzEVLvfkvBf5Jsq61\r\nd3sTh6cfGLZDarXTXUWyVC9c1Eohfp0VoHVRmjatTTGgoSZq0qZ6AQkudBXz\r\nfJcDDi+5/tUwLVpSFtmfARJYdmvNycBcGxAzbXKFQFoXq51v/pCPNB1SIL1F\r\nLkqTbv33u4pJPRqa/kZqyMiQ/m0Dqf8sfmq8AQxdkbVFMrEAq1NPNm6P1M+R\r\nA5ccHadaY2Va0sZOFOyWTMyW9m2d1FgsX5+1oniUuF6eowNEHC1mW97Jw61U\r\nSF+ytUuxsC1X2a/Jy97ahCvy9X5nVckPGcuBAMIM2cwAykgv6MhsYRHWIoTb\r\nHWENDaiGW/VQhQEKGT4AgTz4Dxn7c5vOqaI=\r\n=39p8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b0d2fa371ec4a3d0a8a11e19d9753b1af5d2d62c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fd95ca7ef.0","@material/base":"15.0.0-canary.fd95ca7ef.0","@material/theme":"15.0.0-canary.fd95ca7ef.0","@material/ripple":"15.0.0-canary.fd95ca7ef.0","@material/typography":"15.0.0-canary.fd95ca7ef.0","@material/feature-targeting":"15.0.0-canary.fd95ca7ef.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.fd95ca7ef.0_1672880601532_0.33712128962550136","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/form-field","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.1eb44faf9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3e9735c55d273ac8d4ca66829c6d6aafabe115b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.1eb44faf9.0.tgz","fileCount":33,"integrity":"sha512-3lAFjVrysMEUEv1Xl1HNhOmT5MMqX8RlcN7lkhlx6IWzUu9okhW52Gm5J0NYHcsDIo5tTIrD0Z3tYyYqk5hAiA==","signatures":[{"sig":"MEUCIQCBYO5KMxvdXiXYM5UB+55tpMgONdBgP8yStHCl28swtAIgcR+Df/MUDcwGLLRlvgk1VgW23bXttCxgCSB5APj4qqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpPlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3bg/5AS2UaCGsnNaZDUviN+HVkuegfRV4kbu7vYQtT9UojBYTlbYN\r\nEUNZzU2k/zcVRP7UpxfuIYf8ns7GSF9Gx8HdbXWF8lMHuW8X2pDxYifl7Wv4\r\no2GpRQWw40le3PaZ/P9VdwiEP7YgPl72LpcyGV9JkfTzb343rU+FyMQak9Oq\r\nj3msqCfWAAOZ750JDgNbuznQOFIr1jNLHxM54tMND6Okh5MPWlxeE/j4Vl6T\r\nQpo1uxAc4ndZ3xiFIsfxtBlfoftkj0o0a3RJUESkHVqVq4gyjvbaNNzHaGFG\r\n6WaP40WzEh3q1xWLCzRDOBTmPWX1GFX3iM1tLwGdCkjo5RfuK3tdIPZ+9Jc8\r\nGcPVmQaGi0BNDV3BFvJf2SsxQmBqvGMKWtvvvPPHS94KEbm9TfECE4K6LcCl\r\nA6lgl9WUSEvG6xvW8iLidUQnZmWeUr1X/f8sJUdjVReeq0/pFkekt0L4S9tM\r\nsIAJ3ZNzbzadlJLgyQ2VU5qBKg7nNiltc6ZgYRSnjX88K8b227T8Q07BhgmN\r\nZliJ7jI7UoDc0FQhN87ET1dhmhKFN0Ozrzf2Xn4nN1Fxlxtc7uFdh1b4KT30\r\nFt/JAN+OxMDMi3czQssJrn9/uK/B7zSLIjQOMHL8fmXhMUem5JrMxI17xHLX\r\n7BABg9op3Oj+xNccM0qkunudxVK3oi7S8zo=\r\n=uuP+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e0eeb94598a14217ebc97ec3e249d126a29a13a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1eb44faf9.0","@material/base":"15.0.0-canary.1eb44faf9.0","@material/theme":"15.0.0-canary.1eb44faf9.0","@material/ripple":"15.0.0-canary.1eb44faf9.0","@material/typography":"15.0.0-canary.1eb44faf9.0","@material/feature-targeting":"15.0.0-canary.1eb44faf9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.1eb44faf9.0_1672909797142_0.6124071596368186","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/form-field","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.adcdb7db9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3daf03443ef7c15c8b40b5f69beaa351ab0069d7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.adcdb7db9.0.tgz","fileCount":33,"integrity":"sha512-cdaVLyb1ygCPX+Ls5j74gaXsnBgDQ3BDFqlbb7UJSwAuPRZOmLh3txxm+E3Yn4nROBmdtWLOl76rzYkPMVCnhg==","signatures":[{"sig":"MEQCIGPc8AgabtnFK8mSF2t6rFuvHjnEmHOtVUCwzliZGR9MAiAUjMyf+Dbd6Ra85MA0lse8nDlb7FDZKLzxvbhHizV6Fg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvktACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpM4BAAk5CVjE4fBVIG3BmAtM+uVUheopqRRkdP6HeEAvGk7U7PvCtZ\r\nn0mPSm147N/kjt0J+2JCwvNwnBthwOW9eR1RrBL1veBMwXblOxRSyUUVN1t0\r\nbSeUoAOTGguUz3BPrKPKgDABK0O7uwiQbOQ3fhCCnnnbYwdsCYbUWpWfyHeX\r\njIDiEYEDL54PW2VDPUf/n9GiUj1CDSCZvUjIuIxw2JTXsRXUSr/LgYF3KKW4\r\nQqZZ0N3yle5mRXN/rJkefgw514dCvsI2XeJD1D+IBEFdC0ISdYGN2PnPCwhB\r\noBqkNiEECVjEZATru+P35aeg/0qvqppDajRLd0fofWpiBnaLjQTo1gGxX8Gb\r\nHTLT4BBWjfEEpXo/5a1HGLplx7pm3YD2ySgJwuadmSKstUNjCeguLIEtC5CU\r\nOuVPMyUJOPwzmsJn84NUT2SjQGfAr7eJUPLL+5bgSaEjsNR7hrq63Tmfr4pQ\r\nzDIzlwp4tCdOQKOrS6+RwWu/aqjBnJDkzHYA3ZkKKV2DXvLysUQCB7iYTjqM\r\nf68ZAVrsb+N3/mAd/t3bo1CenMutuNHG8NXOEf5eOaUOVFs7Hiqw46qDchkB\r\n2AbR3WLy2F6CjcSACTooF/MA9M4GdmoRSZxwo3bQLCxN/J3j96Ozc2mKbFp3\r\nX59kLhWXWr0iwtNkc++y/eVacFH1Lg4OFTE=\r\n=BIr4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2bb419da8b7b393c085616b6c5f28a3eebf832f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.adcdb7db9.0","@material/base":"15.0.0-canary.adcdb7db9.0","@material/theme":"15.0.0-canary.adcdb7db9.0","@material/ripple":"15.0.0-canary.adcdb7db9.0","@material/typography":"15.0.0-canary.adcdb7db9.0","@material/feature-targeting":"15.0.0-canary.adcdb7db9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.adcdb7db9.0_1672935724847_0.5039736016323408","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/form-field","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.067af7eff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e742ed73f8b0026e4a7e5ffbb0999d9c7e181129","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.067af7eff.0.tgz","fileCount":33,"integrity":"sha512-cqcOU6RCIEzoL7E5O23ngY9ami4UnbhbpzMGEI7l0ztPTaurn8oBuzO7vyzpGO2IXFniDB5X0dWxzHqHqV4hRQ==","signatures":[{"sig":"MEUCIE65ydoYoLViP+NoPw+iGj/t0dh/4zkEFp3wfaakOfdBAiEAwHCXUFew/0izSDBb7owJ3H8hM2X1PGzC4d+VnkVGNNQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKvYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVzhAAlgjKhjEFthTc+SJi5LvWmv5j17KTGFnjUMfptSMutllsUUMh\r\ntfV+K5gCGSpJbMnUuTreEz+Mc16MSIHTs8Lcz7uX8d9OevCnJnEDFI8RWFYL\r\nFcNw0PzhWBm18n3L756iec1cAnM3Q94oA/NxaDW6D2RfErodENBoAj8k7c86\r\nT8aNRyXedHFlprjoPryhB17FzaTP2f8uzVngG8z5iT4iNHyP3uxZrCfEK0fK\r\nFkqV5tBrv6okgBVlrQCzfhrREp+6ApEALz7a6gjMzpFpX7wHUPasR8uGKQJx\r\nHZwmbHmGOXOxvv78o7JrFiRwkbN5Iw/PuggTWXyOdx6vXeUMmXNVacYODjMo\r\nP8CzaRfen3+ih8tddWEXeC7oByOni3aDMGbC3eARu+J6FJzDuSyO8TOSNT/2\r\nJvt1+RAMPZnZqIVISe33PrXcjVw1FAustePEhD0/+6ZmtB8SN//iNAeSMZc0\r\n0MH+2qxpwL04dnlSGHAYndoPB9we3GycNJLmbpKB0KVcIZKwv4uG1wvQkDCO\r\nL3CwSTbOka2Zfz3kyf2Zo3Zmwuj7Sl2BDOupf/CAoRpLNPM1QFfz4FARqV4e\r\noFOjtoMfryEIhrLGU30BfV8mrBnIjPIWYEM15jWEdZOGfEFM2HBPzQZfTMjw\r\nExQsxPm+5rB2e8/wuRFSBGfRYW53eaeRRn0=\r\n=yk01\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1fae2c792ff8ce557995a8d5d858676b4355c7ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.067af7eff.0","@material/base":"15.0.0-canary.067af7eff.0","@material/theme":"15.0.0-canary.067af7eff.0","@material/ripple":"15.0.0-canary.067af7eff.0","@material/typography":"15.0.0-canary.067af7eff.0","@material/feature-targeting":"15.0.0-canary.067af7eff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.067af7eff.0_1673047000563_0.9578406054070414","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/form-field","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.21d1196a7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42f7c7836822085861255cc2a99920cf96af91bc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.21d1196a7.0.tgz","fileCount":33,"integrity":"sha512-bQTFSsea1eqXelhTX2ToKTW/789htXGGDWCKk/jQ4AO1uz4LAsdCMRIwlZaRA0inuYJzXHzJv3tHzQC9UVySMg==","signatures":[{"sig":"MEYCIQCDQkbDieXmu1Zs5tWgvLyAWwHqzF6XJAAmcqguRBc89wIhALonSUeV3i64cXCLe15nS5kRjDa+W2jaSKhxdBabdOYM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju+/WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr55w/9FXndqkw4BreOO+zvikd1eSx2JnMTkJoA5hYjjU1WSBZc7b/w\r\n2CNBFt2Pl2GuhP/PfDeLNOIUoVOkMM9D3plIWLbXPrhHNn1jn93Fq/zW3Al4\r\n5rzy1RhUm521tiI+E04rmN4nGRaSiFV9EJ9c1bK50skoFKt5LtSbAY6rGsLY\r\nMn6B7Zm/YhYPQzzLefXLX70hMLfl2PNj3HApu/FZmIvgy4+zLJpStTo1CHi+\r\nzOcCHcSuaHXSWOkJNKP7Ybrmy5YKfSDGDwgX+g0wXWx5JZ8k6LbuaNVJd3Ux\r\nefcboh27iZh+wcVtupCs1X23EHUzzrinXduKb2MHhFDu8TlmK1wx2ionPyEJ\r\nSd4+jzHvYQaN3+dIEeuwFGpvZkvYaCT1QCtO3QZF9Fi6aTZ92m4iKUY4gfil\r\nylC76YYM5FzdkWFzqkagbAkSKUCZjTvBEM74XSCn3oKbsxrA5+6362BSf3/N\r\nQ6Qt2JysC829LY7KVnHwfbcBnOUGag7YhBzl89rLSJ9SkXE25CBCibhcEGDX\r\n/ZPN0sA8E9c5elPqkDrLRQ+DzT5GhG47jhQXj/2MfRGQhUWNS/PDarKIKzA4\r\nZOPhNRXb46i1QVjVW1n0scJ5je8c6O0nA4VhQIcJCoYRf7vVomblA7uko4Do\r\nZK7HHRtankQwyU5kI9pyAdgNApacYnVnV8w=\r\n=sqpc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"361e536c54e276112f021b419f666618a20599f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.21d1196a7.0","@material/base":"15.0.0-canary.21d1196a7.0","@material/theme":"15.0.0-canary.21d1196a7.0","@material/ripple":"15.0.0-canary.21d1196a7.0","@material/typography":"15.0.0-canary.21d1196a7.0","@material/feature-targeting":"15.0.0-canary.21d1196a7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.21d1196a7.0_1673261014537_0.408896450923115","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/form-field","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.8d2d8d3c4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8014c2532745859d82763030f6567b83328fd706","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":33,"integrity":"sha512-F5tg+/v8fiehsVd/9YVH9BBn9xNWPhNVSQFDAqBae5nh4ETSjFxnyLreHvIYk4MC9+pgd/z+j5eAwBCVjx1xPw==","signatures":[{"sig":"MEYCIQCfBQN5b8jv22TNtLSZRAtw25S4WSg0PwSqNhh7cQld/gIhAJs8IRMaPwoscENRMpjyUzR1VUzOdSdcVgtj7AKaYmzz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJQgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrp/A//SgvX9IiX9J2iqujUTI7GhYBcw4/gio1mFaxj+z0UI9MLhQXI\r\nyOUb7SH0fYbUln9pJkzBEBk2b0EhTJksSoO5YbnQc1qBeU0lQfKjvwIp/8dL\r\n8UpK+dIvPANX0+4PgISTztv2hcpmZTCZh/gPkyoHNU7Z9O4URwNZnpNbT4Nd\r\nBF7+Lm6zHdUGDOMzOln6ZUG1TxGsLesknCzSeupExLtEeH6ru0ErcD8z+tnf\r\nRu2ukZg61JTNgkQMxabr2GTSYulYAAnUpHadgqAdGHtXmTHHlATzl1Ixckzl\r\n2TWBGeisAJiCMvFLTXKAVnFEqcAzvhKvb5YXFEDYDpLcNUsDC7flAycNMhQU\r\nw3YGHBg76CoVzmewtoCzA+geAOTXZoBwUiwoXay6+9QGxQoFNsGbDxzrkkNN\r\nKA5jS/GjymsjzdTy3IuqCfPMEtpBcO0CEjY4uBACAWk/fDRe4ZdJ2KAx/BiR\r\nC7C5Bs1s/UYOAM//JucT6nAN2LRJ8VsvreDuaehTTUcO7B/Be/v3gRkxixmP\r\n9mJLzx6eTsSYmsBjCbz1s2Excu5L2/R+mdA2lQd6PCu9hU0BwiieZAlqhdUY\r\nz6e0uMFi3o2isKB2CbDNykRjYajELhPVwZuaqmx+T5U317ILxhRYtEUMmN/o\r\nRNeE69AguS+7R+jvLmWxDJY+oxAQLIt/G/4=\r\n=S5ES\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c2df4624468d99280d9dcb0894d04d839fc8673f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8d2d8d3c4.0","@material/base":"15.0.0-canary.8d2d8d3c4.0","@material/theme":"15.0.0-canary.8d2d8d3c4.0","@material/ripple":"15.0.0-canary.8d2d8d3c4.0","@material/typography":"15.0.0-canary.8d2d8d3c4.0","@material/feature-targeting":"15.0.0-canary.8d2d8d3c4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.8d2d8d3c4.0_1673303071783_0.025998434637000578","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/form-field","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.fc6ee6c32.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e270155bbcdeef2a8b4a3f4ea6ab54b9411cfbb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":33,"integrity":"sha512-RCD+B0wsD5X7YWLA6OujIZiQJQCl0S5Z/eLlttWmW8OVN6FAbhnQoyp/gM/Ir2IzXKjNL4FuBT87rckO+i0mAg==","signatures":[{"sig":"MEQCIFnrsBCH6tU1WtN/Q1mlf3zK8HDGDU7gpUAV5qfuHzLWAiBX8nZ55M8/zRbvMzm52Dc3V1c/RnEaxdbLt5R9LiGJYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZI2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrsig/9EWRsocKZJwTLvJnRBQAo9kyKBuRXxoI2x96YWnwJrEq2rArM\r\nEUeZc8Cu2ZPul4Vr3gNlvLtNeYa+WQ4pp53FA1MDf2a9o7atkNNGlnxbgc46\r\ndi+iZ2o1wurTVYk2pU35c4wgRUU15lspqvN9Dt5heEIpMbSV/S8YDUESHcLP\r\nskwEZKqOmP7HFNR/Q07/0F4q/mMbpVU+ycFi/UbAg0SYDhO0ouzqW1JDkk75\r\nT/DequPHt4K9J19rojrKlvk8n2tr1QR1vqUl5l4BUCp8BoSBeR1JL21hayuK\r\nnU8U1xdsaPx3SssR6G3v0efTfaBdWWEe9+CNTNVMoEqSUZlHeJiUvTpl4gsk\r\narbFe66nHCN8+mlC1EUEE2NNOeYXvfZ1wDtnwWHyZPJkL0KL7KuB4wyEiBpw\r\nvyRXYPXi+hipjI2Wl0PI5qE/ARt3v+D0XOOeiLFRhKrgQZM4wlei+dctdvFG\r\navlEf4wvA+3qItQ0YN3rtIYqqnBIC94+F+KXIe6B5olVoqVB8n/wbmoX/SNR\r\nrPxmBmGAzivF5xyupBo9jAxiMi2uomWqiS3d9FKeyU6ANCP+hnAYiouSt/US\r\nDkny8rh4yiQhXWuZ17/qhz8ksieNYGWba190ftYiF2A/OuwfKSy0mjgjguOv\r\nJ9tkfVKQHPSDZ6BgEokA/ju4PUnyQIutsbs=\r\n=Ni4T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"225aabdf74bdefc3d2f70f268ddd04c501a821ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fc6ee6c32.0","@material/base":"15.0.0-canary.fc6ee6c32.0","@material/theme":"15.0.0-canary.fc6ee6c32.0","@material/ripple":"15.0.0-canary.fc6ee6c32.0","@material/typography":"15.0.0-canary.fc6ee6c32.0","@material/feature-targeting":"15.0.0-canary.fc6ee6c32.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.fc6ee6c32.0_1673368118536_0.7517647819388791","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/form-field","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.73537ab0f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d1d0072c2e930fa0fcdd96e9235870589b473ba","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.73537ab0f.0.tgz","fileCount":33,"integrity":"sha512-wzzYKlkvamcHm6WbzILDSp47v2GdUXoCQO/Iu6IstmwXxS6b6A7YdG91USsZsNinuMTo3J0bHryAfnvpHY4hWw==","signatures":[{"sig":"MEQCIDCg81zNS1v7QWNymD4a+mdMNfVo8anXSCxKEw72AXsyAiAh7KmHjkhUkFCOmf5eTEj2iCnKLWSyc/H+lWtemeALMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvap5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoy8Q//avHsFRY+HAq+r6MYeATvmINA8pkgxk7791LqCWdZX4vMnAke\r\nSs0ga10MP4CG93FXYdsIDhMeMM3A+3yfrCS79BsAtZSapM2tDIDQLx0NHm6j\r\naeh+14MIL42jPCjUq1msmsmizpVH+XGPaV4xe+Vkp1f5kh950n8XU+SLQSIF\r\nLwAE41JCHWrmtp9jmEiYViwpVLo1FHBIlqf7GccIpQrr/AIjNIalVtom7ns0\r\ny41ZXjxJYNtSlcYX0uwSZXTlMkD7CKXohWrfJiC6D3D474iUh2M72KYp9vvd\r\nTB/8zTA6ijupocP9ZzBuqcCHQUjYk4bcOd/nPqNZt32TtAf7X4TARXtsas74\r\nb1qukdlhXnLn5iQUlCqraakwcIzrCUyKsED2p2qMJbFHpzeO04jNai25Z+6W\r\nb0rMKGXqxRme2iyCDM7OOvJUwn6cfa+J8iTBoTFj1cJ+w9TpDFTJJnGBbjLx\r\n9LNJ+T9VdpZSVT627/F+ryAhBcAAR4R3Cq78DSGibB/D3rvquCGUCqzUIUW4\r\nJCX1gikrUl11d6aH+MpRR/okGLNl/Tk71ECWGHyzuqlB9YYCyqEyDmYJ1E0P\r\njdwMVgqcfAjoB7BKwf8eoZllbiDiKkndXoEAku4RGoQJgshm9HSrB+d701B0\r\nMgNeRYszAW9aRulsenSPJVx78w+iS4xgmZE=\r\n=BEF0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cb3a480e7be3c8c7bc8f8ee0acf1ee8145f266b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.73537ab0f.0","@material/base":"15.0.0-canary.73537ab0f.0","@material/theme":"15.0.0-canary.73537ab0f.0","@material/ripple":"15.0.0-canary.73537ab0f.0","@material/typography":"15.0.0-canary.73537ab0f.0","@material/feature-targeting":"15.0.0-canary.73537ab0f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.73537ab0f.0_1673374329655_0.42143529780103295","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/form-field","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.684e33d25.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"033930402e9766c2c6249caa6e1295557af61a36","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.684e33d25.0.tgz","fileCount":33,"integrity":"sha512-vpF9N/uq5no/7+8GAbEH0868FhOuBgxAWRr1Sfb+jthKfBr8OS/wPU/AHzZHdHdAm7PQynbeOXfDsX2dI//PDA==","signatures":[{"sig":"MEYCIQCJ+M2atDZnYagGWK2adaTQds+0D9O1wBB/s9WugsbYXQIhAIAzvNPFGIV5/tHlKL+dEzZUyoWXA6nJgjkox27RGC7r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbosACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmou6g/+Lec1sOpV39DXH2nG1d95CpgrAtT4qvSwN9S3Z51wj8SXy3AC\r\nb88g3p9duhUxG62UJa+99s+gZCgqTuxPK7COPeh0u6TStDhU9m+U9/e6KPjP\r\nCNmNeBv2iNf+vFL0khhAKaPSi7SbNo7I/vRGFvlEDxp9Rrz6f7QFQ+CXiJxF\r\nnOwzERjEF/rBFXO41gLzyLWBbET4DA5Oub922u6A0T6ssxm9YXGkv5t2ozEQ\r\nKL/NWTNjpx0s4tHZTVs5rdMGFMK5XwhdS6mpwKw3f9wquWjy4TUDEyb4eW74\r\nGuyktal0zlSzXgssqv0Nd2matOhdIWiXYCWtX24vJB72AoyNP3D8XryEBnoJ\r\ndfsmTL59nEBjJKmcxDD13lvZ1MdT+5JCjg7wwXaVfxrwpjUXC7uoH3gA8RYp\r\nwBKUR/cN5zYp64GEyLD2/rqWWWgZQQGVBqYYxtTFQfsyx9QOHMjZ9Vw83ezI\r\ngHbkMm7KG0ItIBHZE4UFiw0Vi8SyhSBzLJ/6LnB6Kkghl2O9OgHGVIpaOCWe\r\n7iHgRFkWTNh8t8GhTpcqx5G9HClG5A2ka5b8N0RH2AHFaDGNdJoQS7toaVhH\r\nKzR1LbnN5N6CgtKerwCTyMPoPtDk96oYhHJD+3CTVpbyPnZN4o0LXdoD0qCK\r\nN1BOI+qrW6g7fMnjdGT8uNwmhZTJI5vNNGE=\r\n=6SuC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"518d26a1e091925c1b3a87f4d4f4dc828580a863","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.684e33d25.0","@material/base":"15.0.0-canary.684e33d25.0","@material/theme":"15.0.0-canary.684e33d25.0","@material/ripple":"15.0.0-canary.684e33d25.0","@material/typography":"15.0.0-canary.684e33d25.0","@material/feature-targeting":"15.0.0-canary.684e33d25.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.684e33d25.0_1673378347955_0.9504376771597891","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/form-field","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.0e89aab6b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7016b729ed6148c2b4609c4b0e363579af150ee","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.0e89aab6b.0.tgz","fileCount":33,"integrity":"sha512-h0LIlohcdt/VObBEcOUukCBKef7G0+u/kvP5BRCEu+KLIclGHBlo1PMR3uqM5DY93jOP4Mr3q0snEyVpOgzihg==","signatures":[{"sig":"MEUCIQCa2nM1SyRR+SBldwrGE8Ji6cVdXPIH1svAZNkYmRmUzQIgZhJ4RY9gEybEYg6DDaMZcJEmrr/INzdg4mAZOHyfWXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuE5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMyA//QEnVc3kR2qekwGnKmZ8NlmBXQPydhU4EaNWRgP+BYIKptD0f\r\nxxarfPiiKBhPLO0S3OMA3I6sRWocNATirPUreGxHbg2izWx5JE9RW0QSp7jt\r\neWTUgKdd+MFhYfDNtHzsS8kzGNtVHfWzomhqfsz1pjJNix51Ws/0tRW3maTm\r\nb1INzDOsUUzIRskNZkAbL6EluvzoNZxeMbyfIShAlPzZz/oIjiJ3ZQcSSquO\r\nj10d89X7cWrQoi0lt+OI/dVJSqbdzcJH01f1aDzfx8TeEmynJNTqqxVSX6nE\r\nG3jD2bi2CuukTV9Au9zb0+gqEZD1cOg41FF2bWLHkZnKYLdQBIX5sxGbNgfl\r\nIO2rEj13UnjoPLAMT5fpyfgtFN12HBSF3nGSzaqmx92qW9waKqH+wazmyERF\r\n/wZMP6A156OnZXGtQIFNcIyQKNwsQylpwPA/b4qgtBKN7+B2oANKxFQQsoAH\r\nE22UVfHbXMhbSNn0F+33h/49S0z00g+07aco/AoeY4C5hDv0ptkubkdMbsib\r\nLMMycUf2mSBa8Iimnd+NykuY1CMg9Wr2YrPyGHA1PTUL6GPXX+FruWPnsNPL\r\ndUSqLR+l04mvBJwhx8LfThi3JGmRzSFVIMyP+bmd9tdd7MjiBmCC8tgudYmH\r\nwLvPKHaWemcoNK8R2NuRxJDib8QsynulE9E=\r\n=tkE4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e4a9f0d636d7f4d6c0fbbf49a7016627715eb3b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0e89aab6b.0","@material/base":"15.0.0-canary.0e89aab6b.0","@material/theme":"15.0.0-canary.0e89aab6b.0","@material/ripple":"15.0.0-canary.0e89aab6b.0","@material/typography":"15.0.0-canary.0e89aab6b.0","@material/feature-targeting":"15.0.0-canary.0e89aab6b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.0e89aab6b.0_1673453881679_0.45100069998182457","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/form-field","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b0103d10a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8eec5a0d6ef6c637c033120695039e3abec26aac","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b0103d10a.0.tgz","fileCount":33,"integrity":"sha512-qacTzE9DnovnbH08f/dBDgVi7ZEMveaEcTH1RAYHDJJftJ36rHWjLYpTERkANj7XFhGM2XGwh57iFpZfaVtbpQ==","signatures":[{"sig":"MEQCIE0czIYw5YKlCQ7F/0NN2vieyq4pjZsCbyED1oMLMDWrAiAfhzS4bOGRBm+ucGno3RnykLXyzoCVeNsXVMOExE936Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwoxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpg5A/7B/iPmAPrcepTrLPLgiTiQ8XQI91yAznMqoqLs/PBvcAcH10P\r\nUuNNyUzpecVD/+oqX49rBAn9iZwN425Td6W8nPMUhCWkf5HFEbgmb3a4GT+d\r\nzCsLSsBf7nA2Bqw0ZhZeOW/psSnmJu0/sTpcmoBG+dwo0Ubk5HN4J2HaHFSx\r\nO+Jos7uzsdBOv27zpILTsUVJLxLNmCD1Lsm+bqi5VFzmCF93zKNy6oZR2n5i\r\nLRDrw4npHC66nK9FgE2NC/tiMZiYjsf/J0peimfTRhu3p5Dz82uUOYrFI0p0\r\nCMJ1CPsEZsZsxl7wSMOEUlPtSQ3oUaUXvG3w2wEOf/z00DxtygkgEM19rFPB\r\nX1q/VU4ztXEl2CjoBUpxd4P5o238wOQu5NakLnwUtEWCoHmFIST8JRKmeUS6\r\nQ33L1HZPGrJLK++pNBXrwJMQsUenE89JxzSbyT8wEnRgEGicC3mW4d0fBcvV\r\nYlbxsyPiOVgJ0gPbtJMfHacrx0iITIZuffVb1s+SZNc/P+hCYzM2PZQIdohp\r\n6Q5QqdkuIi2sLqJ64Tgm1QTSsjGIhv+7ec9HNZn4wWMDNaIkuqj6y0yhJ6uC\r\nYkW4ZND/oFJQforxkUxlREG7Gsav8wJPO9R7oyYDSWrD6duX9cghLvzCkCDe\r\ntzYQNquwZV+CdE6K0tAgUWirv8fVvx3B874=\r\n=PRy7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0e133b89a4afcc8020dbafdd4d22c734080d2d17","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b0103d10a.0","@material/base":"15.0.0-canary.b0103d10a.0","@material/theme":"15.0.0-canary.b0103d10a.0","@material/ripple":"15.0.0-canary.b0103d10a.0","@material/typography":"15.0.0-canary.b0103d10a.0","@material/feature-targeting":"15.0.0-canary.b0103d10a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b0103d10a.0_1673464369077_0.010390085564130791","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/form-field","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.50e7a5312.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e9499f443d7c1f8b0acc3422879c19fe7f8dbfa","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.50e7a5312.0.tgz","fileCount":33,"integrity":"sha512-v+luhmXVX0Z99mVylgRdI9uljWnroLMDQ8R7JUQeZgh97zC0ohIPAFeRaB4G4McuewtsNf/Zf/dwyEQM9u4mGg==","signatures":[{"sig":"MEUCIQCxG0snzvNjXp0YbeyDm8uYy6e+Nlbf0u4CmZQccPgYCwIgNLhr+M1a6OpHhKZlM59+5qiH5J/7N2/pgOMMmHSvx08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyIZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoskhAAipNCIJF+ApmKVHxEHrI+5b6GVjosLzXSgbTXb9GIj81UUuTZ\r\n8d9xowL0qZaa8BKUYK/7RuHPYe6uNIEjeCH3T3s9LZVJv6Ad1lYG4kLOGM2G\r\nvL/nCvoVzmXdBozfH8pTpePZ5rhGHpdlaIL61El6Xt+FbipA8eu5ieOUo4Gc\r\n7F4WLEhPENbveYSzJwxqzvZDn5sMfVvuPwEeHkQiWOpXiQ2pI5ySW4Bgx5i7\r\nrockfcFJadWTkfSfBqQn3hXRZ+R2i2tQ2OQSv4NJb0svGk/JW0ahLvacx3pv\r\nkPcWke5Ks/t+SdNZ7nECYueKG0DsJ6Eww3ZL+PzX4AJ7r2ojhzAUtfCuPlPQ\r\nKJGD7nH8XvRrMQWwL72W/jV80iM5Kckx3MFqjq4dgSkHLMA+0CzxLIdsJxof\r\npMjiMr4v8vb9S3/bfY7xAvGIrH3/JUDgMFsfH3B5DinwvTWB6ZZmW5Pb/0QB\r\nyLk0LR77c7ySYm3lVafY+tqGpb7bMEv8wll5rFWEo7u/ngoNhFvGWK0r8+Z6\r\nTe6QIamnCvWA4OialSXZrV6QZ3YMZGukhuqu48uzw15PpamFyIhCw9eBC94K\r\n4zueRru1aR45CUVtK/Fwl4LkiSZfHIKFMBPyhEloB4prIPHoKxOuyvEQX7zK\r\nie+a9grAfkcxyeB1/JLJIPInGoPyl5xW1uw=\r\n=YDQz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2d4b8df3edcb9b5e9fd8d8b6645dc9519d92f376","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.50e7a5312.0","@material/base":"15.0.0-canary.50e7a5312.0","@material/theme":"15.0.0-canary.50e7a5312.0","@material/ripple":"15.0.0-canary.50e7a5312.0","@material/typography":"15.0.0-canary.50e7a5312.0","@material/feature-targeting":"15.0.0-canary.50e7a5312.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.50e7a5312.0_1673470489574_0.1885172181344048","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/form-field","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.202823f54.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af4f4ba9c32862cbeb976d886be84cb8625f8069","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.202823f54.0.tgz","fileCount":33,"integrity":"sha512-ttha9mX0QU4xTdUBDLQjhMRd3os/lhZ8/ZTgky67WjHgq/UYQwLkRUoJR0VXrdcUgun+PfMTGJDSpytfGw4Ecg==","signatures":[{"sig":"MEYCIQCamlwwndGo2uKY5wTTcCiJMItnP3letxwhWOgzT0yzMQIhAOiEonOpzxqEnxMi/yNTRIkDuWCGnpr7KGcZnmzejWJo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyvVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmry+A//QPEKDb4F9uSNjftTCtbrjwF8gHXrxj5QHYM7cnFpjZk8xd4g\r\n+cowDPHzooy7FiGKpTeiIAbDjD1sDGKVT4XDdykszbLJVc/1unqYGn62v9pc\r\nZFuBrF7pOAQ7fUpORfsHcB7soK+Bncgng3s4mrp28TtideYf8++tXjkS8Ybu\r\nQEc+wJe1NJPHJJs1bAJEGAKrzbjxJxtxwaBVqEiFx6xdrUotI3RgkW0LSJem\r\nbxUVAdfgyQcMdK50WzS/rxxudUa/LCDJ8j3X+DDSa033734w/AoIH5mzgYjy\r\nc2Rod6amwv86Q8RUbau+/AbV9IWXurAWl3fVkaPO/BzRZPlRCCgvvS5uOdFa\r\nBJcx4BW2sQpvrWkO4+TnPf4DPw64Qd7tf5x7UHlq1Gcj0hRXDQczLt29nvpu\r\neLjRmnOSt2ypJkf/WcVUiZcnIaY0+ZxQ04L0KL/l5/YUopfzbDIlcmZrELmY\r\nVuMjFYI4aW9jPwejHT9+Y/1byJ/uD+37yrD9hQPEQeMHA/a74GFa0OKDGqVv\r\nWn2+MQjR4vGHfEq6esTv15iYNwwCOjtJQUQ3Gh/lRjfNDGKMy1/oeSvLASsz\r\n5vzdmNU9zHIoyAD3mQgMJxGbVma0ZQJ3PWuGeGCSjDtKP5rWW+XPiOjqfeke\r\nHH+gK0nIqplndgdxYiR0FIKHr8xpjRBBgS0=\r\n=euJ1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6a4dbcb0b4c7d96a85ebe59a5ff66d2469e177a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.202823f54.0","@material/base":"15.0.0-canary.202823f54.0","@material/theme":"15.0.0-canary.202823f54.0","@material/ripple":"15.0.0-canary.202823f54.0","@material/typography":"15.0.0-canary.202823f54.0","@material/feature-targeting":"15.0.0-canary.202823f54.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.202823f54.0_1673472981233_0.12550629692758353","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/form-field","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.199fe2a2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad79d6b032e2bb5fb4a538122dfa6e721755f146","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.199fe2a2a.0.tgz","fileCount":33,"integrity":"sha512-azXQpQGTN7pYSorE43OsbDngrbgq1USGzJdY6SiJ0rFJlPvpEtO7DQr+S7sn2HivYxF72/eu4x8aT654I4TIGA==","signatures":[{"sig":"MEQCIEC3YaR/8m8aN5IXER3FMtHBGFNVBHtiY+ds5+89ARySAiBEQQejNh93CzGqFAVBNSHSylSfqhoZLmrp5KQaiGmk1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzCAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosvA//cnadcHKOXQvd9ClS3gKhnetZrtTV1VbUiJPCwtc8ddMuFT98\r\nD96b/DEOWJNxZkGw/cDlLKiJM9TjMsY64dafwWJYgloj00MNih5dWOXr+WVw\r\nz5k6IFhoUUzuYaDakk9On7Aa8biRqgqDhBFxFApwVqWexO0hew7LSVCvJThB\r\nrRDt43hqGE2YqrAaNwcMZDT0KYdz+RcMoyaONDxJnoCw+WCIvFJcimoanK4X\r\nZNN3QZXPJS0Pv8KlITBCv+UMrMwdpLHVXFXGXs48hUlOjdn/GdLA137hP7DH\r\n01QR9jtEhMEi3NKShjurTW35oqFbKJKcjK30XbMg3GnmDznC71cAN2u8Xqdu\r\nYftac66b5z6ucTCWSoW3AkvSPo04VPlA1jlak1r8ZNXXS6C+CXhP8ndF5BYY\r\nCEzxdMCNoWc05ahrhaUQAv4IpuIcwWnJvLcHm9YwFaceiipW3M4Y5Qgr7w6s\r\n4pJCL6G3lWCBLZ/UD8/J755esfVUW/am0VXkBliQmBmeVDlEMU2TwmRlE8Uh\r\nkeSqRqwzLD7zHLGZUy0YfTAGQ6+ssz4d8tFiQDo6aLo0R2HolqzLe57fHAns\r\n485h44OaYkJ+jWRyf0xyZwyNDAzNy5cVVq0VY9pne5raYRga64JFvlZSR3Wi\r\nkeEUKT1Z644ujgGCKM8tEYe1J0HfJ76qdfw=\r\n=OJoH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"eb39fefbc3ca102a52db83ad19b42f1a2b52ecd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.199fe2a2a.0","@material/base":"15.0.0-canary.199fe2a2a.0","@material/theme":"15.0.0-canary.199fe2a2a.0","@material/ripple":"15.0.0-canary.199fe2a2a.0","@material/typography":"15.0.0-canary.199fe2a2a.0","@material/feature-targeting":"15.0.0-canary.199fe2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.199fe2a2a.0_1673474176369_0.24166813771905238","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/form-field","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.8c0786d6f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"648718c60dcd4a5c8a790c981650e07037dc9f91","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.8c0786d6f.0.tgz","fileCount":33,"integrity":"sha512-C/qMU9gR45wnZysX/cXeZ7NHlBNxBGJP+WhylUbHvz/kovK0wHF6PKLKygO8G8caoJFrI8v3h5EJkSLprQBz8A==","signatures":[{"sig":"MEQCIA/n0kLEvvkxEyNbxIKCCFIN5W6IHvmS0BLqD4ufnG8jAiB/uSwamFS3RjzDI4OzLsboUGz0J7Qf1k8QYOArBR2uKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBsDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4aw//V6eBIfY+zppEiUtJd5Y8yKjzYeB1Cu2tDd3+ExdGFSWqhcxh\r\n5/zANrzOCs/YI2rdLp0ZGbjUAQQK78JsVSWJsOjWXMJvhN7p1N9CL6fbkGNC\r\nghdZSkxYh+dDtiwAxna71QJamuL0kZVSyl9RIPLHDQRmKR00Nk6MBYn0vHS0\r\ncFyUwMs89N5O+Irb9Jj3zEgXLSx2ncGpSBT1bE+/4zzfmuYKguhY6t2iRSHO\r\n4PyVMrqWg19T55kJfcH3Ow1zaqTBdBhZgba5BJMSx7jobMajfxek8gYAbNHd\r\n00Xq+y3Jo3MNKGizpxsgOmzuuMCAjxeVz7vhABPPUbEP2It5hKfEFOUpEVxv\r\nbWoDF5CHwmsdVECVKwv4u1rKyiLnSNm9suLH+2vxB9p5LWUlEyNvM2bAcjgR\r\nbgNAXOA2L3Id1Rhwls0yBGISptbdy68dqScf1oECpxFLLV0MzkXep8df3nw8\r\n+mXXVHAX0z3pI35Gx4LkwZsoFpu5grGFHM60x2p3sNlQC3tun6YCUGTA6GfP\r\nuefFL3yEcNYLASuTWkV+3LuXu+C88mmoC4tTPSd6mKStK9BsJVR0FjEqaI/1\r\nIU977Iwl3sipg3jWf3bjJKi6PepjNs/cU/VvtChxUvWU2FIoR5BUD8rH1wr3\r\nopJaQE1BgxWKCxjptFeoWCvtku9E0iGRHk8=\r\n=BRTc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9016794346c3c3cab2cf31154ef6a35eb5598994","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8c0786d6f.0","@material/base":"15.0.0-canary.8c0786d6f.0","@material/theme":"15.0.0-canary.8c0786d6f.0","@material/ripple":"15.0.0-canary.8c0786d6f.0","@material/typography":"15.0.0-canary.8c0786d6f.0","@material/feature-targeting":"15.0.0-canary.8c0786d6f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.8c0786d6f.0_1673534211649_0.890141209362584","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/form-field","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.8a74f7c6d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94f0a7a82b9f0eaa07ab8f9ae56c15583161e6e0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":33,"integrity":"sha512-kO6HHcFmkWBcvaNmfv9HQzYuXacIHEJvewzPlEjy/P2jnMdTdvVCCvO4wFtoSUZLgJOOkL5gOfx7KQ9snu8xrw==","signatures":[{"sig":"MEUCICxVylLbJIlZwwbXzZ6cctQk2hR8ti1XTEC2w0P7RQCRAiEA8aXaX/JCLadxeKvAuMNQu2NDgEwlviag5y4QAX/SWmE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvYVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQLhAAiTfr1B7zlCvCz1F/RcfBUem9q+cWf71xKqt/QTOg8QLR9c27\r\nc7CblPDPODySHWvRgxAwz66ukyUEFTL8HBWtt7dTwu3spXSK59Qn5lJNiZjz\r\nlFV5ZMLHZEGifAWr4TCRZGNP2c3TQTkIKXZ2jj1sgzOJi20zzwiCuTR19Yuo\r\nsYlM2FHKSGcg7MHC2hXV+Yw0zwD7OLaE05vdBdKRL2FlDJ804Tg2acEV2o/O\r\nJE3+UpDUwKIS8vcEYI2vBnnEvPYM6Dq+VUtIjOhwPWNR3IuywZekWr0B5JTt\r\nVuBCmNDjPZ+VokWfQS8/h5r5pYIur4WbDXPBtrDIZ0lJ/uY75QWmK1mQGplh\r\nUPhhZiQQHNheuGgHQjBWnQmhkZTWW++wx1wlS1oSfTZhCLwDYPKy/Lpa5CKs\r\nKFcNXNe/pkCy/AAbHsOAC3bjJfzWxgAusVPV2KU8PBFf75GZCAjFiPvlboHC\r\nnGglPAHiB/PtQG3ax7TN3eoluNLJZSAmh6LUD9GMa9zEYCBYv6hl+gPKf558\r\nqRrRKpTw+008RYT+HWPgQKu7EjFDaQr4jJwTrFnhsO/TPQCSMrBOWWoeh/ze\r\nnYmXqWGSK9auWTW2F6V7L8NLl01cb0YuSJf/lt+cvDLUgIU/EjqAf0vRsnF3\r\njVGPuucjxgrMdpl1cE+pTwDj2wi92RfCxAk=\r\n=4wYk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9c676a1e4329c32508a9e7110198a336dc704f58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8a74f7c6d.0","@material/base":"15.0.0-canary.8a74f7c6d.0","@material/theme":"15.0.0-canary.8a74f7c6d.0","@material/ripple":"15.0.0-canary.8a74f7c6d.0","@material/typography":"15.0.0-canary.8a74f7c6d.0","@material/feature-targeting":"15.0.0-canary.8a74f7c6d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.8a74f7c6d.0_1673983508920_0.6058504187117133","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/form-field","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b4687fdc1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de38dc347e32792308e2ab61c45be8b4f4458f07","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b4687fdc1.0.tgz","fileCount":33,"integrity":"sha512-Djn/mtOt36YPgKQ4V7BGU9ib470lEIIAGQYF8rGTwKAESlg9YuJKWU9LVsgEP+F5uqcZTYwIW7Y5AYdQtTcTZA==","signatures":[{"sig":"MEUCIQD4q1y9hGw0XGhwnTwPgakaGV7y2mXQdD93ek7rQR71FQIgNrOeatJrB12LyW7RzXVHGVVrHV5rQtT8Cm9Z31qapMQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ7hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAuBAAnuMAheAGHusEEMvjq1+g140tpzyT3LYkOU6FWgiK82zp2c9z\r\nA51/U7irC+NKyyGom8fcyezEGpL8mcvx6eaXxAgisvBRWCP1yMdQsG2TcB9l\r\nvBKxQBPGQa4x2Vl9+/94YhFEYYmlzf7BP5FCoSmJ4mZns8G5D05m46jdpNpt\r\nI7Tc4oNKXPZb8MhaSmVTT5QE0mAuprj/XD0dr0HhNx4gCnhoqhr03Ik3VRcP\r\niWqHz5KurQPzL9IKgq7DnZjTFrZLkueavayGEnZYXOLc+2Q++/2erf8ZT6H5\r\n/mVVQGO8ht8pQrAh5NUHiN9r0X8d471T15hdOmGOjqzWvu0eN3+Kz38/4PuM\r\n0oHz2GtPkyqdQ4s6sXDSqVC5sOgjU9501ZzhcbNhy/WwGk68fP0WWYJ2rn4z\r\nccTUGX9WV6khJt0nRaf3+v2qBzeQyFFARAWn6dOosa60MvpIV6Wc9hIxoHqB\r\nrxoEDMdP5FwrNSc4TaFfHCuOnRPdpTBjJc5pvwEzRErBgGswt6tOUpEYDC8q\r\nEgFnViKo3BkPw85qbsgPFh03dxtygifigyaLX+q+FlXnzUzNQhWMVn157u4T\r\nUGnpeRt4htptek5hjxBsz+ynTEv216KTNiXgINhdDCgYV4QS9nbBTi48WK8A\r\n1Ymf1jC4BrOvBGzDUzslVzvTD6F/mtuN7t4=\r\n=qY2Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c9ec43c7d66a73ecf591f982a42a582e639a50b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b4687fdc1.0","@material/base":"15.0.0-canary.b4687fdc1.0","@material/theme":"15.0.0-canary.b4687fdc1.0","@material/ripple":"15.0.0-canary.b4687fdc1.0","@material/typography":"15.0.0-canary.b4687fdc1.0","@material/feature-targeting":"15.0.0-canary.b4687fdc1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b4687fdc1.0_1674157793622_0.14936272536244766","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/form-field","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b836b9892.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfd1503e89bcd57acb5c5bb3f451bb095ecab1e2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b836b9892.0.tgz","fileCount":33,"integrity":"sha512-YZ+ZXHFrKqbzyYTT5c+B71zzRKVyZb65rWyi/AjWJfyOvOLZmIp+giNm62KXGZOUhHfomvy94jEo84BEHVKvIA==","signatures":[{"sig":"MEUCIQDpTN2O2JPwoItHK9VGa+aSytagPeBa7Geq0Qxfxl8yBAIgBWA0558FZoPUhO5+Xf1u3UGTy2OdLSWnj24ZzopU56A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F4yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCVA/+N9lgEKUlEkx4+oH2vIN+gehlmKP3je2h2Cne8OKQ0XzaDawg\r\nkMCruUcUrxtdrMT1RcH2ePn3zONBeWxT/M2GaPB92LH1nR54KZlZUknx7pzw\r\nqjFwE9oOu5jE0+ymhShlPU4co0MIdPJd6OOtvb/NwKUS8EV4FXrJrVGDHnCX\r\ndFhbTFsidMEIOKHRUJP28TaXPnLYxvbY68K2BEGKVlbJ4y9YVHaqnAh1d4nd\r\niyBTjYKdAx3P7iA2ZgBFkcYde+ehQJow436RgoEIrALHvAn48JSdut2DtCwC\r\ndyTCyadxFUH8lsyw0nyuClxrQ1KjZChHVcxINtMZJRg9shejYm9xrD0OiEEv\r\nj+9s0LLC4fZLWtduvluP4XfqevX4oLRc8XBfMMAaBQhVHRwRaFnpAVbV3VUW\r\n0fyJvHHwZInQeW+k7JZ9PDrSLSkfUT4f6UV9o1/1nsrH8Zo9DdoMkIcdALed\r\n1k1xJBle7+vmHBQlbenjwNVL7hXxtMBDsM2HGZkZKFxc36oDzacnADKD8ee4\r\nq/b6iEjX1dDc6bM0L+3mYGqcziH6X0d9DC9U4wo5XnFD22hNYoZPOufnJHaQ\r\nt/Fn11aTmf5GIrWgFsx3h5DKm2rCfy3EDAqbHLkbeXcKGviNoNQWPXFR07T5\r\nqf/ShmRThzR0nxWdR35JlVHBbcSjwGncHUc=\r\n=fIvi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3a9a0b2e64227ef1f8979cd5b82be3767b100551","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b836b9892.0","@material/base":"15.0.0-canary.b836b9892.0","@material/theme":"15.0.0-canary.b836b9892.0","@material/ripple":"15.0.0-canary.b836b9892.0","@material/typography":"15.0.0-canary.b836b9892.0","@material/feature-targeting":"15.0.0-canary.b836b9892.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b836b9892.0_1674599985958_0.5739070235896979","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/form-field","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.e8912fd37.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5904177b1a0da28702f33a75c9f4ab771552e5c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.e8912fd37.0.tgz","fileCount":33,"integrity":"sha512-Z+CHdb+pAkm5bAlJKPnWn85z7mILkHCp17RMxgQnW10YrDSz/MUlOCtA4CUKmX+nc1GrvP8VwFCEnLz3JHvyiQ==","signatures":[{"sig":"MEUCIGMS6rPCHBcPrJ6/l3eg00FNfcP0xudHHfGVksRjmc0SAiEA8XxyuC0/vTKdSu2A7f2xWsKjku//pOrQUZMq6EFA23E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sa8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDmA//URsiXype39GGwCVBY0qFubHK5SWitvq0LrvX0cs98ytURkoI\r\nFZ2cNhg9z9IfgK6bBudyOd7sZ3qZmgCQbV5hlOpNUw5bP9GG7nLvA5UAQ3Zy\r\n/xsH5Ze5RzjC7XL9G4Z+dizarGKMpcVdgHnQkB8KL7ejbTSqW4ECD6iTWNGg\r\njfubbiJIUG1CjJyvNi2u+ihrfgXH0WVfAdfWjgN5t9XeUQeQb6gRW3lMlp+4\r\nyepRM0dThQpz+kIT22ux1okncscS7u2/KJUVsAGe2cUir1wXzECG28N7mfb8\r\nPRIKoB0qw3UW5+xkR3L1IM3qHPn1HCPHLqlOSy+kN9GchGoAUl+I0Rfvi1t2\r\nlf4C33QTElg4H75E2PzxwdNKD2pTKOdsiLf9Se9O6C4ZcuLA9LYY8dwqAcer\r\nUdjzUwc7WfnrmVgQDK2062pz0lVEJD4pjboTAzcgcaLfeSaCM0pAb+g/IrUh\r\neDdsx2wFRGNwDO+Q9fv/aFjhZjKMTVvN8kWs513+PF8cbI9W33t9MWIlBMQt\r\nxvE1ig2uyNN/bLfZTst2TxNIFGK2jBDohzzbiKUAG+IyLgqp0OGX2HX5rELd\r\nmNgAkW6ITjZwNHEst1DjLuvzByfIdGfSi+YcZvF10kA9q11h90sSOFpngD4S\r\n9ryxNL6x96Kr3RunVAMRYBeF22zopQvRuJQ=\r\n=HaFH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"72b44fe55689bb591aeaddf242920ba73a6e5bb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e8912fd37.0","@material/base":"15.0.0-canary.e8912fd37.0","@material/theme":"15.0.0-canary.e8912fd37.0","@material/ripple":"15.0.0-canary.e8912fd37.0","@material/typography":"15.0.0-canary.e8912fd37.0","@material/feature-targeting":"15.0.0-canary.e8912fd37.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.e8912fd37.0_1674757820584_0.4648887691844552","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/form-field","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.16fbd30ff.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9f7632871a6492fddf32d8336ef192b79e3d3eb7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.16fbd30ff.0.tgz","fileCount":33,"integrity":"sha512-WTtzQIFkV36pKFaz/LPHCjYU6Mxoy9Zy3F1Yh31XOjVx25JUHgY1JRiduMGlsjEr5z4MqZ2ULkx0ae2FnbIUOw==","signatures":[{"sig":"MEUCIF/kXCaT7c0OK8e6rQgbvlvDo8ZwsNfLLjMh5jByvugVAiEA10dc0m4yZhDF4qHjcBsW0D85zPWgDUGSPEBIJIflhzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sfgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpD0A/+Nt+sB+ZDCnExNSpFyfIoHFDCXP84XHQ4+kvvaLw2XcaBVdyz\r\nwrA3GreJTQFh6Sve18o1Li9TWVOu3xR8tUKIQMsh8/lgMgPbwbIwmfEagINj\r\nMYXlrvfIc1LkzYD27Svs2iy7/O923NbqNIBCrkMs9V/npn61c1gSzZC1mMdN\r\n1zLWdrt3GnJTvCu82TItV8mSe/YQHJ57ycemy7+ndJHgvSHuhTGmV8TaV+vr\r\nRyUyUIZXSybkzUvPTzy/9IgqOVWx3tMu+BZHw6CC4tJasIpM2kPNjcpwWvNW\r\nRqTPsGNNzy5wG0foSilwsQw8lrg72LDV800na7/U+jp2bAO+zrFad+s/KC5Z\r\nVxHoYll9xt+3MR2zTl5FnelZAZ9doAATbAwS+1M3FRvIcQArE6ig9rwD0Y78\r\n1e3tNxwSVvHKFepFjcVd5oVjuWnOAjJvhs/zyUgZCYdqpu3aYrn+zzPOWqUz\r\nPF6imkqmqxmlxP2gGN4FqPW7OIczY6S1ZTITuQbCO59P9l70cdEIt4VT01df\r\n0Pn/gCNHH50jPfzEJ8chR6cfKPdx7x6rATbaxKoDBmXf2jbqUPdGMfy09aet\r\nC28sSlAZ6WtMOzCBnXRsLHG7zbhvw+PbdCzfPcFKz167+5eGcUAd22Im+0jd\r\nx1PXy0A3C7F9BoM9ifDjP7rhBBqpTAd9In0=\r\n=sjsG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f4c39ff05bbd1045563670b4ea50b0be51a91d01","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.16fbd30ff.0","@material/base":"15.0.0-canary.16fbd30ff.0","@material/theme":"15.0.0-canary.16fbd30ff.0","@material/ripple":"15.0.0-canary.16fbd30ff.0","@material/typography":"15.0.0-canary.16fbd30ff.0","@material/feature-targeting":"15.0.0-canary.16fbd30ff.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.16fbd30ff.0_1674758111860_0.42842225082292984","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/form-field","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.033ae083a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a0be6b8abaa18cee04efcf97a8032739204bce2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.033ae083a.0.tgz","fileCount":33,"integrity":"sha512-PU/0YZwm/QRkYeDmQ4GVWtFdSVhuK7slU2ihRmH6QCKBrw/ISABRV8lfYo+hX3oRnuX4mKWt8X4jKB/KiksgSw==","signatures":[{"sig":"MEYCIQDaEko3II4Ha2QyvDH1t+kNtj+EP4cEXqVwZ/nyTiK9mAIhAO/nesLC7dsuVaD1lJLe+Qxrzlj63opxAkhBXWsQLabF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tQbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+dA//YiYEB+MfXXHkAO2TuAdGBUswQtmpwtPio5IbJ1UEc8veRnB+\r\nKmL2OE8EGmxTjkVCwK/gGzSfoSK7NYx6qbS6AM7ePtJDAMakcNxK9jK2gTHi\r\n6eqJV/d1zy8ZO2+m3ps4mLSkKxDtJNFVSe6ouTtqpsas8fRqcmJrkeTH7801\r\nZgu4vOf0r64O84+6MQiK93eis9dX6hAvE1vluFWqXYwfyWtWFXzG/6Qjb+QV\r\nGLkIqJE5mGIGddg7yMWDFaaHHOluF+/VX1QQ9y2Op+Xb8HnEdVEIWjON6CYD\r\nuMFS4hwFDKgW6XHGz9ereTHgchrbqG+LPQgLWvd5d+nzmeNsJuhNChtGjiFa\r\nDCdMUWW2BPZh7stkgpZr4SkCjYTlQkAO170JPP1imc5CYih4BKAMYOkjlT6y\r\nvbP4SpsS46Zc4sT4pnf0prI2GUpe+v3dpB8cgf7kD6o4SPZZigc0VagnG1rA\r\n04rLplt8fSwtvVSwCg4mH/+sEeo8mOKBmAdibSG4sixNNaef+Bj1juOFrzfL\r\nWxppBZtZwIgQFFF2FFDkBlT/X2tFLlE1oTK3C5m72+eK0G8dq3Uvz9EGgk6U\r\n/nyP6ogtiEdZc4K5etAIk6k1GeadxDVW9sBejFPjkqA/zoq48RGxgwUBSlF7\r\nZTclQjR8hfT8gpfkTlPagtfJ6KczK0YHMuE=\r\n=Wyd+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"89ca938c110806d9150a3889a7d25689661c2fdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.033ae083a.0","@material/base":"15.0.0-canary.033ae083a.0","@material/theme":"15.0.0-canary.033ae083a.0","@material/ripple":"15.0.0-canary.033ae083a.0","@material/typography":"15.0.0-canary.033ae083a.0","@material/feature-targeting":"15.0.0-canary.033ae083a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.033ae083a.0_1674761243058_0.4367080381507542","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/form-field","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.3a705fa1d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e95f5bcca35a0492900641aaf520b6290c684172","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.3a705fa1d.0.tgz","fileCount":33,"integrity":"sha512-DJ1NxZi0zx2j4xUyHJ1mM2UGqVwk0CykJoB6ZrRo0Gasap8rVv7qiXuhnSbecCZrEUKoXkFUVrkVtf5eY5dG7A==","signatures":[{"sig":"MEUCIQCHHKfEHnHo44hKTJWoSFfEsM7KK7zKCS53tk64WtcU5QIgd4cAWVDdl8/hE7YHzp3OH4FyNZIgfij83TzClTRhCsA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FO2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoXBg/+NoibwgqqydJ9rbxeAMLI1eYz4N67aK58eg3xu4vItJ0jmKFK\r\nJWo5b/psPQM6SeJU5fv7Uc/lbTm/7b/HHD+a3A6U6CUgkwxy455r/+5oe/CY\r\nLf3X/DJ4AiOXXH29D1LXhXVwXIqa9hp9jjm1d52EaZzrQTRFLgGOiEKWPsWg\r\n03BVc3thFZwwdCaf2a0Tx4xZwb215N4GaySZDp9wey1LFI9dBFtH8EsaDFoB\r\nL/4ndO3INjUHSVfQB/j5abghSn4D5VmluMaHdT5P/feenAmWej5/Y5L0Qg2K\r\ntekuWmdmUo1zrpSn23hglRIN1cFSeLCJ67FlZ8uegUOVPuDkgZBrivPxJWmG\r\n9GgeSHklXVN90eQUS/JrYSft2xONUKAlxEPvWCDTWgBvUvqMx6lN9+LbOkVO\r\nkHF+U3tkuNSelOTFqNtOvatFKSs2Mq77hj7iFUPr/B1ppWidF0+zFS+3R07k\r\n1xlhol1/jZvosN4BlbbJoBec7xDHrqHXMU+Hq5uq3hgIsFkuYThk0oybq/tc\r\nFThoPIqXBbr/Ku+LIhgprZ3SppQ/4rPk3ICjyBppCgQy/7nRDsTKJUbjRMSj\r\ns77WeZNuvMn5FagFd96KjMYXmpvbthvmK2XVNdsMcwfhZVdFGHPR/TkCJY3w\r\nnqXqydU6HF9obtI42EJOTzudv0DeaL9skPA=\r\n=qXxr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7e0f3737f51c1319f66762d8021d6aea33391733","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3a705fa1d.0","@material/base":"15.0.0-canary.3a705fa1d.0","@material/theme":"15.0.0-canary.3a705fa1d.0","@material/ripple":"15.0.0-canary.3a705fa1d.0","@material/typography":"15.0.0-canary.3a705fa1d.0","@material/feature-targeting":"15.0.0-canary.3a705fa1d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.3a705fa1d.0_1674859446508_0.7001048509140217","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/form-field","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.d6bea2ff2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8729b4370d44082b4a5edadf35b083596172fe4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":33,"integrity":"sha512-ySMDtnPJLvJelVZsbo/iSqjoJZug/YHBnSK/2KsJWigxrXfLWz7L7QDZ1iteGoeY0dAVOcBPFQoQfwW+S2DDBw==","signatures":[{"sig":"MEQCIG+c7JiMTY8W9fExrLIYw3C151lf7jvkMu5ci0USv/DxAiBZI8F4IGfj6O1f7yYI/H7bRvrbBhXDtbGIkJWOHxxfKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TQgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptKBAAiI7ZvAc0ImVkj/iRELi2YLoPre6CyDKeJpjTndD2y+XClaWj\r\nvXJuxGTd96mFlOLjl6C6WhiNX+k/l6JqdxNFzVPm5CMLSS/NlUz4x/2oX/ma\r\nUuUDWh4E8TEg4dXk5mUIJlxQXO3Z9wJyf85U9tr77THL2860IE21srdc0gk6\r\nhvb/jpdeKeVcG70Md3hdkyYipZFtDmNmpxLQnWTizCSXmnXO9wZvVkN5xhfA\r\nY7nHtcEQOlRP8BAppvJb5XO0fkKZ8RJDM+5r7ohM9W6wsYP1ahyZRn+8YsDc\r\n/VK2PiXTpNDaLd06sWsI5z4z/yo1lUnklMaF190hxD+3CWqb2dyGWmo6ywRu\r\n3/zm8NH4ARcpi5bNoztk8TweXP+nBIIL6fKEq1C7D6lCW8fwfN98zEHe35MS\r\nNkmPonWtszH0itizg4n/xXBZUPk8syh/aQ1dtPTUhrpc0geltk30aPzM5j50\r\nUcpXScKaw2thqDZOUy8LzMwFN/6iXp7lr5UzCKrf/n/QAKvbCUryYuvvNoae\r\nqK7RXLoVztweTdXGVqQYpdL5RgpRQD6ixN7EGrZVSchmnduXa9SDmGTlP2Hh\r\nQi1MDw88uYcDbgZpBuLjmyB/l0td+cYgl+ZqINTQWK2HMaI6xscdi23G319q\r\ny/F/bM6rlXuAQrhK9YG8mFTzRaE11C7Xq1E=\r\n=2KAG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e4210a9f21a7e6ee007d475d5bd7e229dd7bbc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d6bea2ff2.0","@material/base":"15.0.0-canary.d6bea2ff2.0","@material/theme":"15.0.0-canary.d6bea2ff2.0","@material/ripple":"15.0.0-canary.d6bea2ff2.0","@material/typography":"15.0.0-canary.d6bea2ff2.0","@material/feature-targeting":"15.0.0-canary.d6bea2ff2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.d6bea2ff2.0_1675179040663_0.24753295720418333","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/form-field","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.0c94182c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a6fa8caf948be030021056ce430d834d3ef59b9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.0c94182c8.0.tgz","fileCount":33,"integrity":"sha512-WQ6+6+TiseTtrckQXhtNNJhPNYe8f6Hup2dtB7n1G0y3lchY+MLSa8wQXOZ5y+A5UWWFOpKgNxy7M0iLHMTucg==","signatures":[{"sig":"MEUCICMcN70pbgCA1iHidLGlD7+gStPlToEGdU+LGYKoQ2x2AiEAmaB+Eh/pC2nxdovMYxzIKpMMSqtXAZZGBF2V2srvcVU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qUJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpj0g//aZc6T1EJ99ckPhBq/peomcSMK4f2/leclYzWIk4ozkzEWnu4\r\nS1ty5MWzkyQNYu/JQmSJMLpbxZVD14c2RVoMgSz3XLHiP8ghQV64RznQ5yxB\r\nXUztDUGfyQ5odTxkDhQZFGyBcLll384ea2rxSdO0F82W6CCCLiBEpD8whg3B\r\nYxzEgi8IyJsNgVTsXgAITzPV+HX14SuVo9sqheDh406MQpNbuZZqP4pBDJjH\r\n3O78+RqLGXesImElWrU3PEAuyxgfnAoLwezNzQ+1yrQbZX5OWDUzjX/n9a/Z\r\n1qxkvrKhV5L64+XbfHxYGeMHZBdL4/3JsHfDxx/769HGUNVSWU6SocNuHwMd\r\neV9z1VXiW1qAqrviCz5q4kXCmEo/VUOvnD+E7VJ1NMQ/EqdsADRI2tcFpjKm\r\nJStUjkIALnJXSfsqQLnIIla4t+X3xgWDipEtUHlIoSsZXE3yoPV8tLHhpxys\r\nmp9x5WfVSYDq8zwRk8RmtjLS14tXexQPG8VvSbCU/pHqCFETXWlJOPEHrccp\r\nfA6jj6xtiHHHe3CSCM5qxTrgBaxpn9WZRtEjdk8HByjd7Jmrp6nPS3fwP+HC\r\n58v1l2UlXJSkwGqELMdBxlERhLr6EkHLAaNJZtnzC6YwovwSbEIhI/jYKLw3\r\nA97VCP0EpgM/ylJMZlQFOjAnvq9ANKsvwHE=\r\n=ZLEy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9e58d1edf6370fb6c26f762d83ca31f928149e41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0c94182c8.0","@material/base":"15.0.0-canary.0c94182c8.0","@material/theme":"15.0.0-canary.0c94182c8.0","@material/ripple":"15.0.0-canary.0c94182c8.0","@material/typography":"15.0.0-canary.0c94182c8.0","@material/feature-targeting":"15.0.0-canary.0c94182c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.0c94182c8.0_1675273481661_0.6285528208405449","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/form-field","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.15b221540.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6d15d383ea1774ed04f0bf441858fce15039671","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.15b221540.0.tgz","fileCount":33,"integrity":"sha512-i05C7Ztlc7rxs1gADRAvqwlMgTiObz42M5A3QYr5di/BQn15NwVeBtLRnb74uxKbDnIEULyGYpUOdSO45rv5rg==","signatures":[{"sig":"MEUCIQD+nQCgDXK0MFxLdwgKABum+ueSWCTzPU1cPfK4PpYJ8AIgDw48XbIc10GB2ArTpgO8e9wQaSpjYsapN1hhPxUsiTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qcEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmojfw//dQntjmTjxazxo0sJ6ESRHZhtgZG1miqijWnOSQcqSi+w/5xc\r\nhGz3jaFflzh8Dfdgv9HOs3SInWeWjbeWqBc0CJOeJeleF6uP4yHVKZo+tiao\r\neLnyHjyw6Jf39KKeAdFzWR67W1HND8tcHrxwKlpHvipUKEbjCLe5UvI0rWSx\r\n2Xt5LAddnnMomqLaum+gxtgaY6OrxNMDAtt1tFtf2BeHsPNvk0Nmdq8hHZxi\r\nf4MecR0vrEqnGb3xYNm1teEayR1oq872m/M0vrNn281g8jMBFVg5jdYx0SWt\r\nbEj1U6lPaOhH4Z7/qiSQe4wNz6s5+FCp8BTKalwXBSjNVY/l32trHuY+rCIL\r\nUA8nxo3uClncA0ZehlqWtUrHzTmP/hri71Dd//cJn+MZZoUm9RQHY7w172YR\r\nyRvqmDiJLH6JQnAT8zVRv9U/Y8NsJ2fpuTh6loyuJdUad9NsQT9qcM7YvCIl\r\nxw5jsJkn1X2I/AO2ZxniV2nSVV6O65sTMA9KsjTojJFLsBWbbjhPn6zOUfD2\r\nSc6yw/CMGEhjZPInosGQiDrd3TC3OuKDWGgOo9rZamDD6fB++FUMhFAV4gt8\r\ned96RfprpbfAG+rs7BE2kuOltKqX5La8ft2cEKM7NeERKFGugebwbrOOtnyx\r\nlAc2g0uUtAs2V9SN28w9j+oJqn6xsPfktm4=\r\n=Gr39\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a4bc6d32435d33a7b99197f32b85eb0b730acd30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.15b221540.0","@material/base":"15.0.0-canary.15b221540.0","@material/theme":"15.0.0-canary.15b221540.0","@material/ripple":"15.0.0-canary.15b221540.0","@material/typography":"15.0.0-canary.15b221540.0","@material/feature-targeting":"15.0.0-canary.15b221540.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.15b221540.0_1675273987870_0.618230065470474","host":"s3://npm-registry-packages"}},"15.0.0-canary.eeebb8bba.0":{"name":"@material/form-field","version":"15.0.0-canary.eeebb8bba.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.eeebb8bba.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37790c5147c4e31207b60f9331b49d69a3fcb42d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.eeebb8bba.0.tgz","fileCount":33,"integrity":"sha512-2KYMgTpLMYH5Jq0oynlU6KNb0mvc1GA2KlffhH/7rF3hOjSkCeEtikK3aO81c5c9ITi7/3hA0YaabaIPyd6Cyg==","signatures":[{"sig":"MEYCIQDPrQIJWRpWzkA1PRGHGuGsFPsdg6VWn+LQxEWJSsReswIhAKGE0MMjNkh3iDTK5I7njtc54juegON16lCmCpsWlmZG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2q31ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXGRAApMjnoBFu18fdv3BCw+5qqYtmNhT7Jhf4XAshG/yPKLfb9+7k\r\n47WF/b8LMYBbTL9FSxKyAFJ301eTXzu8olWO+ToR5f5P8unQFbWPRacsAhUz\r\nx9fBl82WzgJX6jTqb2wQ5p1mPy3mZ0g8pJrhr91VvococwNsHThL2hkcr11X\r\nVB6nhbLsP5ZHE8jljVURwjwtTjJh0P4+KjjWjKjoMPJpWKgl2tILPo8+QOTV\r\nCOxuN7gQUocnDQXt6LVLbR57eKciSii8PWCT/o4A/Ldo3B5mJVcuFKKoeLp8\r\nUeSpDd8d6wH4tSD8Jk3aaYTrlDwYRRp0QsiZfNwND4tQIYyl2ovi06lw3yBu\r\n8ir8eFXU4F4d4lDV0gR9Zhu1aFipFHFcPMR1fp4xRbtjTlgRkC7fH2aeytN9\r\nUUQ1ifAjZMsqC7zlPvXrgKSIuzan4sdMNQMEz3gfUPwQHSnatxdsU759ccIW\r\n897va7DY6r+Oehaci6wOTaFZT2fKfOKXIoEncwszyRHmMLfDD1BrqwdqHSm/\r\ny0lA27FtwR0RCld4WSCyMfi/AJayZ9EzMvDyiAZUnRCwj52Skr6eMR95PETM\r\nr0hfWmNqdXSVQRs9HAbvvzw5G5GTqZ3s2mXWH3n2xoSpDJNKR7nEMIvbe3H5\r\n2kyrtdNIhXRLmxyHEzFbNu/hoxG4+LgU030=\r\n=Pdcz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5c8d0d2ef793b8bd564888fdde6b97e8a2502cdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.eeebb8bba.0","@material/base":"15.0.0-canary.eeebb8bba.0","@material/theme":"15.0.0-canary.eeebb8bba.0","@material/ripple":"15.0.0-canary.eeebb8bba.0","@material/typography":"15.0.0-canary.eeebb8bba.0","@material/feature-targeting":"15.0.0-canary.eeebb8bba.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.eeebb8bba.0_1675275765307_0.5533682120360075","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/form-field","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.6a4b3f834.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdee5678c702a5f06c87c4218fd50b839c1e1f1c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.6a4b3f834.0.tgz","fileCount":33,"integrity":"sha512-QHY9aMljAP/eiO/jy3H/Zl8y+k2ky7yOy+CSKHOK/U694VjdS8MuHTUs4eWf84bZ8qnZzxE3rppqss1GbDOpnQ==","signatures":[{"sig":"MEYCIQDDAQiyh+zOI1JP1SY2eVB6If4sZnCtmwPkAhCWGJJhgwIhAOYo6DGnhV0Er6vSkoTC3ykEFJ8vHbgdR7rlZv7485aa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rZyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRVQ//ScYgXj6//X6Yu8q2ItuPRZF+6oAh9ngRBs90zgCBQtlyewEx\r\nRyFwfLUTm/bk+1glGfiJZAX07TT1Cfre735HmZBacMtSwqwzEBuiyVqaUxuN\r\naNnULQwNJdZy9QEw3qUrohHI9HtNiomRRgeklaXfz8AtpS3qTNWf7UBGEEYp\r\nNh4l3AnKFZbLgY7zUssxrv48AyXEhBzea75yiSYMG7PwO95gT0ELt+CFOeX5\r\nxrZ7U8htdxk2osmEfRLSr0PrIuqSOge6gv7pFkCm8HcHza+j8rbRytkyX6Wf\r\nuK6An7cb3xJS3wnf2+nXowLyT2lg/5mDN2Z572aEJFagtCV46Fq3dMC2HFbE\r\neoxxAnIjVJHaQvpPJOC8k4xE+PRJt/a+hC6gmJBDBTudKZqVpng5192OX8nD\r\niyR4KvCxfzKQ905y/NtESMKppCT+W0zxKLt5uEWvOybcqJNxcbVy33+rBBKB\r\nVo6TS5sqEBh8qf3TvD9TagrrjKnRjhtewgut5b7DR97KZbHIOgrBhOuwGDlr\r\nXVo4P256LHVCMBUoasNOv24+9xx7G+RSMjYSp1CiXiqfvir9WJhBcPyE4789\r\ngiAKQ7Rh1j6wJ1xjfUH2eDMnK8qzB6+TszJ4KorCMeUkA7vkvJ4PRcv//tsI\r\nTjmyaJ0qZwnf5OGJ7JQT/cudnIyszURIuiE=\r\n=QSIl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b1f2d06637869496d98898f4cdf709ebbd279ed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6a4b3f834.0","@material/base":"15.0.0-canary.6a4b3f834.0","@material/theme":"15.0.0-canary.6a4b3f834.0","@material/ripple":"15.0.0-canary.6a4b3f834.0","@material/typography":"15.0.0-canary.6a4b3f834.0","@material/feature-targeting":"15.0.0-canary.6a4b3f834.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.6a4b3f834.0_1675277938139_0.621908186124509","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/form-field","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b177b40e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9670d6ac66d1e41293ae9b3e8e722d1c6438cba7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b177b40e2.0.tgz","fileCount":33,"integrity":"sha512-AtdEzXUxfTYrJHaU79I/R8jtFUkNqkox0HMkZie6ghjznAMNMIYNFAzO8uKOc+ukQtbb2dmiv121kwGeYank/w==","signatures":[{"sig":"MEUCIQCuSS2F5W7MghCu4K9Zt03mwJlKdh18c3gOK/nL1IVkMQIgX4RKhfVv7x6ge6/md7Rrmvx7fqfk2d78Gl+N0p6l/sg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y9VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUdQ//VP++jNJw7S5DNH9gbTZpCvxv6ChQkFK2ZmAPAZC7x4NwzvnW\r\n2nvnBhwOlNpqDqyHHADeb0M1cVq40vN9ct3Z3sUMuYhSbazITJIt9DHuvJnw\r\nFRgyM4/6R8/bLOInbG4ioOti67b7ljrgrocdNxca4EHyk4XPilboqieb6Eyx\r\nivGg2bKXoNkBiY6wDr8mrboCEpkgjCUloN0vyN38B1hhGexh7q3dSrgcP/Gl\r\nOw0hysKKq/6yLofhMcpRxlT/29WUuXe1xSKbnq6o+hfLTVr1EMfGHQbMCPej\r\nDW37GU+PJkk2GQ1CG5CgnKTxrFl0xsKJ7TF6O2pRJHAK1VvavA1DBJhlVAgJ\r\nhtNFLEEMl9X02AlMEEroQ+vdiHDYzuMD7p/vcpR4rSPh2twkbXB9XPSqjp2e\r\nBN18oA3YYtiZ6NgzPaUqG01YPo32zzrILNT9cY2SOgOZdXiWZZttbh8qkD1e\r\nKFiEDrHDmvNCprT2BGBsoOUpksgrDO6LDy9RLzlvUTYw59oQhWxAuT+qQs1g\r\nF8ivlnhPSK34zHAXWzjMeFaZxsRcc/vRd/W8MAqJA9DwCcdnPmRB+MRJpfoW\r\nJ4nE3F5+ifuRHASEWzoG3mSZPk7jsLGrE5z486GCbVzyDQpEvnj2r5DpdV0a\r\nveFnJU9W9FAiO48WY1u2DyI0yU3U/Nob9Ko=\r\n=by7B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e3b49a7dc72f9c88710ba68c63d4ddce56a58fe7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b177b40e2.0","@material/base":"15.0.0-canary.b177b40e2.0","@material/theme":"15.0.0-canary.b177b40e2.0","@material/ripple":"15.0.0-canary.b177b40e2.0","@material/typography":"15.0.0-canary.b177b40e2.0","@material/feature-targeting":"15.0.0-canary.b177b40e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b177b40e2.0_1675308884666_0.08496664537104426","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/form-field","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.d9f821042.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88a3c8739df2f1854d223dc3fab8fbf959240550","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.d9f821042.0.tgz","fileCount":33,"integrity":"sha512-zGj/LN1IxQ6xWeuhNd6aKZFqCjcAFi+a2Pqe9OQgdDjxw7uFTnoTPEqtHlKPudi0zhdTs69Q6w1x9+gIyjA/ug==","signatures":[{"sig":"MEUCIQCGzqKDfIuvsioliXKxhlEOilxrGaimhUSG91Kq2NqeLgIgfr1kaBEWUVeJCCqLlTHRlrtOeeBVXgE0oB3Zm6LxC/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/UsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkcA//RwXGnLee9y0YPdapERG9CQc8cWdEUkz6yikDat+s5IYQk0I9\r\n9wybWWRZJFIjCCwZCxUJmv5iUbgfgav0ZJF7s006vtAgiEf/KBZ5QbY/fJ22\r\ngZFOWBwxPXfLEymRu/zSLkcTxX9+dzvUCdO1RHh4UZO5lnWhFfRBEgNh3r85\r\n8sYQJ7c6MfuvcjMkGlNt7uFs6Kr+uQmMAPzG6ivFsva5o8Rx3aefKlkBtXNP\r\nzOa5s80qyqRya6saGCIWDnGNzrHdoeqXEQiNFNaRHyg0hcRhQJ6TPdG+nm6Z\r\nHiEYcriT9AHUfYNfT7/Tn9vJlW1L/RZXSobb1FURAWFkn63p97QhDtin9rya\r\nszYt6ZHu70LRoJAeTtxER7a8Oyb9hyVuIexmptySey571nnEHRGfGiI4L5k/\r\n1dBsTIHNNL/LrdnMK0VN/hN5Q0xi9NPZbPG9et9h6RoBngwN575kcMobocKG\r\nYs9pJa49ghI5Cw7mbCvh+ub1NlN0VRjKF34oA+0m15oY/LLecV9DSTEfWHc5\r\nb8MyBoNllJ1ymVLtO1K/qT9CZuU8cOsNZCtzSbFKzByCYEsVRqxIOQpZJjAJ\r\nv9+BqfpZhYUnm9Z7cGUAZE4BzeeFQNHPLYkCqHE7rKTfZPzFXMPcX+iDuSo1\r\nDnF83iNFL5rL8+15NSsUew6zFM3Zx+BeMbk=\r\n=YgC5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9748fa2e1dd5886715f422f644830717544192ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d9f821042.0","@material/base":"15.0.0-canary.d9f821042.0","@material/theme":"15.0.0-canary.d9f821042.0","@material/ripple":"15.0.0-canary.d9f821042.0","@material/typography":"15.0.0-canary.d9f821042.0","@material/feature-targeting":"15.0.0-canary.d9f821042.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.d9f821042.0_1675359532525_0.2670731170180096","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/form-field","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.47c7deb19.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"481ac21ee71af093519d911383a0ba63557593e2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.47c7deb19.0.tgz","fileCount":33,"integrity":"sha512-439B5P6WIu/I6IfTjlFp/rkR4jWHN5PoPzYz/AkyJ52tbX1Yyq4oN53p3Gi6dthtDpJMbbmJOcWWHGOkw4Fmow==","signatures":[{"sig":"MEUCIGz1GyzSYpO2ZaIEoRsV3Bzs2/fLG4a/lPbMc9KMKoqYAiEAy2p54LCRZ4nE1WyhAImozkyNABXNrHk/wwTrhlpSxWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M9JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCkBAAhRUTVjW9hl3u0/YJVtxkTJs0YO/sH0sLKohyN29BNHCWgY6R\r\nFOXW1YRYtFTFs21AJwShebKt/2XmqdqUiBt7B/2tf4NIlgRhOt3cji3JR8XK\r\nmaxkE+9XVZJ0wWOt8+LzpycKK7E6paXYphYRkNdYyHWdKpzUUx02M6zgyZqi\r\nTRKPhsuko+AFSCSEBP++9d/rvohI3oJyK+f52Sx54y8iay1U2tzy8y6VI2+g\r\nyspf41+xOXkKV3kVGu3dwB0/4HHvHQFkEvwTKmeA/jdyIHkqS8UnbpWVvQAw\r\nlBTyfwUorSd7W9iyKuV55jGyNbo28hq1FzbE8/GOshxZSS4dWlivKX0jBgwj\r\nYOGf4iJw70iOkcQ+Veo8xRWNcbMxz5/vnAOdjx9UB0+f5DDgxv9KurSKPXMe\r\nYeGAHKfBoKd6mWiabj16b9bQQrfS/1HZxcbn0AevA/AR18D2WpjCzHSZQQHk\r\nY2pP8awsGIT1nl/cgCxRAk81QGWAMxTNZboglp7IlWWNeIzAQeUPO4kMyAcG\r\nIfOmwiMUvR7JT7ERjUJR9bkEZoAm5lGVeqhqI6Kx0ShI0R+9pxLeWEAwCTaV\r\ngt4kjpRS3aBltLOfkzKaUCC+SxiucnJRsFxC5Sdxln7p7zTulf+gBMke/xoB\r\nOgmF63ay1NHeRXef6O5XkMflh25ZAfrHCQU=\r\n=PTA6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d5a6886a0dce343fed87311107975111f62309bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.47c7deb19.0","@material/base":"15.0.0-canary.47c7deb19.0","@material/theme":"15.0.0-canary.47c7deb19.0","@material/ripple":"15.0.0-canary.47c7deb19.0","@material/typography":"15.0.0-canary.47c7deb19.0","@material/feature-targeting":"15.0.0-canary.47c7deb19.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.47c7deb19.0_1675415368673_0.30230689120406895","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/form-field","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a16dbd1a6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdd8a8340cad43660481a0d3e2b93df0033e0084","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":33,"integrity":"sha512-HOLtfupnOV/JCryEV11MzopqQh88zuj0AJBv9LSbOZGNwXBK8jTqu/ZzGXTNKZ/c5mLZTesa4PUe/amtTzoQpQ==","signatures":[{"sig":"MEQCIHVutL9uiHJAwbTIecVxUVHkwS9GoTt90vSx2sGAoFr9AiB36+SXolopYkVB7zpXNbqJ/jgIJnHxeinA/943zDy38g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3ffnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQiQ//aehV1oZyBKhe+XcBslMiJoVfMVM7IXMPqDA8l2xcc7OMtH0p\r\nvjaktY5ujhrr4f1BLK7m+W0AqSbBiqTXfukDUlaUCpu0dkpR19lr/1FhcWO6\r\nO4Cg8fPsXT2GTm4qhoIsH9BLS8pvu4OaCgvhMloNjEwlxN9SIp8rjGx2EkeB\r\nxxY2vvLImjz5s0DJFQualEYMnMLtHhRbD/hu1lU3TIOhCSoUHwRmkp+GGOfO\r\ndly4B80BbWQHToXNjw7PsnsQSKABShEduIFjFI2HXHRqBCCWQFTDH+4KKsGV\r\n/yZNePKvQxzXdv5c6ntP8vWAZdXXaFhz4/aWnlGKraWMWnIsQg4X7ffRr+1a\r\n1DZHl8Dz8s2ohQibFgvtqbqn5PsIojoB19OrGvOqWzv1TCfAlYnWVdJiD2ih\r\nui8Zc530H7qSqedTFQItZX1McC50O1UJCZFfIdulQ17+AIvGuiUueVcf9sm6\r\nNvVjVyhfkDGZv8tYZ8cBtSf4Y2Z/eTBmTQIf8wROZmYnQonNmx6YpMD49TtT\r\nQn5l7VMRx+UP93MH0bATw5m2hQaeJDDeEJ3VkErCZIB4VimSzzREq/UG3egk\r\nlhdwp2uH03ZoAJCVjpAj0YVegZ3hM7oHLUMzooIHQ6cBjLVFUp5cw/32YleP\r\nDJv4WhpvG2FspRp1mmBakuPHb1WQjM+PaXk=\r\n=nucr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6b1923aa24f460ae50c61296787e46f524bcf15c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a16dbd1a6.0","@material/base":"15.0.0-canary.a16dbd1a6.0","@material/theme":"15.0.0-canary.a16dbd1a6.0","@material/ripple":"15.0.0-canary.a16dbd1a6.0","@material/typography":"15.0.0-canary.a16dbd1a6.0","@material/feature-targeting":"15.0.0-canary.a16dbd1a6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a16dbd1a6.0_1675491303053_0.1704795023064578","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/form-field","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.93416f87a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c83b3a8f7ed350b96ec46b749714ddbd295513ff","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.93416f87a.0.tgz","fileCount":33,"integrity":"sha512-k6tJkkl8cn2pNdwJMt3fp/bYqCfCcsu06sOBTO6wihNxGIhUsc1qIz2B2PMRSTOEyEmGHUppdYuNtlyqZMUJ+w==","signatures":[{"sig":"MEQCIDdnXPG6BGZUprdkvM5TtfulC0Zu9MDPeQM9extKhO94AiBaA/cUzdMxe+BxFxpuqNB26N62iAnCo2FHxW0Ihq2mAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lD/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIXQ//eBjcYC5WGH7TdhaHWRSDYSypK4VJtT4pqydvS17hACRyvlTZ\r\nq1gHljxx9KLSjD/8gGR0gGomkuPW/Z8ylCSLBiK7O1q6ps7Jn2wYhwM+nSCC\r\nEU9wFbFdJI3WITdaN9qPDyVrVFRCNP+CwLcOearopTzg5oEhEo8oSHG0Myh3\r\nF//PUModUYyziyWvTmOHCdD+Z7IEpJg/FIbzmcirOvCnZnxl4OUZonMm1NRG\r\nM3Z19jVuv5F1D8ZSTZzRhTP5kg7n8JX4jtTBq8IkWr6g2hdLTqynfywzxlQN\r\nauExPT53OWnxnVH4RQw9/meknQ1/Vex84+uN3/cxGEmlfsRlMg1fLki3TV+R\r\ndagWC8+LOnzLgDkR5SdLXIylOmZRCL7LovMFuDsWsx8KP1JoLHxAOsH1rozR\r\nAOKyFX/1LM2pT3HVgr+FUnm7cK8ZZKZ4QIic4I4YezMeZyYssX2zGe7ciwlT\r\nobTqdE4K6VoSAzelpKkGqRCWSS1EpXmIhXXACBz2XMm3nADsSI4aM8wmcGUV\r\n11Mn9F620oYq6j9dLUgccssoRf4fD+fhEMyPY1Mp3W6mc52lc9AUSPMn3XwQ\r\nWZ5TfOe5VERCIwm9KV5S5NqTGdDJyBh11Np4Y6zp2rzuFMiThtjL1eqSkxA9\r\nlV3tU9SJXweEscWU/7Tw+Wl9WC4hk9uq6Hs=\r\n=dzfk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b9f82375a462288f01ce4e4efe6047a3fdd9f9a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.93416f87a.0","@material/base":"15.0.0-canary.93416f87a.0","@material/theme":"15.0.0-canary.93416f87a.0","@material/ripple":"15.0.0-canary.93416f87a.0","@material/typography":"15.0.0-canary.93416f87a.0","@material/feature-targeting":"15.0.0-canary.93416f87a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.93416f87a.0_1675776254918_0.32184005194900145","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/form-field","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.49b8e7442.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"470bf0bb52483456142be88a07ee45fcb73c43df","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.49b8e7442.0.tgz","fileCount":33,"integrity":"sha512-Ce3GP9k2Ov6a3TRmZ9t0xcxyZOxt6Jm0mfxfU5aMxuXxpgauUHeGzIpA3ngLFU7wGJiC3FVCQcUV7XtJzgJzbg==","signatures":[{"sig":"MEUCIDZlXvntlbSXHh8zPu3Ydnl0SZGwxoipQB6Oou3XFfTPAiEAqMPC991l4+AJwVgLa4kKvRkkzl4E2izfHm15t5/oeuA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4tpNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbCRAAlj7Iar99EJY7BZ7kfbpXdqgRd/tibTmDosVICZTq5mos7iuJ\r\nAOJn//2mdPjTb2LqP1fIGyeEBu9caFETWQyQMGIRsFcatLUd+CMqDpgObULC\r\nu04H25yLX3ZaPAbcwvJ2aqgg+Qyy/xnQz/5uu00oceXIQYhheYp/6VJMMnNN\r\nTdKbWTFHhQs0pXKmJilL1GHmcODrlnrKM/yRLxv1cJZGZtffqKmdpzno4CD2\r\nq6+39XtB7AYNGvIPGxwcYOHkwtIbb3skzcO+3Jsba0gPRg7PVE6V98Vuezwp\r\nCLYaFZo3QYzCQLc3qW3wVjbqMgaAw818DnJ2WGSUOBDVEUb6NfmQGQH3GVdx\r\nJJrr6BBMVIYalbwhz4jv0ALYYtUNsqr2ybklBzPRpFt+yWH4GFi7yWJ1WVGz\r\nHnaUNHWfGu8NmzWLjoGz2dHjjmw+V/JJ37XZVZFl7Zpmk4NHgiqxb/Dseyfm\r\nHrxXnGzbt/4T05xT2rbSlld1tVGtyMMVVEwVVGQaBTxw+27xBnhwoJhyGo0M\r\nehjoVMOsJpmLF5Xv1gDfEMGeN9YnwRxI+4U3h+Qg6x3Ufmhk74mcLdo5ffGc\r\njzxO2VxQk6bANNG3PeciNpUVcNshmOT8ZW9sPVagnhO5vMoYcBP3RxphYcKn\r\nLkemgb/kSoXLoLsnZkAwozDggXaaFthH2Rs=\r\n=7uBN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0ab5eaa3ea130a4b79ba5511e4e46e1f99b9e662","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.49b8e7442.0","@material/base":"15.0.0-canary.49b8e7442.0","@material/theme":"15.0.0-canary.49b8e7442.0","@material/ripple":"15.0.0-canary.49b8e7442.0","@material/typography":"15.0.0-canary.49b8e7442.0","@material/feature-targeting":"15.0.0-canary.49b8e7442.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.49b8e7442.0_1675811404837_0.014096599964701362","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/form-field","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.de38de758.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3d055923e97538149e544dac94fb707d38795c5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.de38de758.0.tgz","fileCount":33,"integrity":"sha512-3C7pY+h2SuDorxf0vMR7yL7hFQvBRes1wtWh59/Fe6WmfojX+ivgVAd7EP7Xo5nlbvXibzuqzofj+QpRZ92hHw==","signatures":[{"sig":"MEUCIEHOPbjVvUL3ck1RrBv4JR6YqSQLT4oGC6KoYpu+b/tDAiEA3VUIQCkErGhBnPauHgHFUVwwbXd/SxNA21wttECFytA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RR/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6WA/9ED/46/UUyjmdfH6NTonYRhMtWGpUi1ozvF14Jaoo+8j4wyyZ\r\nB9lJUO4e2DeRJIOH12i649TLqD+jRmOPlLS8mult54ifD8rBchoVAhAcCZgS\r\nXugLGZPU28VLF/bYWhuo8qpc9SlVFjL5gLRc4hYj8VB72ExtZJD+Cu6PLzye\r\ny3ZuHGojLnGVzQz9q+qr9OZZvTd1kARciRXpaphglbZx4rlANtwuPbcaSpE0\r\nCuw7sC7ST+rXEEcVOH9PxKXwf+5FPsxtfphEFVvUXgkbJ5FcJT3TfJyaMogY\r\nKvTCVJtm39EbVgcpdc7DQEW7c7T32spwhp5tGcysgPN3dcQs9lj2I+tZmISc\r\noFbvb3OPrO1hbrVywjOidbKMeBe6uls+tnrgTaN5J/prmyd1EO6Eqa+fkiJk\r\nFXAwAIEMeTJTRapIo7brgBfnZk8SWN1jtXYdw/LxOFq/P6JaLCLI8ht9LbHQ\r\n5kdulSF4qx8n7rnq6qay4NpzC7vT8cnLwR/JbTTwzSgpC776BjIyXKG7CXS/\r\nk06CZTNE5TaHGq0L4c/c7LEwAxpTfxvxyN7c9NEGw5j+ZbdLDQHxOhplX+F2\r\nONNLJA1pgg3apUSZ7X0W++hBduNMjsdmLWwoFijPijBu5oYc9cagicpfOLJf\r\nGody5Tne2PO1Quwr+X1GL3s2OUXj+gFHAUA=\r\n=JF/g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"72df173af8eee38e00bf9af0ca5a77d5b780763e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.de38de758.0","@material/base":"15.0.0-canary.de38de758.0","@material/theme":"15.0.0-canary.de38de758.0","@material/ripple":"15.0.0-canary.de38de758.0","@material/typography":"15.0.0-canary.de38de758.0","@material/feature-targeting":"15.0.0-canary.de38de758.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.de38de758.0_1675957375696_0.7062684192156108","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/form-field","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.4d62de70c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21cf7c51768327bacc8bac3d29b6a6129bbf9acc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.4d62de70c.0.tgz","fileCount":33,"integrity":"sha512-wgTMNeKts1fE5rEhIXWAu5RyGh5MQ/ZaWOLFxXQjmRQfOeunDx9PvESNOl/rIKb+CkcMkdSBDdwhImt7dIiXGQ==","signatures":[{"sig":"MEQCIAKnvCMWFsvWtyIHnvuj196c+Ewp1kNyZcTIJhwjIomHAiBwZ/dLq2CbDBnbJmOdPrU7J76uwfNSL6/Tl52ALZ9yHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W24ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnBA/9G0Q8Kskqnl4Fu5OMkd4l6zr5XuZRs0zjq2pM27o0X6tgx4gQ\r\n2YMoXAv+gU9I7UoRu2XkXd0+phKRvf3MjwGnRZEhJJ5MPeE6x90zHvULyceh\r\nYQuyFQMEPMPcedEL/+FJAW8G3Y+ICDUhyGPq0vffBOoO9mBuNG9gSA6Kbm6c\r\nWiy/qT0JP3fr6KKGsMACST+kOBEz5b5Zk5hrW2fFv1lhwW/hcgrSKaO1SiTt\r\nB3blRs0gZj8t1wOpdPuaXttlHttfP6xk5INN48ZPSV1e6WM7cqX38g8Mecrb\r\nTw12GuLS70luRPlL6XGQXSPfhRWqXnxrisX/AIaTsATGtSPM8AkbQgs/5Wxy\r\nLs8xsXI2Soc6tWQ0t1qPdblZrRdKG2H62Xr3lVxZSBTzbWSvwvtNVKtd/2M0\r\nJu9jJ4t7RaZZ5PleToLvDZ5sRw56sNPwxkQKo0uh1D57dtnfO9QeTU1R8SF4\r\nue6bZAcORWKWphyjVV5bWXGAt7wasnR0aBP8yGOKIdZDtpu3XxjZEwSJ86a7\r\nn/xMdVmcMc1Y87o1Vt4LyU0VjcG+SSQmJNuK2LGFiPxRalStORnW8Vw3DCz1\r\nnISnLissmoV+38JCPf2C026/wcqsmHSfzotWfDikQXAmePJGQ4X5e/Rr3YFy\r\n/dNHbUsHgL26rNyj1eaOx5c2HFlF9CQFnCc=\r\n=Ps8N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d2081b5045fc9871ff56b0d31ddacd235e2316d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4d62de70c.0","@material/base":"15.0.0-canary.4d62de70c.0","@material/theme":"15.0.0-canary.4d62de70c.0","@material/ripple":"15.0.0-canary.4d62de70c.0","@material/typography":"15.0.0-canary.4d62de70c.0","@material/feature-targeting":"15.0.0-canary.4d62de70c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.4d62de70c.0_1675980216764_0.932411017991609","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/form-field","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.6fcd8d418.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28dbbc146407138e3e932c50729b18767cce518d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.6fcd8d418.0.tgz","fileCount":33,"integrity":"sha512-hqydX0bMjMlBZ0vmtP9ZTcO6QA0PQMdN0H7W74Z9POMLdhKXe+22JrdoYL7R46l8du2mZxplxrx9YSr5zppy+A==","signatures":[{"sig":"MEQCIQDOFMEpjnY3QNlEYmVITkxO48OGMqcn9U/IYawtt0bvMQIfEFf82gXx5eJQevHd1T695c7dRQKg/pHetw4F9MnZow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iP9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpq6w/5Acj6xoB6ANpjUyCE15mrh6iW3HlgzQ/I3vNeLKRPJ4QQfeuo\r\nixYKdTyhyeokUSK+psQH+xtCsuiPmKLIJLMWA9ER+AWaod1NV4FP2cUZkd0x\r\nFsrxgYIelFVTQdE8g84NlW/zgid2AImbLmaCPWlT/jhjWHMSYBVyEnkHJ6MA\r\nI24Ry7Pc2iX4LNW2t6Q325LfQ+XtDNidiPoEA8wJapDUZfKDW+Nz6VHI/tpr\r\nilM4H8FBmGUeA4wyYDUye3U9HEk8C+TrOhEvYOwAX8sCO1guN/CbeTVhqAv5\r\nPSgTxG4IcWvlUwE7hZTy+e0aff+XE5mJdAykkqWNZsMGfl098zeGkquPdiyv\r\nK6O+d/woW3Itcq0Wk16WejMvS0dtQhb+ICXyye2jjvo3mq7azt+rgwbLeIkz\r\n9pEW3RFWwXw8pJIOGMOLZx3vgQ039RgHrKW3ak7Pce5U1AwAyFEclL1ri/gs\r\nDbAL6rxL5yJdJxVNMefmFRrAFLpRmc/lmxuBHv/rbyI0rF4PuKVTcaDrTsff\r\nx6a2f/ljGh3adAOOnOI/Eh2ZTQVw5gZPMenPXfGtz0V9EvpF4/VVS7+1o/B6\r\nsTwzFMexv64eZUTKaHhyBSwIk+pGxeBkjCQAmEClM8E1RtsCOnpj8vK2+VAT\r\nMay4Qi1Ox9bKxNoKZ0eeflGwdOtxDOKXdYU=\r\n=X+4H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"39b4fd2a38e7ab9611f614a59dd1694de0b94cb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6fcd8d418.0","@material/base":"15.0.0-canary.6fcd8d418.0","@material/theme":"15.0.0-canary.6fcd8d418.0","@material/ripple":"15.0.0-canary.6fcd8d418.0","@material/typography":"15.0.0-canary.6fcd8d418.0","@material/feature-targeting":"15.0.0-canary.6fcd8d418.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.6fcd8d418.0_1676289021678_0.9547756220763723","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/form-field","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.066d9439b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90022834019b2224c9de5f38ce3aceabef9bd67c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.066d9439b.0.tgz","fileCount":33,"integrity":"sha512-tS6o9QMj1cRlEUVtvG1SCyddnHvZ1qPQrP58viSZLVwFp7AaHx+PMW2R7m5e69/xVlQLAC+M+Y6+r5pm8p2EcQ==","signatures":[{"sig":"MEUCIQDDEOVc5iHwj3AC3KFFHXl4PhCD43cxG/k+Gx/csK0UhQIgPagywbldKeXiLb5K2g44wUXes0ZL5yZxBikFchB8ZXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TlaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpk6xAAoIEpHVI9eW4Wi3onlp/14yoo3LDpurFlRdjC+wg+/Z7+dFLb\r\n63FvCg7wI/1qN/56z0RRQkv9gN4jBTvHSreEL4hVYkH+H/kaKQ0RSkxhQcgf\r\nDsnhPQAkWsC9TGg4XXxDldZb+FR/YOUE/kC48iKKySzpWkOEqdsy58Z0O+U9\r\ncztq0/60glF9w5+X+V6XMGmfXMuxnJ8Zg74CrfmmBrSnVT4+J23LlBIB+Foo\r\nqxK/saJmkSaF4+B+OP7h50w0Tkl/xtTffG35MCNdoLYzgRo2Yf4JxQYfDtZs\r\nMYiuSIfvqx6sj7LENgjzb5ote6tqfkci5I6O048nazV3YFkmDvqcYZdarSkA\r\nhMOQX+SRAgWWwOedXK7w/jr3TVpv6IlPm1wm6aXz3X42GO5o0XX3vsur/+H2\r\nWddFkw1YWiZMU8gO6JS1unPiVqbBuJ1KUz5Qno0rV096RJVAgF6dEjQ5zYUE\r\njXJTX0tXPsU+0H5hGnxGLf9eXeY32mDxIaW/MA5etW1Zc7fg7D7DvboTMEJs\r\nWG+X8V+2oLbw61w/li1W74VN+IuOPdmZnonKGBIgxN2khifxSTkE80orStCG\r\nuV9Dr0Wp7nDP4GKBpnWsjqUVW123YyD4a3azhMmh5AH8kQwDvOQ1nE0Ih2b2\r\nOtDO1vprDETP/MjS4znIA2TBqt2Ge9jM9zc=\r\n=Lb4H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cfeee3e63b3e6330deff033d8054adb710498810","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.066d9439b.0","@material/base":"15.0.0-canary.066d9439b.0","@material/theme":"15.0.0-canary.066d9439b.0","@material/ripple":"15.0.0-canary.066d9439b.0","@material/typography":"15.0.0-canary.066d9439b.0","@material/feature-targeting":"15.0.0-canary.066d9439b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.066d9439b.0_1676491098406_0.15767730254891865","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/form-field","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.7ab32468c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a344d551524fba444b85d53240f3a24b353e4b3d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.7ab32468c.0.tgz","fileCount":33,"integrity":"sha512-dAFhZetu849cuhso01f3uRmsLXI/e7JnoUgNyWmqkqbiODhqhPkvwAo4CNtj44HC0d4OV19xN4iY4eZ9e6BZ5g==","signatures":[{"sig":"MEYCIQDIo8Hmz8KnabNKUO/l/uArmGk6nGYOZmx0IOpc47nEAQIhAPo5b89TEOWU0N4lvIgYmuKmld0P1BH4+UUOEkpRCSIt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q7BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLbA/+Ld5y7DroNBYAdPDKipXahyqMYYuu7dfVTlzFYeU8Vol7n76m\r\nK2DJEEmsjGIvpR+9loAP3hpqbAoxZbPhHtnjrb8lE8XMbRhVHqlaaM+VURzt\r\nTTHe/JCfsM4XQCQSGoE/LQnRbW8SfnCA2qxv7KHT9hJFioVPbg36Sl2lKbe+\r\nWupo0I/hEQ3vJXnDvU3G0BJnkxgK3SSGTNUJT13d0C1DeZSl9IS0/NJJqoW2\r\nfwAlXwpWi0F+jvLT/aU5BPT2upWTte43nW5JLEGB6mvYHhEj7QuoAJrdCLpv\r\nYAmYrWtVag/G6DyT74KX5es5fZGbk4oY5wpvDGHQY1JdDkXBwJTJdY/gPzOk\r\n2Fnpwe72H8obAzArbrkIx74N3k8VKBdQgNkf5j8c++k/Hsw+D34nvsM/SK8J\r\nan6ekOcnjWL1uesaf8oXhfbze97Q1EBuzZ2Xk7kP7FppgAlLlBGw0w8+h5/o\r\n7K+DOMJqZA9mPK13xc/pfTAHSGOhSfyqXl/H3Lo8cnHd85CPz5lGF3nET3gv\r\nbdFZWw9FiqtKeqRy20Wc98hKIzniIff68D2HR5KVNcJJfqi1WA6z7Fjl+uML\r\nJxlzU4AcqgT3ocvutzNvVppkBSGxaCEN22twd6JV/WLSNSj62+VDNWISwLzy\r\npqQTC0hRXtsp+jAc5izyQsoj59/kvhCDJpg=\r\n=QAMO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"08b12f363223d69b2eae5d2719e9ff0da773381a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7ab32468c.0","@material/base":"15.0.0-canary.7ab32468c.0","@material/theme":"15.0.0-canary.7ab32468c.0","@material/ripple":"15.0.0-canary.7ab32468c.0","@material/typography":"15.0.0-canary.7ab32468c.0","@material/feature-targeting":"15.0.0-canary.7ab32468c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.7ab32468c.0_1677004480823_0.8382831965623518","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/form-field","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.fa27ba61d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"94d3baf5cb4725ac658e9cb690668db4fac87b4f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.fa27ba61d.0.tgz","fileCount":33,"integrity":"sha512-mU4m0OcjL0pR1uggvwN1/zUUSkGeePlz0E6OxhIob8rUq/ccBAjkaUF04kNbZDvA2dJE2eVFLWW8UmkmFb0CDQ==","signatures":[{"sig":"MEUCID8X+kfx1Yg34k6plotfYLVYulDANjsTSz2NST4yvf8yAiEAyLsIifmr9XiL5SmweaWLGQd0woZBGVZzE4bsP0Cb6Fk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NgvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSVw/9GVa5KeAw1qcejplGqnGPD5DE1udwoQb9U0NELmxyDlguQW6k\r\npMIYpPUItU4TMuriBKU32zNKFYGI7kBmAR4Arl/HFReA0cmZlb/5Egac6Qbo\r\nGsGmID0klLCaxLvjSHPzpxjiKvE+q/nj8Tq6LGEcVmaE1ezLU/oztC6CsZb9\r\nzHYoZsxHv70oABOWEAswPwiEms92CnXkx03EQwuApPhNa+Nr270qBssCKw7Z\r\nPWRCCcKY9Ts32lFjBmaDKA+2JOD9bkPpwo09czsw7JsvZmHTkLJvyaKAz9c3\r\nKccSjvVZ5TdYoeP8g8/fUWrDIiJyu0fMPzqM3JYDQo9GcBfph+/VxQxmzfpY\r\nlg4oNXgkLrb0ivDDHaz4ihm2FBWBLXqgVQTU1JMIayG2hCToJIMZQklKeG6r\r\nXHv5UHxwYQKb4qHcJOdDSBrxoZ2hwmMCOuob0gGgoAziHql3wQUC2nc6JtZU\r\n1Ux1XGF90etM68Uv87brFsLgXVyRYubs+jXmAmoEiGjRwSod6lwfjUW4py9E\r\nfX7bFpSNrTU7+v5m0H+IIGh9GWjgnnIOih8kltSQRcNLQzDbE0NwK/Lk473H\r\nXVuH+dTzeKKcYGQ2MohtmasmhWuJakZmND+/3cwOkTbPmL6FpEAxxSwjhSHK\r\ntOei3oTNf/BOZjhsYMP4NnP9ql/joa1MNfQ=\r\n=eRJ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ed40c112543fe3ecfc009ace11a6f0c3f82fa26a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fa27ba61d.0","@material/base":"15.0.0-canary.fa27ba61d.0","@material/theme":"15.0.0-canary.fa27ba61d.0","@material/ripple":"15.0.0-canary.fa27ba61d.0","@material/typography":"15.0.0-canary.fa27ba61d.0","@material/feature-targeting":"15.0.0-canary.fa27ba61d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.fa27ba61d.0_1677514798800_0.8176836344285721","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/form-field","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.311ab4d4a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e265059d334fb7c5e59fb0a3b13537480e43f4f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.311ab4d4a.0.tgz","fileCount":33,"integrity":"sha512-YpxlU+sjRUYUAqXTJCmeZAcMuzAx9xacBu4RsGFtLyS5n32qpIW2IJel77ZwwZ0vHkHKnAtH0BoFsCYRo5vMwQ==","signatures":[{"sig":"MEUCIQCR5BBSHXz3PU1jflPSatZYF7o0Vhvrpw5q/vL2kM3ouwIgDhLH1VJUxQeMr0uqcqFqdX4zYEy7bo/yTDrZkh0/shg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N1VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDag//QUl5TJtBKNbRBB8Ec81TBZu3x0jvPN9tlkMSqqI5o57vKrAi\r\nYxoBL5OQjhazNX96IoABlp9llIoyyXdemisB+AlPb2OkUkJ+2260ca7Axmu3\r\npwSYawwYU5qW4ah/uwvE1CqsUBwOIVOEeqHqIswWbDlZ3OojcDnyYQE44I8J\r\natJj8JDmrd9U5982PN8MMJlqJ/slbJ3S8cFQCyQAraJgbOEAvdvt44N4LQU/\r\nkS+1d0BmbtwiJW5wxFJEClbKjY+TEQODwcllHw5g9yXlZdGWXJOG5EYu5hiF\r\nzfEcNlVgXOqgIn27cXxfjlv75LUL5+9BcGI4c3XknxvIgnygpGZ6Uhr5EN2p\r\nYqHZZ89GzdnydBT2RWP6UH2LyhSHNuGXOLJTYZr8dHC1Cg5f1R3/skif00TA\r\nWpElZwyXRT1gr88Oh0A0gPrPxl6QQ1XjwU98RTuy8sz0MrkqLLc8jWuFCSRb\r\nPJUleg3tcMbbb9Wgua8opNaum6uTPq5AhYh4QxG19PB7wLg4NaxDnx2SlZ7c\r\n6b2A6JtutNFhR0H8tB/bz3hxwBXfGK5udH54iSp9udI/9zYoSqpsiyeGnqel\r\n0r2fNqJe9H/BOfaPx46bfh8CZIptLlVDsZTk8e1/CN6qdqItnriqm5ZBNlpk\r\nRVRzLMZ4dGNVuL5tdbqdu3ra/5bCLWV2iHQ=\r\n=Gccr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"07f8d2f7bb4b2f30e60a6bd8739befd9d17bfbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.311ab4d4a.0","@material/base":"15.0.0-canary.311ab4d4a.0","@material/theme":"15.0.0-canary.311ab4d4a.0","@material/ripple":"15.0.0-canary.311ab4d4a.0","@material/typography":"15.0.0-canary.311ab4d4a.0","@material/feature-targeting":"15.0.0-canary.311ab4d4a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.311ab4d4a.0_1677516116976_0.7917427112572886","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/form-field","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.5cb8e2174.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf308025f934a44d7954807455d69c99952c7dff","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.5cb8e2174.0.tgz","fileCount":33,"integrity":"sha512-Ugsr0cZG1rL37ozZF4nURwL3cBJQbBSWz+yXzo9SJ/Ei+xxlxkjkN+OgP5mN01D1HTqKQZoNZylP0QbkOOBeuw==","signatures":[{"sig":"MEYCIQCagiwAYvpEcIcLKpLpV/0KvtrjljVRbGbEh0al55BO2gIhAIdx9URY/IAI1JHYY04ka9kWcI0sVBwGL4VO9MwTsZE+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/38DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrt5w//U6toNJBu3+JGROXuuFfOJqzSvaN7g+QJX2+sq1xhcmAYHOPu\r\nJaeaKPBK1LO+L3NyDxlfay2VHepvWikcZmKqY808VL8pM4rLtFSUfIm/0q38\r\nF2vC9KjyMR3VkJVkLxJzQjxVFiQRbih0hh5EBkSwht6LfrcsTbaew9rfcPvk\r\n97VYB3BlXfTmPk3B2o/qVkplBAcOxa8AdKzwDmcrCRuGZBNVUASLuIVVXFfv\r\nwjVtMEYVuG8Dc5aKr0smRKc3GGss4DQj8n9uKTT1Iev227X2dOvJIB4eg6Fr\r\n1D8iePWnIXy8z4tCKkR9WEa2eszj+ZQy3QkohuXU94kS9oOLkOeOgALC2ObM\r\n6AKtzh/Fq4ALhuXwvVYkBMweeSYl69qa34XZI2/7iwGVpprZVBTvI+605uSV\r\nmnwvDmEqoWNSo6llLKAfqlEN3TYyqQbNciOMdVGnbWhST+pZ4kETKYXY1xa2\r\nz59VPqjIJnpwbOWkPx+ViV5hTuRCObPzvFfdwNytLwS77NNyC7sy71Uvv6Mq\r\nm0ggvRnqOO91c8Vqokr6L5WCfoue6MNrz0Nl7GVDg04HxWA8gg0jr9iMtneL\r\n8QyqQJvmhSh03RkQpg/kYLgMBlXi6q5Flrh5NW+ZG9zE+130dOCohQyBWS+i\r\nx1zpShB1HM9+CyXWpNIOXli3pe3UyJkBoOY=\r\n=rhki\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d57edaa5a3a3079c48ef7c804f0a642bbb682478","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5cb8e2174.0","@material/base":"15.0.0-canary.5cb8e2174.0","@material/theme":"15.0.0-canary.5cb8e2174.0","@material/ripple":"15.0.0-canary.5cb8e2174.0","@material/typography":"15.0.0-canary.5cb8e2174.0","@material/feature-targeting":"15.0.0-canary.5cb8e2174.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.5cb8e2174.0_1677688579406_0.9416065365567543","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/form-field","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.f32339937.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46a060434fa5f57a01a41ea3976e4995cff91445","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.f32339937.0.tgz","fileCount":33,"integrity":"sha512-KpCl8cRweraoUZLHLoH76e/tw4SSt8tCfyqKPiIEGMLYPi6NhSdJve3JJ77AConngC/mrvrmG6nJ4CjFhfpWtQ==","signatures":[{"sig":"MEYCIQCNd1eE1ObZrJLpZ2miwbGuBVn9ZOBAwW4Jgx/TS55cNQIhAK1lDSfejHDU0KfYsQgAdk23gL48v/eIfIK5z9a0sMH6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgO1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSZQ/9H4f/PCZHB5UByvjAYh4CB+aX1PjsCI7H9rEq06TRkNu6gkLb\r\neyeFw8MHpY9EGyUJs0NNWnd+rCrK/FZpGxdoaoSlSLLWCpn3vWWyM2Hokxko\r\nTbYHQx9NUcMlKIu5Sx8L6T3J5WlTbAHVHUEyOJA/1r4UnosMfiOSqHmNhM/f\r\nOnWm+nPMZ92eDnBm2FvPk7hmj4BkdcBOxXWXo1GgDHemayJJt99h/xpGevLx\r\nrZxz7ws1eq3k54KGA2LKIj5KOwUQBhHwVsohz94L695bD+YDEVQTknH6kXil\r\nBKVtbwsrIZ7+zVlCZMqhWUIfBabsjgI4hbmSDzuUJvPi9hmj2CHgGbA6zcwO\r\nfQ7Qq+VL5mrA1biinymXN53+K9xK5ceR26Lp7/hr4U3ClSCqq5PkIGuQc7xl\r\nZaGxV1l9CMLxdbTxEMLXcHBGMYxJK53YL7oqUPh4n+fdP8+Qgld436ZhiH1J\r\n4eVl6mlkYZkAgLTWr3d/FpUKZIMzZXCXlApz41gcNDyzRyxezsFt8+QpclMi\r\nF4ODQDkNFPb9RY4/DbYQDgITqHrHpeEFI1cGuhCzUAXh2QzwaFwEdw8Q4baF\r\nbg34YDKg/OEmLiIYnJ6+eA27FRa6AvPugff5tOtmOEIlGLQ4Ji3lA6MhnGtZ\r\nmskXcfcB2R2j1Pf6cfGUyfX6KfUENjNt3Vw=\r\n=eQLK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b6c5103b89138f008c28f70d93e0d3faed285061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f32339937.0","@material/base":"15.0.0-canary.f32339937.0","@material/theme":"15.0.0-canary.f32339937.0","@material/ripple":"15.0.0-canary.f32339937.0","@material/typography":"15.0.0-canary.f32339937.0","@material/feature-targeting":"15.0.0-canary.f32339937.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.f32339937.0_1678115765129_0.6137251922921243","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/form-field","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.7644d63d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4a4360fbca8f6a3b03c11974e9708e8b4fb6f0d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.7644d63d5.0.tgz","fileCount":33,"integrity":"sha512-Ais+yJ9/QMXsiUd1s4I4h68aKwUWk/W+PwjZOQph0IcKxaKdE5aW0knZRAcmZMeK9qe2VDOsM/uhrgHCHNAG2A==","signatures":[{"sig":"MEYCIQDP5yDLwv5U9Q1Xzcjcezgh0cGHRBJ0lesLG2COMSlIPgIhAJfga4VI20Tav07Pfj4DQ4fgDFDqmnj3y0RVvnA5KQWk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmjuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpcew//Q6c46tOmrDySmCdpvId0rsmg8U1ZqAWqu7DwFvlYWyaz8Qkg\r\n/NIoZoEpZ3WJe7vSrzkrkEDtXfypUezgK7Zyh0glZPc6QUZEmAi1RM449mn/\r\nw3XCRGDGHlp/KAog5wZ/HELQUkCAt647uEq0g4KeNBso31KrOC9WyjjSdxVN\r\nce9WKpPfzCKW9ccmvxoOndz+/+sHkeiOhCz0JGd/p2gX1aX3U6X7yNfHmLQu\r\nWxL0Tr/K9Idv/4vllo9A8tcbf42HGNyAS9X82BpfzfbW0IC5lObUYZ9vrOpa\r\nfQWeLVTd/eOLD6ZEPsIp5x9Z8PAzdDL9CAN/3U0QZiEQaA1MGQ6OBAkU0ujV\r\na2lhuz3TVHmDO3wGVnEdvv6FR3TTOjSqgk+OVJa/pyNMLHv7Q0wgiup4X1D7\r\nGxzQHvgO3F0vJmoOzQAoJhZn8PgiuTanyNZWlmXhlvildrHp6AXqkSn9MhON\r\nV0Qw69BegC6fz1NYgAbUEG+7GeFC/v4Hn2tOarq5h0aWJ8rnVPWV9xCWkHIu\r\nCobaSC54TIQa2d5Do4uv3AV+ZV3q7Eo/TYGxHa+AHLpy9SO+oFdSHGgvInxf\r\nSBPWX7gR+B4PEsD08M6YaisFwl+T4IoszRHRzpJBjxhvdxgYJox2tlu+B+V/\r\n7YB7ao3GU8L+VWDaRdkHkm/df2e9gqC+9Rw=\r\n=dhPJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a0332d9af18b36becfa025c452efffd11be59943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7644d63d5.0","@material/base":"15.0.0-canary.7644d63d5.0","@material/theme":"15.0.0-canary.7644d63d5.0","@material/ripple":"15.0.0-canary.7644d63d5.0","@material/typography":"15.0.0-canary.7644d63d5.0","@material/feature-targeting":"15.0.0-canary.7644d63d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.7644d63d5.0_1678141678105_0.5854743625150043","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/form-field","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.d96330c08.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f21325ce5421697d65c77bb7c6e596e8f097ebf","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.d96330c08.0.tgz","fileCount":33,"integrity":"sha512-iwWIgL9N/KVnJMQbDAlqAy5+Iy0wI8i4Ryo/ibua8N7xh3gK1LGAxWtlPeZJtFOqZhIgQY3/DEFmJKF8MuSang==","signatures":[{"sig":"MEUCIQCMpv61RtIi77pl/x/DM+Vqw9/J6n2gnP+sd52y5q6UHAIgFZNQTMOa3UsgIVK5PntDD0oNtBO3FGQ/1moL8gvyuC0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHSbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVbA/9HWSmRMb3Acl+Wjh1p4WfmovBjPMG8VKddFZ9wu8JxGQ/wtvS\r\nvbERZFScbi0wZ67rUyqLDBImU7FIOhBXgMPEZ0uSyARKZmP+ZW4oya4wFItH\r\n/Pushqy20ECtne9JrMbNaEri5R4KO+5lIDv0qywAgnW96rmzRExqweR2y2jT\r\nkBgBCgChCwhUGAN+uZDiRwKOwKniaRkR7Q/tPD2l5F97DH2MLY1BuMg6xvjk\r\nL4DZ5xf4Y0f1Z3eGtmLd0Uc0S2ODNhkNLONITLYxpcBNQtAC3AUhtr2Wcv3n\r\n8OOaEB1RQaG7PrndIPmuZkc5TmyldYq+mw4yMt2J1a7mAq9RBF46bfVNj/z+\r\nwDyZZWY1eAsl0Ton/M6vAeZbPjD3EyL98jJygCpFLKyYCu875AJdVqnPEUn6\r\n/kMgtkuFUTMRpB6SX1eU5SFZ+LVjY8T4HCkHkzVi14kKIUqGxmkomWDKbLKm\r\n9mPY/kTaZv/QDnzeQ45wXqb2NajwhXzG+cD1qneGKpsNJ03jGFEnnWV75H+f\r\nyrWZg7fNEYl86mDxvKRgrNr7m0YTnDm61SX/jG9B0Fsyot+BLturEfncZqpE\r\nYqvt4lX6k6/fClplerLBfNUgQ48c8MnRHhCQF5blldHhrTS02azi/kih3Eth\r\nEizUXpDvbrFdXi223ZnrqDjsHaCiACGiNto=\r\n=Jbng\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6a6d53aa84a0c0a10bb15c3cfb596881140bddb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d96330c08.0","@material/base":"15.0.0-canary.d96330c08.0","@material/theme":"15.0.0-canary.d96330c08.0","@material/ripple":"15.0.0-canary.d96330c08.0","@material/typography":"15.0.0-canary.d96330c08.0","@material/feature-targeting":"15.0.0-canary.d96330c08.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.d96330c08.0_1678275739595_0.6494195465258619","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/form-field","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.c99cae77c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e35ae6ab6a170b5b14a05ceabc0311863c1330a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.c99cae77c.0.tgz","fileCount":33,"integrity":"sha512-y/WZ4OHPwjZ9IjIzP8qItdEYTjcLCG9vVy6Z5sMy+oIN+b93eT74o+hHN1jzHy/fGvAL1Fd+35k1t0fMsl33lQ==","signatures":[{"sig":"MEUCICBeV5dKd01ahwylzPHHM8ulxurHFxZgikaWjsshNn3AAiEA3KTqXZM+gN+ZSsEHWA3Js0GMlaGqWv8xodyIdmsRDME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR2eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtkA/8Dxcc9g5AcqcctUdknPhxjb/35fphdJSfAMPHxKWpoG3jb8+T\r\n+KlLpPKcq36G0C4TLGfyezr42dqNWVeT8KuqT6X399UVXIMEtx4ro/x8tWHt\r\nWZA0oYWF893ZKIpmgg9R4WTiVtt5kMjQPWj2RNzmaij/qX70m65nqLqQSXYQ\r\njIr3n/UKS2vJlDYRmEvroTSZlD3xB9WhJGo590RmZOCd6oLoInSo6qVwwBy3\r\nQqY6kWNRXCEQjD/bmDDsN4U8FJlay9Pns6FaAyk8WhLGKBEYHACU0GYxeeuD\r\n7M5rvWVA/r1SNcxrvXiu1utqJ0bv/lUnTPh7mWIZMRjJXgCZ06SE3pdx9gCB\r\nXNQUphFDnq4FxQX6cRMbscCnIjMtS1GqINrmL19J2JSfE4gLPwo99lQITIKs\r\nBiZN/svg6kkzudACgd26wn+psUru1tfy2B5CpmTveiK89e/41/vkh9/U6oQC\r\n+6G5kNUagt/mA9K1UFbaNJH6paK31eM290vD7YZbvxTkXFodx3SZTk/2NA2F\r\nRm0uo4APtF872Oyx7EU4thUKLXi+6DrDeaXj2rjifY5Vc5yZWpeDgdrf4SZN\r\nOX9g6efyafQPnVAYtTcNEQ1D79DecxIxymzHnzjHwCsZQmS6ETr7CWgTQG6K\r\nzDBWOJ5F84qblTczgtigW+NMjgKpQc+iu4A=\r\n=/9fY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5b6a7c1a1c133381bad395ae040de00c64b62e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c99cae77c.0","@material/base":"15.0.0-canary.c99cae77c.0","@material/theme":"15.0.0-canary.c99cae77c.0","@material/ripple":"15.0.0-canary.c99cae77c.0","@material/typography":"15.0.0-canary.c99cae77c.0","@material/feature-targeting":"15.0.0-canary.c99cae77c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.c99cae77c.0_1678319006645_0.3905087479148406","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/form-field","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.6023b1cd3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a131cb74cb345b340fa0279e265bcba7fb9ba41a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.6023b1cd3.0.tgz","fileCount":33,"integrity":"sha512-7NgJRJvm5l4DztpPXd6Y1mkswmX5j+u+npnTWZ8D2cKieaxXTpCXx9F7A7/VqQbU+y73IJTE8rKzzZk1FojUbQ==","signatures":[{"sig":"MEUCIH9PEKPYbOHqo6SKksLFX87sNEczoozXJR1PPo1PMZtMAiEAhujBGYUzCjAHLGVsIa2rqIRJ761MzXQUUvmi4GnHNiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCeysACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp61xAAoYXk6kn5+EBalfCls359MDuRFS8KoZfsn9oItZmDqsKwQpf1\r\nuOh5ac4zGo2spTgy0xIymmQr7nSlWDs7x70QMIwtsX8dPnKzO67ZKP03KFqQ\r\ngItY9rlRA4I+rJbNsBZOInR0pEd8Ted83Uz0Tg37G1xHe1cwc/U0OYbSJl0S\r\n62evl2XQ4SDwhUHGsVNEbqhbBFtclW+OOJWEx/MpN+cQDDzila1LhqueQ+Cn\r\nvMUdIulsLYVGRSmMBBi+UkRSIdgmlf1FZCTXBmibgg/H2bDzyR9rimYvNxpz\r\n+uvuRJSUg5kAoQIqy2tJ4OpHcRStMklqCS2PxEOo5buCQ3KhJjK7ooMHlgYX\r\nlKwmoLEW692dlr945lLIXEr1hkGIz4MW0wOI7Bkn1s9cDG6R5HFZym5aTb2L\r\nUCD2OraTtL4IiEbw2cfwuqAAA3sRyXDDMlDLJ6iIZ/yvCU9T0TuDcsqcQBTt\r\ny5LccZwWGYMPyaQJsA+raPuyHB9VrZ+aHE9IMJ1R07UakxWGShTtlUJtnxRK\r\nUL4I0yU2LeHQITRV2t7vzEtf4nyFlu9UQ1JuzWERCnL5RK2uy4fHCdtNWDZx\r\nNbhB0QoWEwuZW9mPmPxjcdACceFeybIAM+62LvE6DGLGFSf6KWXacsyHiUbG\r\nMMI4cXqj4QmVFNm4TRmwThAusDIIE4GZ3gM=\r\n=6BJE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4d11f175faeacd8e5fe534611afbad84efceae77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6023b1cd3.0","@material/base":"15.0.0-canary.6023b1cd3.0","@material/theme":"15.0.0-canary.6023b1cd3.0","@material/ripple":"15.0.0-canary.6023b1cd3.0","@material/typography":"15.0.0-canary.6023b1cd3.0","@material/feature-targeting":"15.0.0-canary.6023b1cd3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.6023b1cd3.0_1678372012171_0.848793044512764","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/form-field","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.274610c77.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a379c29f9c87dfa9dd65bf52c9b12f1ef6a6f023","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.274610c77.0.tgz","fileCount":33,"integrity":"sha512-XfX10ABK17T8Kuz2iTwoIF7/gv99phqZjjgWuZWAFVNtaDHlhuP5ijAmuxc4/IPSo/f7zD+yH0Q6KEB2s306ZQ==","signatures":[{"sig":"MEQCIGNIf5cHz/IOaJyUBfHwcS3SdFR9aLMzBQgCM8wkmBLJAiAAkEqnyjL/EuU0EhBhIURzzTYFcjHWuta+4f6oS8QKSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfRAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSoQ/9Gwomh9GxBi3Del1LPDeuO1JMP6wFBAUZ7+ylii69vM0IXRrw\r\nkRnWKFN6WqyRHBJr9n2M5g6fmbH47kSh8U5kpfXR7VLPDy3pZ8mc44wh+jLy\r\nXsTrk9VJh5dfScQZhpjc7AFkuo7xXbEK0oQmZmdDCO8HEcM31sZo7PBH7run\r\n6dfHOgz8UA3WVqpj3h+mMVwdVou2Qsl/4w0Lm5cF37tutn3SnjvoT0NWU7bC\r\nrI4m+pSle05MoNGm8knAmEKJvN5Lyhw7vthqbEsjNdGyW7FmRwYuck39HHvA\r\ntdSwIheNs21VVOCUDgHhGSWd4rC36/J5JDzIx7WaZAFzFw+HP00UqCeMXFLF\r\nf1al7u4+F10NwGTo/v2dZTc80J1jSl3i0jCiDp+Zqhpum1HK+yIRZ6iLQ50D\r\nZv+LVMe7BKnYDuHDyBvIA3IeOpYGH6FTUfZuuGQMOMbP2gWfIwlKIufYlkWP\r\nBFsglX1oHTW/PglKAn9CT0l9jP7o/FNnzjdgtu4VYHe46x0P2Fabhj7ZBQYV\r\n0lgQOsZ+tc/Q2h2LO8APMCkj6U0QIfNXRk/Fm1rCfjBSGiLskbs/3Ke4HYjU\r\nj7ixHlmKlXQ1TP20ryImJCHs2FwkrKZxr8lZX0reyCdn7fVPm/FUeEdPywYU\r\nS9n86wJEAOsgHq16B8E40h+9p7nqo0OPr6s=\r\n=hSol\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7a2b02c682ee73deba431503de1a6f1fef211c10","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.274610c77.0","@material/base":"15.0.0-canary.274610c77.0","@material/theme":"15.0.0-canary.274610c77.0","@material/ripple":"15.0.0-canary.274610c77.0","@material/typography":"15.0.0-canary.274610c77.0","@material/feature-targeting":"15.0.0-canary.274610c77.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.274610c77.0_1678373952292_0.7352300933788698","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/form-field","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a274583b9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f5b20558654ba783183159f665ddf5d2944e896","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a274583b9.0.tgz","fileCount":33,"integrity":"sha512-7ltUanctdaHXB6D2mVLsvJdU/JrXhT/EYYcdnnVsMsyPiSRrJn+84XdDwuK9YbAowCYbLsHS34bLA4hknQ8gvg==","signatures":[{"sig":"MEUCIEXpuMSHZoKajZSsYmOy9bVrzuP+BXSuM4T4CIaEGg2MAiEA42ft6Aza/z8IWnKjf5PqXNy9Aum4a7kQOlGJu0Qp+RY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjklACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoj3Q//dqe3otlabj/frSgGErFx+dBDtXyiGTpqtJ4WBUQYiRouD3S3\r\nGJm+xOGCbrOAY/WsdlmT7DjJK/p15uMo/zK6OoUtABhgLxZLlrRo6Na4QerW\r\nG3sPtvU4lLYwRBx4toU3p730ne4AU6h8eZtdEKaxMF2m0ayASsO6EOfZLhh+\r\nsSFBs13w1JTiI3evV4CiY7t84MA8UNYzdSZQ3kLlh4PzPaG3+170XSd+AbJW\r\nO6PPUPOaYIy9Q+QOu3jHEwQQQEk3+UdiWLWt1WJVJkGad329lYyNlacjHl2t\r\nRZVhiOtOc2edWQosfv3jp8Rzhl2ZIDnV7UxAUROyYixU8HdJOEk0QpgPAlyp\r\nKnowH0kEBaPw9zseIR3UqYNItwHQRdQtsBerLAOmQnPp+SHCwuCZ/N9H5mEV\r\nmulJG3ORoxHd0NHQ5lLMBI72PrOP/4Aq9vcMGJmMXm65AEJsSPQeDbgrNNer\r\ng5C7dK5txmkir8+pTKBC6CkUT4Qly/qdocJQ6zQItmBUSaKnPfsDfacoGyBd\r\n+eUWp/YiKu4oCv1b6tzCyS+eZwKXv+vMCA60ojrQdsLlp4fbWKmPyhqh8YOM\r\nNFn/SZdpBojOTI5tPs2DXfn/vD2X3Hv+8ZLnYK3I1Y4XH6iqmbXvYXGV/hbU\r\njP2dlFfhuqsgdhphHfxYEq+fwV6xE6qY/Ak=\r\n=XMFV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7a7c8184214014c45d0ba8b4723714d1fe91f266","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a274583b9.0","@material/base":"15.0.0-canary.a274583b9.0","@material/theme":"15.0.0-canary.a274583b9.0","@material/ripple":"15.0.0-canary.a274583b9.0","@material/typography":"15.0.0-canary.a274583b9.0","@material/feature-targeting":"15.0.0-canary.a274583b9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a274583b9.0_1678391589098_0.8258671056900486","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/form-field","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.da22ca960.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5e7622f3ed7a0dfdfa80ee62a300d9e1393f9ab","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.da22ca960.0.tgz","fileCount":33,"integrity":"sha512-UdbkbEHYZMpHXKeFsi44D1vj9yRj/4xrO6kq9LNPa9Fabxd1Fz1CBbfzV0st9kqZLeyN0+t4NS2c7SYr6O9wOA==","signatures":[{"sig":"MEQCIETNmOi+V5sHFXWdAdekwBtGiS3E++kLbzqsrLVe3nkSAiB75v8I7BLqzLH6IH7fk5pIRgPhphmhv8uDlGa1Bjxyjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj8kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvQA//faTQIgxbgWn+w+6waQNgNtKa4u5MXgABBMBStuCKBHihDKac\r\n6YBzo++OeGESQkxSPplsFCzUb458BMRRHRbCHjRDk6sA2Dm8u3RnYo7O5tV0\r\nVjvdQ9kqkD+h3dt+NXRemd+ReI0121IVbfRTNZH2TqKcDcMFo1BzoB3qQjKI\r\nZyUJwd5Y1B4TCH5+DErDis6CuIIdoxVM3wK+b2mHb38zPc5x4BDPBeLQvUlu\r\nYlko1fHWyHxhIam7nFR01c61SA1+GzhFd3GK5JZ0F4nxS429vCU7kAxr7Oob\r\nWb1rKCh6PZp4W3wl+ZoZGBAewjvqCyUL+kq8vlTvE9fvC8CH66oQISallP9k\r\naa1n6Uca3AI5elUXNVsCer25e/dusuaDyBOAdyXyoV+jrYwny/fJPl9lPuXC\r\nioV/2Il2cWYXt71N3XxUNUXq446I87FgpVFsl1VObOwcfqTed/j8tdIczGq0\r\niADtj6ycDwqXWpDWmFtge4rCeAuNl04qiZnlAy9CUOrHlEHFm+/EtXBd1DAJ\r\nngrlq9Gk3R5YGM1vLt6N8yWnoFeGh9IdmWsdAKfUGAGQ5FHV7ma89lTt25Qn\r\n7ZQdNyi+a6M6m7zer+ZQxwitc9R+uhCUEqjMI0peTtYVa29vHdAIFppwEu+x\r\nxogAE//8lE9TvpHBoYs0wW1rPthtb+mMjIU=\r\n=+TTD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1b58f37865efc4ba8ba06e1190cef502dee9f902","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.da22ca960.0","@material/base":"15.0.0-canary.da22ca960.0","@material/theme":"15.0.0-canary.da22ca960.0","@material/ripple":"15.0.0-canary.da22ca960.0","@material/typography":"15.0.0-canary.da22ca960.0","@material/feature-targeting":"15.0.0-canary.da22ca960.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.da22ca960.0_1678393124716_0.8632331921305643","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/form-field","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.304a94e8b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf4c4aed7eb8ff58f3f246d2d3ce0e0d824a5490","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.304a94e8b.0.tgz","fileCount":33,"integrity":"sha512-S/k4INh7+5OVujpwCJrK2zQ11sv8S+R4TxWnZV7iXAMargY5gnnzuiydmKtecDWpRc7N5PwQdx6OT0hJEbL4zw==","signatures":[{"sig":"MEUCIBqTv59FDyVpL4Adb8V42idQe+AwKpZSnuOQmCS0ZQ4kAiEAm3mS2C8BXHUfeofoqmnF2BQPuTpE9P7fcTgZ6baY46w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkVpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYDQ/+NceJptj6cWqVHftXG/aLt1mpOeqPcdtMO1AJ6FGHAsfDHL3d\r\nVEnr/L8U/Qu+OlOxOuYAA7YJnyyzP59DOEHAmFLjf9KjPxD13ozIeka7ql+a\r\ni2yVnK5fAr/FAUBWcV9cHV5O92QMB1y0/opViK3yUxNDF5qlv4RDOsh3WN2D\r\n47gxmjMSZs/En3gWzvX7YBrfteD0iH9qDujq6iwFA24EodlOZsq4Okpb6fo6\r\nyE/Sa9nd3xQNPFNBdtj41tGBY64M4NKvUeUDzBSduiL5/rBTMw/i0GJgZsXA\r\nUj/Pp0SatWAVrKh33EIrh9TWIC2cMlDNxo7lluwaPZzwqY0JX+p6ZCJHM+7o\r\nmKYJvDLm8btgPlqK8JoOYT3lMpUuY4zFCsfALgil+JGubTvD2fckTwpV1Oo6\r\nEuQoQt3il/uQJHOjq9MsPi+c7+SmTnUbG6Die0UOEM8bBY6yMtKACd3EQJKf\r\nwz/hAUiex7RAOOFO7lXZn2KUfDPqC0NfLD/bUACrrKIv+mHaIiAh+woI8r5i\r\n2oN+ilAQyFmzsEbmKXFgqrWvSAncw4PHEHsCtz84J43yCBKKsPY0Did3qxw6\r\n9nYpcAG/GEmcLEUB65PQoN+AD7sQ334Fqi73rosDNunmTDhfYXegYlcS5Cwg\r\n/ytzfsYN8Teoeu9WDp5VVpYKcR+hN7H//bk=\r\n=113U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e7550e10d6a01c606a6dd78c58c4ee6e44c3f062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.304a94e8b.0","@material/base":"15.0.0-canary.304a94e8b.0","@material/theme":"15.0.0-canary.304a94e8b.0","@material/ripple":"15.0.0-canary.304a94e8b.0","@material/typography":"15.0.0-canary.304a94e8b.0","@material/feature-targeting":"15.0.0-canary.304a94e8b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.304a94e8b.0_1678394729319_0.8125557933242813","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/form-field","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.6c265915c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d3da33342c30cbbdd042404ba9cc0c358d50e33","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.6c265915c.0.tgz","fileCount":33,"integrity":"sha512-43rodDFSE/Mzov2sbrjlYq1LfLZLEtjfiGrxJHr2ZI2bGi3igpcy6f+S5bh8RNNBUV5R4EJxoAaczSl5W7lDmg==","signatures":[{"sig":"MEYCIQCCn7lmOTxfar0cisCyRaCj5Vr3opoSF8PKHJhbM2/ytgIhAKC5N7mEIfpRQtHUX9R09wpasPXSKE22rYo0HMVBi1ZJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClQBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAuQ//RDsYovCP46Po3KdbK6gPLfttA+k4R04PzF7k9z2kBTbEkRYP\r\nFalrfHu8rXV7rv+Z8Qw/VsI0QGA4wwLvOOgnQxxl2iKvGfeMweFdfJguN92x\r\nPsTvfblUOPpvKNQUxcaTAWTACannik3qt/rfJhSGncInCnZ+h7l5YQeQuVwX\r\nzGE3hjtQKIEVdKAG7uZhgQ6C5rxVnHejjFiuuZFh0VSfTD1ZTGjMvdTcyniQ\r\n0wsbNt8rW3J/Mt546qFZO1QYIhRekhCRtt6W4hMtTA0SkMkoUvjfaub9+fAG\r\nALyIZ+Gx0bnSGpmcihTOORU8XCX7grF6Y8zs4pI/iH8vClYb1DEzQMr9+WK1\r\n3cro0S+jbbj4q+PpcyCNQh+07EhcyvFdgetwqieZolIN+uXtKbEw4kvdn73T\r\nTdXiRw9ApdcrASAj6KYGkOUiGoWSFbCl9bS/xR2dnzyDqJxAGT9vueSRD+XT\r\nGNk/WHHpEY9zGJsi4aCG1dS5pYqXhQXRhegtRgU8L9e1TWHTXaxEvTtVscY4\r\nmHJcaz4fKz6nGRoWdNbVlBbWXK0aY5jnSMf456qUcCFXZBBgUBEbk78kDcU+\r\ngbNkDvKkANi64WZo3D3qDJwaDuXP9xU+BygxqonweE+nqflXV7ZG0QYF6Jw2\r\nGjlMg3XkqRPDsa48afI5DVubrUj3XrefFAs=\r\n=aVFn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2226d2e658d88eace91ac63729977eb6bd7a9af9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6c265915c.0","@material/base":"15.0.0-canary.6c265915c.0","@material/theme":"15.0.0-canary.6c265915c.0","@material/ripple":"15.0.0-canary.6c265915c.0","@material/typography":"15.0.0-canary.6c265915c.0","@material/feature-targeting":"15.0.0-canary.6c265915c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.6c265915c.0_1678398465618_0.1546672520950514","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/form-field","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.de5224633.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81adc25d3d137afbfcb915f972b127ddf16b1b1d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.de5224633.0.tgz","fileCount":33,"integrity":"sha512-BWCGhA1knSJXNDPUbdVc1ClZmKYBxlisWXAdSuhXWVedfBxcC/bmsFMW8bNg8Ksxcn5kDUyucTA8qXJHK0uySQ==","signatures":[{"sig":"MEYCIQD52JtHLHuavU5lekyQj690v8qyWJjO5F9SFEOLp+CS5AIhAN87xpPe9tD0Mi2iWiBMTNU+g4lBWOWpq/Ur/4sPB85p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnIdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOAw//XjZPwwTD8NFkRC0UzcI8GEtzPapkUY4kCSGcJm+GiIJjc3B9\r\nt7AAcH3Zr8reSnlNR+oLlZfhsP4tmLBhhY8KEwsXs8y5Q+wAhRM1XJ1SQd9n\r\nT2akO8RRont3mVqa+pI7TBbGAEYpiQn1ux++DiJ0CIwjbgQVjorcNnV3MFxP\r\nckXJiFOpmQ0BjqUOYwZ9O4wDb4wAo0pwcrIviNjxy1LdZFAp/u66aq0VLbYi\r\nRUIeiV86HVK6mx2U7/1fo8tH1PjoTHEO9vDo3xlt6JU6x45XqJykZDttKBTm\r\nH+cvtXukT7zCwxd5BHRSxPTu0YhkGwcdLloyf1dCsylNaqH5L/+ssVEZN4zP\r\nxzc6KV4tMOc4LJ56Ythd76nJqJVVSY4ZZQ7KaJF1Ig5R9OPeUwGTpMg9MIj+\r\nJwTldSAvtRYIFzhiG97q9uuhnCvucY5XrBnA2fYH8aebTxAHtI2JbpDA67CN\r\nVSCCWI2jrBhW3hNgvwTJ3Xmf3LMpztNCjbzRTuI9EezUduv93R/4K8N9qw3G\r\nA2OXoU5aLsvfc7zsEY7ndJnT0uESKM5XDYBcfPJwCRrMPTZP3mpgdE+lNnqZ\r\nblhBxBRvX4TScMJ/uPtlDMKb0yD4BJRsibeexWWiBtHkYjQIRirx2J5SQJpO\r\n7+tDDPLV/adTBBB1dGNeQUqvrCAi+/sCYNs=\r\n=gomI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"994c620135276cf7948cc54b286c6c306c3ac01b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.de5224633.0","@material/base":"15.0.0-canary.de5224633.0","@material/theme":"15.0.0-canary.de5224633.0","@material/ripple":"15.0.0-canary.de5224633.0","@material/typography":"15.0.0-canary.de5224633.0","@material/feature-targeting":"15.0.0-canary.de5224633.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.de5224633.0_1678406173089_0.9376451507457542","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/form-field","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.8879557e6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b97804d483dbdfcbdd33dc65e84f1feac5dcf56","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.8879557e6.0.tgz","fileCount":33,"integrity":"sha512-CaxPKsyFN/Uwrpw8jn/GMj3gO32Rc7oPV7MEezWdv3R84EGS+hyv4fMR4KwJyX5rphvr8Gl/3CrSXixodAVXHw==","signatures":[{"sig":"MEUCIA8QyCD1Pvosm6oAfUENLwhuXQRAdDv8knpcqaa5Jz4cAiEAlgqvSHM75eyYV9JcHE4IbltMphE4rtB1EbD4D9AVmbI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCznWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBuQ//UZlAHji82QoPRSpGSxs3Ay7nJYNDLDAkYoKvZiqJR/A/d9To\r\n2csYz4LXjqzo7XB5lWqA+DKXzCaq+TT8dFlB2dMlX9CJhszkzXxY83iR+lmF\r\nAq+VUMH4bmzm4gan098WrYPyefmCfteO2n3ST434yMvdDwFmb3+3MigMUVo0\r\n+VARTixmQjWzl7ZjLmQQ2e/P5c3HyBFQ8lwBUSHwvnbZC9h/O399sFrpTkA3\r\nZhG64/W88akCVBErvKEbzUdil/bU9EbJOkNRQaEInWsancj/Pbvlp/sUXz47\r\nOCFXb91QUI9l4H0+AxHE25GbyyEUtYsmXQw/kERIQCLhOLnbaHjpyjvbVs0X\r\nw5GFeY6q80p2jU9c5fbhBcti7ElBn4IzrZ86dnycRzqMWK8bXGkWRsTdnQg8\r\nvlS0fcXy4LI8y9f/8uB+AQIdixLYcyAT4eiQvz5DQoBbSL3EGo2hX7JQZjpx\r\nBQnKGYSIK72YAR2YHPiK3HNXxf+u+bw/n5nB0MFhtY3nxFaDqpa40cR859QL\r\nNZRz1L+19oGq4VumaHXvNRCzdA1bRGaYHqxqFym7ljFqgp6FnkMDDUBVvvp9\r\nua99D0veg+Msf+dBfVR0In2nwqg0ttCcMInGp+Hd75G/Gum5IRjSLkMenuLd\r\nj/fWqZhdTpvY+t1U2HFqqL6cRe9/vhI7T84=\r\n=tLcT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"28f7c223e2bb4a686b970a425d14b1d1edd70546","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8879557e6.0","@material/base":"15.0.0-canary.8879557e6.0","@material/theme":"15.0.0-canary.8879557e6.0","@material/ripple":"15.0.0-canary.8879557e6.0","@material/typography":"15.0.0-canary.8879557e6.0","@material/feature-targeting":"15.0.0-canary.8879557e6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.8879557e6.0_1678457302735_0.36498430356667866","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/form-field","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.23073a303.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04b61d1710d5af2f81f806a42f171bbb004c51a0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.23073a303.0.tgz","fileCount":33,"integrity":"sha512-Ojt5+6iyfC61g+LdcqWznyAUDeic4OIcLZVjOBY77jBKAKN1D1+xKqOuGzJz1NQ2k/UALQ77lea09VqdBDswNg==","signatures":[{"sig":"MEUCIQD4n9sIRTsuVatHmBtT21biz60FyAqOuO6uRu96OxBYHgIgPHKD1apLqJou7EkC2VG/S34zmRewms5qD5TfBuq510A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzt+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCYg/8CgSPzF4x7tCP2e2cLYOitIjVZaZrjnFbHp2t1imPszOJFuaI\r\n7S5o5r1OyejzQDQ35IsWZBkjPe87l4DMGDDAFPm01zY12ikXpiNz7s+nJj7D\r\nSAyzP5nQexJwVOQNOUBRgPx8HrQCBTq4dtEJXyqjATDLp1E0tphLIJSaRccQ\r\nGVVQTLlbqm6T88CTXQtEG6bzq7bBF3YnKyxeyHLAfCohsio79VVNhbiHWz8q\r\nZdAZPsgjAbQdS5OcHZ9r9BmCKoxFjdKu+SvgDvOFOAW8hscyO+xZWVrNiDhP\r\nSPWAJpPcO40LdjfhHCytAj3s8+3eIQGpYtTJrYxtkscA43SQdm+iWLXUlw9/\r\nHY1WrM93bR0dfOsCiO3SdWVdqIr7wITnXhpdpZVUu0goHhV6Rb/y+Z6aucVQ\r\neSvlNbHZ+eqijaH0LoAQ0kq0loNAl+G0x8/F/CPqlUv8tY3u1EFoPsJ4jcfP\r\nfDenvp3opWEou5OnHD1NYJkJYQ9QSKIhJZrFfq+fN8j4cukNVJxYXhCfC5mi\r\nwgCgmx4Er8l4NwWDV5H+/T3sXOMukOKL3Ikg6JiFgyNE8bWZJSi6Msd3I6lq\r\nJZOV1amM322AXv9WXb1+71oBAJPP39His4jjIvZO9AzmNlqySd5Q1gpAJFhj\r\nEzVyJy8NdW5ewhf/7Tno61d4rqBPfs6gGY0=\r\n=hZy4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2d7826e2ebf1c1fde12f47b603e66ec0df229a8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.23073a303.0","@material/base":"15.0.0-canary.23073a303.0","@material/theme":"15.0.0-canary.23073a303.0","@material/ripple":"15.0.0-canary.23073a303.0","@material/typography":"15.0.0-canary.23073a303.0","@material/feature-targeting":"15.0.0-canary.23073a303.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.23073a303.0_1678457726695_0.21603628829132115","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/form-field","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.51c7d4014.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c62237f88fcbdc46c3783aa8df566b15f752181e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.51c7d4014.0.tgz","fileCount":33,"integrity":"sha512-L0PRavwtGEEqsXQpwkAH+wNvC2tpVcCzt2uK4rU/bfBc4Wf7+52/LwiIza9kzYpCIquwB8rpbzAjlmyMr2+F2g==","signatures":[{"sig":"MEYCIQDJY5iond97g45XdTiyYBW4KaJ6zZsPNDvCgYmt/lcnkQIhANTMZTy40sUGJOHnLe6oL3LtViXH2TSocJ66Q/inapaC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC185ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiCg/+IlU6elZ6D34wPcf/AuAEo4yakAJXw55qbTTAQncJw0HuhQVn\r\naMMNvZ3TeMv7wu9KfJPrsdcRz1/a4CgKm/YB2JTjqCrUYwdRMz8740c6tJ7I\r\niOQ8mHeh3nzELcU97nMhaxEumqQm2EbWRA9i2LzccyevsLpBGQ/CoD7df1up\r\nRxFRRQDIdnPluQqcXju5cDn+qupKY9ff9/NyutmXlYuiIUmrTW/tS9oZv6Va\r\n/laixP3E2OL9HEfcHnmLJes+yvcUIlzVQ5ubNkgycMEDYwmHNo9A7134YsUj\r\nW88n/yvSSsOZADs+kJBFcvLHTa3/mCAvYzBdGI6NfDV1m1VQ7wTDE+iWdKZ3\r\nP7Q9HJfJWJLEoNTisKY1XK3NyXXdM8Cl5rXxrDQeVohlLxgM5NGV7s1Zviip\r\nqqtZ8p4NSRYuggcCBBbwvad6/nViQGcxRHeUJJpnKcDXPicg1NGsyf6NapjE\r\nyYX5twb20QBfrU6L5i3zsgHJ4rPJ62LQ2SSiu/Sj9cfutWAyX1ibniu1Mfix\r\nV/Qka4H5WBxrmSnu1H7btbTrjE85kzRHv63YWv1/8kO12jTXlCJz3gHYUGWo\r\nLbfnjO85GJuozzeC9xZDsa5I7GWLXcIpjpyZnEJ1U8C3dkJ9TsAoHwq6E69N\r\nPsLFy+jPJsnHxw8ByPvOALahoqVTB5jMRj4=\r\n=FEv0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0485e6059d69163f12d83408c09b1d41f6cb8dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.51c7d4014.0","@material/base":"15.0.0-canary.51c7d4014.0","@material/theme":"15.0.0-canary.51c7d4014.0","@material/ripple":"15.0.0-canary.51c7d4014.0","@material/typography":"15.0.0-canary.51c7d4014.0","@material/feature-targeting":"15.0.0-canary.51c7d4014.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.51c7d4014.0_1678466873550_0.36960685223279177","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/form-field","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.1175a5be0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"553c217e7ce66ac26177a48c08e032f28378d9ff","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.1175a5be0.0.tgz","fileCount":33,"integrity":"sha512-9ouAaAPgS0KIG1/dV3Ep5mwjEm+29GFX7v3W6fPP4dtl9dgacF2m4qtzBoLVVciyYeW92PJunT/UU2Qb0LLBIw==","signatures":[{"sig":"MEUCIQDD8mpsdjwEM4MvdtjpW+FLTVfCiHrR2xkO212jTon7LgIgMUyk5+RRFHNFqRHAVoBqhz8O0z7lwR/ajNcMIt6bJgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5edACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpqqw//RPdUOZr5G9MsqerjZIYGcN7hRzuAi7lNfgBqyauqBs/hI9Rk\r\ni6riFBpqDItsREA7Dzk6pLlWm17PDOpFyYxUlq4ITx02G/VxC6U/1hjd8uk+\r\nOckmY4rvTCAaGlw+IuN7jKhCH90kDDxO8xGdRMWTsvXQwOz29nBw5pFAmLJ8\r\ntGgClYbLnmvvVxz9v1xaFm0jSgSM68JW1Y68hE8fey48ZuXT0U29EvesuLS2\r\n6yGUcmsmAMLhyBbgHbDsBhdopuRMgFTVb0kqBSHFhF1OJQ1hle7XMAcRQY7i\r\n9LFj1cu5MTYlDjC4hiOsC7uH3JPXRCoCXQRb2webSM7q6T9eG8enxa16UGJt\r\nIeie5bW1KFH2G6croG7q6YJopO61vO8wyx0yW4xVxPuAjUxxbkTm9X57Fnff\r\nCezsm3BIufOQXg5JOEBzeOphzwu01sGqZbQHh5kTq1OK+pb1byiq/sbpcjvP\r\nlBlKoP7kKZ15vfG3vo7G+Cz+SaFfV+vcXBi8Njd9RF9NXiamI448x32/JQUJ\r\nHGXqmt/wyteVNgo0GoMZlC0p5NmxRYAm2f9V41MRpNWXbCSYjx9xnBKfvaRp\r\nNlXTNPk1urWsKOaNiYV38FTDOi+RPsJo4liX1o2I9c/OqZ0SjZyFhejDEeEw\r\nKEXkUgqePI1LAxyuhrQGm304TnzZWrEtQW0=\r\n=0rEb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1fcae3e4ba7c60c6a51ee8e61b01e26a324b1ab2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1175a5be0.0","@material/base":"15.0.0-canary.1175a5be0.0","@material/theme":"15.0.0-canary.1175a5be0.0","@material/ripple":"15.0.0-canary.1175a5be0.0","@material/typography":"15.0.0-canary.1175a5be0.0","@material/feature-targeting":"15.0.0-canary.1175a5be0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.1175a5be0.0_1678481309281_0.8780684894133617","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/form-field","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.7adf3af80.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"603abf3e560ca1b26bd13e1f4f5c3ad11cbfdebd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.7adf3af80.0.tgz","fileCount":33,"integrity":"sha512-/Ay8swbayZyBsND+fhyte6ZJ/1LWfdWhN7SS657JmgKTpFJXqKXiiH4uOKMEdcSyqIGgrdeGq0KHyVdspR3kBA==","signatures":[{"sig":"MEQCIFSCNC/Mlm83UrNSu/tDR28LHlbbNP5Kv0x8W19uCX0xAiA+E8qx1F70T/pKgjSqMo6+IBEJpNWXsQCLQSYKzSyD7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9iIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpG4Q//WyBLozf5fe520ylo7G1PCCdSIDnSS85ZHUxWgwSWgxkV+Zyi\r\nJsQ4/yTaJ14fNKoEpj+x1/VAhtQezGp2F74sKi7goTgYwtEOnfPS4nF4hGWG\r\nTKDL+zs9a8Xc7gOZnXg6lU4cP29JcGyP3wb94O1mc6HCwFsysIModyiTDsJr\r\nypCS7tEz3vmhxrHGsMY5wh9Myqc14AKo1W7sHMdSyZMqj9Y7TtmgZLNqNnoB\r\nk94mIoQ2VcLQ0o4MFavyRCkrzEBzbV92hG5fZxh+KRIHGx9gEpe1KB79jINN\r\n7CkUSHW1bfCSzIbEa5Nm2aoZIGP25che4Q30kJgojTgs8r/NdNHji7q3EeA7\r\nRJq0uEyY1DTXLow+6fk6hm6RKQNx6hpfhln8F727ohJXoDFF5XhA6gur/y/b\r\nwSYLSiGkd28IaR2BKDgTB4t7eLO7qhZdskMFgr6ZdnIQ6iS6zN5Vl4JlZZXX\r\nRS2ScFDb3WBx53kmcF6r1sH2tG4O/KgIk8xBSRsc+Mqnyfx/lARJmcIgeYmq\r\nx400xLU7B8mE3jxiuUKiiXGCqluufIsKZ1vxQ9dFkTVJY/eqExz8JYZRODCP\r\nyCBgCtILgEdCp5wPKj8Q7NkcO3K8x2wdN2FJNeB9bpeNvyGuOZqGwIgfbIXQ\r\nx+U2zrANCLW8e496g6fyYG01FCf3qtkh1AI=\r\n=X54I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"57b0835838a903c8ac3ba6c8edf79add958481d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7adf3af80.0","@material/base":"15.0.0-canary.7adf3af80.0","@material/theme":"15.0.0-canary.7adf3af80.0","@material/ripple":"15.0.0-canary.7adf3af80.0","@material/typography":"15.0.0-canary.7adf3af80.0","@material/feature-targeting":"15.0.0-canary.7adf3af80.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.7adf3af80.0_1678497927798_0.5277956433079893","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/form-field","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.82554d770.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11e72523570bedd7fbaf8dcec1efdc4dcc050ad7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.82554d770.0.tgz","fileCount":33,"integrity":"sha512-0zoXEDKxdmXuXDEK2JqPSyrRi00v7Okn6vohVwnWmr5LjKtqjmc8kvx9vr+YWlrlHZ22EQAHwxE4UHBtLEDXnQ==","signatures":[{"sig":"MEQCIGTcf5gUmNyU+gjARo5f5aVGR8zHcWcegHa5pLTPe1FYAiAnYHK7Yg/k2AQhS0x/OvKcEmN8fdi4sCpHx/OlUbxpAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9tmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqWQ//YKBgcbPIq5KNXmiHEXv0DEHIWtvi7DpJr5dw46/SsEg7Ow4W\r\neEWcgypI8MX7YvbfO0WKWv0frnrRjm7uBw6eA0y1VjSfWZ1hIitbRawR/EA3\r\nTKtCBc9PMDyhlqgukpnCjmyc652s2GhP+NCuoSWULqP5bA4d6b2wEmvhxgrv\r\n1ieWTgTFo3B2IbeQBwQYNPX12VUekBSO3aCnWpEikqkURPksFvzrhA43KpgS\r\ntfBkFS9g8CjMeWJBOr/yXgZFT2X373RNNPE8jK/qNF0ygXjs0tDsaA1gSqvZ\r\nQ5PTI8pg983kmRmF8pf8DXrS3wrf2vrMdgkJqw/bA0z9zipkA9CLC7nkES1D\r\njfd1CYc7I2Q1EH6e1Jqa+s4lmcFM3XoZHwDnpffB1x3gpygs+neRz+D/dH56\r\n881SOisNRxrdAhfzJVLPkSYqeKVkLIVIF7VmcP8Tgio9ETcDmeRyyM5fLwTx\r\nK1Yh95kNtDK/TFI1k1OyBHOjligvdFxhgrDtbFNQfQ5ocsCbrovIkJX2qwDj\r\nFBxp3M9aHE+ano/yZ5e67QcFmMz7F84h3oWJfRB3fShxFo98DPq9thJCeA89\r\nApyxwWRUeSKCWY/V1H2fT8WUyRHQEn/CMmSCd2BLjYlOkfg+vR04lj8ilW6U\r\nK7JwOoNs6reLEaIbYrtbwOrjJOXAuT1go1k=\r\n=ySx5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"500cec655918e97ee1edc3c86ebccdac24a28f56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.82554d770.0","@material/base":"15.0.0-canary.82554d770.0","@material/theme":"15.0.0-canary.82554d770.0","@material/ripple":"15.0.0-canary.82554d770.0","@material/typography":"15.0.0-canary.82554d770.0","@material/feature-targeting":"15.0.0-canary.82554d770.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.82554d770.0_1678498662664_0.9729932048015022","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/form-field","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.93fc524b7.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f07a09889bf6ab0f332f60e2052cc6dfcbe5d4f4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.93fc524b7.0.tgz","fileCount":33,"integrity":"sha512-IyPvOPvTE2a7oGw5J1UoNfB0vSBMiKPba3f5AKUhBJrwdrJm0NqHcu3E7wSHKgetyzf5Rq01lPHT6V0dnlqwdA==","signatures":[{"sig":"MEYCIQDK8p6E89p6tZE2WHOerWYm6N9sAK6QpX3aHfOJTqpPYAIhAKHw1E/b1Iwm2HLlS2P9hEBj51iIjd4glLy1S/2/LGKE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuE3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjAQ//QHsFUj0xahdzCFGsu4WImuqdQKeksmAerHzbtKDuqitCIhmz\r\nrgi9AZJP3HZvKIQxZKHPu/22Nnlrvaonk3YEw77b3KeOZKMMpmqG0Ahzo5N1\r\nq/5C4RKN7xAkXOzq3fsLscJ7ezwVax55ZuL+wCr+D1bwqhwq+fiovcOTIHik\r\n6ow5ysdVPPNkaaqrKN3wmpYff1mXqU/aFYNwYmi07yElkXlaVbCjQ88AB0He\r\nn9sYmJVhQJYD06c881gWYQYdDYLjskQ2LEac50oWZEgZO3KLgxbFuaMHK2AM\r\naD/5sAMYzdXFZcCC7yu7y3YMJgv1TYqenLVRHxx6KOXaKJyzWwo+peSskUi7\r\n1gUI4n5pOQMdouMuACYRdkR1+rH5LAa1uCYKz8VXeQuiQaWUhcFxzQ2A6NLz\r\n3Oxt+fxTgDpoGWNXT23b1zf7LcuTJdKT+5zRSylbdnIy8ACmC62UygQkMkn9\r\nBtdIIq/yrkUNcnE4HmhE2Oyo49BghK2L/SdVL1gj2XuUwH0vDAHeYQLfaNHZ\r\nkIpPgOTBZ2FP79OhzLT+QTz89XSfRw7aHnRiO6sIMm+HnwALATg7rj9/OHsl\r\nygofvG/s1pr1SbMz5g4JV4cwZ+TtBTrR4aIMWPiw1GjZWyhqVmLZjLDRBt/8\r\nQTXHfKUu3S0ta6J/TaK5Q19B0PzWzDAjnjU=\r\n=jF4N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"338daa93529c874da1af6eeb4fafb935e014e096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.93fc524b7.0","@material/base":"15.0.0-canary.93fc524b7.0","@material/theme":"15.0.0-canary.93fc524b7.0","@material/ripple":"15.0.0-canary.93fc524b7.0","@material/typography":"15.0.0-canary.93fc524b7.0","@material/feature-targeting":"15.0.0-canary.93fc524b7.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.93fc524b7.0_1678696759376_0.9854716314579173","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/form-field","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.50be0fbae.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b2d34f9e37dbc622594e00fb67e1794e93fe2f9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.50be0fbae.0.tgz","fileCount":34,"integrity":"sha512-gdpML2ll/Wu/OYqiQxkUS+JQM4bbjgQA+5crqJMwwtIrNlN4ShCZNJihehvxR4fklywZrqvAqAVEz3FU3M5ZCg==","signatures":[{"sig":"MEUCIFtB4yrH1tj8z3KMRuDJAliQi9FW2TDlrhuaGFevsGUwAiEAjj0YV2xtlH/oeFlxaL3hefk9NrA5SL4Nh4GfZE1QGbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":530874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2EJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/xw/+NMu+Ryn23/U5UuubFP5lnrf7Qfm8XKez4oWocOWdxL0jbpev\r\nFhstSqzIE5HN2s8D3VXDZCjzffDY5QIlfGBwP/jBXAhWWHeRcqrF135ci1lt\r\nZgUtzbGGJE6z7Uy58XJCxguUowN1i9tTSaNxPCGHhB353ZIQZTmitcR55S/i\r\nQL3ZjA9Exz753B0ZTvWEOhF57RFgiVpq4t+/5apE40aHN6472wZhgSSq89aQ\r\njqrqe4fKLZ2gr2sOESct8aPWZPKWsd2VNf8xC+t5zh/wuTLoYfuW13l93NyX\r\n+UhQwT8F5hsGbuyeZOP5Y46m1PvqmBtwzmb++7mZDbipv0CujAdwoR8wtZuM\r\nlpArhy8hbIrYtez/QuzdQ5tJeXtSeDr6obelW0YnmU5WFuYOxZEOrzhkoORJ\r\n6jowXIwtHdp7bs/TTFtOt6R/6xEL0KkHz3gkVgmj0zLQ6O/WksOEKfzA29/l\r\nUxga4E9dTs+7bKNGmSg4MxqXsyiks/m41ZETad+Ykx0WAlcwmfMS2MOYfXys\r\nlk5YrlNKLy2A8Tqr1v6+DQvSNYG7U341E1B7vhDr5Aub6p9R+iEs/lwxO5bp\r\n6Q1TxykGfwVrgB9tZz5b2dUihhCohoAR5B9XZOtze1ASlEhNH36k2DN+QvTI\r\ndn16Kgm5lfVgJpe3KGiyH+CISQGFeWrbscA=\r\n=vSAa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"405d98c2882461cee8d47ab1b16a4666ccf7129c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.50be0fbae.0","@material/base":"15.0.0-canary.50be0fbae.0","@material/theme":"15.0.0-canary.50be0fbae.0","@material/ripple":"15.0.0-canary.50be0fbae.0","@material/typography":"15.0.0-canary.50be0fbae.0","@material/feature-targeting":"15.0.0-canary.50be0fbae.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.50be0fbae.0_1678729480948_0.26067113460163327","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/form-field","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.6b5ffccd9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65df44645e318c41615fbc31c2c69747a533fc5f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":34,"integrity":"sha512-3y4grHsDlyKGnsCuYfOG9bJROj8GbLssWrO67+T4KU22Zht4j5XNImGzzrQ71tBX+dh6WBxIyGARQxLp+Xq1Kw==","signatures":[{"sig":"MEUCIQDpUdLAWM0Tmsi6QR+LdZo21K3ZPOzC2A/D1gJWaX8KyAIgEHI134Y2YYecwQQW3OY4QOSjkf0OmTBjxWU8nkpIaqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":530874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2HRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRCg//cjzDpNthLoEHVYSb5fzT3hFtyTzOwkFDeNQGvkZnvklxxvm+\r\nuSgOU8fZaojpDgpwSEHez7WIjdPw6seX3aZmSm8AX4yguFNgWOYKNT9quE/L\r\nH4IUWCTlA+VK2sRjIj5+kOgeA0icubwPOZs58wVxhLeT0VnyWq9jqSHcGrNn\r\nwn3FfSZbwLVdtnDcbIr9gUEHWMnc5ICjykehCnSFhg0e7sif9sEAKZPBaTVY\r\nPCMCQ7r+YzoNRBXOehTlzf+TiBcr/RX5XHVizdg6cbB5tG45X40J+1O5qRPS\r\nTQ0bAlcXoT71O84eBZoLnsXImfU/c4HITXA8TuqLFgHVEv6lmoI4/4AQd5LX\r\nsCph7J7/gFiBD9CNqyguOBiMMR1pzkGqrqseWb174w9OThfrqEMC3MUrDTno\r\nVIPc5C6XR0T9lmCRXoSERFQ+khpCKfkn/tLH4K2RUauH+BTJp/isd4L/5os2\r\n13tqaZ9CXQFIDe48Ev3FEroafPl3bXEqWMPmEuy4xn52Lccn2aTJtoq2oHPY\r\nZYOrw6N+DQBrkDiFK4vgg3eq9EeZ34bP63Q8HsK4MpcpLnYRJwhjlZav/8Au\r\n36PC8PR2mV6iRKm6X2+iVO1+EGJ0IioeJrJCDryGvHqu554lTOkyOLWwtpi7\r\nL1LW9bZQ4ADM7P2VPn25Q+4ilT7a7lvkxgo=\r\n=6k8/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"d30761453fd80caeae042d8999af672f9c3eaa28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6b5ffccd9.0","@material/base":"15.0.0-canary.6b5ffccd9.0","@material/theme":"15.0.0-canary.6b5ffccd9.0","@material/ripple":"15.0.0-canary.6b5ffccd9.0","@material/typography":"15.0.0-canary.6b5ffccd9.0","@material/feature-targeting":"15.0.0-canary.6b5ffccd9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.6b5ffccd9.0_1678729681346_0.2110624513050947","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/form-field","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.1c8013f4e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"059d64807533383ba787d38cb4fb121f3e056d14","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.1c8013f4e.0.tgz","fileCount":34,"integrity":"sha512-eh00UOpZGb9kyGwCq6IpsTWsOdUaq9Gwp+mcmWoTcSbmTTbeA6meJO2oqqyRzGKZ5B/1SvzBr/Laq93Qt2zocA==","signatures":[{"sig":"MEYCIQCnW6c+arzwGWaBam5ZpsaiVR2lxeC66exn4VGEQ/e6VAIhALWN1GUAXZmr/t5lgl8L6Y0ad7RfT3SsvdS1T60dYvq0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":530874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2VlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0tA//bhLbLtIQD97H6SMiBkPD4zfj1L/UVx47W1XXQOMFN/+2ItrT\r\ndWp7lEzuY+TWamJDv3kP7/UMDz3Wn+3wdL5QNaarFXZq141mFnr+3qBkG4zX\r\nQlXrj3WJTT3T0LxJ2bJnX65vU/7ZlDvV3k3N/I021BY0qLyUvUBktGmnRImE\r\ngKQAnXM+qGTgI2fN6krhjVLqIrGUVL8gKCM8QNCKJsa/d5LdruCd6TeLrLte\r\ngzzufMxxzbNqVBMs/3ZraXKgKr4OkLmvXWhsya0JBr/L4gkzYMUsSVnPF3wq\r\nvH6KtZB0Zzta6hqIJu8NOnKuXpPqvy8/ljozseAdj15qPhAH+97NvypOwq3g\r\n7iZtlQ2LxWcc0Mh75rmpI63XVtv9vxeZhXenk3qs84XLjCl3j1rbjzJafX65\r\noyxDmGzsyq1XkCovk22xoynnslNKiWVeHO5QCW4w1JC2GB950zpEEh651pzw\r\nQe/KyhhM28BFZn+r6TEOcyHjNKZEZCe4JPenNREHg7FvB1RK2+eYzddJfDaO\r\nLqbySzI+cNGMP4uhZqjzZu7SyZ5AK+HalNK+XqEOueyhjA7KxzTmtZR0xsKz\r\nhJ7YEm0qqVhSweb8dJQcQsLa4XtoWrnZTVd0A/Vq+tXLu8dTH8NlqpzjjPSV\r\nQsLNlsrv9r0kxXBjWeTCszGOJO+nT+VcIak=\r\n=rV8s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ce86f06ff0c2637e8cfa4965aa614efa6bb86046","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1c8013f4e.0","@material/base":"15.0.0-canary.1c8013f4e.0","@material/theme":"15.0.0-canary.1c8013f4e.0","@material/ripple":"15.0.0-canary.1c8013f4e.0","@material/typography":"15.0.0-canary.1c8013f4e.0","@material/feature-targeting":"15.0.0-canary.1c8013f4e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.1c8013f4e.0_1678730597117_0.9795761773973972","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/form-field","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.112715df5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c97abdcdaab618236b59865f13305cd200da0ff1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.112715df5.0.tgz","fileCount":34,"integrity":"sha512-LZKTq36cT7GoCAuerEvUQ4UySwdyk+irdpXrcVGwfptpmmYMPOtKcpFlN5JjIQ6HrUua7e4Mk9Fa2Z8YO4UYFQ==","signatures":[{"sig":"MEQCIGYN0JBrHftCZcf2KyBJaDQ57dY5L5pfv6Blnx4hpnJXAiBpc3LHyuiFkZE8dARb4GZZ7kY/9dNLliFijEdc2iJDzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":530874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD23uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrTDw/+Jee652NkrCu41ki6qF1dImTZF7uG0EPALmcJP3qflTkZSYgK\r\nBN1iZ45+pJwyGdfCjtV7+Li5+FSOAD7HUrkQ9DONrJTEphu3/BHiiorrYYGm\r\nEIoqy3i/BbQXbRyukHRzfS5uWaEclse+Wb1kp+tmTbEHC7MjOtIiAlnR1wOI\r\n5QKJ/msorwfsKbYTS3288oFTG//cDVxccZ243CCCn9xKqPSSm3lj/bDYeldZ\r\n9z4q/1C4sp9hrpbVv68QjVEZtyfUszYunBZaHdpPJ3iicGQg3mxYO1XRSC4X\r\nuNXOWdRVELQd+xiYjsu9N+TtkwJ6MpPHgF/Adgsqld6JsHRgRoVG3qGaEs4I\r\nuHE6OlLhKyLT5Ldssf1u/rS11crcqxHMCw7MEU1PIaiHx+a1TAVK1xOWjCXV\r\nGtMH1RTAjgr83azXw5OfL7/0nJd5HCu+Z34PCO+jhXeFZQZUiCfx7TSae6qA\r\nz1LxDbovxkiB4fTxGNAUclhDcsr7veezHMJ4Yh0gMsrwixjpKk79DIdbKuLh\r\nrx53pHJZGwBr0zEbTpTIKJGxZkvKluswt/+21Kr6nKpW7EStsrf+DEV83dnk\r\n3YpcYhCixqlbX6BbH9YVS94TSXxT2zFHVer+WARdmvSLVRI2KDEUtDQY2fXD\r\nFMQPmbgqep1AVFMp0+6xwdQC2GXV9ARWY20=\r\n=F56B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3894873450b9dff1b92031fcd1d00ed1ec3ba9ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.112715df5.0","@material/base":"15.0.0-canary.112715df5.0","@material/theme":"15.0.0-canary.112715df5.0","@material/ripple":"15.0.0-canary.112715df5.0","@material/typography":"15.0.0-canary.112715df5.0","@material/feature-targeting":"15.0.0-canary.112715df5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.112715df5.0_1678732782018_0.9944418702605227","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/form-field","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.d250911f2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b5a016d2d31ea12d8c23948a1867e916394693d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.d250911f2.0.tgz","fileCount":34,"integrity":"sha512-2bmO4dRfYYYQ7y5lO5Pe/PsDq/AkXXXZdXaDK1wN1++XiBk7EgncTHrJxeZvqxfq2oDUu5SB5UkqaANtKotchw==","signatures":[{"sig":"MEYCIQCxSseWAQTSonfju0oOpfbOHm7E8t5xYyX1vNyqxORFVAIhAKnEi+gxmF2mNXW/TtDf6wcTyYnywj7sDelWX11JuU+4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":530874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3otACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3AQ//VzANTQPAEC6dZM5iOhCfDinGMrpcgTB26DMw8+xQEfLSrJJG\r\nKOFhJXKVl5HOeTBeW2lQZ/0GB6ChyU/I3RZE5sXQPJBM2VKgB1cLQlcl3i0r\r\nHl2ucU2t9mTTmroMmCmakKyPzcLq0F9akiNP8q6/p8R1rYsVnDI8/4LHVSJ5\r\nboz+3oMqkf0ckpwXh/8QWR5nqpKV7gSnHp4NY/AD1IOrWPIT5LQlFLBgxFGa\r\nvaNHo+eKekexjujcd6EhEhIVTNeoBeadswhcp/8YdvaMmho+xcVEk9TocjDr\r\nVP3kVcuEXbk+7m1bZLirmzvheqnuCFXhKxs+KoFTAiSlyMgGARFfSntywu9l\r\nFFA2QY0DS9fIOpc1xGvLiteD9RpqJDM4gNET8gebXe3z/W1SS/tZ5H3X8Rkc\r\nbDkq4InLerb8SBYjmYUIGr27wc9tw9CrpBKPC4XYGc0+pXGBrOFvnfiVvIgR\r\n6ODerrPwl/Cm/nuR/Lx0EEcKVJeuTTPobGneV11fMFZdi+QZuWI9fmPr9L/A\r\nqgKNZcGSAhp32+U9FhpDThEmjeMsDHxJze6gVtzibLrv/m78KHxOXooTinBK\r\n5XILNVNsZH+VaVCjlX7o+vF4AvO5w1LvyYN28OTSoOcp6+XQh6iIiEZPNcx8\r\nbvGq5m5iLGRTkshf4BnpaILWe8EVI59gC4k=\r\n=4IhR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7b4ac246b31922fb4beb9ed168dba262e499c271","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d250911f2.0","@material/base":"15.0.0-canary.d250911f2.0","@material/theme":"15.0.0-canary.d250911f2.0","@material/ripple":"15.0.0-canary.d250911f2.0","@material/typography":"15.0.0-canary.d250911f2.0","@material/feature-targeting":"15.0.0-canary.d250911f2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.d250911f2.0_1678735916958_0.7261841077246811","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/form-field","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.7cd925c12.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8bcc70e439f8143bd48d4349e88ab50926d0941","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.7cd925c12.0.tgz","fileCount":34,"integrity":"sha512-vgBM6OJ0NJ0pSA8KQWxKSnFntsm9XxKrn3SKNc5FeJ/mzjBnMX+c0celzectqwPpnbtLjbBTt4bj6UVObpXjvg==","signatures":[{"sig":"MEUCIQDbEsN3jpNwMShbw2QzPD/SHigUSsCe8ykYvQsOVAJDwwIgMGSQVz9urk15zZ19oSW8NXPO6P1g7gsBx2n6IpgoXn0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":530874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3vxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3Ew//crXVEHf8VbCydFPAYno2Ne60t3NUoafKVEmeaZN949Bm7puC\r\nJX+pJ76UZs1lktRkzmqISlKtYM8pjHC1B/dB+OyOovuIn20N9P5UQWI/arkQ\r\nci4x2k+OP/2FpYRduswCdJdiGW04+kJYcH02W0wJqXtWIILPHQGJ2M1hgskA\r\nb2qUQieUh0mX4dnuzNfmYxKxHHE3vquJJsT1DaRu/PuxLJNk+oF45j6/ZPk4\r\nJCLxg4++6UmrfXfQe9dN4BZovhM6aBK1EyQQMVqtzxedD0pn1lq/DZpUsHLl\r\n/mjvgZTy3eO8rZZKsW/ISDzLiltFPlT5jXVnvVExEZ3jXLst1ljJnvhnBgT4\r\nGKdxPSKltr6xvgfnhnRU1YZWooKgpO/qF18p3xYVRMge05GO0z2XFsbi7Bte\r\nvggiLGn6/TsveMSIB2l+nmHNiehA3sbtYXrrDUmDEY4AX+xorBEhB7YCpT3S\r\n80/oFVnUCwUNjja2EKxDps5qmMWYqmk4hArgTOp1/KJBXThfC0KOWa9J2fRF\r\noQp3uXUk6uIuhqvDmxeOJIkOLxKyV8vqwafEirG1ofZozZoNTYCES1M/nWUx\r\nbmUUo3W14zuxUngVnUtDp1QqILR9++F5v32qT7K+vIJ9mmkig4EGl25r/jF3\r\ncbr/fgGTxmiWDid6i6HdJJGK4ZuYig3/S9Q=\r\n=cfhb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"96310a5c80e3e92695b6d6e2933e9b0c82e58a20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7cd925c12.0","@material/base":"15.0.0-canary.7cd925c12.0","@material/theme":"15.0.0-canary.7cd925c12.0","@material/ripple":"15.0.0-canary.7cd925c12.0","@material/typography":"15.0.0-canary.7cd925c12.0","@material/feature-targeting":"15.0.0-canary.7cd925c12.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.7cd925c12.0_1678736369506_0.44614768351358847","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/form-field","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b2ddacf73.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"387270264e0f93db57840f7778150bafd96481f9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b2ddacf73.0.tgz","fileCount":34,"integrity":"sha512-XVxpiblxsOKtMtfxKTtUxhlK80gHI8U0Dmoe7kOPKFG9J3+R6ATYkoZMzCMD9oPQAgf9pmopQjCMWj7L2VJfVA==","signatures":[{"sig":"MEUCIQCO6N6gEuBRyVSE480z+1ZxsRhSx7XtFS03S8e4r5A37QIgD+vYymLiyu1RehWwdhL0uBML0r0iBGqgAwHy8/oMDSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":530874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3z6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1BQ/9GCxyCy0RUSXOn6Lz0pZALgtFeTX1D7STmtTC7Q7W3+l0DdoB\r\ns8CRVufiZt48WLOWzTFwV6eH/gYFDs68j9yfJs8A52CDK4v02Z35osOez3KF\r\n844RgnU40kbwSmAySujUr6MgJPuUuzIN5se0TZk+ntwCgN5zmnUOV2McjR85\r\nOXOEmVdgvfCBIw3VU3SjfxHYOtIdBwv705JzLV9FOXgfDauKmAiW4aCy8Eb8\r\nktU6skvjJwcfgkHFqX3jpq6UZFu2CO8EJ3GGhperG8y4gDXc9+JvbzGZJl8e\r\nk3zAyNOh3lMvvsdbrvLquZj7/+GCVVskKIMW3+QJ4o317AnMYwfQH7VQSU0r\r\n4P/HJvKz88ENkkXkGvIIw3o1T2rW8ZJmB6hiZcIpieaoYRT3ClTWUoei2Lzw\r\nO2G080XW0XUeQQp6rc7vgfHCvE9BBtftoda/1PGZV7czBvq0jJkSDZnADt67\r\nAfCWSH0JLCFOUuj253r+GzhvJ9FQU41vYVTEN1jmt5EsssbnH+J20FxQrc4K\r\nhsYef3OhvAoRFuJ9sekekWbrbsNzIw0KLPEt6DLF5I3btLMH1AjdjnKmot4R\r\nQCkyKJld+gID5kVWCyOuoA22M8eGP1ujRsfnxcjGZuqQlLLQU0yPW2orZtaF\r\nYSVl4JbEYQQpg3mNovFObRjz2dJ9w7oRdWA=\r\n=M2bT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"860a6f0b439760b894931fa6cb354412764bd21f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b2ddacf73.0","@material/base":"15.0.0-canary.b2ddacf73.0","@material/theme":"15.0.0-canary.b2ddacf73.0","@material/ripple":"15.0.0-canary.b2ddacf73.0","@material/typography":"15.0.0-canary.b2ddacf73.0","@material/feature-targeting":"15.0.0-canary.b2ddacf73.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b2ddacf73.0_1678736633978_0.5024675289297684","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/form-field","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.989ae2ecc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bcf819b62cf415c32e8fd8de65cd429a974b232","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.989ae2ecc.0.tgz","fileCount":34,"integrity":"sha512-KpIQLNv/VfTLnKGZ9kTwixyM8+aAOUJ0g20NJnxFcXe2sweeZD3yy0tHzf/OO5jDhyPsC4N1QDss1niP8Nt4KQ==","signatures":[{"sig":"MEUCIQCR14mzm2w2XRNakt7pXl6R9rUl6r+2oXlWjjKZsikgSwIgc3YpyWsDG2wW/XUlh7XshVa8txXmbhIYwx8obz6sANM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":530874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD38jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFpA/9Hg6x662Uvy1GEno6m55Q4Mh0YxuIL/eiOGlcEZau3z47u+a2\r\nFrxEdOE8O5zksP5pesKxTt1+8FXU14SYbD51OKQHD/PeirSp+1YU3zt+kBcH\r\nzQDN5Hu1Yum1dZYzrnmsKvVWySe8R64pG3sq3RzdsWEiUnbK7u3L4wQml53H\r\nU6yUd9PWfvmBpBEX0rk9e5Tro8WNJt/vd42Y8dPXD7d1uOho0h+mULnilsox\r\nRlaKD36SesBCIpIZ1LYJit9BC2foQGFCuW92Wk+o8FYIGn18UuW3mhy3aN6P\r\nMNVQy2sNWBCDylZJ6kKYTYc/Nn32F98xD0IERPzAij41/ZKph5D5qgjrTgCW\r\nhPovyeNkcKO7Z8yXjolWicBSudiB5blrnhT3/Q+F/+Aw1WtdqvPZJnzYxCw8\r\nrrHbqnJjK7mP+cAWkbVdfGs3XdnAm+mivVJeqjFn1QjJf1E321PLm5Kgxdvb\r\nKs5NXtfKQsblnQPwn79uv0ulLHUDIOz6v5ZOA48oCD3KnaO50Zmn79paKoMf\r\nh9oLAzG89ukZQ5XKZgw0K2fBJJdjwN7r5PBWJQSahWfQeOnRbeds+ufqMSR+\r\n6UG2xySDwA/59+4MIIp8L0mIKaFNw4s0WmYxq3Wn8JE/oua/rh9YGaE49cjQ\r\n1rftKy0F9I0SIvTQFcQI/7x5R+EtJUNsg8k=\r\n=B9/b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"52e0f05ff74ddff1d986b27e08df13644c056b63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.989ae2ecc.0","@material/base":"15.0.0-canary.989ae2ecc.0","@material/theme":"15.0.0-canary.989ae2ecc.0","@material/ripple":"15.0.0-canary.989ae2ecc.0","@material/typography":"15.0.0-canary.989ae2ecc.0","@material/feature-targeting":"15.0.0-canary.989ae2ecc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.989ae2ecc.0_1678737187201_0.6480659454546256","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/form-field","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.89c66483a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5da126740f5452756574b415610f8c9580e8411a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.89c66483a.0.tgz","fileCount":34,"integrity":"sha512-IBfSBe13s0Osh/4A8BQB43WyEMXn3VjOu/m1gQcPzQ+fVSCpEE+1pV2Jxh89aWqrZDNPtJvyu8/d+gxLXYhC/Q==","signatures":[{"sig":"MEYCIQD7AVQjM+4+XOovfEUPWs8ToCM0NbMu0J6TTT8kpQddYwIhANtl1mCkf0Gyrr0zf+cuKlFSyDMp0sUGctik50b8XfqC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":530874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4S2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOhxAAhuu0q6zIU8jSDIHmdSkbiBdIBpUMceFnNBQYjBKJyrinvUb0\r\nYGXtDcfl4sjng/lnz4N0RNm9ui+jEGt6bDK3ts8IxiKF/1BIheR4bOlw4hgg\r\n7+OMiXB2DB2RaEwjMYPriRtfq3B8u0yx8E85s270Y/6pRvPL/hhcmvCw6kY2\r\nX/kPsQGj3IdhZOJATlCl7/gvNRAYR4Lu7pmwBbPPhq7EngnEnle+YWH0rm9F\r\nIuNenSUaZEilxp+7gLQKgk50cZhU/S7sZFHEYSWyoMPbg8NRfMAwNO3N0/GN\r\neTXEL1W5KX0Gc+vCsJcLLvEwyxWSHvW6QrOC8vSk3mVnbX2WAgkzJ2M2hIlx\r\nbEcllI2hPp84WUci4sOKI5Pzjs5cTW1r2ppQnNcwRiM42VntHH1fwWEcT9Ut\r\n8E/SSHmBOUxbbSdc+6sMRLgjHPMK+1hCO1qJS+SL/o9EHjxycIWulNpueZh8\r\ngNaUlbaywj+sE4rJGCDYS0khGtLxJV4Fa3oPDGUF0ubShGFoNAyOe01ov5g0\r\n+63hHjuiMJrwgkLFt9zDDZ4U4D07hSzSXRgr91toWtNwvFP2kq1LGqzJ+zdd\r\nk/pHHuJ/ttUDnLW4nSDi460PU/u7sl7MOSD5YajuNrX+ATREEvR0bGQFi9As\r\n/HAUn2GHazZiIgKXh0mmOOFVltpbMqm+8HA=\r\n=VoeY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1e255ddead4716271020e03e9b0b302eacbc4153","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.89c66483a.0","@material/base":"15.0.0-canary.89c66483a.0","@material/theme":"15.0.0-canary.89c66483a.0","@material/ripple":"15.0.0-canary.89c66483a.0","@material/typography":"15.0.0-canary.89c66483a.0","@material/feature-targeting":"15.0.0-canary.89c66483a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.89c66483a.0_1678738613858_0.6970717611227231","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/form-field","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.6a85742c2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4aa7f3786bee74822af0da7ed0c6de7a438ea17a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.6a85742c2.0.tgz","fileCount":34,"integrity":"sha512-sXuZMJHndbiqW+SRHQms3tWmzSRSCyFMgtIF6Gsl/FEk+jiUA5T2xemRe/stptsV6Zdxvlhj+KMvkh1UICwy6A==","signatures":[{"sig":"MEUCIQDcmJRAnBIdJcNmV7D+TAKlpWYzG/24tzw7sxfKr8yl3AIgdkVYaYBjPrnF0Uj/cIwZrIcIyQMJ5QmOpUdhM/zNN98=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":530874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+BUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBWg/+MMKkX9OREznpu0m2zLtM9FjsH/W351seYbA/aA9FTOJ2CoAX\r\nyLWnct5nBU+nCiwaiU3kJOSy8/cqKWbCUtqqcm8qDNOR0lxxxd5ANvqeM/x6\r\nGKsw6dkrppNz5NnlF7W7gfGseCBBAsu5s8Ngmuj6iedAMzKc94LAb0rEAbjm\r\nboQ5I73c+aqT0PM2MraFR4tzHaQskx23IoDOCa+F5ZM3qNZCPzLtCLiULAlo\r\nSxQyK6406HzrhjWfTl6uZrqt6npLe0i/XpB+u7GWfNsa2+SfWEWz4eI8aoMk\r\nIT3Xr1GuG7UnTsheAT8yyEOKD8m8Ox1RBTiMqAPrJcQC+vX23uLgC+Bbp4bQ\r\nQVz3k7IfaxjjrCiQz99iKI0V9swylBxqL3oUZmYE9QDy7+9jyLZha9jJixan\r\n8/mQqapwkE5x995iwpT8b/GrbUbJvvEfoh2VCiWizK5DazSQYBrJIZ62J6gd\r\nurmkJINAZmsm0/7eY8QLhn7ysxNNuytVKMTomjuS9Z4jlFWWylPGei9/kg+3\r\n8KcwUbE/QQfwWVSULZWoba+TVlCxWTGQ6EJsCnfksszmHnpDM+n107PettQP\r\nvNpu0vSYa5mu2VeoIHcUuLmCovUZW/+xXKRIgUA/DgE/numyk61l8dkj+xsa\r\nHnPjfJm+Vdk0L5RlBKvuUvexG21fql99AuA=\r\n=Hzhr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a2a15aaa59054337e585758eb160d9cab97224a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6a85742c2.0","@material/base":"15.0.0-canary.6a85742c2.0","@material/theme":"15.0.0-canary.6a85742c2.0","@material/ripple":"15.0.0-canary.6a85742c2.0","@material/typography":"15.0.0-canary.6a85742c2.0","@material/feature-targeting":"15.0.0-canary.6a85742c2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.6a85742c2.0_1678762068416_0.47869377133668123","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/form-field","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.bb6cd78d5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"293857384e08216602f5ef35040a393e527461b0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":35,"integrity":"sha512-tGhaf5CRcB84zKvnJZ4HmGsgKPfHkxaAtRzyBnvkz7pBcCmHt30pEW7dl1TmwJFXyBUEDhEh5ZvlnMd22rTw0A==","signatures":[{"sig":"MEUCIQCsRFsst8ho5n78ML4y9/PBhdopPGkOP8m2WLmZ4MNoPQIgbagnxiQS6ZY4YrCJBqBM6SkzdlIEPV0o/kPqIkDZqq8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELovACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXgg//UgX42VNAHJYVM26I3Kgwrk7mI44fVjO5Rv1kQg6s2IRJn9N8\r\nBpT1KwPQc0CouGzm5DMYJZ1m0PcXu3gGSBmAZ/1l34QxPa/kdiRYnX1Jp8l6\r\nY5NazI+pntx+H7RsWtyOzUmBHufWqnWpYcXkmKO62gBlh89qSdav11nOUOCd\r\nJSNGVwfwMUoShNTmJnFtdcWZ5jAkX4o+yiTMl8J9fJvnVaEhroaAnEbnH+Qz\r\nMp575CGnRINjfdKpaEnPsdODMzVcYO+A8guHIQGa7BwhxUYWXoYakC9qTpkl\r\nC1LcfZjiyQTRKKHP4X1EdzeYJLI3yXGbtdZTlaZQYgfCNWOvofoDmneIRtFe\r\nq6dug0eKKgNfEH9a2GxLusOlcZnJH41g5J5vV+Ey4y3KILBrUsv5nhrwUQRg\r\nct9vQFLss4exIvM02jGi/iRyE4++e92UKiYkMJve2wBUnfuKTH7NsjuQqBjY\r\nrW33b+579xi2AP+Xybg1vLKoq/F4a4wf+I0Q5dDNW2IYXP9cNJ2coRgar5/E\r\nQ+bNraPCee0zf65YkB81lVPjBs++SbQuxP/VCu3TWWou4j3qO8W5LPDZAybc\r\nCHT7lWf0GwQVoQjPKpjmZlG/GwMzTeRBf7gdxGt0l/Rtz5OdKPrdjalsgv4/\r\nNuGmApIdxBRNJhDSGvzOj23LCaptjXFDI98=\r\n=FF6H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fe016d599b297e4e276ef5b37b829b25f0607b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bb6cd78d5.0","@material/base":"15.0.0-canary.bb6cd78d5.0","@material/theme":"15.0.0-canary.bb6cd78d5.0","@material/ripple":"15.0.0-canary.bb6cd78d5.0","@material/typography":"15.0.0-canary.bb6cd78d5.0","@material/feature-targeting":"15.0.0-canary.bb6cd78d5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.bb6cd78d5.0_1678817839272_0.6819099162539173","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/form-field","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.5f94aa37d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53978d163d35a4797b08d34b2866d5e34633cc80","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.5f94aa37d.0.tgz","fileCount":35,"integrity":"sha512-PP57kiv42E8XY1qzJhG1NXmwLCym3RgiPERTPhN+61jgNuoMWzuGRki6tLfri25PpJT3JAge/IgFUeD2lI/2ww==","signatures":[{"sig":"MEYCIQCjMV/5LoWmGalo6cIeVfAPh8HkocMlOorVHp+96yoExAIhAPsEwwl9Y1eZkldY03+I9IGERmqOmW3Rql+vAXgH6XX5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELr1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyVw//fEf5cD3bOUkNi8K+KCfJthvG9LsmZjHGYeEouUQAu80WWqKK\r\nLtje5twW7sEuoKFvxRyIrszIG0SX0wf46JHZP5Cv1bE7rkgZmkok5paZUmsd\r\nBKMZCP7pUajwOyXeQjKQVtPapA2xSO1lyBtR7fI2IEOa/IcJO09CBPQopQmK\r\nkly/v1G191gP8Z1j+Rcyi/GQMBxsw4bFDpTWf2FJJTrph91X6NnhrtLoz8ct\r\nPJ7x1FovINQTdMH9tb3cB2BjWEzprLuIzLCFLkv0vDqL7imjln4OclKSgK8k\r\nuK1bXjUd5gOOw7ry988FEi38qlvObbodu8e3SMiOq4lcMw7mD8c426WsHyjt\r\nwn5PCvEUdKJN+ZbBFAVNBhdULRVTcHSEiZUTwUFolzDe9zvAFY8NiRBg9eNR\r\nwHXiy56npL685r8CkcE8l2s8t+V2qQT0xO8bFDJVf6z0Yh2XkPHes905U4AG\r\nRvqDBhZHfQatn7aEqz8a8LyGjtLedXd8sMqCAuTnmds0AM2JVhWnR/XMQl/e\r\npIShyuTan+7DBVUQqxSEuHA4yxo5UOpvpVQ1LtJ3EVf0Q8PJISJ/cA551fLG\r\nmJUsJYjUJ7R9Agjn4vCljOoYDemNaP9TpbV/SzdIw9x4fqWSJpCb4zYifc23\r\n7vNAcb0FRGGJ+vq4iI5W3n7cHovJm4NH+5o=\r\n=RCzy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"95db647ce856eab6b1eba2fb1794f3b0dbc3dd08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5f94aa37d.0","@material/base":"15.0.0-canary.5f94aa37d.0","@material/theme":"15.0.0-canary.5f94aa37d.0","@material/ripple":"15.0.0-canary.5f94aa37d.0","@material/typography":"15.0.0-canary.5f94aa37d.0","@material/feature-targeting":"15.0.0-canary.5f94aa37d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.5f94aa37d.0_1678818037594_0.8888652350640991","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/form-field","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.1bd317240.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5a8aca5849ae527422ef952f8a46266d504720b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.1bd317240.0.tgz","fileCount":35,"integrity":"sha512-X2q1mcHdeLTwrak2iZMusZXqSitkYDpt0makoFaXFf+Qvq0dnGkPwk6TuH363e4GcJU4kiyvrBpKru05SQn55g==","signatures":[{"sig":"MEQCIAQvpKHeiwUQSYOJbCrXj+vdK8JJEt9D7oQAwPC64tK2AiAypPz/F76Ceg4xkBg9EQzNRprxiDj0zGeKt0WhiznFTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELvdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/hA//b1TYvk6/bPy8buooBKKXc9BGI6m0LV6JxLurQjisaaB/KUJT\r\ncWAOeADYAHxAeflz9YQTQGlIZ4tW44uoGnlWbq9qZtQitatpXSVxApRoNU4H\r\nRBsOty8C4xL1uRIZX989YPk06jXrJ/+vqWDWiv9VIkLfInpHyRtZQ+tWS2mN\r\n07dTqIs9AiTF3mJc74OzJY2Ky3Rq9IeII6FSZD6xciIazcsPv7L53vYGIeIH\r\nbnNhvRNj8GqzcI7NDstaykn+9ZnUkhGy6ZhlPuwNn0kAuQKPfycTt9DM5YM+\r\nSPJFCcnUNptPG5gMyvUn2El8h2h+TY4m0OdNLq60msvACQi1aPyKzQeE4UlL\r\nkk6Sdp1golSDOzxfPpWqn1ZBT18MulaEMH6+Dtf/7L2KihmMlFsNnGI7IRU2\r\n/0Yj4pU8fBEK/PVyHUoqN7t8LZdnynCQJ2pUkWMBPm7hmkC7ZR179XDG3nV9\r\n0nweeQ7yRsYK7zdaJpygwMtjKxC3U482H3G3DC1DCU3g3l+TzQ1uMk692xkh\r\nAPSHCxQCFRbaferan6H37b5amyJnfZBwc27qw7sc/yHeHmmB2qq6q85EuMNp\r\nEhjk8cmH+Ux8IB1r2faDTuI/c2ycbO4nZv0FZdSE7Sra+iyv7nOtzYHiBUwP\r\n76ZD5psb8joNm2+JjvDTl+OL6N5KGeqY/aI=\r\n=7ayh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"eef3d63106c71dffbe823b04d07e86a84dfd4d42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1bd317240.0","@material/base":"15.0.0-canary.1bd317240.0","@material/theme":"15.0.0-canary.1bd317240.0","@material/ripple":"15.0.0-canary.1bd317240.0","@material/typography":"15.0.0-canary.1bd317240.0","@material/feature-targeting":"15.0.0-canary.1bd317240.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.1bd317240.0_1678818268994_0.20938515839917704","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/form-field","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.d441d2a2a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87f5a2a4a63566eaa763df52a35e6477e7211fcd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.d441d2a2a.0.tgz","fileCount":35,"integrity":"sha512-5I4BtN4Ehq/+OP0eB4f5CeBqpAYLeb6kmGBWIYZ1mUP4TsWBPpL/LwCgLcl3qE1GptKPFodEE3DIoqBjzNNiEQ==","signatures":[{"sig":"MEYCIQD9ka73zh6NnqmldMyj3PoJ64/vP5cDxLDTNkxPUf5KhQIhANaVr2t/FOs4MHZjCVEY89gvc98C2+8M3uSI+teStHxR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELx+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqbmg//RoKreftHdCpdaySmpob57XUVE4M6Ub0PD4+YaY+P5of0rMWL\r\nRsWwzWfbtcEK3T8gqJM3e8gV/avMFMNJddQ5xidLKVeFcN2r439kHfvzzDhq\r\n6etBhjoQ8jsdgLJx/Nv+NQEGjkPwtSP4MhxxBefe6GBDp1C0ZHanZPQa+FKI\r\nUcSdiQpXet1Be5Y1/wwWqtrRTLAZIDvryW97g1qLR6x4e6GNVngKuKr444Rh\r\nMjFOV3upcu50ffET2MJLb/rslSiAHnuwkFjgpvacf0PkCgkAL6yz01FdXyP1\r\naUN9x0yvW3qFeaLS2h3FiwPTLlS12wa0bbz3525gUMxL4OeiqQh1T5kiDUh8\r\nuwZZwDK5pz3orzt3wAFyxHSFYbZ9ILHORnh3hGKUgkhlL3XdFOFF1Hg+EvgF\r\nkfkicoXXRUWhP/mSOwII7MQCN05Cm5VuMe0abor/aLsfdSwMr0AD3gbALKz8\r\nl8n9n0RxzzMAmxwZ8cNECGgsR8mnzllUSWsi+DC2AfrDyWGbgfFwCond6T7T\r\nE92hkyVnIbUuSz+/d1o2S2XExnbbEiK/5KYbsWf4TR9t0z+ucl4Ty/nbg8uu\r\n6VNk9vqspgOSK+Xsyl2+BEuzxuw4FtI8w8TMG7TbEqgyP55MMiuA3Xkf1/41\r\n/VnoOqmeRWz3Myb/wTlNz0Md1Xlfn+lTAdc=\r\n=Z9S6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3a1d95c90b2fe34c5c04e44571f94badd66748b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d441d2a2a.0","@material/base":"15.0.0-canary.d441d2a2a.0","@material/theme":"15.0.0-canary.d441d2a2a.0","@material/ripple":"15.0.0-canary.d441d2a2a.0","@material/typography":"15.0.0-canary.d441d2a2a.0","@material/feature-targeting":"15.0.0-canary.d441d2a2a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.d441d2a2a.0_1678818430359_0.2017028511675658","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/form-field","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.fff4066c6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1306689f658f074eec0fd33db2574aee18f89db1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.fff4066c6.0.tgz","fileCount":35,"integrity":"sha512-9P6sOC7KPhgU8rtza4V0Z55yxOxrnFNgoOO3kqs+oXf73LnAxAO+2hrIgy2cwXvVg7cY66NvPh5cBeAiTr3shg==","signatures":[{"sig":"MEUCIQCqsqiBAgg0DFgmER4D3I+09uXXKY0IpiglFySVPSvt6gIgegBsW9mOTssv4XCKynD3vwHSjGHVkO3+4NkNNiY9nZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELynACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWkQ/9HW6RpsPGiIr5S9BGSBMFQcxkNiU/8OQcCiYncgymOQOY5wfB\r\n1VPHh63UbmhyTnuqu8lVSKcTjY1/gg30jzjmvnHpgEj7EGUVW4eKemsRLPA2\r\nHIOvYTwhvN0Oq8L3FSa2VjhwR2Bm0haZfEftRnIk+TMQs3MbZRqL4KHrs+7e\r\n3scf4KaRoEE/JVksnJ9WQsTtpaGJx0so8mOL5/ourgT/gjXJEh5+RTgOO9hV\r\nV3jdeRSvhACvH767yu8+gqkCcnuQew5GjB3aZotfQe/E1BXjOervTB9Q2edi\r\nQBURigd0WIbW0KUgjnDMTYbR8AMXnTAVWmsig6P9Lo1DCWdC6rB1/+TcZFrO\r\nfkroKN501RKBiXENTZcyfz1yLjyOzhOpJtBUwP/uBDH04wNgc4OSY5A0Wm1Y\r\nRjuh/x0G81ChKXZnJUbWLxU1D+TNInrbiMAB+3mimnDakjCLd4k4Fwi5ll4Z\r\nNwo1jzsF4SpOXpFEEUiZqmx7+qVox/x1sYG5JsGpPr1d7CMwqV4+WTdtAu+l\r\nIHflz/OxfIKSySoqU5XgHqOWaaPWi+epbU62zM4uwDZBh8kqwSBDdTVglM/w\r\ngjv5LLYmMH5L3EElqsCA+6e2rtTE3FTH2zkt60bNFGdX+A3Qw/iy9UtloblE\r\ntJeCZNkTKX5Kb6YrKGNRluZJQyY9pvwLfvY=\r\n=uvj2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9d24b185ab8c87061ad27f4e7791690a12e10135","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.fff4066c6.0","@material/base":"15.0.0-canary.fff4066c6.0","@material/theme":"15.0.0-canary.fff4066c6.0","@material/ripple":"15.0.0-canary.fff4066c6.0","@material/typography":"15.0.0-canary.fff4066c6.0","@material/feature-targeting":"15.0.0-canary.fff4066c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.fff4066c6.0_1678818471362_0.9658068489710987","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/form-field","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.87809c710.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3fba1688f33ae68edd5d53e6781286d4e0ca124","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.87809c710.0.tgz","fileCount":35,"integrity":"sha512-ku2ajslPVIjFw9zv+4m370pEUGj5qUnbJgO9on8g4Lh+ayf9ijmCmJ6CtfIB4dJ+QjZ+aFFOXer3c/WUXbisxQ==","signatures":[{"sig":"MEYCIQDgiY2LXyiV5Nbh1wAkPvUYzEwjJPVQW3aVi2xqqXiuEQIhALJcp509izVRBEhPPJ3ThcXWX7lXxglzc16aTgcJzdba","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":532728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMBpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmozvg//e6eFG6hhGt1FFf9oC50XYDkjrMmHJl0dqo51bgySIZ2nuSaD\r\n/WcTG7JqgyrK4rviXPIjkHRsGsw9QGZL9yz4twKrDU03O6paEaq6/ElO7B8K\r\nceeD46rkJXpA+GR0/CA8UAsFrTpZGsRyCrtO6LoLUA4j4KbM5FPM3RQMTFEz\r\na8pgiu7+u3ILbI4jpc778TJ3uYzNGE0XU7jgROhgjfY7Fhn3bOpHtIXykwMm\r\nWurTwI4mRxD3cRFW+KP22vaKuVG+BsS95yZiRtw82wrcOYLyPImg0GobaKat\r\n+Crpmha3eVyw2s2gUoBLhUfFr5zxGHB1w9V1Zw1wczFnRbwIuBU+TdUQpsL7\r\nRRG8ACvKoKyG7YWBp1K8YRnj2dEh6G3aJOJugeWmZ8q04EMstSIUUhxbQJov\r\n0ijORPZ7n8BtHKrhD+hHJKxQXKAcGZpgBJ0J3umGjltQvzwMoeLS2pOX+VLa\r\nNWMHclJkpBXoovH7UO1RnGN4rFoFQelT/jEQUkAdK5k6gVogk8GFhrf2V94C\r\ny3tbyRlbpddbS3f2YHYNqMyNCf7rGF67nktJtQUDmO72E6stuETATAxY2W8R\r\nqKzyZ4AMrB9jUNHvmGiH8yRG8eHmOgDd2+BgB5wUTbHGEO1LuhaXJTzq2Ogq\r\nNzigQKU8wXQLPf44bdrnguwzRSLtn5ZvE2g=\r\n=KihE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ac65d4def7491c4e414883c6cab7e075c7374b4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.87809c710.0","@material/base":"15.0.0-canary.87809c710.0","@material/theme":"15.0.0-canary.87809c710.0","@material/ripple":"15.0.0-canary.87809c710.0","@material/typography":"15.0.0-canary.87809c710.0","@material/feature-targeting":"15.0.0-canary.87809c710.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.87809c710.0_1678819432947_0.503497471059885","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/form-field","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.48d30012d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71249324e5e605af73b40965b02059ea03fc1dd5","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.48d30012d.0.tgz","fileCount":35,"integrity":"sha512-5GCcbgh5BGmQQNO9O1YURobbUzkMuwej+c9obqEqgueLGma/8H/GxHC84fY4U71ZAs4TaccE7VLhG6EoVvzd9g==","signatures":[{"sig":"MEQCIA7BCwqsh6rkpon9lWjL/0eLNmXkXN9CLgPQQXVIaI1JAiARYKz9XfIwAW/dUjS+boqsl4SeeSTU3uMvsnVKdd8mRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMFtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr85w/9HZu3sKl9Gb4E0MVTbclmXU0Zk0gQ/9AiacbYKPYcJsaQc/V6\r\nQ1yZD9JxyRPk0dV9DnpCyYagSbTFJZdx+PGaS3EnBst5V2cg+arH5XxC9s5o\r\nH81jN3/lv/gztRUe+HvU6bDYvEKYygB8fkOazU+kXqOgV6uRWQffUq5kRRND\r\niWhCpuFCov/SJIaE4OS8/u6gWLNlVBHyXuRsIqtCUxQlkEzp13Pb9SNJUeYj\r\nz6G4FbKJo7EWqbzJKSyjo5aXvABvsvKY6N63oh661bijXXZSEgLmSYXBjtLj\r\n53Kirmq7ZkYYUUr+K7FTTA/d6vvzpuNYYHS4iIlgejRK78dem4NUxUGcKQJa\r\n8nIwOADDFJ1kE6MjisoM9LIWUvmr8Fre+OhzJKVgLiI4rhm5iqGMHmLD11wq\r\nVnvwTBEgGOYEVSTMOoL/0HYNlLEnHHXSGWsvQZY9GEfjPBVPXxPfUJMjv/fd\r\nHLL4X2Li/BCb6pTcTPhK09xmL1iBMYwJln7BF+RQ95qjwDIwDfp7JWJ6r4Wg\r\nm9LdaHF/VJjxkJ9g8weKCr1Z65yMm+k4VarlQY7WTrI6ciCIIa5ApJyCW+7g\r\nfQl9+TJkrSj9fyCkY+U0xgRXNkQybGLIn2tesNoZLKHMmGt3WXtR2OtaQtwZ\r\nGPCkqPSMUmjpNTwcCcaWTH2NlbTvsQZjugI=\r\n=ffUH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"f2e4b43d20ea58b52a223d31b8dcd3f813d1babf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.48d30012d.0","@material/base":"15.0.0-canary.48d30012d.0","@material/theme":"15.0.0-canary.48d30012d.0","@material/ripple":"15.0.0-canary.48d30012d.0","@material/typography":"15.0.0-canary.48d30012d.0","@material/feature-targeting":"15.0.0-canary.48d30012d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.48d30012d.0_1678819692950_0.6483845261869137","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/form-field","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.419b23cc6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a415bf3f72502988f7184e789fa35e85942e4f95","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.419b23cc6.0.tgz","fileCount":35,"integrity":"sha512-A2DJcD/SihdZiUTDsIJYw97gs3vW2XYz045Jd9ZOoxmCnhP8PurwK0IGxpwX6ZZIaBSMOrMvu0nUMO1FG8FaLw==","signatures":[{"sig":"MEUCIAyKOcB2kL44ComNa94IMj8yI7bMJ+2nNNVZ2vl4idOgAiEAsESOV4PZXmc+KydTUiKML1335avxdCWVy1V14iprKPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMQCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpHA//UpEenST43muuJ2E/3oPaGAnY5ZikCOOZjKRn2ocGv5GteRZ5\r\nO83MOG9z5Gsot8vNZ7J9Jbd8nrIxFr0llvN5nj5TVMfjlFE/TrgImU/AL9e1\r\nvoEqQBW7J1tPNL8n8pU1IZa9AehJRd16i5YFrrNhf32qZsaBuYrjNECswz3k\r\n/UdFrf2n4s0wzItrgOZte5JofYMlwjHPR+jv21DTvgTVR7MQ+q1QlTd9iJSh\r\nqRd5w23/f86YBhlsZmht2hkV5yCFZQQgihcMhwYVDE5+caC4adtAp48G7wBA\r\nQXzQdInndDlo814SyjUv74PKK2gjB/0gULjV+Vccp8qkg5SPWDi5OIjA+4In\r\n4zdxTuXVB3UUZc8JoplFFUDY8JwUdaJTuA0hFCBevJ6rxiTkabcfF9wCPpWs\r\nS00yBj42OYrp0ao6PW2416sfGyarMowibhCA0jzO8FbL6t1VQOf9XunAdDZ2\r\nj52Cfa+nsv4oZbeuBkpOj2kgNnYnBi0BFLhpQj/EJmIz1d6yIGIMrNbQfzsa\r\nRuc5p7NnZHuBx1aLIaRkOxOML/fn525AWrvwU32eI+fbR/slv/qct9z2WWI1\r\n9qfCm6wWxRpvy513IO6dyQZm9sHfWLPNHJxOgRFttzyAaBO7qXZQdXwIFSIh\r\nJuW81jRDG9r9QJi+qNchjjPhbd02x/LDYWM=\r\n=BH+M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3b1188210d22a02ba5ae948779bf92655e47aac3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.419b23cc6.0","@material/base":"15.0.0-canary.419b23cc6.0","@material/theme":"15.0.0-canary.419b23cc6.0","@material/ripple":"15.0.0-canary.419b23cc6.0","@material/typography":"15.0.0-canary.419b23cc6.0","@material/feature-targeting":"15.0.0-canary.419b23cc6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.419b23cc6.0_1678820354420_0.804312741548429","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/form-field","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.bf86521f4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d0da5a4615b7f8088e270b530138d2b531bc27d3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.bf86521f4.0.tgz","fileCount":35,"integrity":"sha512-23tCLZ1D0AoihT/lvwThuEUyeSVR+t+uSQGmQ5oMK2eUlXf+N5CVBRK9zsg5xcKqC9xcFQymHu0FNFa7709BGw==","signatures":[{"sig":"MEUCIQDpdZKeJDQA958kzxG7O/151TjP+1Q7yb6l501uJTFOuAIgUYD+Z2oGePvpC2US6Zy/lUFu8HnSW2Km+iUrqjDdL74=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP+vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJRw//YEYkfmPyV355hkzKBYhzUzIeL7XHpd4cUr3X6yQyu56GQJy9\r\nIE8AvO/HVRpykhRrye6OxImcL96pf6l6bPI3/unQmTiRVgagckCEFhUp20Cr\r\n2q1XXnR5z8X0VSSIVWDvylWomPGKqCd+Zzqzlz1+K5b+gZI+jAMJAi235LZG\r\nDGjFti04Luk0nRwlZcK7n+PlYB6a20QSSkVNHLrlucl267fAvAQEINy/h0SR\r\nJCj/LjzmpMuZjUVu5ilPRbLEDZ8h63lG3GcPyFENwdvJkY1IW4oSbR72oo/z\r\nhVdyXDRzwv2xtnxI23l8AoiEqExmPeNxjB8eWhgMoHwnFdG3fNnektkMmEo3\r\nhEXXELWrZBRKbC/sOTCdrE7oQhv83WhrJ/SQR45l7hz7BTm32ZmqLFMV5TL/\r\neT5s8nm1FgK3EnahRUHLGKcKViK5QUSAFKb7IxfRRdAQ7tSwtfn0ozlCO+AJ\r\nnorIYMX1jkDXASmx91FwIwhZi0B6TwKPKMiPM7VDTOsGgeOmzPrHbNkUTMev\r\ne2DBSC+YAM3f4YWV+2wcdvtTaGr4wYMXLnWbq/lEf+Bg39oezw7jh9t3QFW2\r\npX3DGWEV+9nrEg7pw4p6X5Drq9abAtNTO/u/zAPltsQWSbWNn/Tvug5b1N8h\r\nTsx/ekb6MhSAFDsyn+OckPr3GRda50/isIk=\r\n=PgL3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8f5c1bf1449cde9c918f51bd033762d247655b49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bf86521f4.0","@material/base":"15.0.0-canary.bf86521f4.0","@material/theme":"15.0.0-canary.bf86521f4.0","@material/ripple":"15.0.0-canary.bf86521f4.0","@material/typography":"15.0.0-canary.bf86521f4.0","@material/feature-targeting":"15.0.0-canary.bf86521f4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.bf86521f4.0_1678835631430_0.40771482168692064","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/form-field","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.11f3d280e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a67cae7eedca2c880b060425681295ab1c1cde8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.11f3d280e.0.tgz","fileCount":35,"integrity":"sha512-BLoRVjxtOj/nXsNhF9yHvzKzoGl23dZ8jyKpJvDINFvjKDeV7lFVBDXVUHB4jywWmagPY/VJ3jSYU69G/nmqXQ==","signatures":[{"sig":"MEUCIDMr6AaSoP0sSyjV4C8+AxtixCcE2c7/1SOVYwfd57lPAiEAn5lPPEQkMlUmKeFRwl1R0yTNK3yPHsXe3Ma2htsOZvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ0/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRZg//Vv0rM3aa+ZRc3CSiZDZaNTxIT+c6eKqT3ZjnvdNE3F7FhG/Q\r\na4yzLYFZVDk8nb+Qfs8H00mK4WNy1Eko26pahLUi0oQHkCQ4WGL3FNlxq69Q\r\nnQO9SvTtgBLw9jz6HvVnlvRSkbJoWnZIcXGao+I4aGMFRweaEWeQ8Frspnoy\r\nB8p/ImrlU65tZptcsxB/vZ2fq4e7dDO67SlRAGQzcCrinudQ6+uFqQR8qysd\r\na7nfh+uc+4vDPmO3bHSOmCAlnk2ZBd8xYGvsdNpNc5aXtRP9LHCek7PgfBh7\r\nSNEV0tp6jh0cDchzvvmQdktFcnO6YKg1YyQwl4lhPG+69l1vtneJ1TDPcJIe\r\nqb5q90hiMnf0TNbe3t2jMDbDPt5rKchEGlFrXpl9pG7At1/MywqSgygj0cNC\r\nGEieiYiXSgF5j4eYWbgKPR+N+kDpy0xs9B6b23H4Cx2wtrpPm0mlMXRC0q0d\r\nq8MvrfqOL+W572XZD+y0TB9S4M3w40vNHT+64QhaKE9CIwoUUmUDmxweY+Wp\r\nBjSBTznud8EPbCQDm+504hGnHqEhnua93fJDmvHA2U3RWMhE69/rfDL/eCEn\r\nxiC3SAQUBEztySlX3iyGQmc1KzhNFFCOrubl7HYzEvifKLtFivRGdf+fE4pQ\r\nWk1llR1QljK91hmFS/nGHX5R/akk88DgXFE=\r\n=ftO/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8e5a0971e8b535be016fdfe963b22dbcf1353e53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.11f3d280e.0","@material/base":"15.0.0-canary.11f3d280e.0","@material/theme":"15.0.0-canary.11f3d280e.0","@material/ripple":"15.0.0-canary.11f3d280e.0","@material/typography":"15.0.0-canary.11f3d280e.0","@material/feature-targeting":"15.0.0-canary.11f3d280e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.11f3d280e.0_1678839102951_0.4456591985702887","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/form-field","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b281a409a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ad402e882122fb73163344d524a82f7504ac6a0","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b281a409a.0.tgz","fileCount":35,"integrity":"sha512-dWd4P/y8ZAV9hxOD4RTNKc63BufA60ZjpN1NToykXtFhrP/i3KAsUb9tRWNNa2GAYhmiHqyKcwpRGp/vOqgWiA==","signatures":[{"sig":"MEUCIQDameX3uHMc2U620ixXi+raWa+MLOfx71L++4wnT0mTbwIgAfjZQIZxyi2/YTofzucbtLPI3z4hWLC5Fx0SgxlukxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":536263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdArACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4YQ//ZsVt32FLb7JwrLj1RDU5GQPayIeJSTopCsfd+WPEvUjTGbLm\r\nrFT9UJDlx7/wLa+LzyjnTyP35O1EZFWqWofw1StvonhbqYf3J2leYKiEYLYg\r\nKwUhlZax/WsVqn7BfunXh6QHcWqWy/LeIUeDaQWPQMzrrj6sHAiBDTPYFi/B\r\nK5EMEn+ikm/msoAjncanL68Id/6KmjTWEWSOlKgSkD4rARUj5DOPaaeTrE6h\r\nm0cod8F2RtSbQpoVuxx3pj39dEwIwKUzk/Ss8QGRLjs8LnHrM9xuJ88ZYE6n\r\nwO5xOGq1ShArdl+zVST0HO4fpD74h3OTU6N0SLgM5zE0WbYR7zvkFsGngWWW\r\nXMNv6ZNYQbDkN0f01IoK8TRlpSRH3wqR6vbuQAbmswkHwGUjm+W/eec/jZT1\r\nazBvC07JXWHi0Gl/+oyI6rFpvI4GIVaftT+1rh1RzN0quR84CfjgPR7DFboN\r\nCLrOHzNgOn/cGbBzwyLDLHb7k9600e1v2/nzMfPTu2I/SuDw+vuxv0Op9ogW\r\nubEh1IgJcCc2b5kIQYEIDWMIX6+Q2r4S/Pb0rViZgGnD5oyI3oOTdPtykoYI\r\nKe4GIQtNbNOP4C8GkgcapDSlz/bB2uoVWWj/M2dxunp5CbaAtz6W72HnuiRf\r\nbL668Nk/3Shu8iivGjT3LgDhPq22MjU/vxs=\r\n=ktNd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b924c47aadd36bf60d7c29e466ab3899ae4085d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b281a409a.0","@material/base":"15.0.0-canary.b281a409a.0","@material/theme":"15.0.0-canary.b281a409a.0","@material/ripple":"15.0.0-canary.b281a409a.0","@material/typography":"15.0.0-canary.b281a409a.0","@material/feature-targeting":"15.0.0-canary.b281a409a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b281a409a.0_1679413291541_0.7273390080342956","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/form-field","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.39e473690.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9941eda2bf7fed7a3928e98b7a181de2c3a65982","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.39e473690.0.tgz","fileCount":35,"integrity":"sha512-hsLwto3AMw4zieYSBkrm5eyQcxeygD99IDAKrlykTTPvWn8siwr77joX70Y5F05SOEfu/UZ0SV5Q7rNYQ+JRCw==","signatures":[{"sig":"MEUCIQD8FgSy6P4/bvbzu6X4/gGgnhm7snyMQy6g4QUgwoU8EAIgIBdIXuQU3PGWU1fUpqjleuBg5kodE4IZ/cYsAwgtnR0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":533777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe67ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6DA//af7fiGQqY0RiTfdwSWm8axn2prZAv3gW/DMyedKq2sWfk7Bh\r\nPIHZ2/e1N+/OR4wRZTZlJHkSdQqr3ski5/6Pv4Y/xMClr+iNd8oq3GSgVYi3\r\naQ9buN6Xr7IHCXVPDi9iW49ZkbgMhDaKgsVuQaoDdUC5mGfb66YntYD9pCoU\r\n1tO++A8jk7jI5GumUzIdCVB0Mp4bFV0VN/FHFE2SOBvbM0lTS//QP/UI2u/U\r\nquPekXuE9q4QaVD4zcQ+KlDIsAjxoApWlzUTnHi3KXC4oeOWxb1l5E1sdGeL\r\nLwPlpBGTf6H65OVGI8Sns87r/tpT32OAy860wxG0sjkT2ntmKCpbIf0A0Bph\r\nxt14xsaa87lazivcoXz9V25RLWcJHekNFYTIcRDEhB0fXeotyO16M6miGlMB\r\nV44EN1K9+2PR17rWclSOv068sz1qpFW+XGylDsRhrzQc+jzKw+21XhfvLoP6\r\nRNtle7N23O5CMIIlH3kMoO7XrdK+Kiab9cxP7YqE05mzJ2SHvE/JiK0xgZdr\r\npUhH0fHxkGVfYf9baZj4GXLeqYGKzItqnFph3cakWfUS2OSdd5sFXx16QlCA\r\nWLtD9ojb8H2S+2kB59Gp5Ll3ahbl5i2irlQi7GeGgxudDXHKk4y3idiJzGoD\r\nAbDefmh2i+O1/e0aRfcuuM56hJVvyOvsoCY=\r\n=rDPF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"2d372eedef7c583c60aff8d4cd51f8de971cb93d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.39e473690.0","@material/base":"15.0.0-canary.39e473690.0","@material/theme":"15.0.0-canary.39e473690.0","@material/ripple":"15.0.0-canary.39e473690.0","@material/typography":"15.0.0-canary.39e473690.0","@material/feature-targeting":"15.0.0-canary.39e473690.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.39e473690.0_1679421115398_0.20952688129392172","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/form-field","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.cedffb44c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c5f5e95be0cb98b5fc2d4ecd524c6b29eb90769b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.cedffb44c.0.tgz","fileCount":35,"integrity":"sha512-F8dJErVgHbjQQjbndB6d16sH0FRZAQ7YHw1lpANvlsHTGZx0T7hDtzaLi5tREDGeu3TktRU24AFTNrmA10Qr4g==","signatures":[{"sig":"MEUCIBgyS7vUwejzVTFGTtgAWtDQkQGWizElUilX8ZTri3WPAiEAgWEbNuPDeORFsWbBBNIYI7ROrHk7aSfbPFZPfRymRVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfBdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+FxAAlaZ0xjP4hK/U1PjNaRr3HFpzYG1aGeY8W8NBh1Awg80cnifu\r\n7VyDAuYqRN1IRakRtabKe437S0c5/17gV95jNFUXvgLtsthwgj1VnDvz6dIv\r\nXKO++kN7xbikAZGDz7BkRem/b/a+5lciDRq5NFVc+ibEA0+Q84BEEDZBdofM\r\nzoeMreLydell7Kt6RT+lFxDx70EB5MKK/Wnc2gylmeYZelvMYI8qDthFzuSO\r\nMewA2fQHkHjRRMtLDbXgIzls4dhsboUXxbUIAWplGEsAximJeUIucgfmV6C3\r\ncGphOEKZ91B0X6RzRNmEzNjUBrI+rV29Pdr6h2ncKXCY3KRukqyXpLWoWIGq\r\nswb/QCzfT+8hmnMgS2kBB5O5f7YYMU7BcNMW/JVUf67nRiX+JwNW1KOtsJaJ\r\nLu6NW6KaGbeniJEyodPbp25/PV/8ikkRg77C6WlZL52EvKOJyJWG826d3x2r\r\nIqL+B4FhS/lQU4VuwFSGyWM/bzPcecBEIMdNFD9Cg6vcyzdahWkKaiI80C1L\r\n1hKFoCOLHyyy9ZRBAO0sXXGMK4sNIBT/gjVtaIVm9epO4Tmy//uzILlogAsF\r\nfxUmIrIn6tpa+/B1Vj5N1WrB5+TkaZfoQmNzoIn9VmcoUZeHwHfaL94cphaK\r\nqEetRHt1YUYrZvkhk0lrDWnD098oTWAeVz4=\r\n=OO8I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"37783644942291b0c5d41f7499a79b5f61bfcbfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cedffb44c.0","@material/base":"15.0.0-canary.cedffb44c.0","@material/theme":"15.0.0-canary.cedffb44c.0","@material/ripple":"15.0.0-canary.cedffb44c.0","@material/typography":"15.0.0-canary.cedffb44c.0","@material/feature-targeting":"15.0.0-canary.cedffb44c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.cedffb44c.0_1679421532849_0.7072373640332643","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/form-field","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.36a4cba99.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80caeff9eae24b0fe296658761c78cd9036b2636","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.36a4cba99.0.tgz","fileCount":35,"integrity":"sha512-sG32atl12PWeCMSZM12LqQ06ElFnLDCxTpC5cb+x4CSBpT62R4lQlEqj/545poAVj5YoPyP4u0A5EsUr4BTqiQ==","signatures":[{"sig":"MEYCIQDganXUShiXgYhEIzsD4x1S7kl6v4b8wq8/r/Ob4rGXJQIhAO1vglhe6F6VBqwF9NH55D7qvfo6Fshxc3rQ2pNmQyVb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyjoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzXw/+LNEVHtVQOvUQaKCZTO3v2njkOAh5Ub1GKKntEG7k9aYQgtBi\r\npW743XPuLpwFYCCqYS6eTEn8QB3UurBVkcRZaKFSP3m5PUn2AdpPbuXVijm3\r\nR+eIOSdbGoHSqJ7HF7jh9oZSXmIX/UnsAWmTej0GeDt+DioAtkvr4NoS0kRt\r\nrVcz/bz00LMVBcUNJFwKaNNuOvaGV8/K4agnJ6xVFpCdozGBrBljCPJWWqjs\r\n/Hgtn3G0eGX+UOeOz3RvjMPeTlvSNa5bmpnEyihv0Fw+YWYtghHJwbGQUic6\r\n9vsmo64kp0qeaHjUUdErNW9V65tp1Hq/gLgf8TUDJGvpCfJVigVDWWGn6RVo\r\nOdPnV6OQqwKQBM9GXcjO30KYdyTvKYzoOhb52plfGEW+pipQDVkWZjpIisRC\r\nB0v1U59opQo/Grsc7CYGJXsRri16eGj07tBV2+PLPJII9EzugbE582fU1rBM\r\n7mwHos9OTAu/iamjoK5EVJlxvmfzGdETsYPXyYnPEzSFaEAsgO5MQN4gBFPV\r\n32L9OgEOGGTuYd9W89YeR6h8v+Mljym9Q8C5F2h2DQByA+t5xyshR0xvnOVO\r\nZT8h+YE84Xv44oeUVozsv5Kqw1NIDfJ4CnOCLADkigovXRGrPgaSgbu8bQV4\r\nG5sH4w65IOZzjvvjNvbRWbCDSHqwF4JEGZA=\r\n=5y4f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9895102e50a9e7eda73e0b0039246bc56c79a7bf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.36a4cba99.0","@material/base":"15.0.0-canary.36a4cba99.0","@material/theme":"15.0.0-canary.36a4cba99.0","@material/ripple":"15.0.0-canary.36a4cba99.0","@material/typography":"15.0.0-canary.36a4cba99.0","@material/feature-targeting":"15.0.0-canary.36a4cba99.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.36a4cba99.0_1680025832656_0.8165946607554637","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/form-field","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.ed7e82ded.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24b621383f543983829e3513169855d294e113f3","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.ed7e82ded.0.tgz","fileCount":35,"integrity":"sha512-Jd7y4q0Hvp7486WQXblAZm/A9BMhMq7yYoE/CWobos74aSE+nRbrFXfBs2OI58jCeIczq1vbDMfk8Pu2nh+cSw==","signatures":[{"sig":"MEUCIHpL02TaEI0BzOEzaxex5zYO7EAZPrVp70pLKZBPoy6UAiEAghN6Tz0eJsEjHbmoGF/UDuksdvj+45rtoav6jDcNsf0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI097ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolxQ/5AKu3g8sXtESH4gwAVDc+5ZC+V4puAae0bBz1wCWRRruuXKmg\r\njK/jfpefZ/EdW6/NzJ86Q2KZJMd2eFguk6SbE3qgLHakgTrPeOR/fho7CgnA\r\njRM2xVHViPtf4HQTfU340gaunub/AeK+fb3j3Jg6jDQzSIKlz9TS40ysb0xi\r\n4HcyB35FcyxFmogi3T7kOJxGsQQOiNmZ/i/PtsdFLrFgWHxy+po5n+HGSZsX\r\nEmDrs/bEs3dcJhkl3WucScBnQKNB6EqUAZkyiFtrRDPhpuMiLqlSKUxUH2BC\r\nUONvZbqAklvjSI+V/piERc5nUj/76bVZHcM4L6WhzIzXrKhuEY+qIlwQciQ5\r\n3y4YElFqwjFVYEWCPf91OpojSgP+Jn2XK1llsmaGM1gNOGDdp4PndGCeiLUv\r\nkwzrOVy7GPzrrY+EpjTxTyq07xCb7dHmAzwf951w0fKTjprjSn5RUBcgz7Xe\r\nomA9zZcJ7kSWx9jLg/rRjB4MQrJCG3yQmUdDYdD2jkFQKiMVRCMMqIlnIqvE\r\nqLFHW7mC1MMCt+V3sYJ6y5ArxaYg3Pbjv/hVX4RFZUL2/TztTPzFNfWXpz4l\r\nZoI/IvNhIbcFRHb19nLlAZfNe65l7x8q50OH+63AsRNLhashU2Fx7og2DNXJ\r\nsLAgDevwl6B2+isHcxnCaqqEYihoK4VtFUY=\r\n=MIpL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input. \n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"037c17ed14cf732acefb4bf7cb0a6c61f643b991","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ed7e82ded.0","@material/base":"15.0.0-canary.ed7e82ded.0","@material/theme":"15.0.0-canary.ed7e82ded.0","@material/ripple":"15.0.0-canary.ed7e82ded.0","@material/typography":"15.0.0-canary.ed7e82ded.0","@material/feature-targeting":"15.0.0-canary.ed7e82ded.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.ed7e82ded.0_1680035707703_0.7424178195166158","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/form-field","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.55093ee1e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0846c398218b82d682493ae9750021aff4ed07f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.55093ee1e.0.tgz","fileCount":35,"integrity":"sha512-yIzCYgB2IFpNvZkD0kFvF0OURnupFUxIm6jWe+rJTueS26Al0MhL8tGB3RunRYfuZn1467+YWRH4fyhE/OwopQ==","signatures":[{"sig":"MEUCIQDisymCTGasWggf2/dxBGxYPAjHVIpbftjionzn15X5uQIgCUwAmDS4vSRWfMXZUHqa+1sejfs4FwEqm9JjjDgA1/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIgtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMNg/7Bp7/o74L4JrEsDrn/8JpXMwoiXcXsJLH9uNsqiOWqDmNFRBn\r\na98bNFgAxGQ0Awc9Fp6NmiFKGb+CLwwm1yEcObv7+9CSxGluAZvCYUPlejRB\r\n2NIwChH7tGHYImyHuxaNYdM2g0XWjq/UgYFQbVKPNeN/Hj9euwFQwGiJOBcj\r\nkeq+j04K6mG71MS8Wv3i+HIkM0c6qzt35TEOMX9q35ek9niz3eWH+bGWTqMS\r\nLgkOC5Et/7sg8UEOYHNOIs0m2IKFYPY1QujMwJBcwsVH/sV1G6YeksKylh6z\r\nNrjDnjwLfxXVhRUSCfLw57X+J5A1F4b31zNHU+j6vYs/XzyY9gdUcQnp3RZS\r\ne0uwrroY9HtHHP9+fUFyhvYoHlJCKJen2daAWseDgftw5vRiQIbpxhDklJ0y\r\nRcTsT1WJCuUdCd4zvNNQiI92YOru4lnOnJVd4mfGrF6qO0aEU9J7XWXmEyqp\r\nkUFfMPCD3L3kvTEvuaOUUWV9hJOv6D07T6kJxzu0WWvjJy0ORLfqbw8M8kGl\r\nFXlOrD+w1OCblPChngybSR2SsdVO6RNoZtVdMXKoYwJin8Fv7oaNBYqEAIle\r\nNfsM3EAYn9fRYCJw4HLNg941L3UnYevSSfXIZg+9SMrcOrxcGB+FakzreOmE\r\nJCyVAjvlnw9iJakutUNCjCWmnFJB8HgSqqM=\r\n=3AiV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"98de61151738b5091fc2b0e261c18efce05e87b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.55093ee1e.0","@material/base":"15.0.0-canary.55093ee1e.0","@material/theme":"15.0.0-canary.55093ee1e.0","@material/ripple":"15.0.0-canary.55093ee1e.0","@material/typography":"15.0.0-canary.55093ee1e.0","@material/feature-targeting":"15.0.0-canary.55093ee1e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.55093ee1e.0_1680115756805_0.5303291201452338","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/form-field","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.0c53abc81.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1314f17a99cd2ffb4d911eb2165cf3e7db8ebdf9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.0c53abc81.0.tgz","fileCount":35,"integrity":"sha512-fBHa5dwljXS6picztCgOP7poDpBseeWf0bQeAnBJqkMZSItZFR85kr6byiAlMSyVLnVTV39dT5ZjatLxOo6vHg==","signatures":[{"sig":"MEQCIGWu7jGnYkGHzo2BUq3bU/uvO5kP1I47krKpPW05ekQrAiBOaEZibSjG9YDergowUpTyVinbzr0+RUFKXQszwty45g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3TOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoT8w//cMUXpfevbIzY2FI2V2Hte8LXXAb8pVUD4pqjADtEmRB2EaUC\r\n4w+g4n+SxuqwKnmfjDGb79O9chw1s9D25k7m5JYcxFGIKq4NCee7AnFmQoWd\r\ne9JVpHPOGwm3uOs64NghWhP9d+MVG4ovHwRlXsvltZTubZ4hG4g2PbanGko4\r\npZUdyolp6lnbn1aBmNuWB+IL73X8uY8AGIOCv7soSZkKlK41OBcY69mLcgRX\r\nmqh1z2aXWeL3onZA1vpi74yknDBxpUpmJIsguLJtoLwGf2DeHX3JvQcUaWk8\r\n+Qm8QC2CRfzv0MPHRnSLXai0g0b7zk5to+aJDC+pPDPG/HwqL6opVTPV2o9F\r\nBM7V6f4WKrn3ghgR01lS4YlXisrSITGEIeAK49BujdYao5Qu8hmW/jNuB3mY\r\n9NzH1cK1uhouI3wYAD+EMahkHFyUAZVILc6js1pMwhICtCiJHcYeQSIy2XlO\r\nYGUxdQhLqh0na9Qr/UB7rGeIwPxo13x4nrOjmRa6R8RJJUla8YYxuXuM4w4B\r\nfboB4DvPUs8W9Qftc1HCwE/6uWC/T2dAyIScX7fLL9cqtFfu+x/RB7fFoxSO\r\nx2s3kS8mCTUIeoX5rhPlR/bOcM78oGZpZLcaF9O1sDpObCUvT6+WqaS4hy9r\r\nFTsx0VGMr6XlJioicG9XHp4yWegdS+lzewY=\r\n=FDmd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6f7be5b2317c28dc06c5b0bf4a8cd44df591750d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0c53abc81.0","@material/base":"15.0.0-canary.0c53abc81.0","@material/theme":"15.0.0-canary.0c53abc81.0","@material/ripple":"15.0.0-canary.0c53abc81.0","@material/typography":"15.0.0-canary.0c53abc81.0","@material/feature-targeting":"15.0.0-canary.0c53abc81.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.0c53abc81.0_1680831693781_0.7830252635439761","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/form-field","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.51311e69e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"51ac67a6efac2a46fdd18f3b57890581211c392b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.51311e69e.0.tgz","fileCount":35,"integrity":"sha512-63OyYq0sGYJByN+L5WJb23wlhBdGD9gqjcp+HcZZPElF2+0Rd5lG9LkDGz6qKBBkfbMv1oj7obkygHTAVomVDQ==","signatures":[{"sig":"MEQCIEkBXdfx7J7GcIK5N7FFqqj8q2el+eoGIO71iAYmMrcfAiBWcJ2FKLHqAu4DCf+BgAbsvl4Ctkw/9DEdD2JN5CmXSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFwTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrozg/+NIhlfNWPUzcvPp0mJsd1ySZryNmxQaqxWWLMJE2QFwQv+Bzv\r\nqH4MWPu/UpijE/vepHvU9MphbAlvLWRQP5LzLS7S+PWgL8l5kpzWCIvj0HEV\r\nL2wXPaqZY1QAqcOOPTI5HAADxdZ+P3YcxjA7mmOED/N1tqSuipvve0YEClVe\r\nBoZ5+3dynehsKuVKMw0k9ok4u0rxLf7Rr5X/KQKEnLujlQAYmMO5hNwfcnkS\r\n2k0TMa3De+Bjr0LgiCwyBBC7Emw1tKhb+QhEPiNLsNcHC1wJKJRReXBAosXN\r\nMxbFEbhfgTQ/5/TdKwdpUB6Ik9oCZQPB6rFl/PAU2An2S4XgLE1qReUV7wzJ\r\nbhyLQJ9mgDWBYG2etektyszNu+k4IUl7NQt0R7x3KGxIC7nhH42s2/Nwj9sl\r\ng26S/loyIRuoP6F7Hy/k2ACaykmWO68jjcQQZxRxdLBOEGFC4cjEMqVPxqUj\r\nOdGBVSHhVlXFSzt0QiHsLuwEakUJA495yRh/ImliIVbZJ9gzB9xyAmwcIs9n\r\nfjdu0v6g6N0mQDiKHOVJvNy/W2C5o8fxmA3H3H/96olIjs27xF2CE4JAkr2X\r\nftLhVN2dO9mj3rMJXiIj/4omsRCYd1AXY2cNMlDWwYL10HquKlyfy11uHZVV\r\nfaMw4EejkO3CECpxTDF1iX+xEx1A7IQkTPM=\r\n=+CSv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"20cdc4f9c3bc9046fb111c8b65ba3e9609585dce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.51311e69e.0","@material/base":"15.0.0-canary.51311e69e.0","@material/theme":"15.0.0-canary.51311e69e.0","@material/ripple":"15.0.0-canary.51311e69e.0","@material/typography":"15.0.0-canary.51311e69e.0","@material/feature-targeting":"15.0.0-canary.51311e69e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.51311e69e.0_1680890898815_0.9200836796342424","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/form-field","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.113b1a38e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a11aa5978a0cd8979a8495a61b96a10c13e12bf","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.113b1a38e.0.tgz","fileCount":35,"integrity":"sha512-EZJck30KaVgulyhrctBiq2kttPVovd0o3AiASGeXkn8lZ9+/TDtRXLbe22ouQoC+MHMUnJAHb9wF2iOV3jb6sg==","signatures":[{"sig":"MEQCIEHISA+EbGu5vSJpZg5to4hq4EDAzidKsUgOLbhLHOdyAiBm5YcUEteBaJuKekxAfLz6Qe7pbDC7i59HFou+KNcm2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIWEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2KQ//aOgbxq0DdMlT8RCfsTIJ0fWeHCxXMfTYcoM7kI2N2lAN6dzD\r\nI5hDBogyxTDvy4l/Juxyk1ACItQxRNz+V4GRA/QIUVmqpC06aHJ7AQTA/9yf\r\nSH7QxklVvG3hks/+LOM96n+041vlxoMkuSweVJSM21sR7rdJhF94iKbZMv9m\r\n8m0/8W689mAqVfddCQK7IXJuqYCjH3i8BMzIKs76E/kOn0zBx3cdAQ1tEGUc\r\nsGNNJ+ef6GQ3zuzO5zUNHpjzrof9fYAoML/FJRz7M8dTVcAXnEndEONa4Ash\r\nCmnOBIxMLCnNItpZhwjk08XmV54JLP25TCbBPdhx7dCIWCNUDCno/Wuw7QTh\r\nR6kRdAZQ13PhSAZGQmT8e1OrOBeWfaYjTlLTrTD0/Ez5AbZsTMYe2fKW5Ebo\r\njryxa/z1kyacqeRkOQ5NMnJ6KnlQ/GvrNje5Zu0VsDrMdTE1F3Nkw7MIIEd3\r\nxOhKcfUiowVEngi3l3NfJUcZVY7XLekHJDfcT5dJr/C1rzk7fhdpAPdLpjTg\r\n7szxDvjl5SLFcsvNo8limSb0OGuQy8a7dex8AxLBUkp8wQ3OG/9Odyv/4c1l\r\nqYP+HbuDhitPgvlhwiZM+YHaYm2fW3RiuNOJx1E1TkBo+7KulvNtS//ym2U5\r\nTN/YArDcwxxl1DIRi6DiknDuK9aqI/gBMjk=\r\n=uKBv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3613349b6481f716239e1a73c710c0d5fe44df72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.113b1a38e.0","@material/base":"15.0.0-canary.113b1a38e.0","@material/theme":"15.0.0-canary.113b1a38e.0","@material/ripple":"15.0.0-canary.113b1a38e.0","@material/typography":"15.0.0-canary.113b1a38e.0","@material/feature-targeting":"15.0.0-canary.113b1a38e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.113b1a38e.0_1681163652627_0.7859278525108078","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/form-field","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.ea2191426.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3ad5f679dbe91ddca77d0a54aeb6f2c3ee23c36","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.ea2191426.0.tgz","fileCount":35,"integrity":"sha512-xQN81amN4nmiLHlqnJzrYKuIkcXLLqxJgoEFM4DXLA+tC3OpCEUo19p/x9HHVN/R91ID8nkc6Wg+tYsetm2BxA==","signatures":[{"sig":"MEUCIQDX0WXeDSMAinTZEJJBKicvLUUGnJXGskcT8+UM8nI8wQIgHVZevY43eQDPFTaKAQoqIJn2gUHb5RXtf7/KZOXRGF4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNddnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTthAAmJJYeJion6VUCEQjV32lcS9kLJAHtPz2SsViMbZkTXEu7eHe\r\niaPy7jwnsuQaUpu4fFVTcR4RKbrTeRsWcQ9p29AfDNyPClFBR4MFW2aWUIT5\r\nvJxa5dNy0bderXvrA4i7P8ByqyCCXyllJETNl0PetD7ZyOtV5EPN/pDPbG85\r\n17KikdyZ9aK1O2C/4ojY3LYAmCbgJjrjUw7tE6B4w5wgccuPQAqq0i7inx5t\r\nn1Q723jzDmrvuP4j4Pxbzcw/N+gnRlrENkm0fucww58NG/FCzIlrkG4/KTv7\r\nEfcT4cyzSCrd6aqG7Iayzibkymg/9Gim5k7DcJkOJBPH5taPgnUxtT9dj6Bp\r\njzPtR3f1ph89XjzHL4fjBDQde1ZkqHb5GI1dXM5DwQJ+BeuQcn4mvXsFu9CR\r\ns/73B/yrXXUU4eTPRjj4PsQjwLGvbUsen098ZOYYG+NaYL1jzeXAEt40Z8Cl\r\nX51Wuvwvs93bW26zguaZhtPNwtlRsFQdnVVe53+0Czq4dzNNpo7bZN0rZcvn\r\nEF/r2L/+3NjKDGdaKi7TE6C4jckgqWcewQY52f2q6j0yfWR4gI4qCNzSvKMd\r\nEF/0d9jyIMxRygLBor7MLmF5gTo46JHIy1wz0QP5FsEUGa9wZml6r+QIOKX+\r\nu1lxiDAdFzl7IK1xifabPC1k1HepdZs6Af4=\r\n=aYOP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8723a8c5fa13530d57b1651464ec28e9ed1d4bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ea2191426.0","@material/base":"15.0.0-canary.ea2191426.0","@material/theme":"15.0.0-canary.ea2191426.0","@material/ripple":"15.0.0-canary.ea2191426.0","@material/typography":"15.0.0-canary.ea2191426.0","@material/feature-targeting":"15.0.0-canary.ea2191426.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.ea2191426.0_1681250151431_0.46556268159133496","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/form-field","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.5a5c38538.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9f85015b2c564e068e12ca12b6793f2c096da92","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.5a5c38538.0.tgz","fileCount":35,"integrity":"sha512-XmobayBWyZJ1Byd332JOhQ4gdbMkvVOaqIVhiUgasUoyIsz+uLDxOFmNcT59gGUXF6zDevYZsTfZoPJNvCys2w==","signatures":[{"sig":"MEUCIQDBxYqS/pdSGw4j7OFpe7fZSzuEUC5npO/3yZJv9R8DCwIgPvCm9zyZRfTmT1x3oSfgl53+UIEXYmVVAfiXkTh5Ltk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd+VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrtDw//URNOnj/wljs2gswH8F/C48ej3r6vEZsAq6hN6w48CLWdsOim\r\nG7vPqZixoC/EkHXT98uRQ4jsLyc0jd5v/jnOLX2ohsG3mXxmFDV456fIAr0b\r\nXRClhw9CFgpvMAS0bT/5TfuT8N7KHi/3u3qFCwV6qRnzrRsFR6xzVQzciwqV\r\nraMhGrGniAwh7+1Lr/iu/FruTrRjO8T7GtpnJRZwixr2GNhwcCU+x8dTE77S\r\n/HB/0efaW28BUEvVNC0WFZ3IAPVZJtVq5rh5Zv2znYaiHyqldgm7FZX9Oj2o\r\nFQCXhXdMO6I34PQotRnY+f7LHzhPmoDR3NoowLUFS61e5cb2o/mxpSt+t9jy\r\n9ZwQBxy3+tyBdc++Px7BnK8Hq3GAxvSmhJ/zm5Tug3TxukyNzD4ku+99p+Bm\r\njwrjv0NfOL7Dy0MgtqrUAqR7Zi0g12uLDIiXl9aGVIZR0ol1t83OrqqbRzR5\r\nzSPmEmqP2d7mVPokXjgOIW14C3nfhXENOBwaKZvpPI+nNVmq4JHSCOFXNKQP\r\nQfxomoPMQFh4EHNTycjEVyqcLYAPoGGrSpTcHdsl6FMsoItbOs/STj93QATD\r\nK7dtx7qxPSZbTZidgN9d/z2Q1lpmuY1lMBYirxe+j+l2NIByMptPM1mFNTMA\r\njes4ICZ6mdQba0hqhPIKPukeOPA0lo5sI6c=\r\n=Cktb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b05f00c0040fd0d1250297d4fa4236a5b6b00b9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5a5c38538.0","@material/base":"15.0.0-canary.5a5c38538.0","@material/theme":"15.0.0-canary.5a5c38538.0","@material/ripple":"15.0.0-canary.5a5c38538.0","@material/typography":"15.0.0-canary.5a5c38538.0","@material/feature-targeting":"15.0.0-canary.5a5c38538.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.5a5c38538.0_1681252245654_0.5588247021313011","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/form-field","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.e4b5ea7eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8507a3800e6cbac1d1e0cac5acc222852c14c985","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":35,"integrity":"sha512-/6ocRcIAiKXf/wIZ+uK7qqzb94+8+NpQrLj+WhY+cz5GP70L+3yFhQ/Oa2TKKt1pcOjVABQ5+Mnx6aF1etrD2Q==","signatures":[{"sig":"MEUCIQC7hJyw0S1KEptvKbOMRmlyScyRqXILYNJ9qNlh2OfSDAIgB7xe4AOtl4lh9hhKinB4vL5ONgGpmyDb5ia+Thdrx3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNeeOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2tQ/9ED/tWO3yG/smqB9/8RAPald3//BrZbULGLnL/o3u0ZzNa5Yg\r\nWMEfrPbpcfXM3YFNKBy/vrBqLq9kYJhF6BF/324LVSFhyE76QROISC2nlf38\r\n4NwKDnLaRP9CLAjMIHrS+HVvSYmiZEea2zvZw73O3buJChZ424mDgtUYJxSV\r\nEj5bJAH95F098RlYASQ0ZvBjPuTTby80Ffcwc6HA/E2j/zIBIQM5TDNiSjNS\r\nGFu7FII8m+NnmpqnmLnp8WE2EbZOB1wxZBoqZFIb3WKpYtYDqYFLsArDlsUA\r\n1qhTFvwWCDFuliHFY1pyr06muKXRuJjJ+klR9xIPu2dhk3CZX0FWM0zt7v66\r\n/abbT0O9+KFk3VY0aUpq1/UmjeAJkNUsBBK5L8A7Ks98gJgJjToHq+OgimsR\r\niIVmMZmMXcm+tecvcBRjQ197wPPx0+GnNKNJFf/CmE4L4zYNTXGAeFKlQ3i/\r\njS1MrRvL1sAS/9HBTg0/FoHqZ1qJQ6M28fTaYifAGU4K0YciJoBc7qw3+Feg\r\ntqY2ki2V9BxhKzXMvchCznFL0W2CgBbuSoW5q1uem/Wz5DqpdAQW93FGTGAU\r\nGm2KMpImS+S8cavKoK036a6rjw3z/qpoYLlVGTxOdBeSg0Ud9krYxP6JI1UZ\r\nW/s3UgUONrDPi3wp3/rlzxPG5DIoWzgiKfk=\r\n=S+ej\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cfe1a97277f39a7f96340673857504470245556e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e4b5ea7eb.0","@material/base":"15.0.0-canary.e4b5ea7eb.0","@material/theme":"15.0.0-canary.e4b5ea7eb.0","@material/ripple":"15.0.0-canary.e4b5ea7eb.0","@material/typography":"15.0.0-canary.e4b5ea7eb.0","@material/feature-targeting":"15.0.0-canary.e4b5ea7eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.e4b5ea7eb.0_1681254286379_0.5481043937119272","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/form-field","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a094dd9c1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"873f8bac95b1e755abe9122ec12b1a29786f9bd1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a094dd9c1.0.tgz","fileCount":35,"integrity":"sha512-U+Oxj3coWVO9FGh6AytdEeOf2sA9IU0IgClQLR1xHSuxILZksYGPALaki+ZRyg+q0b9eV1pxct3Z7Q81bRWZXQ==","signatures":[{"sig":"MEUCIEl3g2uLxiep23XP5ls0iCbxWsgZwU8/kYmVg5P5XzBmAiEAjKC/24QR9IwpdRG7fGWpvwHPhqowAe116jdW+bS9k/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdbvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoG4A//eHQu5bN3VcwH96nOcQaIleMzaLlqHM5UBZ6vlaZzirs/Oore\r\ne+0MHQPNHMXIB1DmnYUgp6kQzIZlwjxBdBkZtHyAp58hYaz71CCs/USmws3a\r\nKXMaP12qi+yBdWt2leTTX+EHHyVEJW5f4l9BAVj8DQ5mqBXVBRG+Hhc3G5Cx\r\n/C7BOELphstguSKg2lw+1XOras/NUWODXYz4a7tLA+QH7i2P1YpM9pTvxZdp\r\no9Q5/JZHncPfSrCrcJ5hk6aQyIWJ6jjHs1emaUaK4izAxkteO21s84OOvw+L\r\nc6ojOAI2kMVAA0KxuE6pCIGv46qwvzSHHFUtko56FELAlQneFyE2clPAGqBM\r\nPK+T/YN9sJc5quRTadowwqQp5JPlMVSU5D6hP9QWIaTQfkqA6llvVKXiapSZ\r\n2SrXiiowsTCbqHU/Bq/L+z0vPw2O4IPllwlp11BRbQoh4wLBQRrpf9pRS5XJ\r\nVgF/3Bvf8EpDHshxreYeQQr0+vjlgP+/9AAHV1Ji9oLusYbw7RhDYEMluVZ4\r\ngApu9Jn7rEG3BKyRYdz2Y9mobJ0hqUg4sWen0HnG8I+6iTVyvIg+OaCpLu5o\r\nJ0nL52uoNsZobAYhQV9MTbRteGffKR7uYYb1Us+chu6bjcA9PlqDDxwgCqd6\r\ntyBqHBckZFi1M9yN7Q7cXDNodP6SK3bx2Kg=\r\n=MPQe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"aa5164e66f4afe6547ceeadc8a793bb4f489ff5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a094dd9c1.0","@material/base":"15.0.0-canary.a094dd9c1.0","@material/theme":"15.0.0-canary.a094dd9c1.0","@material/ripple":"15.0.0-canary.a094dd9c1.0","@material/typography":"15.0.0-canary.a094dd9c1.0","@material/feature-targeting":"15.0.0-canary.a094dd9c1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a094dd9c1.0_1681512175440_0.7758816183360386","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/form-field","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.f771b091c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1efb4dda0efe660d55fd1ea75472cc6e0b5e230b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.f771b091c.0.tgz","fileCount":35,"integrity":"sha512-eRRZWARKlmrmU16dUwW59cn40qOE04tYxWDI2GHxq5o+04/N4JumFp666d6ZvlGsE94Blk++TqXscpV7TRs+Og==","signatures":[{"sig":"MEQCIB9xPrUvs9dP67ZK+Eg2P0iwOpCYPdlhhkP8Wu5SiceKAiAYjpbjhgAVZ9sT1/gp97j0CcuPsfwlvJeL6thz0BxC7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWf/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/9w/8CMxWW5Zr3PA0+Dxi7HAOvpIW+4054plYpWkJcP6sdSUTJZzU\r\nCQFqSZznlHEJD9JG6vVtgI6GwC4be/z8hOtE3CWXDp5n/1FWGFieBFMC/Cz1\r\nHgkyUU7ynWnNBAnRKuL4NtxKPIv60qrV4jzAMtShMWobU3zsznaRfs/FuTJD\r\naRWk8lHWWs5s2hYNpuvRpCDYniWL9YDa0nyUD3pSZhSVvxDhDsIdhtnisbzq\r\nCwMeg8EY25cGYkYxPrrTQ74DHTiQWZViERP89EjTQXfqSSFE97nbhWh7zzL5\r\nUdXfLNAnWmHVJP5Sqn5XqUna3Xv12QtcQqKqVZUne6Ykh8GCX2dg9U9lXbDG\r\nazOrcOvfxNHpBUJQDJ8+6pHIhg35YtOMfkA07D0QO469WlwIvhYzzs97qbf4\r\nSWCBEXyl7l9seCAvJjyl91N0E+Cb13Iz0oO5Xc3liGDH6KgclY9E4ZzcuOoQ\r\nkggT+Nu3SE/xt4cmWOb51KjdngCucVfguXNY1M0/hlebUvwl5KzT3Gt3NuiM\r\nO9TOHHXN+iOO4H2mngdiSkE90+7CbplAcE7BHyVZnPGrI67w/BqY2Hak/eeo\r\nyn+hpjbypriqf//FYoF5lcKOlds9Av0NSCaATLaTiiDEt0WhjrTgE4iEefn6\r\nJ1hjspAcRWTv+NG6JmXW/7oV7d/7/ISO7Yc=\r\n=AKdv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"de0e292c8ebcab887041fc4a59b3c0172f4d4310","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f771b091c.0","@material/base":"15.0.0-canary.f771b091c.0","@material/theme":"15.0.0-canary.f771b091c.0","@material/ripple":"15.0.0-canary.f771b091c.0","@material/typography":"15.0.0-canary.f771b091c.0","@material/feature-targeting":"15.0.0-canary.f771b091c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.f771b091c.0_1681745919360_0.07358943509406601","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/form-field","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.79b1b612b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b0cf6e74232b5c3d0c4d888989da779880c0f5e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.79b1b612b.0.tgz","fileCount":35,"integrity":"sha512-pj+vqjV0fDzgc1fKd8dUvxnTh4TazctRhDtCftaXYNeGK45dlp+uPknlEqnF3xoReiAb2mUy+2G1se3cz2BWqQ==","signatures":[{"sig":"MEYCIQCsGdJa2udQ94j5TelUJfshEcUYPu9aw3ydeBkR3UDH4QIhAMbtr2YIeTivSPuYbunyuCMAyjp6cmJZ2IpHwLUNcQtB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHvmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoI/w/+MHWqwNeehHXGvfm9PEaIHrA1Pf2DsEblr+PqWQLmaUHvZrzm\r\npTjo3BW627pENWjSSI/CHTSGcFrKEJDBQ+jWRNaSFHJpXlnc3XupFPx7CY4o\r\nJfqw0+o3eKf9gVkPz95vEpN7H8QF0wqZVvo5ykmxHnoxRPifLEcK0/roXVpb\r\nT9f5wZhXKfIX2XrlFtFJLqujLc7MkyXEOH28MQZB97ed1ofH3oE/fJKlH1km\r\nu7YEkwzC4oYRDYcji/k0KX7l8r01efCPE1xQpC2ddwIX82cvEjQdD+mF2O+D\r\nrZgLNFQbDwVLmkGXHFeWVR9ogJF3pE4mcry+rB2fXfwjxqnJcO6wkesUd4pj\r\nEMcpldbfiQo618JUa3YMdX7SLBpwUi9Z3HPmv5zqHDAaLZ8ThBaCkY9BQpjy\r\n2SsimFTYyfG+ZwcO2afLrCaS8Lc0mSXpTrYQCDQeH8tDJGIMFVMTbzMjpS4Z\r\nsgeanRgXvBJtiJjXNLwTOEyLak5544EAEuWT1e8ehMDtYMUtG9T5MqpteQEu\r\nOr9Pu5r75V0l/CZ4wum24l7/xohkC9T7aSAfTM7Lda/Xi1Xs/m47gCVtJnC7\r\nyXn93VVvFmLA1cLd4Ltv2BcB6/+hMiX1X59QTa8xk133Q2qciS4lo2f2It43\r\nXIiVBVNJWtpyx1s9UNhbGox8ZZokm/iKyeA=\r\n=rOMw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c8248a1b49ee37b1782b19aaa49b5626c914916a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.79b1b612b.0","@material/base":"15.0.0-canary.79b1b612b.0","@material/theme":"15.0.0-canary.79b1b612b.0","@material/ripple":"15.0.0-canary.79b1b612b.0","@material/typography":"15.0.0-canary.79b1b612b.0","@material/feature-targeting":"15.0.0-canary.79b1b612b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.79b1b612b.0_1681947622488_0.6756025382733046","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/form-field","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.6f50071e5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcd393a3e7a21cf6eda8f77f1e365fe3e90034c9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.6f50071e5.0.tgz","fileCount":35,"integrity":"sha512-pPl9bRccarqaldDxRy+JqN/cWttlgcVfgoiy8VWGFvhYbKSv1/Z9LO7fGGWIc9UzhaNRpBPifOJmRpWH/BhOmQ==","signatures":[{"sig":"MEQCIHhW99EYQMLuJGD6GNXpW1gabVdrW2P/vl9/EyQmrNYnAiAHArJf/eq9qPb/fNMW0pgsI1xuYX2/19qzS4IhwZW40g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX3kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGhxAAi/lhILC3QIPsIVzDlI4U8GQ4KXY1kl2jJsoykdVhBqJCxHrk\r\nzyNTngKyKCDXvU6TeXezrEuVRYPFP49CC1T+gdZcfs1j7V76G8u4cEfuHQKk\r\n6ch9gxo2lF+VV97jE9133OFxkmewozNx4LjDZOEqzvgyqM7mXdLkCKhoY9JT\r\njUJKrwBMUtL3wkg/9HzgfHMIMQutdde3dA2eYH2dLKOkL5TTA+mi+SanITkp\r\nTA5RwcHZfxd1npe9pRstL+CryYZHVNcM3P1sGxnE+L0d0GZE70MWfwiNPbfx\r\nNXwNGTEdjGGbs6lzP4ij3wpyaF8qsRXR5/9oObwmJWgQIFLN4z0VTqLFsIlA\r\nJJvdlF0KASf+ku6zcFqgQ9dLbMnl+NhwPSYEBCu3WUIvE47Ko5TRjiRjcg3f\r\n6YYaZrpB67a1QYIBPwKAXdxORyAUlOPe+fFuLk5ichdF9VXyEWRQuI85tmYr\r\n2zOztriCG5egoDeiBghfeL65ydxUZ1E+AIsItKQujKHR87vaHXYU9WUAdQgm\r\ngwQB6NSP+HR3cUFRjTA0au8wY+3OJ4TwDjQ1sR0rfXjS7wCFAyFAwFCyiFyA\r\nx+3cpcRYWb7js2K+ZhqR72t4tg+ieUAOYIkP/NWk+tFk+ad8WSHvNpCvUjhc\r\nmUo895q4OJK50P8xHOBZ2h1cEtkURsS509M=\r\n=rZYP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0a5eb7e7a96b7f207546983c0f79d6fdf23f5228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6f50071e5.0","@material/base":"15.0.0-canary.6f50071e5.0","@material/theme":"15.0.0-canary.6f50071e5.0","@material/ripple":"15.0.0-canary.6f50071e5.0","@material/typography":"15.0.0-canary.6f50071e5.0","@material/feature-targeting":"15.0.0-canary.6f50071e5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.6f50071e5.0_1682013668036_0.44620319681005594","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/form-field","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.ef754381c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6957d5f43306e2d8e3a54debaa58c0d4f973b82f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.ef754381c.0.tgz","fileCount":35,"integrity":"sha512-Hi72Uz1s4s+VZ6Vj+W5PzhpK3ARQe/c6h25kcy1uSUXzj6T014fO6pFwoHjKrXVJP7X8s3IoQk4j7rJ6JpEL4A==","signatures":[{"sig":"MEUCIQC1hZmA9SXnsRion1/Tlm7GLJ6riZjGMPEqAX4+KgmoEQIgAPnvCNDpOgL6Tc1Gnb6QRuXlZJn7xBoQq7PGzwGT9aw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuvKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoK5w/+NBtT5+yzpgg3ELdQE3Ab8HxPd8B/utVuLapgw48t4FSzvGPY\r\nTnwSFke2nX6paN7Y1FW2b1/hGK3DshLsbgRRs7uKccb1Y3+v7vuaJXqL97Ze\r\n7mA712PeWE++KwyLLAgk4mI3VtcUuh81qWnwSlkPTwS+z06U3kVgZd+Y96M9\r\n7KPGhRJUr+kioJMDuCjyUeWoi02CJN/Hh04Bn4QxdbqX9dqoylxo1OUeOi0v\r\nvk1F3GywsLVJTdjZderMm3vBUzJHKtp7PehPUiYKoQ7I2p181Ecc3vJ8foLm\r\nNqQnBTLv0uilOYx5Vz6gKbE6e2U+3Tvp+Za0/rweM4QxgoiBRGg77VpcWxVS\r\nHaNmWAJRNrSIbmQrAU/9DFMUu8piGIo1i4Erz8E1zoCiyzWRVmhPj0OTY0CC\r\nMfgiga65+Gtbg1SL61t+MFQaIJSAiRKxlbyuV3cJdPyZbln115jE0MnPfSKU\r\n9ORhXUW8+xy2VaTkrEG9NjO1erCfNr+DYznLwzOLo2LtGpIoHltqiMh+41UJ\r\nfvwSp4v3i4NH4K/ehX2EwF9nz7XwTOeE977Qq939E+H/xM5MEY3ry+wmMbl7\r\nbcAx+4RTKG/Kzh/saBJuqjLtN0+6nxHEpEiJXeleZH8n6qqolm/jYFSE50vF\r\nRhNdI8+6gAR1kFo1Zqk6UkojvZfU5R2C3l4=\r\n=l0v5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"998bb9432e40056ce6ec836100d9a46f72ace249","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ef754381c.0","@material/base":"15.0.0-canary.ef754381c.0","@material/theme":"15.0.0-canary.ef754381c.0","@material/ripple":"15.0.0-canary.ef754381c.0","@material/typography":"15.0.0-canary.ef754381c.0","@material/feature-targeting":"15.0.0-canary.ef754381c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.ef754381c.0_1682369482010_0.9526853839418548","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/form-field","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.69ebf61ea.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4ab6679b7e48339136815330d3ce19eb7d00c3a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.69ebf61ea.0.tgz","fileCount":35,"integrity":"sha512-nFqqK2xDyCpQLTAdEe8Gm5SobzFNVvwXt9KIEjiA2ww/T584vLtykhdXcvxVyr8w6tlTsWbaZNwHA4HbYTQyVw==","signatures":[{"sig":"MEUCIDH/AlG3mZ04WKzkHea2Ot2vabcK2bK+NO4lu6+pHRaLAiEA0UyK17BPIL1R/IRnuqmfP04gSF2jRZKFu7Wpnv4PTJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq84ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7OQ//UU2aQ/qXQWLRCr+LVr3WIMQKwTYGx8oRvIrMTSoPU3TEinvp\r\n2LbFQHimoyN1Qs9pTuEsTBkvLq83g3DFR7U55qCiDDs8XYi25gmz/FW9Z9RX\r\nDivq4NbJM/oUMvkFUXYzKsP2MmLKMbdff4PImeOeYSBTKpm+9c1gCIxFw7m8\r\nVj7vgkJUV5AFm0mg9MlCs7xZ/H/Ll1jKB46xlPCv75YNd46E7jJ4wIHzABRT\r\nbtgP1JthczPG2XowreJhPcoFo8mNMYwq5l1Ydih880JGOle73EFEA7OPviHE\r\nySdwVx61nOR4btBq8Bqhc5COgQgeZlyHgzTfKreDQMDQcACmgCY1HgcHpIwr\r\nLU2egM9c4Xohbw7HeqaNLhjWZ1yWJ5FgG2FEcUJgaZrX+0t9/Gr8IBFvhzOg\r\njXYjUqGXsAi8oq9OBjKhQI+D9qVEwX6NH8jxfxyeirYDeWlDmVXJ9ikACB9w\r\nidpl3+Kp2fxB4VCx/lVSvWPdYFSC24GF1XzbkiWK+clEj3fdTKDaeSA60dSn\r\n2Rx+SaIaJqbLLIE+DnzCyAwi4aADdxwZ2wF1wci3QeP/a6TXV8hfr2FjpPIX\r\nff745n84NDBVb9npw4Ge0g7PvKdUKBNHy1gHFB9ECNI84Y/f9bl8chx+gQpd\r\nVlvFNA283QoQANliiYZOi00LaBPA3pFDmj8=\r\n=z8oZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e68ad025642429a51f137e9f3fc853364faf0622","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.69ebf61ea.0","@material/base":"15.0.0-canary.69ebf61ea.0","@material/theme":"15.0.0-canary.69ebf61ea.0","@material/ripple":"15.0.0-canary.69ebf61ea.0","@material/typography":"15.0.0-canary.69ebf61ea.0","@material/feature-targeting":"15.0.0-canary.69ebf61ea.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.69ebf61ea.0_1682616120053_0.3901144122316518","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/form-field","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b90be86de.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"04dfd3580e50213d0fa56f85d5152670f9e230c1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b90be86de.0.tgz","fileCount":35,"integrity":"sha512-16EtRWlJUP68DBrCctL86Ag8YnVSqwOhJEzHD0nttYFvwUecqg1ToZk0ctKq9sflWb38wtVkEKoiU/A4W6vR8g==","signatures":[{"sig":"MEUCIG7pdWM59qMRh335NseQSxI8tyf0u1CHw4kxDbI39/4FAiEAzsiyEarYHB3gH2ZKQwK2P3J2+dZ+WFekHGywhz4i8q0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGMrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHkBAAmjorB04kSbKnYvoEjZnerJqT6LA5upnOgTl8cSHL7Wciqm6D\r\nWto0gaoULWRd1kihO3JlMOvNYWTm2TF6QN1mng7j6Cx7Cbwvi0Te8iRq9TX5\r\n94LfDfq4dwXMrK7gerBkR6ge6FiycOm4cmHjCTQWyQqPI4GMf/XitE+W4cDp\r\n8hPFRuXGlOWUyG9EE7b39YmcfxZoC3OGlPdia18KKauaBStj/ETHBZ6KjFhX\r\nXkBn4maxCnjmgXtXh6C7Hhm5QAFO1kL3usHULhdW/sRnV5O3qTxSlonPaMCc\r\nUcLs2QOBmlRkJvQPATZEerduqTJwYNsHd/d/Xolfiefs6+/ndlDz0xV5c+0g\r\ntuGKCmuvLXWnJXBcYXeI5+FwoAUC17gLCX9g2P1id6aeMgzYJ15jpVrwfdte\r\nvRegnOeRDqR0Q4gb8GTdASrTPkIMAl5LXBfyDPwgmAzKk/goK3iqnQnMC6gG\r\nvYF2ub/XRsnAh3M2Jcd5uoeLq+DplpwFRdAK8D0s0n76G/eKruiJzi+vGxqe\r\nobkRCAGMX+Jkbzci9aWPg7NUaZW1mvMLSW2CYQwWXv35gQohgq0680Y9yk1e\r\nchc0Mn+OjonLXETH0lTNG6Fp3NzAyrDbf2SglRTIkvsRkD4ELUvbhYEVRTk8\r\nrC0DqW5lxT/RsnT4JVRSAQgqtPfn89Q+3e8=\r\n=3Ono\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"903a4c00d6c4501b4eae8ac0007164ef4a97ce0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b90be86de.0","@material/base":"15.0.0-canary.b90be86de.0","@material/theme":"15.0.0-canary.b90be86de.0","@material/ripple":"15.0.0-canary.b90be86de.0","@material/typography":"15.0.0-canary.b90be86de.0","@material/feature-targeting":"15.0.0-canary.b90be86de.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b90be86de.0_1682727723691_0.2701100173876927","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/form-field","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.51f9c0c28.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a62cc0120a9ebaa73facf60681f9fd22138f4ac2","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.51f9c0c28.0.tgz","fileCount":35,"integrity":"sha512-sHn97Z9f9YUioeGve/EANIAqddH4YslybHbFTMFx9AA4CyFITEXuNI7GC7J7BzkI10rcjmatWUGx0JRal1kVGw==","signatures":[{"sig":"MEQCIQC1YXJQT9XZooz2NIrqTWLriRDepkxazSAUycDjb2B2pQIfCN9uqxpcX98TvJS1PAajWqKD/jJ5SOnVfBcxw8i4iA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGV1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpycA/9GLxs77Nx2NM3yKDABBGiHFj0G5FzViooxDnZNTNpWognsmro\r\nIC0ut/krTtjza6UYehENpiU+BltHPv26EOM9QQ87sagqST2INKcgKSz2bvEe\r\n1HyJHh8PxLKRoWy5lsbBVJRLWwt2KJ0dqAw2Q52v20ErcNXoOYOiIZH11GNe\r\nB/nNp2Gr/f8z8w8W/SaM+N+pJ3uiWJSmzCBP+kxAhCJdnspLDM9tRH71pDma\r\nkibLx7pnynnn02tQ7Q96Fo8khcaNd7YxoxBJb6/9Qt/UeYn3oNrkzyATou0E\r\nOyQrWGhOf6PyuLSBs3qw/j5ZlE32CL4eBnXjAwKb+CN50ehUyxKwNzBt5Z3+\r\nJjv9rj3wtOmqgW6j6Vi8qoqY3rPAUCKtRpakS6KX6aLq4tNTttJ69+XxBa37\r\nPEQ1Ir0XP/fdmcXjveCGuR8H4eqY9JO8Cvel936pLwJ2ogFOSdP2sIVdwRTI\r\ntg1xo+h3AHfIS4VDbiVVNuMXCPp1X6XGgNDErteI5VpT32XbUEegHAOp3So7\r\nyiasza9j7QwsXzCYHkiBcBWjxC4P6D6BoVV1yCu+2euCenAY3lgQrsaJkxD9\r\n1MzfltriDEmyzX3bMBQLJSqvuQWY7LbL03b86OPpKUZSp3V04YRclPM8sft5\r\nkfIXqaaQCTgH5j2q/hXz4Ke+8zW9SO+U7XE=\r\n=2uAX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"87662f1719363ac8e600f73ed8a7795c25d8add6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.51f9c0c28.0","@material/base":"15.0.0-canary.51f9c0c28.0","@material/theme":"15.0.0-canary.51f9c0c28.0","@material/ripple":"15.0.0-canary.51f9c0c28.0","@material/typography":"15.0.0-canary.51f9c0c28.0","@material/feature-targeting":"15.0.0-canary.51f9c0c28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.51f9c0c28.0_1682728309207_0.5759293797780622","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/form-field","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.4e840d685.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06f4a70d2c7231ae22d356b9f6b7033c1314ab9c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.4e840d685.0.tgz","fileCount":35,"integrity":"sha512-Dd0m1dOGkMiANPHls2yrwBcNj2mU8aKPOpw2gDNtBS6yMkpmbBZkEhxXvgGrCti37DBvdzwK9cHRiPEgum7M7Q==","signatures":[{"sig":"MEUCICQ95aO1W7wXR+xYpEVfp4LxEQnoUvtWeCopIPdqDN/8AiEAqtK7iIzWQedswnuzrAO1hCguMu11tiTol2qRc2j5XhM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"feb1f9f53257b520aff6dfe5dd1a15e319e73a40","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4e840d685.0","@material/base":"15.0.0-canary.4e840d685.0","@material/theme":"15.0.0-canary.4e840d685.0","@material/ripple":"15.0.0-canary.4e840d685.0","@material/typography":"15.0.0-canary.4e840d685.0","@material/feature-targeting":"15.0.0-canary.4e840d685.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.4e840d685.0_1683041642968_0.17801936924943274","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/form-field","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.10b8563e4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0502764702a1745d91bc25aa4840d2ca64e5eabd","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.10b8563e4.0.tgz","fileCount":35,"integrity":"sha512-OFrMrajNo5FPzhaAQ3mr1VvrK2CS4WvOOnAQjqkdyzSEYhlalu1UjEq/CaSvXQ5OvzN8sSZVONm2Q+eLMfgUGw==","signatures":[{"sig":"MEQCIHxnenIijrxf5Gz3YOQkFQm2ARO6ub/17pzzHiSq1AgjAiAI++94ifjNy0R+SHiY9rsPqsfYasc1PVVw+HXlPVbHIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUZ/XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrovg//eQrOKSK5F2hOqjd73Z3GmG3UMIOM0vM11m/nUsKU0m01Dbgm\r\nGdEvWNe7OQxbpEn0ryPrK4+psCO/5N3uaVjV8vfPp3v+Uou0fzBu95I762It\r\n7CDZiMNxP1K9Qte/d9mL8OLYqypOtM3xK4zCCE1bBsgFe9sP5xmTbvFzqRNV\r\n8t89Jy3aSDS61tjtpIv8RZyR9KFPV9+9mnrykQj1feuu7KxDGPyHA3MYIo6p\r\nzmaCdNSVlhjnSW7UTIy97vd6WEhnLoxrNmsGh6PSvVnioeQGJJQCJB9BGAjA\r\nlmw5cYFWQo0A4ComQbcIQ1N0vnR4puRIpeHGO76fU1AWbtpReCj0sL6bS8dC\r\nI3DflSsLdw//b/IIVqgiHakU1dgEQ742Pq3PZ2TcfIGJdiLCAvW0t+uNljnt\r\nuU4UsfnaDCF3vm5Ce+sAPwwIQFiOP9qiKNP4o5Yv/MlY8KQwJtwSNNnHK+xI\r\nmhK5xmsU6ZgGNLwONp75D0Qd6kvcS7uFE1KqbBMtd7s0y/FOKbyrKMv6zpDu\r\nMk6h+PnbSsP4ColORfGv213KAJDgE3rKAky0pDpcboHVt6+rUXXdFBjUWf6n\r\nV/Jw1FjD45dVjxB+553XKKt0LU5ZOXNKo0NdBYcM9iZIxBWJaMuIsZoweGmi\r\ny6pFvC0wnMqwANqdbEbp1sjrtrIgRBNNebA=\r\n=ZC+S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5f71dcbe45f5245c72c0fabae0162af558c5c395","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.10b8563e4.0","@material/base":"15.0.0-canary.10b8563e4.0","@material/theme":"15.0.0-canary.10b8563e4.0","@material/ripple":"15.0.0-canary.10b8563e4.0","@material/typography":"15.0.0-canary.10b8563e4.0","@material/feature-targeting":"15.0.0-canary.10b8563e4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.10b8563e4.0_1683070935194_0.85793209071898","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/form-field","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.736b7fda4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"704ac181a27b00af7c3c35718e07934dee5fcc69","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.736b7fda4.0.tgz","fileCount":35,"integrity":"sha512-zoR7MVG25PGZ0g1Qv02nOxrIACIRt0KdyUKvXnuWJdc5pUICEp3uol6j1dMzQfwW9Z/5k0ODF7DT+7f/JxzRhA==","signatures":[{"sig":"MEUCIQDhmkR5cclGVAcURXIwAx5lCKTtsmlwmQRKplW+KuuBPwIgVZVxeZu1kVJqiw2R8XzuR2fGIbu+K8q6XMLAMOQq8Kg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnk+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQ6g/9EDiBTuXR+olGYYkOyv/RBd58s0sL05mMipXcfFc+7KvNDDPc\r\nRhXZjqHzX0fbajlqxlLJCl+GVc3vW/HitkLb7nK+JE83O/AojtQfLUPZwjPU\r\nO9z2uKHVoOtLmiZepqxJoNC2pYSKOPlDkkCgiBRZWp6RwIrJXdsAIGtC5tXU\r\nzrQ5iw+1dLqKoXxiUmhcuPAVhPtvvo//8G0P+4hMo5TS711W97J6QahIMkyX\r\n5P5ykjikrTQJwJzrHv2W0XpCq2RfI6gp4eQ10eAb3RpK9zZrhkyNe5YDrGzh\r\nfXjVy+/+uUCAoWIIkdzqx+XDdlE1H4oOG2WoNyFoY1RTUuJIXpOM6h6Tzu+p\r\nGF070H8Miechw6zotiUMvfM3YrEmaEsjVE3A9GL7SmLQa/VcXFRwGFUhE6N8\r\n3z83qfomVpfNSJ34aL/C+yqdT7VYskaGcB7CuALqAioa3CenM8h5S4sFzgRL\r\nV53QwRgFQfoZO7t0VMdKwZFU6GDEcTG/nG1oKch02PAZ/+Yo932KT39lWOtW\r\nOwelptJbHTOoP1i3WXGGalMw0tUt7d7Gb9ml2IjbY+dKuzRYzsRpbi5dRBT7\r\nNZzqVzlO3dD6bektxGc59fdTg+uxx4Vs7GzOanjtwJZow3XGrq0VTyR2xREq\r\nMRyCltmHzAeTKCaO7D7t86fMXofpC8HWAFI=\r\n=IAOG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"b9ef54594aa8f93612aed085460f035d0aba61bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.736b7fda4.0","@material/base":"15.0.0-canary.736b7fda4.0","@material/theme":"15.0.0-canary.736b7fda4.0","@material/ripple":"15.0.0-canary.736b7fda4.0","@material/typography":"15.0.0-canary.736b7fda4.0","@material/feature-targeting":"15.0.0-canary.736b7fda4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.736b7fda4.0_1683126590358_0.9788239461595507","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/form-field","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.0e533c5a1.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abe95ade7a7ca4be1922e4b95d6caca5677c24a8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.0e533c5a1.0.tgz","fileCount":35,"integrity":"sha512-SJlrc8cA7MjVR4rGr2VSWgxrohItt9DOmH7Jjpd4/H1ZqqwWDGnZFMsu7lWKVwSUXZhMb54VWMXITMHCLQ080A==","signatures":[{"sig":"MEQCIErzbz59w5LyHzp364pa13HivdnP0K6wPrZ3nGV4phnlAiBFP73FoiQ1xOQkevSjlmElBoRg7R+2LdYb57Iv1TO9IQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6b9b4497cc6457c9e92ab3abdaad626c73e610a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0e533c5a1.0","@material/base":"15.0.0-canary.0e533c5a1.0","@material/theme":"15.0.0-canary.0e533c5a1.0","@material/ripple":"15.0.0-canary.0e533c5a1.0","@material/typography":"15.0.0-canary.0e533c5a1.0","@material/feature-targeting":"15.0.0-canary.0e533c5a1.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.0e533c5a1.0_1683305808200_0.29347968346500575","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/form-field","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.5f01c15a2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6975405ce73db56965fa31b58a71db3d78eb783f","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.5f01c15a2.0.tgz","fileCount":35,"integrity":"sha512-9KRlHRUc8hS708MhZBNG9TiFrwHoLkf/EIzgdHB/g2xxk99wk/1qpo1itSqKiBwxXnnZ15Fiz4VOhqYPTavlKQ==","signatures":[{"sig":"MEYCIQDB0JIS6FO51ESOl0AIxnjckrfPR4KQChT/4WPgCsEnkAIhAKlbm1+YHM35UxpdU/XugEsxZ4TFpL872pU2OGHPzCje","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7bb1c5dfc575b36654ae046d1f4ab3b27e8c8f9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5f01c15a2.0","@material/base":"15.0.0-canary.5f01c15a2.0","@material/theme":"15.0.0-canary.5f01c15a2.0","@material/ripple":"15.0.0-canary.5f01c15a2.0","@material/typography":"15.0.0-canary.5f01c15a2.0","@material/feature-targeting":"15.0.0-canary.5f01c15a2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.5f01c15a2.0_1683307602328_0.5192752095807329","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/form-field","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.3b5b55e31.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7aae7af2121ddc89f59a9c8643d6d0d4afe3bf9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.3b5b55e31.0.tgz","fileCount":35,"integrity":"sha512-/ad0Q8udNtEiPhIMVT1XCf886McDxo3KscH6/v9OJrqrgfVYf052/VjJG4ltTl1DyblT9CVH+syXWh++Y1d6Dg==","signatures":[{"sig":"MEUCIQDXbH5MlmI+y0g4J2Ddnb6MXG+kQ8pwAIW6op6+u7BcbgIgGF6Bc4E+pfXm1UOPpbwmaeB/HCtSBxNRk3XtqS99k5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"c262d9ee39655e869886d1584551a096ae56dabc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3b5b55e31.0","@material/base":"15.0.0-canary.3b5b55e31.0","@material/theme":"15.0.0-canary.3b5b55e31.0","@material/ripple":"15.0.0-canary.3b5b55e31.0","@material/typography":"15.0.0-canary.3b5b55e31.0","@material/feature-targeting":"15.0.0-canary.3b5b55e31.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.3b5b55e31.0_1683311980557_0.044006032896010794","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/form-field","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.d0788120f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1f98ef5d95d8bac08eba7fc9c132853fa9ae344","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.d0788120f.0.tgz","fileCount":35,"integrity":"sha512-H+ECy/DECED8FoEMufjRljEgvrguiejDAgItHAcEq7BI3I0fuDbja5lSGDtPYXksZpQvNyYJQB4uXxvE0NYdAA==","signatures":[{"sig":"MEUCIQDxO9Z7aQNDWg3gZDgHl6n03qfBwUSUA3gmG9yMAx5TeQIgMqBw1YuXNnTlbJWy7JAU57OF9Xn9ReiPbsK6095ifGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7eccbee262206623b89c40dadb4e11abe30d5e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d0788120f.0","@material/base":"15.0.0-canary.d0788120f.0","@material/theme":"15.0.0-canary.d0788120f.0","@material/ripple":"15.0.0-canary.d0788120f.0","@material/typography":"15.0.0-canary.d0788120f.0","@material/feature-targeting":"15.0.0-canary.d0788120f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.d0788120f.0_1683620613577_0.5384506402221056","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/form-field","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.f52358dd0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"252cfc47f892b9bb2a9862051f3060fcfe331639","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.f52358dd0.0.tgz","fileCount":35,"integrity":"sha512-I/vuMYsod573StndJ1ICqAFIv5fXZaXo5JBeo1eOIT/k6xbpKS+JFu8DInacxE03p4iWTaMcSu8HdvOCRgtsHA==","signatures":[{"sig":"MEUCIQCph/K8WoiuW+quijwg1Au8owMlsku+2iqMNuuHK3ZKAgIgdKaLsiiLPu6ynXMkH+KFk+TpfNj1GIYJf79YVSPkKTU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a4baf07a9736a6e1fa40001f7198ae1865d67392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f52358dd0.0","@material/base":"15.0.0-canary.f52358dd0.0","@material/theme":"15.0.0-canary.f52358dd0.0","@material/ripple":"15.0.0-canary.f52358dd0.0","@material/typography":"15.0.0-canary.f52358dd0.0","@material/feature-targeting":"15.0.0-canary.f52358dd0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.f52358dd0.0_1683901854751_0.18753546536128507","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3c3fbaa3.0":{"name":"@material/form-field","version":"15.0.0-canary.d3c3fbaa3.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.d3c3fbaa3.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0cee920d9eb225f7e28ac85c0e80c720152f8281","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.d3c3fbaa3.0.tgz","fileCount":35,"integrity":"sha512-/pdTUZvbY+mgNA5UgECeIggoMKJfq7LCGoxy9RKvdNHQ9fvb3sLZUF9XluPNC9s+tD/Xc5+0gEiMvG+RqIvcuw==","signatures":[{"sig":"MEYCIQCkFgRnrkmVqRkuhdnsFHwWKZlzAueHLG5G0U+8UOOznQIhAM/5HSiTN7ZPmab309GQMnrtES/YDumvwN+d0RTae/CG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3b7f31c254605439f8fef56301c46f7bcbf3a9fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d3c3fbaa3.0","@material/base":"15.0.0-canary.d3c3fbaa3.0","@material/theme":"15.0.0-canary.d3c3fbaa3.0","@material/ripple":"15.0.0-canary.d3c3fbaa3.0","@material/typography":"15.0.0-canary.d3c3fbaa3.0","@material/feature-targeting":"15.0.0-canary.d3c3fbaa3.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.d3c3fbaa3.0_1683914483990_0.3334242672884058","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/form-field","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.576d3d2c8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7e14c4324528962b95b44d74e6a27f4dfefb80d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.576d3d2c8.0.tgz","fileCount":35,"integrity":"sha512-4c00pPlVwx8lvfYO28Ato+WcA9HmKmU5NmmPrYuifMxGpz8BwHPL3369wsE40qkgZt8bvtwVE2lDcij6kJ434g==","signatures":[{"sig":"MEUCIQDMV66ut/nY+AHFilMwoQLSSQdoJT+CBcWx8gKAlrin1wIgDO3w9M1HH7UeCa3O2DjqYbj1JbR8XdGHBnmY/R8eG6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6ace19a21b6654f14cad48fc007198859874c910","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.576d3d2c8.0","@material/base":"15.0.0-canary.576d3d2c8.0","@material/theme":"15.0.0-canary.576d3d2c8.0","@material/ripple":"15.0.0-canary.576d3d2c8.0","@material/typography":"15.0.0-canary.576d3d2c8.0","@material/feature-targeting":"15.0.0-canary.576d3d2c8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.576d3d2c8.0_1684202426152_0.4494187965277665","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/form-field","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.19bb36a46.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98f9761b0886afb141c0717016f85119a2cad67c","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.19bb36a46.0.tgz","fileCount":35,"integrity":"sha512-oQeBPFRuh6Lk1vgHHPe//FGaFdVQ9JKx+Q0JciRfDjjVqSh2nzodKDzFDiU4OUkoIbV3AbA8xzXaT71NYcGR5w==","signatures":[{"sig":"MEYCIQDu1kfZNU4IouWVB52Qjgcq0KuKL5Qgm9/7bzj7jSicEgIhAMVPsAuHNkLobJlQDM6KZaycLshPnxvWiQwak0vXXGNi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"75157be315eeaa02f70ed69f97e44a7d40d53e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.19bb36a46.0","@material/base":"15.0.0-canary.19bb36a46.0","@material/theme":"15.0.0-canary.19bb36a46.0","@material/ripple":"15.0.0-canary.19bb36a46.0","@material/typography":"15.0.0-canary.19bb36a46.0","@material/feature-targeting":"15.0.0-canary.19bb36a46.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.19bb36a46.0_1684266866155_0.9656673542429486","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/form-field","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.aa5ac7fe5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ead1358ebc173073bf62dfde23ff83a73161176","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":35,"integrity":"sha512-ORasNaBWKBqQy6qM+ivGTwJyGtRpe9WbwMIjxgJF0LZmhFBMHwgRMgekm/lEUiEN1bN8n4rvaGK1fio2VcnE/g==","signatures":[{"sig":"MEYCIQDDXRpsABbiRU4A44tahfikKgb3aySrlfDJlS7srm5pQQIhAPK9R/Pc4Bwu5lZR7OdMKLPnuCiKJCtNnYnkL0b5dk90","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"83e86542dd6facc8ffe487d31111412ee18b5bde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.aa5ac7fe5.0","@material/base":"15.0.0-canary.aa5ac7fe5.0","@material/theme":"15.0.0-canary.aa5ac7fe5.0","@material/ripple":"15.0.0-canary.aa5ac7fe5.0","@material/typography":"15.0.0-canary.aa5ac7fe5.0","@material/feature-targeting":"15.0.0-canary.aa5ac7fe5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.aa5ac7fe5.0_1684776374391_0.7116209832345424","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/form-field","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.90291f2e2.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e4b26968b1c0b886f9bdca2fd126e6073177575","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.90291f2e2.0.tgz","fileCount":35,"integrity":"sha512-KTj+EOobLcPUYy4nR+t0c2Cjvs7jCI4F1w8XuV0bbmSa6Sxh02tMKY2Xa7Lx55A/uUrsUfViMdP60OLzi7HgjQ==","signatures":[{"sig":"MEUCIDF9agpzLd8o3/5ZXyIV85jT+NTmOhf/oRkWurpkJ0UoAiEAzU96ZhWiS31M9jvsvvBbC/Z0KQyAoxvCSABVINCGgaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a1c306471717b15ae8f0b481703ed1b46162df25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.90291f2e2.0","@material/base":"15.0.0-canary.90291f2e2.0","@material/theme":"15.0.0-canary.90291f2e2.0","@material/ripple":"15.0.0-canary.90291f2e2.0","@material/typography":"15.0.0-canary.90291f2e2.0","@material/feature-targeting":"15.0.0-canary.90291f2e2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.90291f2e2.0_1684863786926_0.7728369204292755","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/form-field","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.446734f27.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f22a913f7cee7307a68ef2286db9d379cb7f0164","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.446734f27.0.tgz","fileCount":35,"integrity":"sha512-/SypMsYQAjB8EB6biBQ3dCmTbXaIs3cKF2xCwDNISAThZkROVY8nBaCVPGytVwUCKOdp8vPTFGE3nNJs9zvilw==","signatures":[{"sig":"MEUCIFMtW31tVzAUuxpqpIpm00XRGyPWvRE/lqZ/JC/E/HQWAiEA3vgKgY/fPYY1Ukdo44fRMfjTetL41NEF+jU8tL6eKo4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a2536a849aada5f06aa85deaa7be06f44f620023","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.446734f27.0","@material/base":"15.0.0-canary.446734f27.0","@material/theme":"15.0.0-canary.446734f27.0","@material/ripple":"15.0.0-canary.446734f27.0","@material/typography":"15.0.0-canary.446734f27.0","@material/feature-targeting":"15.0.0-canary.446734f27.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.446734f27.0_1685483319494_0.5622191087117276","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/form-field","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.19de312d8.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff669311bc868a0c0c4d718382d13cc2f254627e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.19de312d8.0.tgz","fileCount":35,"integrity":"sha512-zc1KUfYCvskEzgNC63axcB1ayq7An2+qyJG1QiEo/OVnE83v1FFOm/fYLp5VgqwLTLHuJZdi24s9SOeoQtAVtQ==","signatures":[{"sig":"MEUCIH7g5kUThW+Qm3p4sb9TrK3HiwfTbCc3WlZ9r/gZ15I4AiEA9AqCHGdss9vsYiG/4N5+jTUqKurExZJevQ+RZLc0S+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"dc3811573a34ccafa5c09bcf14574bfb95373958","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.19de312d8.0","@material/base":"15.0.0-canary.19de312d8.0","@material/theme":"15.0.0-canary.19de312d8.0","@material/ripple":"15.0.0-canary.19de312d8.0","@material/typography":"15.0.0-canary.19de312d8.0","@material/feature-targeting":"15.0.0-canary.19de312d8.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.19de312d8.0_1686071931178_0.10567512539812918","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/form-field","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.6081d829b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da99881739d5b738ac76b9b9c1e015b5ae6b3b0d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.6081d829b.0.tgz","fileCount":35,"integrity":"sha512-S1J5fcEn2+3yW3iFDz2+t2oAtr7AugnKufQgt1BCUsQ8O+0jKUuYqSC8P3rOZJSzniOgevWym1S7KfDdlVDfcQ==","signatures":[{"sig":"MEQCICcjMDKY60HoqPA2mB01nZTYKGZBMYnlWdaEY2CObV/CAiBFcW0fT5Sef/gRzeNiCiajQ9kdgfVIjw8wklJbrRY/9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"033569cc4deafe32dad2bf8cbd1de8789bc85668","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6081d829b.0","@material/base":"15.0.0-canary.6081d829b.0","@material/theme":"15.0.0-canary.6081d829b.0","@material/ripple":"15.0.0-canary.6081d829b.0","@material/typography":"15.0.0-canary.6081d829b.0","@material/feature-targeting":"15.0.0-canary.6081d829b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.6081d829b.0_1686100465294_0.336324535174233","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/form-field","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b26c34a68.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dd72e603e2d587933b24d3b53af00de014a6139","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b26c34a68.0.tgz","fileCount":35,"integrity":"sha512-H2ACnIhJXiEvNkTmMXB/54BopSILnHWGrJHWli1P+7gsOOMSG/BnywcZuCSrX8wyAj2rP6NfDPDYVd/cwtUeyQ==","signatures":[{"sig":"MEQCIA6zRv9M5rasSkWA5KNz202vD4GuXcVLIEhkhF+x238AAiArbhJ74wJnCEhK3RR0rqmK6MGKleoeTZlm7JQ0h+wh+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"28919516866e588c52e4e6358c3c4d2523993b74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b26c34a68.0","@material/base":"15.0.0-canary.b26c34a68.0","@material/theme":"15.0.0-canary.b26c34a68.0","@material/ripple":"15.0.0-canary.b26c34a68.0","@material/typography":"15.0.0-canary.b26c34a68.0","@material/feature-targeting":"15.0.0-canary.b26c34a68.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b26c34a68.0_1686169123480_0.9823095897179104","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/form-field","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.4fe911371.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"279e542b814f086b6d0de6f37a47c525398b1c20","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.4fe911371.0.tgz","fileCount":35,"integrity":"sha512-NkBBSCycB2jDeSVaampnj/KUNrp3j3gNSyuafJB8VughdCoTcG+steed8SKxdlIFYTj8mm85Yv++XSMNrFR3xw==","signatures":[{"sig":"MEUCIQDs4dPD3h+pbeHXHraAC5W4wgXiFPU3OFxDjPaDW7OFmAIge2kayKUVKcg6ZhGjomXXlO0W+TEUW2fZQCzSNOAHrN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"a9de53a24d5e0f79f94310f061cdf2ab718df7f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4fe911371.0","@material/base":"15.0.0-canary.4fe911371.0","@material/theme":"15.0.0-canary.4fe911371.0","@material/ripple":"15.0.0-canary.4fe911371.0","@material/typography":"15.0.0-canary.4fe911371.0","@material/feature-targeting":"15.0.0-canary.4fe911371.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.4fe911371.0_1686179189177_0.7078453758805694","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/form-field","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a9ff9866f.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"243fd11953ed9d21e8a4bf1249f29e628699b2d9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a9ff9866f.0.tgz","fileCount":35,"integrity":"sha512-cSdoGDodgUjOOFJ4CDZFyK+EP6jtC+70Gr51m1HVvYNpk7jzwrd27aMmdfPbzAPvIMkE4Fru8F7TNGcRt1nJnQ==","signatures":[{"sig":"MEYCIQDYojDKRvY3ctcA2MhnPYkhRNcO73TaoTdPlO94fCHm0gIhAObJBkQJg5nloI9PQAPGn2OG9miC51fwhbsr/lurWGyN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5bed0ec6cdad0c38b52e8ac98994b2809d9c8f50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a9ff9866f.0","@material/base":"15.0.0-canary.a9ff9866f.0","@material/theme":"15.0.0-canary.a9ff9866f.0","@material/ripple":"15.0.0-canary.a9ff9866f.0","@material/typography":"15.0.0-canary.a9ff9866f.0","@material/feature-targeting":"15.0.0-canary.a9ff9866f.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a9ff9866f.0_1686656320660_0.4269964095563805","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/form-field","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b994146f6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3726178926c39da47140e858f53724f5e73b668","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b994146f6.0.tgz","fileCount":35,"integrity":"sha512-Tg1SQQaopvXMyDEYxGTWnhCWQmNcWVIoKMLmle9P/gi2p8ulcj0iOCPYf+3ECqUBVozOmTPKlYOOiRwtKStAeA==","signatures":[{"sig":"MEUCIH2idEi0g5FlcFRDGEXNg8oeJ8sSNdZvtG6KYJ6jF0hnAiEAtMOiFWEq8Ad4Qflyw+KmXnG8XtWtLd1RAOq8kGUzhPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e537228a5d88e4fb9c651aa15b1d56bd81bc63bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b994146f6.0","@material/base":"15.0.0-canary.b994146f6.0","@material/theme":"15.0.0-canary.b994146f6.0","@material/ripple":"15.0.0-canary.b994146f6.0","@material/typography":"15.0.0-canary.b994146f6.0","@material/feature-targeting":"15.0.0-canary.b994146f6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b994146f6.0_1686776655243_0.7498900430505995","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/form-field","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.1fb4b1a06.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ba3480a775f008733df192aff2f853fb6333923","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":35,"integrity":"sha512-zryElTBGdyH71tJwEkMCiV/aQsfuwGkJ0YcAQvEIeHvfSfM7sjf0++GyEraKHiBDbdNMbpkcAhWATPgpuZu6Cg==","signatures":[{"sig":"MEYCIQCiEPK77Oi0MArmaazJ3+wD4iWE3oX0NWbrdrXxdz8hYgIhAMn4fbr908XzTAGb0FYYBoLtuwjc/6DU9hpzYIbCwymo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1d1b86822f3fc9f22a5fdfc1c381d5a4ae983829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1fb4b1a06.0","@material/base":"15.0.0-canary.1fb4b1a06.0","@material/theme":"15.0.0-canary.1fb4b1a06.0","@material/ripple":"15.0.0-canary.1fb4b1a06.0","@material/typography":"15.0.0-canary.1fb4b1a06.0","@material/feature-targeting":"15.0.0-canary.1fb4b1a06.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.1fb4b1a06.0_1687892261677_0.8232082269902177","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/form-field","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.c64a2776e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a15a140af3377687f9ba57532dd17ef33de8119","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.c64a2776e.0.tgz","fileCount":35,"integrity":"sha512-9xB9tnS4/Ez6iuTlgCA/fBwb5e53GOn1ToHVtzK1799SCODUEa2GISYgDzEWcdYri7YdRAQSYEoBup2kKMsHBw==","signatures":[{"sig":"MEUCIAfNNOmadU6B4Yx4Ek2QJKpFtdaLOdHbm7CS/dg2gdqAAiEAhunVPoHWpOo61SYPdSxJliPpiuDblIda2jilHoFqPw8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"271b0c446646af573f67960820b6b2a86a9bda88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c64a2776e.0","@material/base":"15.0.0-canary.c64a2776e.0","@material/theme":"15.0.0-canary.c64a2776e.0","@material/ripple":"15.0.0-canary.c64a2776e.0","@material/typography":"15.0.0-canary.c64a2776e.0","@material/feature-targeting":"15.0.0-canary.c64a2776e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.c64a2776e.0_1687897032904_0.8889298162237336","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/form-field","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.b05d9eb7c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"999f7e94eef6cbf9dd57b51d4c3a6b7547b404d9","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":35,"integrity":"sha512-vzC/CUX3PjDUksf4/p96atElrYzHSghGWkwqfQ3MwWnxvvzqTcgg5fYpb4O8gGoQo0SuwqOwcp6ZjdOMTJXDSA==","signatures":[{"sig":"MEYCIQDWGfmM12vEAuhjSZPDbod/o1VOrmQETzT1OYUEx+zQVAIhALEWoPsSxnPEy6XZWTn+lzNXPO5fzEnjJ+5Yqs7lB9ak","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"854245f23fe0f7b3dd1163ecefd940b26718c134","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.b05d9eb7c.0","@material/base":"15.0.0-canary.b05d9eb7c.0","@material/theme":"15.0.0-canary.b05d9eb7c.0","@material/ripple":"15.0.0-canary.b05d9eb7c.0","@material/typography":"15.0.0-canary.b05d9eb7c.0","@material/feature-targeting":"15.0.0-canary.b05d9eb7c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.b05d9eb7c.0_1688055850984_0.2843156493304251","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/form-field","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.2a9697dc5.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d01d7279d0ea091920a388b4e075d2a492f7e0fb","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.2a9697dc5.0.tgz","fileCount":35,"integrity":"sha512-2F6QTOAn4mYt5LOkK7C4BgAyXIKS9fahxEYO4CgUtjUyzsAGtKA9q4f+/rWJtSRd6iCnvO7S1lW9VYKSkLJE9Q==","signatures":[{"sig":"MEYCIQCIzdDaQtvs9/6kbZaY0JVb2uc3wqHn89xkrlsGvug8pQIhAObYiQNB65UoQKONCQImwgnw0DZgmS9vnY/Za7z/nkBF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"fad1e5223c83a5b7a83a6ef81f7ebdc83a85672a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2a9697dc5.0","@material/base":"15.0.0-canary.2a9697dc5.0","@material/theme":"15.0.0-canary.2a9697dc5.0","@material/ripple":"15.0.0-canary.2a9697dc5.0","@material/typography":"15.0.0-canary.2a9697dc5.0","@material/feature-targeting":"15.0.0-canary.2a9697dc5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.2a9697dc5.0_1688163259233_0.30259771018703074","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/form-field","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.0c52adeab.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ead4f08d9f67a32abc582865a9a7ce058a909844","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.0c52adeab.0.tgz","fileCount":35,"integrity":"sha512-AUS24cXQCWRJXlcNiHMyzUS6xU+XzrDiev75knru6okPCa4XZPjQ73oxFylV/xUjC9cFg/Q2kiQ9Pe/auMMssQ==","signatures":[{"sig":"MEUCIQDFpSnSeDZLYWBxafCPXEGe1H6phSes7/MI552R+2iuqQIgECfSpuiaRR/7sQzTl7qT1n9FeOIz+G9wlMlXr/pu0uQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"972024dd57885ff944ec073de0cd956353bfa7e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0c52adeab.0","@material/base":"15.0.0-canary.0c52adeab.0","@material/theme":"15.0.0-canary.0c52adeab.0","@material/ripple":"15.0.0-canary.0c52adeab.0","@material/typography":"15.0.0-canary.0c52adeab.0","@material/feature-targeting":"15.0.0-canary.0c52adeab.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.0c52adeab.0_1688574377533_0.2995538131388924","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/form-field","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.83355c322.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10764a192751e179ea3d0a708632615698955540","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.83355c322.0.tgz","fileCount":35,"integrity":"sha512-N+9H8/NRkyI0AhSIW5vx2XxC6ymeo6dg83qNx4vcKB0sSG9kCVqnztotGnflmJZc4vQ7eStRIGF+WDuBk6GviQ==","signatures":[{"sig":"MEUCIQC4kh83+KZjwQXTrgFCZTX0jtzap78hqKb7KIJnP3ORiwIgeKvXyze/0lwSqP2Vfl6PKLATeHfgzwPewrp/ee98WzY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"173401c2dd65fb3babae5b8e998c0a0032ff819d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.83355c322.0","@material/base":"15.0.0-canary.83355c322.0","@material/theme":"15.0.0-canary.83355c322.0","@material/ripple":"15.0.0-canary.83355c322.0","@material/typography":"15.0.0-canary.83355c322.0","@material/feature-targeting":"15.0.0-canary.83355c322.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.83355c322.0_1689001569764_0.5678554537501341","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/form-field","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.bc9ae6c9c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76d23e14f910a28081ccb438e094e04bbffadf19","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":35,"integrity":"sha512-+JFXy5X44Gue1CbZZAQ6YejnI203lebYwL0i6k0ylDpWHEOdD5xkF2PyHR28r9/65Ebcbwbff6q7kI1SGoT7MA==","signatures":[{"sig":"MEUCIQCNuuMnY179Hh+K3v2RUSQzj4YIAonOt0ZRjCGk4yPuUgIgDVxLgmm5Ozx0kUEoqt0dstJKbC6xLAKx2EOBNXnSBM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"9f0b9b80c267d99daa258e635481fecc4cbf0acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.bc9ae6c9c.0","@material/base":"15.0.0-canary.bc9ae6c9c.0","@material/theme":"15.0.0-canary.bc9ae6c9c.0","@material/ripple":"15.0.0-canary.bc9ae6c9c.0","@material/typography":"15.0.0-canary.bc9ae6c9c.0","@material/feature-targeting":"15.0.0-canary.bc9ae6c9c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.bc9ae6c9c.0_1691097693062_0.9280011306172864","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/form-field","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.3c44cd956.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef7b589973c06528f992b5c6169586cf7a41c778","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.3c44cd956.0.tgz","fileCount":35,"integrity":"sha512-wp3v0MC3JHzxyXd1xErqK1ccEg4r66KEx7mYQxlmbE+Dn9k4nZVPGyH2BepuyHrOwo5Xh8OVyw4epJVx3rH23w==","signatures":[{"sig":"MEYCIQDB36N0xNjHvoiokwOjSBr18CKb0a9LSP4RrBua90L7NQIhAPyx/N+gka3vbfFxwUP58XD6KJKY+C5DLuaM9p0P3z/q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6e39da189328fcabc7040a629e312efe5f7cea80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.3c44cd956.0","@material/base":"15.0.0-canary.3c44cd956.0","@material/theme":"15.0.0-canary.3c44cd956.0","@material/ripple":"15.0.0-canary.3c44cd956.0","@material/typography":"15.0.0-canary.3c44cd956.0","@material/feature-targeting":"15.0.0-canary.3c44cd956.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.3c44cd956.0_1691430470132_0.11498692580789682","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/form-field","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.02702296e.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47a09aa9fa3cacb636e136b134636ce5f2ef3d38","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.02702296e.0.tgz","fileCount":35,"integrity":"sha512-9iPWhsnF/1D7P0o73vLAtnLTvS1Pd/QnF7E48M0LdB+EKK5ajlZtZYMZv1JDpuY8i+KG52q/7iStgq+nGZkhRw==","signatures":[{"sig":"MEUCIGxQUQNNt0QGVZagx58x0zqFVAl+wsxaajDS0jrSAgszAiEAi8goFAZxYLHUN2jWapEA95tbhaezCYeISrB5djFz6JY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"22335673bc742932498b2538321ed9dcfd692879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.02702296e.0","@material/base":"15.0.0-canary.02702296e.0","@material/theme":"15.0.0-canary.02702296e.0","@material/ripple":"15.0.0-canary.02702296e.0","@material/typography":"15.0.0-canary.02702296e.0","@material/feature-targeting":"15.0.0-canary.02702296e.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.02702296e.0_1692965124881_0.9945507936923799","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/form-field","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.872b65832.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f25822b9579348462b7acc66a75680b7e4060fc1","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.872b65832.0.tgz","fileCount":35,"integrity":"sha512-0Djz1B8q5QikEJ3LXvq/Lx6rS/pov2VEqWhCfTK5vwCR7kYge1anRgl3BaXkEFpSbCkouY6GS3UBLf7YjKZnzw==","signatures":[{"sig":"MEQCIAGvOs9b6II5JiY6MO88U8OlrGsu0nfYAOdUZ8L5q6zqAiAO+w14K/WneGXLLZYldbiac897iWpCDPEn7z3w7jR2Og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"be0901c091f812355b2d192c49bd051d8daf7a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.872b65832.0","@material/base":"15.0.0-canary.872b65832.0","@material/theme":"15.0.0-canary.872b65832.0","@material/ripple":"15.0.0-canary.872b65832.0","@material/typography":"15.0.0-canary.872b65832.0","@material/feature-targeting":"15.0.0-canary.872b65832.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.872b65832.0_1693397628897_0.3447305709165043","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/form-field","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.89b2e4122.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2773bc58d0eebfb906df90921f84a7887984e965","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.89b2e4122.0.tgz","fileCount":35,"integrity":"sha512-EQO2OIVJPBXLhZbmnREi5oo9R9OaYmdfcnz2fSphnCd4UZvvgHsQvoEukqRe9lXfWXaCToz9+/rLyyRsL6SWbg==","signatures":[{"sig":"MEYCIQDIxitaPh1jILB2if3uldxu/WDb37/nAsmEhSdFPF1C3AIhAKQwr04mwjCxAQRyotqaZU9GjfkcPS/eLGtS10sUQBtH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"68bd55db9489546e515443239f477836e16db19b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.89b2e4122.0","@material/base":"15.0.0-canary.89b2e4122.0","@material/theme":"15.0.0-canary.89b2e4122.0","@material/ripple":"15.0.0-canary.89b2e4122.0","@material/typography":"15.0.0-canary.89b2e4122.0","@material/feature-targeting":"15.0.0-canary.89b2e4122.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.89b2e4122.0_1693498036239_0.9841712540965395","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/form-field","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.7a3942e7a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c4b37b1db9c6a67ec9ebe0515e579ea0f420a90","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.7a3942e7a.0.tgz","fileCount":35,"integrity":"sha512-5iQWLQRD3/30CHxqcRBZzP0RXB2b9t6FZ8N7ZgSDPkPF9uywJu3kYyHhl7QMZdKL59SuBSZjHcI4a6Q1KIIAdw==","signatures":[{"sig":"MEUCIFIg+m5cLqW2IHFqNfzg3A+FzZ4Oge0t5QK8B6GZcbE1AiEAwxF3w44D1fBZZYcRs/iJ2AWMdwBacZxbWflgAtlEmdM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e61dc0a16a5b376c778548e5a6cecb56f5c5704d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7a3942e7a.0","@material/base":"15.0.0-canary.7a3942e7a.0","@material/theme":"15.0.0-canary.7a3942e7a.0","@material/ripple":"15.0.0-canary.7a3942e7a.0","@material/typography":"15.0.0-canary.7a3942e7a.0","@material/feature-targeting":"15.0.0-canary.7a3942e7a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.7a3942e7a.0_1693507213753_0.647700658136654","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/form-field","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.54feb3020.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b57158ad273290bc2580110e7517bdb44d65118b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.54feb3020.0.tgz","fileCount":35,"integrity":"sha512-UXui+J/Wl8XdIQrXhc15oZXCRWRrcDP2WUbdYm40xsKKb8Vc8i1m7f9shvoQZE4dfPBZc37XkYgfgQpTWo3OKQ==","signatures":[{"sig":"MEUCIQD5EKNqwCCmI5YBpAy4LT0rva3vxgugBLSEuiOYZUnBVwIgHFvQVJJ0FD2vjTxofbHRKulbFvg5/6V4XNEbhoay21o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"5dc5cb94463af21f898ddd58cc4d9e4fbf803222","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.54feb3020.0","@material/base":"15.0.0-canary.54feb3020.0","@material/theme":"15.0.0-canary.54feb3020.0","@material/ripple":"15.0.0-canary.54feb3020.0","@material/typography":"15.0.0-canary.54feb3020.0","@material/feature-targeting":"15.0.0-canary.54feb3020.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.54feb3020.0_1694466334339_0.059266496059121154","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/form-field","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.6cda3ce8d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b267e72b6c1c2c1508298baad675e77478fc4fdc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":35,"integrity":"sha512-qcB98kVTGLgeF+w6p/vBP23qXqMjgKKkbQrtf2uzOnwA4Sik9BF0BInNiATfOq8qtmOAnwFXoBr2Q/LugP6H4g==","signatures":[{"sig":"MEYCIQCfMccA9MCliAXCIrKHGkc0wRWEj6/uzOmqrtFFceWpygIhAIVdllDj8nWpNQQxwagemY+51oB6aTEMmBp3OCX9FnWu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"adb36c6339e7bf37fe1e8ca96526a9673ca602e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.6cda3ce8d.0","@material/base":"15.0.0-canary.6cda3ce8d.0","@material/theme":"15.0.0-canary.6cda3ce8d.0","@material/ripple":"15.0.0-canary.6cda3ce8d.0","@material/typography":"15.0.0-canary.6cda3ce8d.0","@material/feature-targeting":"15.0.0-canary.6cda3ce8d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.6cda3ce8d.0_1694483139699_0.8864578230641318","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/form-field","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.205b20b36.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7569432414ac9752006e6b28b7aa021ae9939f92","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.205b20b36.0.tgz","fileCount":35,"integrity":"sha512-m5L848d3qW1/dKJrxcWH52R/kuHGSUWAhg/0o6SqLs6yGG66KBWJM6F8WkJIQYdt+a2E2EBd5XLqMlCGshHlKA==","signatures":[{"sig":"MEUCIEmSTmU8lwdnprISCfVzjbnz2uknPEZ4fA+H3CIUiEnqAiEA+ZggLTeqeys3Z6nJgNofkmE3OksR5j40LHKpYaBxJCg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"00fdcf619c34c502844acb0f2485e99595aa138d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.205b20b36.0","@material/base":"15.0.0-canary.205b20b36.0","@material/theme":"15.0.0-canary.205b20b36.0","@material/ripple":"15.0.0-canary.205b20b36.0","@material/typography":"15.0.0-canary.205b20b36.0","@material/feature-targeting":"15.0.0-canary.205b20b36.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.205b20b36.0_1694625446009_0.6166376777213096","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/form-field","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.22bf82024.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c835c5962735b2795ded6972eeffbe69d21abf36","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.22bf82024.0.tgz","fileCount":35,"integrity":"sha512-ICSixR6fngm6oQHUaULiD334qOJnZwQ5azLN5JnCR8veNSy89Tjl7mbQSywbgtE3IAVHdhnKgprzMXksnb4I2Q==","signatures":[{"sig":"MEUCIDMD7Z43w1uRS8MiqQ0k36XSpHxmtS5QEbYQfcwDUJV0AiEAs7D/SItASKSZRwjCFYvZ1t/T+HlRvazCQ4qWiHrFWOc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501935},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"eda4fad2a8a727b69db60b828bd92df7a8956143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.22bf82024.0","@material/base":"15.0.0-canary.22bf82024.0","@material/theme":"15.0.0-canary.22bf82024.0","@material/ripple":"15.0.0-canary.22bf82024.0","@material/typography":"15.0.0-canary.22bf82024.0","@material/feature-targeting":"15.0.0-canary.22bf82024.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.22bf82024.0_1695028342841_0.366496540652109","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/form-field","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a246a4439.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a3f4deccba0dafa0eefa7c82b9f9b21bec871607","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a246a4439.0.tgz","fileCount":35,"integrity":"sha512-Q/+ErgtAUFUPPUmWA1m5IP5voiN8XjPRwyoAlFxSTa/4t+EA5B18Z8Bsn9b6I0AC8RHke06H7UWrKz8XUDIFpw==","signatures":[{"sig":"MEYCIQDW8cLBO/ZUFAzoL9Sys2Jv7e+6X+68dzXlW3laojz0PAIhAJw9IAkG4+OOuz2oaTQlnFiaLZilFP781Ave6C83pus1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"40201df8b7e53b61aead4acdfa34b48fb1d155b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a246a4439.0","@material/base":"15.0.0-canary.a246a4439.0","@material/theme":"15.0.0-canary.a246a4439.0","@material/ripple":"15.0.0-canary.a246a4439.0","@material/typography":"15.0.0-canary.a246a4439.0","@material/feature-targeting":"15.0.0-canary.a246a4439.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a246a4439.0_1695059190704_0.015072998928415071","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/form-field","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.d153db62b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ab4c6a19c5d884f40df01249003e062be1b22c4","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.d153db62b.0.tgz","fileCount":35,"integrity":"sha512-rOSxyWepgz6Mm6sr4p4i/J6uyCL6FOEAyeo6epJyB9bJVdV3i7xxpQQcjlQKArgy+rMCRehisnuUhoi7emfbuw==","signatures":[{"sig":"MEUCIQCpHsVWy1dp06Tim5405d9pp9AmtDMBNC0m/VoOgc5uOgIgSGhAYyvSYIlwgS32ENJal5wkuT2twe4XZl73eRGfhLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4ca05c144c691cd06cd5926fe0bc54818e462202","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d153db62b.0","@material/base":"15.0.0-canary.d153db62b.0","@material/theme":"15.0.0-canary.d153db62b.0","@material/ripple":"15.0.0-canary.d153db62b.0","@material/typography":"15.0.0-canary.d153db62b.0","@material/feature-targeting":"15.0.0-canary.d153db62b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.d153db62b.0_1695150930509_0.5781254689064879","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/form-field","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.2528c1c3b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6b850a1523fe52e41d660643e12f2de6c4ffd61","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.2528c1c3b.0.tgz","fileCount":35,"integrity":"sha512-Xtrypj1MbzGqEvuXxGLCNTLwgJMsfGKHexAQmA3++mS60GHeSeBV5p9fEa/Miz4RvtkBGUcfVg0Ujn/24VNI4g==","signatures":[{"sig":"MEUCIQDI60SklHAJiD0i2Haogq4k/jkEq0bT+DsAJMWtb/ZGGAIgFaqcIvQSEUUqtVrAY1luxnyZHHXdnlWyO0sPqBXyGCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"98b5b57bd5356f48610a254e8c4acff388d5fb7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2528c1c3b.0","@material/base":"15.0.0-canary.2528c1c3b.0","@material/theme":"15.0.0-canary.2528c1c3b.0","@material/ripple":"15.0.0-canary.2528c1c3b.0","@material/typography":"15.0.0-canary.2528c1c3b.0","@material/feature-targeting":"15.0.0-canary.2528c1c3b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.2528c1c3b.0_1695233218394_0.440861537673255","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/form-field","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.1728a6dcf.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a786378436a58c82f80421320e59a1cb0b7a365","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.1728a6dcf.0.tgz","fileCount":35,"integrity":"sha512-+rXhH7KPfysT5pL/VksDYCkgew+9G9hgjgIxbNWVszN4trdzqnSla0NnT2sqgV/p2L1uwRKVAAwXtMR8/og7lg==","signatures":[{"sig":"MEUCIQCOiBZgFVOTxRQSgtQugNw9T863I6jSjXKKqEpMc9+g8AIgaWeJmPh1kLIzEBr0T4rIfcfnMzm6Rlc+uvOP2gwhKso=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"3828aedf4f344a948780a69956ca4f069cef3daa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.1728a6dcf.0","@material/base":"15.0.0-canary.1728a6dcf.0","@material/theme":"15.0.0-canary.1728a6dcf.0","@material/ripple":"15.0.0-canary.1728a6dcf.0","@material/typography":"15.0.0-canary.1728a6dcf.0","@material/feature-targeting":"15.0.0-canary.1728a6dcf.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.1728a6dcf.0_1695691415942_0.9982467072307817","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/form-field","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.ebb636f3d.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b76c18cca9852449e8c47c4f0f1ad5b16c242e6b","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.ebb636f3d.0.tgz","fileCount":35,"integrity":"sha512-fgW938AYMN3oHVtQixdjx/d6DPgslX00cOeLL6Z0KVO++dkhbmTr2a/vHTd8e9Vo8W30h/VITgDswdYqzoFkhQ==","signatures":[{"sig":"MEQCIFe7lZnUXWBf8OhJgymcx/qIo4H8u063SHhDUvNeFjpmAiB5f75IgDPycSkNelGvSkP+2Aobew1HYYQOKu65IQnj1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"6f62607a00dd885ebbe422b247dc4acc1ded22cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.ebb636f3d.0","@material/base":"15.0.0-canary.ebb636f3d.0","@material/theme":"15.0.0-canary.ebb636f3d.0","@material/ripple":"15.0.0-canary.ebb636f3d.0","@material/typography":"15.0.0-canary.ebb636f3d.0","@material/feature-targeting":"15.0.0-canary.ebb636f3d.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.ebb636f3d.0_1696016686909_0.7009663557907484","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/form-field","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.c0d21ecc9.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5a498ae5367f341cf853fe2443b8bbf8bc1e3de","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":35,"integrity":"sha512-yt9KgmhKRtJC+jmRUb/V1H0MlPok/g3H274hrW7Pmona8ulsIxYfh0hlRgH7Wuhgr9c00XDKrA9DkS1QSpSKag==","signatures":[{"sig":"MEYCIQChEbuCDBwzqaFByy6ppGALp8XbkmdXrDgsNyAeeFFQpQIhALJWZ730SfZbQKhMZp40Jjc5aVlr0bpxXmmuwjOcGCZG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0a932ea790a12d359ce4ec7c5c4c7aec7edf565d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c0d21ecc9.0","@material/base":"15.0.0-canary.c0d21ecc9.0","@material/theme":"15.0.0-canary.c0d21ecc9.0","@material/ripple":"15.0.0-canary.c0d21ecc9.0","@material/typography":"15.0.0-canary.c0d21ecc9.0","@material/feature-targeting":"15.0.0-canary.c0d21ecc9.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.c0d21ecc9.0_1696880230598_0.9261166937521976","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/form-field","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.127a44b28.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3120ac4f4f80c1a3d6b346d968f95e15b465ba4e","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.127a44b28.0.tgz","fileCount":35,"integrity":"sha512-CkSICp8Q/tRKkx54msqQF/iZ6ML0oq9zq+wqSnHpKivjG4ByxMuiM2SSoyhAuT4WdfFwB+quO2BF32XfLZ5z8g==","signatures":[{"sig":"MEYCIQCWW6gVi0I/L7qyGQEK6cMXtodmXKIb6WRaqLYzsKr8HwIhAJ4NQ7t0s5W/s/4Uo+88YECx6t8YjXjYFH9Kp4/tNZM4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"88d1fc2c5354e751ea3ab567d26bb1886ee152d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.127a44b28.0","@material/base":"15.0.0-canary.127a44b28.0","@material/theme":"15.0.0-canary.127a44b28.0","@material/ripple":"15.0.0-canary.127a44b28.0","@material/typography":"15.0.0-canary.127a44b28.0","@material/feature-targeting":"15.0.0-canary.127a44b28.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.127a44b28.0_1697140856144_0.18690158568972648","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/form-field","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.0ad128337.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b63590539158999e9db412e4a44938fb586acb7","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.0ad128337.0.tgz","fileCount":35,"integrity":"sha512-S0AvxNXYUKvYNpLlq6w3MZYWDENM7j0NFGbDX0dzsDZjflENO+nHdjLhqqhZnTMFrWhv1KDZjWCohUF3t0/d0w==","signatures":[{"sig":"MEUCIQCc0MGcqQ6biWpg3/gr2e+uh6xpMHS2f4HJZ//5JVfRagIgM1eDPUi0KzsbBMh27n3lkOvstx8LQd2VQOxusUj+J10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"bb76f531b61a52aae34c7a1efa45824fd32e49f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.0ad128337.0","@material/base":"15.0.0-canary.0ad128337.0","@material/theme":"15.0.0-canary.0ad128337.0","@material/ripple":"15.0.0-canary.0ad128337.0","@material/typography":"15.0.0-canary.0ad128337.0","@material/feature-targeting":"15.0.0-canary.0ad128337.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.0ad128337.0_1697741540198_0.6056396730513207","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/form-field","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.9cec94097.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10ac60c94bca245b1e57f0ff998bc3c2887e0b2d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.9cec94097.0.tgz","fileCount":35,"integrity":"sha512-zl21ddqBiYTLKkIOZtvpfogq7bGx6A8HkR8ob5+wU8kqRSiZOvGexv3sPxIVMDBr73ykHDICl7u8rjgssw4o5w==","signatures":[{"sig":"MEYCIQDbidbR8QM2hHFTIyNZJa6Z2S1ux3dfeHPgnTvSU7hWxAIhAMCqy7vx6aKiqRoSQZ8cMfkRTW8W0M8a3ChUtcx1ATLV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1a8019402daf97efb72456551503dfb3fa31466b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.9cec94097.0","@material/base":"15.0.0-canary.9cec94097.0","@material/theme":"15.0.0-canary.9cec94097.0","@material/ripple":"15.0.0-canary.9cec94097.0","@material/typography":"15.0.0-canary.9cec94097.0","@material/feature-targeting":"15.0.0-canary.9cec94097.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.9cec94097.0_1697756982675_0.2842076516688683","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/form-field","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.c51a0bbcc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2bad51c7687e7742844a2dc99b46413b2685e387","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":35,"integrity":"sha512-tp2DbLX0LeeL9GdgoujqYtqH0qkozJc0//5mu9yu3G67TCa74v6O0dO/1sKWF1IU1Vs8yGqi1LxQq/7W4rFwqg==","signatures":[{"sig":"MEUCIQDv/+eqfCqT3ORVSCdh7BrZ7ZHdU78FfVlTOeluZyjPQwIgTuX+3PohQZtN3uTQOKK7h3lOfKqhoUi6mvdVhWxMtEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e65c7fe6dcc6d6069f00d4d2f8c55e61710d046b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c51a0bbcc.0","@material/base":"15.0.0-canary.c51a0bbcc.0","@material/theme":"15.0.0-canary.c51a0bbcc.0","@material/ripple":"15.0.0-canary.c51a0bbcc.0","@material/typography":"15.0.0-canary.c51a0bbcc.0","@material/feature-targeting":"15.0.0-canary.c51a0bbcc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.c51a0bbcc.0_1700081928009_0.8900992834588357","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/form-field","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.d76666ad4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be1492ca396dbf4a4c32d9c3b1dd8a432c2ca360","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.d76666ad4.0.tgz","fileCount":35,"integrity":"sha512-h26rSr1WWrrub8Qeh1P+Abl5jAUeyPL8J5UKHRL7USCl7yviCo1uIJYOIO5/WZ9sbE4WWxDMa+G1P66atC88sw==","signatures":[{"sig":"MEUCIQDGgqI87/IkE5WGWtAlVMB9qGfu5RdbLxTi8Y27J5DHUwIgOmupB8hcCrclqxQaL5t8UCIeYX7ADx1QoEc3it3hP1g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"8fc3640e389fda0098b42091a9a1ab8653fc6470","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.d76666ad4.0","@material/base":"15.0.0-canary.d76666ad4.0","@material/theme":"15.0.0-canary.d76666ad4.0","@material/ripple":"15.0.0-canary.d76666ad4.0","@material/typography":"15.0.0-canary.d76666ad4.0","@material/feature-targeting":"15.0.0-canary.d76666ad4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.d76666ad4.0_1701123193385_0.2778683665105601","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/form-field","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.8656bf0e0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"827177458378ffac411d741b1fdb753305f276d8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.8656bf0e0.0.tgz","fileCount":35,"integrity":"sha512-/96abFvVQ9pb+bbiTNoXqtAKPLH59EtDgqfjICbhlsaKmSsyVyLuMe5tBGVc3XSx+Ca678PBYUUnyb3Y1s1dHA==","signatures":[{"sig":"MEYCIQCE28ftE/nWHIJOMVVZ3NCqOL3o/QkQ3pP02BKgPAVIsQIhALa6zb3tIRpKDneH23OLbhxdbZ2FrreOM5IvnDY1laXg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"36cab37e468233da3044a10c1df388f634163cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.8656bf0e0.0","@material/base":"15.0.0-canary.8656bf0e0.0","@material/theme":"15.0.0-canary.8656bf0e0.0","@material/ripple":"15.0.0-canary.8656bf0e0.0","@material/typography":"15.0.0-canary.8656bf0e0.0","@material/feature-targeting":"15.0.0-canary.8656bf0e0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.8656bf0e0.0_1702415924223_0.826240865993422","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/form-field","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.7f224ddd4.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f3c332361ca5e00fdafb9f854cc5cebe445a340","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.7f224ddd4.0.tgz","fileCount":35,"integrity":"sha512-fEPWgDQEPJ6WF7hNnIStxucHR9LE4DoDSMqCsGWS2Yu+NLZYLuCEecgR0UqQsl1EQdNRaFh8VH93KuxGd2hiPg==","signatures":[{"sig":"MEUCIB6DJcSvgqXndxglDi2d7IlDBOSvT2/NawQHTpMIagTtAiEAgoYO4RUtjWP7cZw/w5/0Po/DHDZEM7O0VwlHhgGgFks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ff8ff3ce455054f1532d1ae0983f40634a524886","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.7f224ddd4.0","@material/base":"15.0.0-canary.7f224ddd4.0","@material/theme":"15.0.0-canary.7f224ddd4.0","@material/ripple":"15.0.0-canary.7f224ddd4.0","@material/typography":"15.0.0-canary.7f224ddd4.0","@material/feature-targeting":"15.0.0-canary.7f224ddd4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.7f224ddd4.0_1703743751216_0.15672231019331528","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/form-field","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.a0b8a90c0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1010980965e835e6454d2e5149b8f4ebbb3bfa38","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":35,"integrity":"sha512-6spQm9h7OO8k1A31ZYwF1DjpQWQnP6PZD/vAQKe6Q+xuI+e5JAaViNW2ygHHpdOhNAyejvG3MA6Wwag+xM+/dw==","signatures":[{"sig":"MEUCIQDsFjbODUekBnoFpUSt/Pd9aErgVU51+YU/SrP0yqZhhgIgS9VhyhrMdvMYgvfwczzQFVRvwrunVRxhHRK6d3lOESo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"85d5965379b080c9f852ecbbd95031e363636dfd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.a0b8a90c0.0","@material/base":"15.0.0-canary.a0b8a90c0.0","@material/theme":"15.0.0-canary.a0b8a90c0.0","@material/ripple":"15.0.0-canary.a0b8a90c0.0","@material/typography":"15.0.0-canary.a0b8a90c0.0","@material/feature-targeting":"15.0.0-canary.a0b8a90c0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.a0b8a90c0.0_1707333576127_0.8377543922242332","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/form-field","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.e50b478eb.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f0734de8b95ad79aeb5e10cb07d9a490bd0ca00","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.e50b478eb.0.tgz","fileCount":35,"integrity":"sha512-LKmddDuHZpamM3rjpSyb4RjrCkxgkdGm60vdRHybK2UEXG9LMl0CGsJA+2RX2DNJP+2SKeTZ8lcg0qZJkbYrfg==","signatures":[{"sig":"MEUCIEed7uG1CnI3Ms+Df1UQKBTap5J73Qhe8aXnEOeE2hTjAiEAzS6iTELm0c6EqwPWA75yW/icOzGe/RwLWR78EdIwilo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"4691455eaee76f99b18be70913c9fefb7cf3c2ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.e50b478eb.0","@material/base":"15.0.0-canary.e50b478eb.0","@material/theme":"15.0.0-canary.e50b478eb.0","@material/ripple":"15.0.0-canary.e50b478eb.0","@material/typography":"15.0.0-canary.e50b478eb.0","@material/feature-targeting":"15.0.0-canary.e50b478eb.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.e50b478eb.0_1707415686227_0.04516166614299166","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/form-field","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.c43b3438b.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7160f280c7692a29e46aadf1807eed9ae18f8575","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.c43b3438b.0.tgz","fileCount":35,"integrity":"sha512-txRTH6f/rSw/SnkRgYu4ietkNhGr4ix6xYvd1SIkWmtxONVf0ozcC9EF35dKbu2YNSqNVvs4FicQy/peBb6yIw==","signatures":[{"sig":"MEQCIH0JvnZSkS6PCqUB87vXFFqqw9eNycHj1J2qTG0IL3WsAiBpgW59n5SDu/xtGPqxMnK8xImyu+L7K+yZf02aYZt1zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"e69adcf897de97b302f026f07bbc2571b1a488ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.c43b3438b.0","@material/base":"15.0.0-canary.c43b3438b.0","@material/theme":"15.0.0-canary.c43b3438b.0","@material/ripple":"15.0.0-canary.c43b3438b.0","@material/typography":"15.0.0-canary.c43b3438b.0","@material/feature-targeting":"15.0.0-canary.c43b3438b.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.c43b3438b.0_1708719460425_0.6750355897315798","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/form-field","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.819498d8c.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a40e7663dbb12a8ea0d969bc10250bb58bad4044","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.819498d8c.0.tgz","fileCount":35,"integrity":"sha512-HFPddNU6bD9MRQByJUqNeKpq66w2euAhVLwiEORWPYk9I/QDz3/W9IP0cILYyQQi1N9cUzw1KegN9lStL/IRvg==","signatures":[{"sig":"MEUCIQD+dl8bPuIc6ZUeeydP07gcxywACY21L/dNdEEtWkc1TgIgXqvW991m4XMyjwm0vz2CL51sO/I2DCZ7ykIx8FFul90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"886876a8252aacefe1942b13ba9251af9204bcdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.819498d8c.0","@material/base":"15.0.0-canary.819498d8c.0","@material/theme":"15.0.0-canary.819498d8c.0","@material/ripple":"15.0.0-canary.819498d8c.0","@material/typography":"15.0.0-canary.819498d8c.0","@material/feature-targeting":"15.0.0-canary.819498d8c.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.819498d8c.0_1710515704078_0.9524557874183557","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/form-field","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.453a6248a.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f491040951b15e20fce3493ceee7718e67c3b61a","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.453a6248a.0.tgz","fileCount":35,"integrity":"sha512-ivBHDCQYw0Z/7Zo+K/Twj0iqZ0qYx7uDU+apC84wxZeIeGRiLbYyYRWhUEbTW4oKWIzG8XsMtxVIvNQkuGym5g==","signatures":[{"sig":"MEQCIGJT1LoEuEa+QdEZnR4XGgZV0zxZKnWAvyu/yoGZiQkeAiBR/A4gxeNmR/cQhKATcYTUNRTpLo9t3NMEXO4HjyEp3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1eea6443d63f2bc64fe8f6f86664b54266c41244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.453a6248a.0","@material/base":"15.0.0-canary.453a6248a.0","@material/theme":"15.0.0-canary.453a6248a.0","@material/ripple":"15.0.0-canary.453a6248a.0","@material/typography":"15.0.0-canary.453a6248a.0","@material/feature-targeting":"15.0.0-canary.453a6248a.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.453a6248a.0_1711386821104_0.4006536033889996","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/form-field","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.68edc03c6.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c081205cf2c440a430e3fc819c21bc7b54375ec","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.68edc03c6.0.tgz","fileCount":35,"integrity":"sha512-MfFT5dT5B2uk73n8qSa1UJQY2LsZH95serwOMOFh5BZDI9+vqvDwxH+1z/1sjll+Snw3BTpwF/OLFfWt7knuZw==","signatures":[{"sig":"MEQCIF+FjuRZVTYVPFRuIzbiQqhVUDHelCZX8RFyRGlFT0QvAiA9nMOfXanukN6vGg4ZgZN2GBxmSbnM3j6/OM9AYK3F3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"04046ad51f4d581f93e797ec929d219422dd0235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.68edc03c6.0","@material/base":"15.0.0-canary.68edc03c6.0","@material/theme":"15.0.0-canary.68edc03c6.0","@material/ripple":"15.0.0-canary.68edc03c6.0","@material/typography":"15.0.0-canary.68edc03c6.0","@material/feature-targeting":"15.0.0-canary.68edc03c6.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.68edc03c6.0_1712603174020_0.7464977127504053","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/form-field","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.5bebc0064.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71b46e23b641050dc701bdefa401ef873b634852","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.5bebc0064.0.tgz","fileCount":35,"integrity":"sha512-LYXqqa7yRfTuQYLHVwjkxkPZ18g4ysIcXWfeBdqJrxg1vA8Qc17itSHD7RCg+N1JD/q3j3TxNYtmSuMO6g91Tw==","signatures":[{"sig":"MEUCIQC3ajxhNUwNtdnCYWKvu/X9xojcy/tMClPWEDbZM14V8AIgap7waZw73IZOPC4ydbl7Bs4ki9aZfRldiQUwe4IorUM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"ff39e65972de013a29dd14429e111139bc616366","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.5bebc0064.0","@material/base":"15.0.0-canary.5bebc0064.0","@material/theme":"15.0.0-canary.5bebc0064.0","@material/ripple":"15.0.0-canary.5bebc0064.0","@material/typography":"15.0.0-canary.5bebc0064.0","@material/feature-targeting":"15.0.0-canary.5bebc0064.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.5bebc0064.0_1712871665885_0.09101309678116865","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/form-field","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.311f29a60.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b621df486b4d3ffa63bd13f9060510a9bfa75afc","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.311f29a60.0.tgz","fileCount":35,"integrity":"sha512-EcClKSgE6guKe11az1m2cg8DzHROOLhvtgQmyN7sqD1OakbcqcA0haMVbdI/pkWhjvznP/zLnTZ/pFJGWwYjSA==","signatures":[{"sig":"MEYCIQCEAah+tP3SGrDLiOIcuQwAoM9fzwZ5z5Bdx8tqriLTowIhAJu7INwAqzeoqNscktWFApG0TiGqGdS6mjaar0+iOPH8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"7bc0264e163e842f0f96c1dbf7a468c022db1497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.311f29a60.0","@material/base":"15.0.0-canary.311f29a60.0","@material/theme":"15.0.0-canary.311f29a60.0","@material/ripple":"15.0.0-canary.311f29a60.0","@material/typography":"15.0.0-canary.311f29a60.0","@material/feature-targeting":"15.0.0-canary.311f29a60.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.311f29a60.0_1713895208599_0.032493743496426086","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/form-field","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.65c10a622.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a26f9dcf6752bcad0f44ee599e5b80e4b49e595d","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.65c10a622.0.tgz","fileCount":35,"integrity":"sha512-8X2SwD5gDIbEUgNawqlM8J6OvRMuEsqCyXrzZ2AOy4HNZvUa4H3PDUwwaHBFmRFBWzzrsUVB0DgFFp3SDRuMVA==","signatures":[{"sig":"MEQCIDdmfcsO3qYEe1v5/3QSyuN/UcKQw3wJj0/EO15kfM09AiBx1sz1sw9SwjhDcOXX+xwHyI+9dnkbmK21eF2idN+bAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502035},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"1f3126503c812250084b65b6edbb26f25ef4a174","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.65c10a622.0","@material/base":"15.0.0-canary.65c10a622.0","@material/theme":"15.0.0-canary.65c10a622.0","@material/ripple":"15.0.0-canary.65c10a622.0","@material/typography":"15.0.0-canary.65c10a622.0","@material/feature-targeting":"15.0.0-canary.65c10a622.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.65c10a622.0_1714070939526_0.33992588577431193","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/form-field","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.4b35cb7d0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7abc42649814c257356c034dbf6f44c5e2d412a8","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":35,"integrity":"sha512-qatvoi35YRmmH2PC9T1iBct6Gp5HCLzTy2CrbLiXulyAKSE8jmbMOxFaoP04H7Op/9kESh4vyXn8PoY1UNh4sQ==","signatures":[{"sig":"MEUCIGpo8iI1/qJVVOih1Z4NBpt5L/qxgTSkpVQ08mmgX9FyAiEA0MLZMJcUJzoJ46nh3ewhg0mwjNK8YtHQtwRkVD068hg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502403},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"cba29aaa21c1bc2b1f1a02e5ddfa4a5110d9ef63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.4b35cb7d0.0","@material/base":"15.0.0-canary.4b35cb7d0.0","@material/theme":"15.0.0-canary.4b35cb7d0.0","@material/ripple":"15.0.0-canary.4b35cb7d0.0","@material/typography":"15.0.0-canary.4b35cb7d0.0","@material/feature-targeting":"15.0.0-canary.4b35cb7d0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.4b35cb7d0.0_1714651383302_0.9566376811454431","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/form-field","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.f80ac92b0.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66573bc13f904b93dc9f0f30b538284e73d57811","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.f80ac92b0.0.tgz","fileCount":35,"integrity":"sha512-3jadUtYuhLEL9HqZVeKVJgx/e+LcHrddMKurjwAytxqNEt4RbhnLCktA896UwOkVtBptb8INlKSX46LgevlQ1Q==","signatures":[{"sig":"MEQCIAQ3UVPNYey5oyK4yzTCp9ewWblihpqvx0OndfxGzkzCAiAPBSSGE4/LtBmM0tZRuXI+4QrLPVK9qKy5/ozGzDX2vQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502403},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"514a3afe9efc5bcebf1ace1e335357184ee1a9e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.f80ac92b0.0","@material/base":"15.0.0-canary.f80ac92b0.0","@material/theme":"15.0.0-canary.f80ac92b0.0","@material/ripple":"15.0.0-canary.f80ac92b0.0","@material/typography":"15.0.0-canary.f80ac92b0.0","@material/feature-targeting":"15.0.0-canary.f80ac92b0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.f80ac92b0.0_1714651995147_0.5557859074546885","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/form-field","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.2f5b899bc.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e36c4cab576bf2073dec4762c55abce6633e197","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.2f5b899bc.0.tgz","fileCount":35,"integrity":"sha512-/vQWstg6/Dao0q6ctDFiuduS1JJxF/ZBslkpO8D4JpJtsQZZi5MTzUc7vXC4BqWNty6qfF9xIozP1yXHOOc05A==","signatures":[{"sig":"MEUCID/dYXj92TyxcWsg3QBLy0cVY6UYT2Cy1n2EkGhrHhmMAiEA+StWMrJOvjMosYlCmKuACZRfKzSKY/z2oFWK6IpPmsE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502527},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"751553ca74ad43074c963487257a8862de87844b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.2f5b899bc.0","@material/base":"15.0.0-canary.2f5b899bc.0","@material/theme":"15.0.0-canary.2f5b899bc.0","@material/ripple":"15.0.0-canary.2f5b899bc.0","@material/typography":"15.0.0-canary.2f5b899bc.0","@material/feature-targeting":"15.0.0-canary.2f5b899bc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.2f5b899bc.0_1716213336236_0.35512910500592043","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/form-field","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","form"],"license":"MIT","_id":"@material/form-field@15.0.0-canary.cfec83c74.0","maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e78b88e98b96b772761b29e1a580657cb1b54a40","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.cfec83c74.0.tgz","fileCount":35,"integrity":"sha512-7OXNVKyymbOTbka3GZT/3ygooZgGs3Jo/F2q9dWLDF2vxiCxXA/5EEFcTJWNA3WehAhnJ85IH3NaCzVg3wMtqQ==","signatures":[{"sig":"MEUCIQDqhP0i1EJhXK3UWYYhinXnAt+s+osA+ScgT+n44TZvLwIgcKU+Sp6NwFa0VM7j3QNcG9dUsXEKXiVK1n43RllAAww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502527},"main":"dist/mdc.formField.js","module":"index.js","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","gitHead":"0ec8b129344ebbe45f00b6ad892b682b054ea892","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/rtl":"15.0.0-canary.cfec83c74.0","@material/base":"15.0.0-canary.cfec83c74.0","@material/theme":"15.0.0-canary.cfec83c74.0","@material/ripple":"15.0.0-canary.cfec83c74.0","@material/typography":"15.0.0-canary.cfec83c74.0","@material/feature-targeting":"15.0.0-canary.cfec83c74.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/form-field_15.0.0-canary.cfec83c74.0_1716231409451_0.5028727577045078","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/form-field","description":"Material Components for the web wrapper for laying out form fields and labels next to one another","version":"15.0.0-canary.423edc3dc.0","license":"MIT","keywords":["material components","material design","form"],"main":"dist/mdc.formField.js","module":"index.js","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-form-field"},"dependencies":{"@material/base":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/ripple":"15.0.0-canary.423edc3dc.0","@material/rtl":"15.0.0-canary.423edc3dc.0","@material/theme":"15.0.0-canary.423edc3dc.0","@material/typography":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"<!--docs:\ntitle: \"Form Fields\"\nlayout: detail\nsection: components\npath: /catalog/input-controls/form-fields/\n-->\n\n# Form Fields\n\nMDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a [ripple](../mdc-ripple) effect upon interacting with the label.\n\n## Installation\n\n```\nnpm install @material/form-field\n```\n\n## Demos\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/radio\">Demo with radio button</a>\n  </li>\n</ul>\n\n## Basic Usage\n\n### HTML Structure\n\nUse the `mdc-form-field` element to wrap any combination of adjacent _input_ and _label_ elements of MDC Web form controls, such as [MDC Checkbox](../mdc-checkbox) or [MDC Radio](../mdc-radio). Here's an example with MDC Checkbox:\n\n```html\n<div class=\"mdc-form-field\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n> _NOTE_: MDC Form Field is **not** intended for cases where a label and input are already handled together in a component's styles and logic. For example, [MDC Text Field](../mdc-textfield) already manages a label and input together under its own root element.\n\n### JavaScript Instantiation\n\nIf you are using MDC Form Field with an MDC Web component that has a [ripple](../mdc-ripple) effect, you can instantiate `MDCFormField` and set its [`input` property](#mdcformfield-properties-and-methods) to activate the ripple effect upon interacting with the label. Here is an example with [MDC Checkbox](../mdc-checkbox):\n\n```js\nimport {MDCFormField} from '@material/form-field';\nimport {MDCCheckbox} from '@material/checkbox';\n\nconst formField = new MDCFormField(document.querySelector('.mdc-form-field'));\nconst checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));\nformField.input = checkbox;\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Variants\n\n### Label position\n\nBy default, the input will be positioned before the label. You can position the input after the label by adding the `mdc-form-field--align-end` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--align-end\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This is my checkbox</label>\n</div>\n```\n\n### Nowrap\n\nIf the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the `mdc-form-field--nowrap` class:\n\n```html\n<div class=\"mdc-form-field mdc-form-field--nowrap\">\n  <div class=\"mdc-checkbox\">\n    <input type=\"checkbox\" id=\"my-checkbox\" class=\"mdc-checkbox__native-control\"/>\n    <div class=\"mdc-checkbox__background\">\n      ...\n    </div>\n  </div>\n  <label class=\"mdc-label\" for=\"my-checkbox\">This some really really really long text</label>\n</div>\n```\n\n## `MDCFormField` Properties and Methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`input` | String | Gets and sets the form field input.\n\nIn order for the label ripple integration to work correctly, the `input` property needs to be set to a valid instance of an MDC Web input element which exposes a `ripple` getter. No action is taken if the `input` property is not set or the input instance doesn't expose a `ripple` getter.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCFormFieldAdapter`\n\n| Method Signature | Description |\n| --- | --- |\n| `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type` to the label. |\n| `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type` to the label. |\n| `activateInputRipple() => void` | Activates the ripple on the input element. Should call `activate` on the input element's `ripple` property. |\n| `deactivateInputRipple() => void` | Deactivates the ripple on the input element. Should call `deactivate` on the input element's `ripple` property. |\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/form-field@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-1A8YELmDDgWmEuTQ38SkpZgV13GfYUrcVAAI1UmgTsRFy454npyYW7R5bEiMAPn81Ifj5EayoBhZhuwPT1Fmcw==","shasum":"7dc9a6f065d3ceb29b3772e228bed1bf5747cffe","tarball":"https://registry.npmjs.org/@material/form-field/-/form-field-15.0.0-canary.423edc3dc.0.tgz","fileCount":35,"unpackedSize":502527,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSjhyjDx9GDSmCtOso0ed0xQjnyBUKbd3LBntANa/fpQIgF8ACEWAqjnxmXOg+lLOLo2JRkxDaRr10zhpDXHs9IFs="}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/form-field_15.0.0-canary.423edc3dc.0_1719425517296_0.4701032695986769"},"_hasShrinkwrap":false}},"time":{"created":"2016-12-15T17:55:01.241Z","modified":"2024-06-26T18:11:57.934Z","0.1.0":"2016-12-15T17:55:01.241Z","0.1.1":"2017-01-23T16:49:37.976Z","0.2.0":"2017-02-21T17:27:35.735Z","0.2.1":"2017-03-06T17:02:13.320Z","0.2.2":"2017-04-03T15:28:02.731Z","0.2.3":"2017-04-18T14:51:21.057Z","0.2.4":"2017-05-01T15:43:10.313Z","0.2.5":"2017-05-15T16:26:03.416Z","0.2.6":"2017-05-30T19:04:38.570Z","0.2.7":"2017-06-12T15:53:19.527Z","0.2.8":"2017-06-26T16:10:54.989Z","0.2.9":"2017-07-10T15:58:50.546Z","0.2.10":"2017-07-24T15:49:18.328Z","0.2.11":"2017-08-07T20:48:28.819Z","0.2.12":"2017-08-21T17:27:52.965Z","0.2.13":"2017-08-24T14:46:47.785Z","0.2.14":"2017-08-25T17:20:57.511Z","0.2.15":"2017-09-05T20:16:07.665Z","0.2.16":"2017-09-18T18:35:43.214Z","0.2.17":"2017-10-02T21:11:47.131Z","0.23.0":"2017-10-16T21:02:19.934Z","0.24.0":"2017-10-30T19:11:24.827Z","0.25.0":"2017-11-13T20:02:27.761Z","0.26.0":"2017-11-27T22:26:26.790Z","0.27.0":"2017-12-11T19:35:33.118Z","0.28.0":"2018-01-08T18:55:13.033Z","0.29.0":"2018-01-22T18:30:58.311Z","0.30.0":"2018-02-05T22:02:50.857Z","0.31.0":"2018-02-20T18:23:00.491Z","0.32.0":"2018-03-05T22:08:44.438Z","0.33.0":"2018-03-19T16:40:02.333Z","0.34.0":"2018-04-02T21:51:55.270Z","0.34.1":"2018-04-03T23:39:47.513Z","0.35.0":"2018-04-23T22:40:18.844Z","0.36.0-0":"2018-05-29T15:24:22.699Z","0.36.0":"2018-06-04T15:38:41.979Z","0.37.0":"2018-07-02T22:14:40.823Z","0.37.1":"2018-07-16T21:20:46.915Z","0.38.0":"2018-07-30T17:07:43.870Z","0.38.1":"2018-08-13T20:39:30.768Z","0.39.0-0":"2018-08-16T15:16:06.658Z","0.39.0":"2018-08-27T17:41:07.640Z","0.39.1":"2018-08-31T21:36:54.251Z","0.39.2":"2018-09-11T16:55:29.513Z","0.39.3":"2018-09-11T17:19:26.058Z","0.40.0":"2018-09-24T20:02:12.675Z","0.40.1":"2018-10-08T21:07:19.776Z","0.41.0":"2018-10-29T20:22:26.480Z","0.42.0":"2018-12-04T22:55:11.068Z","0.43.0":"2019-01-07T19:49:34.732Z","0.44.0":"2019-02-04T18:24:30.123Z","0.44.1":"2019-02-19T23:03:13.952Z","1.0.0-0":"2019-02-27T23:59:37.218Z","1.0.0-1":"2019-03-04T23:33:31.319Z","1.0.0":"2019-03-06T21:08:21.355Z","1.0.1":"2019-03-11T22:07:32.020Z","1.1.0":"2019-03-26T19:26:00.372Z","2.0.0":"2019-04-29T17:40:11.289Z","2.1.1":"2019-05-10T17:25:18.313Z","2.3.0":"2019-05-28T21:23:54.299Z","3.0.0-alpha.0":"2019-06-12T04:06:58.968Z","3.0.0-alpha.1":"2019-06-12T19:02:20.043Z","3.0.0":"2019-06-25T22:27:57.898Z","3.1.0-alpha.0":"2019-07-16T13:29:16.835Z","3.1.0":"2019-07-22T22:02:39.517Z","4.0.0-alpha.0":"2019-08-07T21:09:43.340Z","4.0.0-canary.0":"2019-09-05T04:37:59.496Z","4.0.0-canary.1":"2019-09-09T20:20:53.827Z","3.2.0":"2019-09-12T21:53:41.135Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:42.210Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:28.875Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:17.721Z","4.0.0-canary.199534d61.0":"2019-09-27T18:58:01.744Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:24.090Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:46.608Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:45.914Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:04:53.266Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:09:00.841Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:33.744Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:11:05.115Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:26.372Z","4.0.0-canary.01628efa.0":"2019-10-29T00:03:23.637Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:57:10.137Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:59:12.650Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:01:51.827Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:29:31.597Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:01:47.411Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:11:07.313Z","4.0.0":"2019-11-02T18:11:52.484Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:33:59.867Z","5.0.0-canary.58500806e.0":"2019-11-08T15:36:04.718Z","5.0.0-canary.66299b646.0":"2019-11-08T20:34:01.873Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:31.968Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:07:33.670Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:42:41.625Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:38:03.735Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:59:02.764Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:31:11.134Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:06:17.793Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:33:09.361Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:48:54.584Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:19:45.407Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:10:07.702Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:10:57.268Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:11:20.067Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:55:28.203Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:17:05.915Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:07:52.165Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:18:27.885Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:20:18.151Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:20:46.048Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:55:24.688Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:23:04.698Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:59:27.564Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:56:15.093Z","5.0.0-canary.50f110a6c.0":"2019-12-10T17:00:05.584Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:16:39.730Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:47:38.084Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T18:59:38.911Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:10:21.952Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:37:23.621Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:10:28.181Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:33:40.207Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:40:58.819Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:17:18.550Z","5.0.0-canary.391674a26.0":"2019-12-18T19:17:36.528Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:35:32.605Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:20:42.829Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:24:28.665Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:50:17.402Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:25:20.303Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:14:47.047Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:27:30.476Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:24:31.238Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:10:11.789Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:27:08.204Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:48:09.180Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:50:28.227Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:54:59.241Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:46:01.585Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:03:34.568Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:54:27.361Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:42:41.773Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:09:51.077Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:22:45.971Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:37:22.334Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:26:38.895Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:55:55.458Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T15:00:10.298Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:16:44.254Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:10:44.332Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:39:52.973Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:15:35.007Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:26:24.652Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:39:59.246Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:17:28.004Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:19:36.951Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:21:14.222Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:22:31.622Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:57:16.699Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:28:14.516Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:41:52.718Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:10:39.219Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:11:11.711Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:22:40.906Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:43:00.412Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:58:37.090Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:16:36.501Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:23:29.940Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:40:39.334Z","5.0.0-canary.1eb032637.0":"2020-01-08T23:00:20.779Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:01:13.727Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:10:38.000Z","5.0.0-canary.aab102017.0":"2020-01-10T00:12:39.629Z","5.0.0-canary.426913342.0":"2020-01-10T01:44:37.601Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:25:41.859Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:57:15.584Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:27:22.655Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:19:11.064Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:32:50.209Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:14:09.710Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:15:42.832Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:53:38.391Z","5.0.0-canary.60354c577.0":"2020-01-14T22:46:16.673Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:39:05.204Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:43:21.831Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:10:44.108Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:48:19.736Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:48:43.000Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:17:46.461Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:24:27.997Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:47:16.691Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:07:20.704Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:37:04.726Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:00:39.396Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:17:31.701Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:21:03.565Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:36:17.407Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:31:08.713Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:40:06.689Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:11:53.496Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:50:12.238Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:37:38.757Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:46:41.574Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:45:17.213Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:22:50.141Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:55:54.664Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:57:59.923Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:17:20.389Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:09:44.436Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:12:55.741Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:55:32.716Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:55:28.707Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:47:54.228Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:21:14.700Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:46:01.704Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:32:42.446Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:56:18.286Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:24:29.681Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:29:40.565Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:43:38.763Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:49:13.898Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:09:54.588Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:56:00.931Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:16:54.104Z","5.0.0-canary.45985457b.0":"2020-01-29T23:33:15.993Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:37:37.975Z","5.0.0-canary.181486643.0":"2020-01-30T20:56:28.947Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:23:29.616Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:03:15.866Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:10:31.394Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:12:54.407Z","5.0.0-canary.535398572.0":"2020-02-03T18:12:10.717Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:04:02.223Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:00:57.439Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:03:52.958Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:33:39.220Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:30:07.881Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:21:29.355Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:55:41.906Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T22:59:40.154Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:48:57.875Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:25:19.367Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:11:50.106Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:43:39.422Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:43:26.048Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:49:18.523Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:51:46.318Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:43:55.922Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:06:28.338Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:23:51.910Z","5.0.0":"2020-02-14T00:09:06.801Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:48:25.826Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:43:59.424Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:22:49.049Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:16:24.760Z","6.0.0-canary.765caef18.0":"2020-02-21T17:33:09.216Z","6.0.0-canary.949562303.0":"2020-02-21T20:38:01.508Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:58:18.553Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:01:00.293Z","5.1.0":"2020-02-25T21:38:23.390Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:39:03.337Z","6.0.0-canary.781434a92.0":"2020-02-25T23:28:14.575Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:03:47.022Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:12:24.546Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:10:49.363Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:26:00.540Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:44:23.213Z","6.0.0-canary.98b843417.0":"2020-03-05T18:31:17.208Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:22:32.258Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:47:10.228Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:22:27.558Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:02:41.039Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:37:25.349Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:58:47.522Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:05:42.626Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:33:33.342Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:25:46.125Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:38:19.311Z","6.0.0-canary.bec065920.0":"2020-03-12T20:20:26.484Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:21:03.761Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:01:29.353Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:48:13.092Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:35:03.542Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:36:08.681Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:53:45.170Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:59:28.539Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:15:32.286Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:43:49.725Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:47:28.332Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:18:38.328Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:05:15.539Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:56:45.118Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:19:50.124Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:56:36.348Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:56:14.305Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:09:50.668Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:14:17.254Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:04:24.915Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:25:01.393Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:36:56.511Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:42:02.076Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:32:49.014Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:30:13.489Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:47:38.461Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:23:23.805Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:46:48.398Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:31:27.806Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:53:02.962Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:34:19.731Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:06:20.176Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:10:42.103Z","6.0.0-canary.c02642273.0":"2020-04-15T16:17:48.580Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:43:38.656Z","6.0.0-canary.490fbdc09.0":"2020-04-16T06:00:05.045Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:27:05.861Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:19:32.668Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:54:50.251Z","6.0.0-canary.ca61b656f.0":"2020-04-16T20:00:23.179Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:33:16.101Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:41:33.374Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:03:17.131Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:21:51.095Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:18:19.706Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:58:46.424Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:56:26.763Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:20:42.188Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:15:16.441Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:18:49.590Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:42:21.625Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:07:41.249Z","7.0.0-canary.8540808be.0":"2020-04-23T17:26:24.813Z","6.0.0":"2020-04-23T17:27:01.124Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:46:05.472Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:21:32.257Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:06:23.869Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:19:11.461Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:44:17.826Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:32:41.452Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:07:33.879Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:17:48.132Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:44:25.406Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:30:00.559Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:28:15.088Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:33:09.773Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:42:43.366Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:26:11.017Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:23:02.507Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:36:12.039Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:47:54.007Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:19:27.321Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:31:31.984Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:34:26.839Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T16:59:37.489Z","7.0.0-canary.09f591967.0":"2020-05-05T21:04:47.415Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:09:52.024Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:08:15.895Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:55:30.323Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:19:03.473Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:49:49.429Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:38:48.489Z","7.0.0-canary.119e21426.0":"2020-05-08T20:22:52.625Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:07:51.427Z","7.0.0-canary.e84444387.0":"2020-05-08T21:31:55.299Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:13:31.683Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:29:37.407Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:32:54.175Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:27:39.774Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:25:23.866Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:18:33.443Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:47:41.721Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:43:08.923Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:51:48.764Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:53:58.866Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:44:27.626Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:18:21.228Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:51:05.589Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:09:43.835Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:38:32.988Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:37:14.768Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:50:54.918Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:03:09.361Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:13:11.533Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:41:30.937Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:02:26.086Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:14:57.424Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:18:32.057Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:20:23.150Z","7.0.0-canary.740860e78.0":"2020-05-21T17:27:02.414Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:29:01.759Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:29:27.545Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:32:07.133Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:33:26.726Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:48:24.165Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:21:24.689Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T21:00:10.019Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:04:19.052Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:28:58.270Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:32:22.428Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:33:20.424Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:46:40.785Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:45:42.338Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:07:55.471Z","7.0.0-canary.01de07011.0":"2020-05-26T19:52:54.340Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:35:27.291Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:14:02.050Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:55:12.669Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T18:59:38.106Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:16:48.354Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:21:10.853Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:30:21.071Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:38:35.102Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:37:15.965Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:51:36.380Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:55:43.849Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:50:38.778Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:15:31.091Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:05:22.135Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:40:59.471Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:25:51.533Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:44:37.347Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:49:20.934Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:49:08.311Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:26:26.321Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:03:04.657Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:23:54.325Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:52:35.784Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:47:05.351Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:03:21.571Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:58:00.036Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:09:28.897Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:12:56.291Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:14:40.212Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:14:54.835Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:04:54.521Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:44:41.503Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:42:21.212Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:57:31.819Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:54:22.591Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:26:36.489Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:16:42.086Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:39:50.949Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:46:46.907Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:08:38.421Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:30:54.145Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:49:37.122Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:21:28.110Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:15:55.653Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:04:31.779Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:16:34.529Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:21:34.968Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:28:03.135Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:48:26.612Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:10:49.032Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:20:08.095Z","7.0.0-canary.10b505785.0":"2020-06-19T20:21:37.989Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:37:52.006Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:40:05.782Z","7.0.0-canary.c20727498.0":"2020-06-19T20:42:55.615Z","7.0.0-canary.4e360ae94.0":"2020-06-19T20:59:41.146Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:01:59.155Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:03:08.503Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:28:17.764Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:30:28.699Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:31:33.787Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:34:17.181Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:23:54.436Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:14:46.153Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:17:19.351Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:25:25.332Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:53:36.973Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:57:35.243Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:29:34.055Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:28:22.287Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:33:53.982Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:40:16.737Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:48:25.182Z","7.0.0-canary.080965f39.0":"2020-06-23T15:17:47.390Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T16:00:12.729Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:25:14.448Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:48:09.450Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:00:36.880Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:03:11.844Z","7.0.0":"2020-06-23T19:10:53.454Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:11:53.832Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:41:20.262Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:56:09.119Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:31:48.632Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:56:47.638Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:53:28.620Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:38:48.453Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:01:59.184Z","8.0.0-canary.38197b443.0":"2020-06-25T21:22:42.462Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:38:56.920Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:16:58.368Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:48:27.673Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:23:46.691Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:15:29.157Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:30:53.919Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:52:09.538Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:05:46.318Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:14:34.636Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:47:11.936Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:56:21.155Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:27:24.846Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:39:10.074Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:41:40.089Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:48:21.973Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:16:02.460Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:44:22.039Z","8.0.0-canary.d850de590.0":"2020-07-09T18:05:39.628Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:35:27.229Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:36:40.109Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:51:56.876Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:20:49.491Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:12:40.098Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:42:53.910Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:07:27.631Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:34:30.441Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:20:19.680Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:10:42.675Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:13:13.827Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:15:17.599Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:34:37.605Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:09:32.024Z","8.0.0-canary.01db89053.0":"2020-07-16T16:39:40.535Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:20:13.084Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:55:50.390Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:50:24.280Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:47:22.282Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:23:23.876Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:33:59.856Z","8.0.0-canary.12a109680.0":"2020-07-22T23:03:42.537Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:53:05.226Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:49:52.131Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:46:43.142Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:47:38.765Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:59:01.936Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T20:59:49.847Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:23:54.791Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:24:13.512Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:43:50.114Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:10:59.625Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:57:03.310Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:13:31.726Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:06:50.455Z","8.0.0-canary.75553837c.0":"2020-07-27T15:12:43.767Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:38:18.101Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:47:19.845Z","8.0.0-canary.81dc33377.0":"2020-07-27T15:59:30.194Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:32:46.852Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:08:44.478Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:51:29.149Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:58:18.570Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:58:35.633Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:54:17.432Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:50:36.652Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:39:26.894Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:52:42.514Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:16:17.448Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:36:36.351Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:49:26.278Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:20:55.108Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:35:11.287Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:39:02.323Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:15:02.834Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:25:41.540Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:01:35.613Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:10:38.383Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:15:31.910Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:27:50.450Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:10:27.368Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:21:45.144Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:46:21.866Z","8.0.0-canary.005e86a9b.0":"2020-07-30T18:00:11.842Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:09:13.488Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:20:36.584Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:31:38.710Z","8.0.0-canary.f041a48c9.0":"2020-07-30T22:59:48.179Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:50:40.088Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:23:16.232Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:51:21.543Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:53:56.456Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:54:23.694Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:54:44.189Z","8.0.0-canary.72258f898.0":"2020-08-04T01:17:34.656Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:48:31.416Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:24:24.902Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:49:01.514Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:54:13.093Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:20:07.752Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:39:37.459Z","8.0.0-canary.08090126b.0":"2020-08-06T19:32:51.102Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:50:12.278Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:26:56.769Z","8.0.0-canary.96a640534.0":"2020-08-06T22:41:41.467Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:51:34.418Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:20:36.385Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:48:49.186Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:52:47.582Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:31:05.993Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:02:06.360Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:08:25.826Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:04:23.407Z","8.0.0-canary.760873445.0":"2020-08-12T21:43:30.214Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:53:27.453Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:00:54.384Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:28:54.683Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:12:38.488Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:29:14.819Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:50:07.542Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:17:37.167Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:51:13.733Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:16:24.611Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:29:55.227Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:22:42.721Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:38:39.504Z","8.0.0-canary.000d64815.0":"2020-08-17T17:04:31.531Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:32:01.974Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:37:02.743Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:42:12.174Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:24:09.534Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:21:12.142Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:33:11.205Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:37:48.637Z","8.0.0-canary.546277d32.0":"2020-08-20T16:43:21.671Z","8.0.0-canary.da72839f4.0":"2020-08-20T18:00:09.239Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:18:39.005Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:15:21.355Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:57:57.383Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:06:38.184Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:52:49.023Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:29:04.359Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:11:58.551Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:00:35.079Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:41:04.885Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:04:04.605Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:56:37.807Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:49:35.363Z","8.0.0-canary.911014711.0":"2020-08-27T16:08:18.092Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:55:40.553Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:56:03.876Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:56:42.224Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:13:03.791Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:16:14.648Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:10:47.320Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:49:57.867Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:55:51.147Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:10:25.940Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:00:27.020Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:32:58.011Z","8.0.0-canary.40d8e4726.0":"2020-09-14T23:30:15.621Z","8.0.0-canary.c25d70a31.0":"2020-09-15T02:29:16.580Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:54:36.277Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:52:08.717Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:58:59.170Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:25:59.653Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:43:18.302Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:10:47.253Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:18:09.275Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:43:24.341Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:14:25.286Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:46:33.844Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:32:33.008Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:35:53.871Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:51:36.951Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:24:48.048Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:54:27.106Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:10:20.833Z","8.0.0-canary.d71622574.0":"2020-10-09T16:32:08.052Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:54:16.212Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:46:41.883Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:57:05.092Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:16:02.066Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:17:54.811Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:04:38.829Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:08:22.590Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:51:53.671Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:31:35.041Z","8.0.0-canary.596e98424.0":"2020-10-28T16:03:53.301Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:12:25.430Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:45:21.773Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:13:02.872Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:41:32.449Z","8.0.0-canary.c61db90a5.0":"2020-10-28T19:00:04.576Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:32:46.001Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:00:34.181Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:05:13.414Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T22:59:30.030Z","8.0.0":"2020-11-02T22:59:54.320Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:21:49.396Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:28:15.716Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:37:29.884Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:09:25.988Z","9.0.0-canary.419e03572.0":"2020-11-04T01:33:19.698Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:46:10.845Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:05:39.737Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:56:52.816Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:16:20.247Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:44:54.543Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:21:01.610Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:50:17.907Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:46:04.739Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:17:33.609Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:25:26.295Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:28:08.987Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:58:22.911Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:44:13.245Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:35:07.957Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:26:17.391Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:52:43.781Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:55:34.626Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:18:43.623Z","9.0.0-canary.a41527604.0":"2020-11-19T20:00:30.658Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:56:01.243Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:47:46.472Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:09:11.946Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:16:10.621Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:31:19.637Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:33:29.302Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:40:37.613Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:51:37.613Z","9.0.0-canary.fd22355f7.0":"2020-11-30T22:59:49.412Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:56:53.239Z","9.0.0-canary.977585650.0":"2020-12-02T14:42:18.453Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:49:55.078Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:07:49.423Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:16:43.825Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:22:44.810Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:29:55.252Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:41:44.774Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T15:58:28.490Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:02:02.968Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:45:27.208Z","9.0.0-canary.832668d33.0":"2020-12-04T18:06:12.317Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:29:17.135Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:42:29.639Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:49:46.695Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:01:43.785Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:13:31.280Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:28:35.179Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:32:34.021Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:45:54.620Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:05:32.833Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:11:17.620Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:50:08.458Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:08:19.708Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:45:19.208Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:28:23.751Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:05:46.007Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:07:37.397Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:02:04.239Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:27:50.550Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:07:41.684Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:42:12.635Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:05:17.176Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:45:51.551Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:08:44.892Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:48:13.718Z","9.0.0":"2020-12-29T19:46:19.364Z","10.0.0-canary.776c18681.0":"2020-12-30T00:40:21.652Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:12:08.800Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:46:40.947Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:04:30.316Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:09:55.734Z","10.0.0-canary.365c69360.0":"2021-01-05T17:48:30.204Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:00:47.153Z","10.0.0-canary.766981c15.0":"2021-01-05T22:40:33.813Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:50:12.741Z","10.0.0-canary.968735356.0":"2021-01-06T15:51:03.983Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:44:30.222Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:26:22.403Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:34:25.669Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:20:03.951Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:51:41.708Z","10.0.0-canary.089de519c.0":"2021-01-08T22:20:52.141Z","10.0.0-canary.163119837.0":"2021-01-08T23:45:33.042Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:24:56.384Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:12:32.378Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:55:23.300Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:07:14.860Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:10:32.086Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:34:20.818Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:26:50.104Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:54:03.284Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:19:17.460Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:08:15.042Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:55:13.151Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:09:49.289Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:05:03.325Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:56:37.120Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:52:23.929Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:51:43.411Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:36:00.672Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:24:05.829Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:10:22.379Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:45:11.848Z","10.0.0-canary.623af861e.0":"2021-01-26T03:45:28.778Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:33:32.218Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:46:15.338Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:04:17.583Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:27:28.260Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:20:24.239Z","10.0.0-canary.994873795.0":"2021-01-27T14:51:18.288Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:02:31.719Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:32:35.262Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:03:53.234Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:03:47.498Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:14:52.408Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:20:41.500Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:49:29.465Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:43:14.394Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:18:46.239Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:34:12.795Z","10.0.0-canary.05f249666.0":"2021-02-04T17:50:28.396Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:43:23.280Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:35:08.099Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:00:51.923Z","10.0.0-canary.533092a90.0":"2021-02-05T03:46:57.706Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:17:36.902Z","10.0.0":"2021-02-05T16:19:10.394Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:42:15.493Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:31:52.315Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:05:03.219Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:03:43.269Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:34:36.799Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:17:37.003Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:00:25.852Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:41:32.867Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:52:54.718Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:16:56.594Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:07:05.236Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:42:07.673Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:31:06.122Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T15:59:35.156Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:31:04.344Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:11:54.366Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:16:23.617Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:10:07.635Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:25:22.416Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:58:19.213Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:44:58.913Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:35:18.062Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:05:40.875Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:37:57.961Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:23:40.326Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:42:40.518Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:27:45.776Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:37:10.928Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:13:23.066Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:36:46.739Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:45:52.196Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:00:53.203Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:49:38.529Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:46:06.666Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:30:50.208Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:14:11.099Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:33:04.235Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:34:29.353Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:34:49.830Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:50:50.092Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:15:47.804Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:48:06.878Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:22:31.664Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:37:20.824Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:07:34.017Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:38:58.585Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:53:19.420Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:21:07.889Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:31:58.215Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:24:24.088Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:42:23.330Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:01:09.794Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:40:09.262Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:49:42.626Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:45:49.510Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:40:00.765Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:44:18.306Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:27:40.662Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:52:28.759Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:57:26.498Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:25:06.379Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:49:58.841Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:02:51.940Z","11.0.0-canary.81911b707.0":"2021-03-11T18:23:27.434Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:36:57.921Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:01:34.290Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:08:55.229Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:33:15.108Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:40:35.394Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:44:19.232Z","11.0.0-canary.73a227194.0":"2021-03-12T00:24:05.485Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:03:04.952Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:35:01.696Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:20:11.034Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:47:54.224Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:12:24.270Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:39:36.655Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:41:28.457Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:01:46.615Z","11.0.0-canary.6072ed604.0":"2021-03-17T22:59:29.389Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:20:02.379Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:17:17.601Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:44:12.489Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:17:55.674Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:37:59.763Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:51:16.237Z","11.0.0-canary.cbc57c600.0":"2021-03-19T00:59:45.493Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:12:22.908Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:33:51.035Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:44:07.999Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:05:08.350Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:37:45.795Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:07:54.619Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:02:57.074Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:54:09.275Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:04:38.797Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:29:38.520Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:16:24.305Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:32:43.004Z","11.0.0-canary.e3ec22f45.0":"2021-03-25T17:56:42.050Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:57:27.163Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:48:41.026Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:20:52.333Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:33:44.259Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:11:43.699Z","11.0.0-canary.24609b822.0":"2021-03-31T20:57:08.415Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:05:17.385Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:00:53.745Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:47:24.256Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:24:08.021Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:05:14.883Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:00:35.298Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:42:19.856Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:44:45.199Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:53:55.080Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:57:51.250Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:35:49.415Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:38:45.932Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:35:27.745Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:11:12.841Z","11.0.0-canary.24255c408.0":"2021-04-09T20:12:30.008Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:53:40.995Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:15:39.211Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:43:35.193Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:03:08.419Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:04:14.005Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:31:27.218Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:46:12.421Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:54:20.440Z","11.0.0":"2021-04-15T22:58:29.042Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:45:08.588Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:46:55.296Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:41:26.385Z","12.0.0-canary.b52196498.0":"2021-04-19T19:57:56.324Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:08:39.455Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:57:19.403Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:37:59.181Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:49:32.440Z","12.0.0-canary.cad489689.0":"2021-04-22T16:49:36.753Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:34:34.836Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:13:20.335Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:43:15.191Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:49:34.745Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:10:02.782Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:19:58.659Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:58:45.280Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:36:34.502Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:57:51.786Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:46:16.954Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:07:39.123Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:13:05.683Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:48:04.480Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:53:43.444Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:44:59.680Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:49:25.000Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:43:10.356Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:18:11.050Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:23:54.852Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:02:09.155Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:37:55.048Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:22:27.936Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:53:38.944Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:22:43.265Z","12.0.0-canary.33148231f.0":"2021-05-03T19:38:59.897Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:45:55.766Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:41:53.546Z","12.0.0-canary.de997644b.0":"2021-05-04T17:28:26.529Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:55:15.047Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:00:16.272Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:10:39.553Z","12.0.0-canary.718c90178.0":"2021-05-04T19:27:58.152Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:30:39.054Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:34:03.880Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:49:45.650Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:58:17.975Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:03:19.292Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:06:41.386Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:21:58.929Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:16:30.941Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:27:25.785Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T21:00:14.525Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:41:05.810Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:39:28.540Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:30:11.886Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:56:34.204Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:29:34.940Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:43:46.938Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:43:19.917Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:19:04.622Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:23:42.392Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:05.164Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:56:58.368Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:09:08.387Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:24:58.861Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:58:46.208Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:58:37.209Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:17:27.245Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:22:44.954Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:19:56.990Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:23:23.049Z","12.0.0-canary.33a954852.0":"2021-05-13T15:07:51.566Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:31:08.631Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:08:16.038Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:13:52.846Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:40:50.185Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:54:02.638Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:13:20.013Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:28:28.818Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:57:00.306Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:51:13.448Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:18:45.836Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:05:57.285Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:14:36.845Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:35:34.057Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:05:03.891Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:45:45.734Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:54:34.935Z","12.0.0-canary.464a00286.0":"2021-06-03T14:46:19.931Z","12.0.0-canary.474de7878.0":"2021-06-03T15:14:24.398Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:46:27.457Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:14:17.366Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:41:52.944Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:48:32.902Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:22:21.273Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:41:02.342Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:06:18.619Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:07:18.436Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:36:01.014Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:35:57.777Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:06:02.797Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:46:36.205Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:39:17.268Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:18:15.361Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:22:06.899Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:30:17.424Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:03:43.405Z","12.0.0-canary.271fff902.0":"2021-06-15T22:51:14.599Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:52:40.252Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:06:25.140Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:05:33.573Z","12.0.0-canary.940550232.0":"2021-06-17T19:40:20.943Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:24:39.882Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:11:53.555Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:40:37.477Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:37:07.888Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:12:13.287Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:24:46.792Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:27:34.030Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:15:04.395Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:52:42.680Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:41:02.660Z","12.0.0-canary.796811db7.0":"2021-07-01T00:03:35.857Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:06:43.997Z","12.0.0-canary.435866d32.0":"2021-07-02T18:21:23.063Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-03T00:00:13.355Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:09:26.057Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:03:50.008Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:04:22.974Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:25:40.863Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:51:32.171Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:49:33.115Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:09:29.947Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:44:26.336Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:54:06.291Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:50:43.676Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:22:37.384Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:48:18.994Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:08:20.381Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:22:06.449Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:42:31.475Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:07:23.780Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:58:09.223Z","12.0.0-canary.7239684d4.0":"2021-07-16T15:59:20.801Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:14:14.895Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:43:21.274Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:42:12.647Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:08:57.470Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:57:02.534Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:05:41.136Z","12.0.0-canary.791311bba.0":"2021-07-20T22:07:45.593Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:36:09.646Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:50:03.958Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:06:37.309Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:38:32.918Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:12:28.268Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:32:26.527Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:55:59.498Z","12.0.0-canary.22f390c43.0":"2021-07-27T19:00:06.757Z","12.0.0":"2021-07-27T19:50:04.475Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:51:42.059Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:18:24.523Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:26:04.432Z","13.0.0-canary.28656298a.0":"2021-07-29T18:13:18.502Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:35:34.037Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:05:17.052Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:33:36.226Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:23:33.565Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:14:06.485Z","13.0.0-canary.a80c8b2c2.0":"2021-08-04T23:59:58.803Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:56:36.660Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:42:30.123Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:18:19.337Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:50:08.106Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:15:06.488Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:07:39.451Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:17:31.406Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:17:48.387Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:21:46.906Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:41:07.107Z","13.0.0-canary.f4241a42a.0":"2021-08-11T16:59:47.096Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:29:00.494Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:55:33.869Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:45:32.798Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:48:44.728Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:08:20.703Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:22:05.172Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:54:30.650Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:14:29.448Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:23:50.212Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:02:29.767Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:17:53.781Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:48:58.882Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:32:32.283Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:26:54.313Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:20:37.567Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:44:31.478Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:26:57.187Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:28:47.083Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:17:18.001Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:28:04.048Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:48:42.298Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:18:19.397Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:33:26.452Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:53:57.865Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T21:59:37.149Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:38:15.613Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:05:58.021Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:09:12.232Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:44:30.606Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:54:32.573Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:11:33.345Z","13.0.0-canary.611db508e.0":"2021-09-02T03:15:15.802Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:37:55.853Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:44:58.164Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:46:32.216Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:30:02.087Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:31:40.054Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:32:08.067Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:42:58.810Z","13.0.0-canary.72464476c.0":"2021-09-07T15:34:20.068Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:33:35.472Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:43:18.843Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:35:36.660Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:01:31.248Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:10:29.371Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:25:29.488Z","13.0.0-canary.864798678.0":"2021-09-09T18:36:53.555Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:21:40.861Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:03:45.168Z","13.0.0-canary.08398f880.0":"2021-09-13T23:34:26.970Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:50:23.175Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:12:23.299Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T21:59:08.124Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:17:26.658Z","13.0.0-canary.80a583365.0":"2021-09-17T20:35:40.966Z","13.0.0-canary.83900936a.0":"2021-09-17T23:24:13.746Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:36:03.892Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:47:29.942Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:37:36.634Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:11:49.009Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:57:59.227Z","13.0.0-canary.65084baff.0":"2021-09-23T21:25:32.488Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:41:58.716Z","13.0.0":"2021-09-24T19:45:45.891Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:46:30.518Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:11:05.361Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:29:18.802Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:43:07.025Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:56:49.376Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:31:11.821Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:28:37.102Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:46:50.691Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:22:08.785Z","14.0.0-canary.261f2db59.0":"2021-10-20T16:59:43.676Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:21:46.209Z","14.0.0-canary.348665978.0":"2021-10-21T14:50:35.785Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:12:08.498Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:52:53.972Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:01:38.836Z","14.0.0-canary.a986df922.0":"2021-10-29T21:35:07.606Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:05:59.781Z","14.0.0-canary.468392606.0":"2021-11-11T19:40:03.724Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:50:45.687Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:56:42.020Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:58:23.661Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:24:34.663Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:36:22.561Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:29:43.623Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:13:54.919Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:40:11.219Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:49:58.966Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:16:24.270Z","14.0.0-canary.554c71829.0":"2021-11-16T16:19:17.165Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:24:08.235Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T18:59:13.453Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:24:58.730Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:39:14.504Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:35:07.507Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:04:30.167Z","14.0.0-canary.93134d453.0":"2021-11-23T15:39:03.951Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:32:15.157Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:37:24.137Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:50:38.544Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:56:03.064Z","14.0.0-canary.17a072535.0":"2021-12-02T18:05:15.357Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:44:24.081Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:06:27.018Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:25:21.592Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:29:28.230Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:55:04.039Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:39:49.183Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:12:57.967Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:09:42.410Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:32:41.356Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:45:50.421Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:14:14.208Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:01:27.359Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:54:13.893Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:33:02.708Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:49:36.603Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:42:20.181Z","14.0.0-canary.390220e42.0":"2022-01-17T16:46:11.548Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:52:46.628Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:17:29.951Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:54:24.149Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:03:22.323Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:31:54.514Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:13:12.639Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:37:04.975Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:41:26.227Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:49:54.578Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:22:44.255Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:57:12.348Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:46:38.115Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:53:42.756Z","14.0.0-canary.96ea061c1.0":"2022-02-09T18:59:27.451Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:06:31.841Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:29:29.634Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:49:00.085Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:16:18.735Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:04:05.659Z","14.0.0-canary.868793776.0":"2022-02-22T19:35:19.807Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:46:08.420Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:33:07.810Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:27:24.688Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:00:27.178Z","14.0.0-canary.16c166154.0":"2022-03-08T23:22:20.660Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:28:30.972Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:29:35.020Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:50:02.860Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:03:34.127Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:17:50.452Z","14.0.0-canary.32b391398.0":"2022-03-17T17:59:10.248Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:39:12.756Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:51:58.495Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:44:02.190Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:50:42.307Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:18:32.327Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:39:55.097Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:04:33.179Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:34:53.374Z","14.0.0-canary.344d52823.0":"2022-03-29T18:43:14.509Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:32:53.773Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:14:11.694Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:24:09.455Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:23:22.324Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:05:38.129Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:47:38.514Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:11:12.896Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:01:50.616Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:45:20.223Z","14.0.0":"2022-04-28T16:55:51.596Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:56:57.351Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:14:37.115Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:31:27.664Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:56:00.119Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:58:19.937Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:25:00.928Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:40:17.784Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:18:26.064Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:44:12.361Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:26:48.785Z","15.0.0-canary.05930a453.0":"2022-05-13T18:47:25.085Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:01:00.878Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:32:39.225Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:02:44.519Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:22:00.295Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:57:40.706Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:39:52.964Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:20:55.371Z","15.0.0-canary.df47894db.0":"2022-06-13T17:08:37.246Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:29:50.940Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:57:28.803Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:22:37.060Z","15.0.0-canary.764de225d.0":"2022-06-29T16:27:09.461Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:28:28.587Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:55:04.660Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:54:29.124Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:51:09.712Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:31:07.500Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:02:44.186Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:31:29.644Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:38:43.148Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:39:21.074Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:37:20.171Z","15.0.0-canary.88db01990.0":"2022-07-12T11:40:08.166Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:29:02.133Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:35:02.806Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:05:21.659Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:08:15.944Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:49:29.252Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:43:18.054Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:01:09.735Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:05:12.140Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:24:16.609Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:46:49.085Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:19:54.084Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:29:38.839Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:21:58.025Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:40:11.954Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:57:17.003Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:09:22.723Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:04:49.758Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:45:42.283Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:13:39.124Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:40:49.084Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:20:50.777Z","15.0.0-canary.10196647d.0":"2022-08-03T21:53:58.272Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:43:02.623Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:20:35.983Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:46:02.507Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:01:24.741Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:05:46.257Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:44:50.992Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:21:05.608Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:18:23.095Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:19:54.881Z","15.0.0-canary.4299717da.0":"2022-09-07T16:15:53.863Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:19:05.997Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:04:03.141Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:03:02.921Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:39:18.531Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:54:57.086Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:17:48.552Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:20:13.951Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:36:03.737Z","15.0.0-canary.9f17ff2cb.0":"2022-09-21T18:08:21.006Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:24:31.557Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:47:49.321Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:08:14.807Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:56:29.961Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:57:48.100Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:44:57.187Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:31:18.379Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:57:24.389Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:56:08.737Z","15.0.0-canary.db414b864.0":"2022-09-28T14:52:46.280Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:06:57.647Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:55:48.760Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:31:14.136Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:13:52.369Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:21:08.749Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:18:20.704Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:19:20.983Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:03:47.576Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:14:53.960Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:50:58.232Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:38:03.560Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:55:20.352Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:06:15.745Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:08:17.460Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:38:34.331Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:49:31.633Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:02:49.865Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:59:02.416Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:21:38.189Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:42:00.252Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:51:40.357Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:14:19.796Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:51:58.832Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:18:22.929Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:56:44.951Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:22:59.309Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:57:31.230Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:40:51.669Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:42:46.555Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:23:48.725Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:43:08.443Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:13:47.918Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:17:35.762Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:37:35.036Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:12:18.964Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:57:07.935Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:06:12.990Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:19:34.961Z","15.0.0-canary.fc539db34.0":"2022-10-24T18:59:33.933Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:45:27.468Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:31:00.282Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:15:41.664Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:32:53.189Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:49:53.487Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:56:51.377Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:37:18.646Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:11:09.213Z","15.0.0-canary.909b48215.0":"2022-11-03T04:08:20.087Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:19:36.726Z","15.0.0-canary.da95e2a05.0":"2022-11-04T16:59:30.310Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:57:28.279Z","15.0.0-canary.215506426.0":"2022-11-05T01:06:24.861Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:04:30.261Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:25:00.004Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:13:49.857Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:28:13.143Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:56:59.045Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:18:23.342Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:35:59.080Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:53:41.145Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:03:17.101Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:06:30.447Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:36:16.877Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:36:55.832Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:12:16.297Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:45:41.148Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:59:00.154Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:27:27.912Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:28:47.462Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:02:35.686Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:30:34.682Z","15.0.0-canary.b01136063.0":"2022-11-16T00:16:18.330Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:13:42.620Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:15:59.418Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:17:59.753Z","15.0.0-canary.3777b03cb.0":"2022-11-16T18:41:54.909Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:56:26.762Z","15.0.0-canary.7c73f6134.0":"2022-11-16T19:59:58.907Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:05:42.529Z","15.0.0-canary.40b18d043.0":"2022-11-16T22:59:13.552Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:09:21.272Z","15.0.0-canary.bb7751002.0":"2022-11-17T00:00:34.583Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:01:26.510Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:55:25.666Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:05:06.793Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:21:35.875Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:16:44.747Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:01:15.044Z","15.0.0-canary.d58410453.0":"2022-11-18T19:25:34.136Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:45:40.442Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:54:17.487Z","15.0.0-canary.96f472604.0":"2022-11-21T12:53:11.061Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:02:54.258Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:54:29.912Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:01:05.230Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:31:22.423Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:16:53.438Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:39:53.876Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:57:15.847Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:16:14.856Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:14:13.315Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:47:53.655Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:12:04.346Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:34:08.499Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:49:11.768Z","15.0.0-canary.65c411674.0":"2022-11-29T17:38:59.844Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:14:44.321Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:07:59.708Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:29:45.156Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:54:55.937Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:24:39.045Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:02:06.507Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:01:32.811Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:07:24.644Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:27:05.581Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:43:08.985Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:25:57.167Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:52:25.977Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:03:31.183Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:41:49.389Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:44:53.990Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:31:19.763Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:46:31.840Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:02:45.184Z","15.0.0-canary.817002c29.0":"2022-12-13T21:54:39.373Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:29:21.459Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:19:21.904Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:45:27.279Z","15.0.0-canary.34767110.0":"2022-12-14T17:20:54.844Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:26:08.381Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:09:08.992Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:27:40.898Z","15.0.0-canary.604264203.0":"2022-12-21T21:41:22.170Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:25:40.838Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:12:50.664Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:05:41.790Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:04:32.045Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:52:13.779Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:02:48.137Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:41:32.197Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:06:28.368Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:48:16.578Z","15.0.0-canary.af490a848.0":"2023-01-03T15:58:04.064Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:39:22.538Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:13:44.147Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:32:51.101Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:18:19.604Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:37:36.952Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:36:18.811Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:03:21.697Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:09:57.280Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:22:05.025Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:16:40.733Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:43:34.720Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:24:31.992Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:28:38.722Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:12:09.800Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:19:08.126Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:18:01.832Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:12:49.233Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:54:49.753Z","15.0.0-canary.202823f54.0":"2023-01-11T21:36:21.407Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:56:16.567Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:36:51.828Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:25:09.227Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:49:53.767Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:39:46.146Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:30:20.759Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:35:12.045Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:27:23.243Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:44:06.696Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:30:40.883Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:44:41.885Z","15.0.0-canary.15b221540.0":"2023-02-01T17:53:08.167Z","15.0.0-canary.eeebb8bba.0":"2023-02-01T18:22:45.521Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:58:58.283Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:34:44.944Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:38:52.722Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:09:28.989Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:15:03.242Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:24:15.093Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:10:05.061Z","15.0.0-canary.de38de758.0":"2023-02-09T15:42:55.965Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:03:36.940Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:50:21.883Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:58:18.566Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:34:40.973Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:19:59.080Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:41:57.191Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:36:19.562Z","15.0.0-canary.f32339937.0":"2023-03-06T15:16:05.288Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:27:58.344Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:42:19.829Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:43:26.914Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:26:52.378Z","15.0.0-canary.274610c77.0":"2023-03-09T14:59:12.483Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:53:09.267Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:18:44.884Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:45:29.483Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:47:45.811Z","15.0.0-canary.de5224633.0":"2023-03-09T23:56:13.262Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:08:22.895Z","15.0.0-canary.23073a303.0":"2023-03-10T14:15:26.887Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:47:53.726Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:48:29.426Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:25:28.009Z","15.0.0-canary.82554d770.0":"2023-03-11T01:37:42.848Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:39:19.610Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:44:41.180Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:48:01.523Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:03:17.264Z","15.0.0-canary.112715df5.0":"2023-03-13T18:39:42.218Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:31:57.210Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:39:29.648Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:43:54.154Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:53:07.448Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:16:54.017Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:47:48.841Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:17:19.443Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:20:37.857Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:24:29.190Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:27:10.614Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:27:51.616Z","15.0.0-canary.87809c710.0":"2023-03-14T18:43:53.122Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:48:13.099Z","15.0.0-canary.419b23cc6.0":"2023-03-14T18:59:14.579Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:13:51.673Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:11:43.111Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:41:31.697Z","15.0.0-canary.39e473690.0":"2023-03-21T17:51:55.580Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:58:53.025Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:50:32.872Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:35:07.902Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:49:16.977Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:41:34.006Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:08:19.058Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:54:12.920Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:55:51.623Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:30:45.878Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:04:46.656Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:42:55.666Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:38:39.513Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:40:22.654Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:01:08.262Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:51:22.194Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:22:00.209Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:22:03.936Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:31:49.374Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:34:03.122Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:42:15.390Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:09:50.819Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:56:48.397Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:26:42.571Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:39:40.782Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:23:33.737Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:30:54.976Z","15.0.0-canary.d3c3fbaa3.0":"2023-05-12T18:01:24.192Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T02:00:26.335Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:54:26.300Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:26:14.705Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:43:07.152Z","15.0.0-canary.446734f27.0":"2023-05-30T21:48:39.746Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:18:51.338Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:14:25.664Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:18:43.739Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:06:29.397Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:38:40.933Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:04:15.468Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:57:41.928Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:17:13.161Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:24:11.203Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:14:19.455Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:26:17.689Z","15.0.0-canary.83355c322.0":"2023-07-10T15:06:10.008Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:21:33.306Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:47:50.365Z","15.0.0-canary.02702296e.0":"2023-08-25T12:05:25.159Z","15.0.0-canary.872b65832.0":"2023-08-30T12:13:49.053Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:07:16.390Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:40:14.090Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:05:34.645Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:45:39.904Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:17:26.171Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:12:23.103Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:46:30.856Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:15:30.733Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:06:58.720Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:23:36.101Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:44:47.166Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:37:10.780Z","15.0.0-canary.127a44b28.0":"2023-10-12T20:00:56.505Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:52:20.537Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:09:43.045Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:58:48.235Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:13:13.568Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:18:44.520Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:09:11.390Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:19:36.283Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:08:06.519Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:17:40.612Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:15:04.293Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:13:41.311Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:06:14.236Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:41:06.046Z","15.0.0-canary.311f29a60.0":"2024-04-23T18:00:08.773Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:48:59.731Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:03:03.529Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:13:15.300Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:55:36.428Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:56:49.610Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:11:57.480Z"},"maintainers":[{"name":"material-admin","email":"aprigogin+npm@google.com"},{"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":"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":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-form-field"},"keywords":["material components","material design","form"],"license":"MIT","homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"readme":"","readmeFilename":""}